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

package/cjs/MenuButton/components/items/ButtonItem.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ButtonItem = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var DropdownMenu = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+var _useMenuItemProps = require("../../useMenuItemProps");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3;
+var _excluded = ["children", "variant", "startIcon"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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) { (0, _defineProperty2["default"])(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; }
+var ButtonItem = exports.ButtonItem = function ButtonItem(props) {
+  var itemProps = (0, _useMenuItemProps.useMenuItemProps)(props);
+  var _props$itemProps = _objectSpread(_objectSpread({}, props), itemProps),
+    children = _props$itemProps.children,
+    variant = _props$itemProps.variant,
+    StartIcon = _props$itemProps.startIcon,
+    mergedProps = (0, _objectWithoutProperties2["default"])(_props$itemProps, _excluded);
+  var showDestructiveVariant = !props.disabled && variant === "destructive";
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenu.Item, {
+    asChild: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", _objectSpread(_objectSpread({}, mergedProps), {}, {
+      className: (0, _clsx["default"])(mergedProps.className, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full"])))),
+      children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 shrink-0 ", ""])), showDestructiveVariant ? "text-red-700" : "text-inherit"),
+        width: "1rem",
+        height: "1rem"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full truncate ", ""])), showDestructiveVariant && "text-red-700"),
+        children: children
+      })]
+    }))
+  });
+};
+var _default = exports["default"] = ButtonItem;

package/cjs/MenuButton/components/items/LinkItem.d.ts

@@ -0,0 +1,10 @@
+import type { IconComponentType } from "Icons";
+import type { FC } from "react";
+import type { BaseItemProps } from "../../useMenuItemProps";
+export declare type LinkItemProps = BaseItemProps & {
+    href: string;
+    /** Left aligned icon */
+    startIcon?: IconComponentType;
+};
+export declare const LinkItem: FC<LinkItemProps>;
+export default LinkItem;

package/cjs/MenuButton/components/items/LinkItem.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.LinkItem = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var DropdownMenu = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _reactFeather = require("react-feather");
+var _Satellite = require("../../../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+var _parseUrl = _interopRequireDefault(require("../../../utils/parseUrl"));
+var _useMenuItemProps = require("../../useMenuItemProps");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _excluded = ["startIcon", "className", "children", "onClick"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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) { (0, _defineProperty2["default"])(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; }
+var LinkItem = exports.LinkItem = function LinkItem(props) {
+  var _useSatelliteContext = (0, _Satellite.useSatelliteContext)(),
+    router = _useSatelliteContext.router;
+  var itemProps = (0, _useMenuItemProps.useMenuItemProps)(props);
+  var _props$itemProps = _objectSpread(_objectSpread({}, props), itemProps),
+    StartIcon = _props$itemProps.startIcon,
+    className = _props$itemProps.className,
+    children = _props$itemProps.children,
+    onClick = _props$itemProps.onClick,
+    mergedProps = (0, _objectWithoutProperties2["default"])(_props$itemProps, _excluded);
+  var href = router.transformHref(props.href || "");
+  var parsedLocation = (0, _react.useMemo)(function () {
+    return (0, _parseUrl["default"])(href);
+  }, [href]);
+  var isExternalLink = router.isExternalLocation(parsedLocation);
+  var onItemClick = function onItemClick(event) {
+    onClick === null || onClick === void 0 || onClick(event);
+    event.preventDefault();
+    if (router.shouldOpenInNewTab(parsedLocation)) {
+      window.open(href, "_blank");
+    } else {
+      router.push({
+        url: href
+      });
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownMenu.Item, _objectSpread(_objectSpread({}, mergedProps), {}, {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), className),
+    onClick: onItemClick,
+    children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 shrink-0 text-grey-500"]))),
+      width: "1rem",
+      height: "1rem"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full truncate"]))),
+      children: children
+    }), isExternalLink && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ExternalLink, {
+      className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["ml-1 shrink-0"]))),
+      size: "1em"
+    })]
+  }));
+};
+var _default = exports["default"] = LinkItem;

package/cjs/MenuButton/components/items/RadioItem.d.ts

@@ -0,0 +1,6 @@
+import type { DropdownMenuRadioItemProps } from "@radix-ui/react-dropdown-menu";
+import type { FC } from "react";
+import type { BaseItemProps } from "../../useMenuItemProps";
+export declare type RadioItemProps = Pick<DropdownMenuRadioItemProps, "value" | "defaultChecked"> & BaseItemProps<HTMLDivElement>;
+export declare const RadioItem: FC<RadioItemProps>;
+export default RadioItem;

package/cjs/MenuButton/components/items/RadioItem.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.RadioItem = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var DropdownMenu = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _reactFeather = require("react-feather");
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+var _useMenuItemProps = _interopRequireDefault(require("../../useMenuItemProps"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _excluded = ["children", "className"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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) { (0, _defineProperty2["default"])(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; }
+var RadioItem = exports.RadioItem = function RadioItem(props) {
+  var itemProps = (0, _useMenuItemProps["default"])(props);
+  var _props$itemProps = _objectSpread(_objectSpread({}, props), itemProps),
+    children = _props$itemProps.children,
+    className = _props$itemProps.className,
+    radioProps = (0, _objectWithoutProperties2["default"])(_props$itemProps, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenu.RadioItem, _objectSpread(_objectSpread({}, radioProps), {}, {
+    className: (0, _clsx["default"])(className, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["data-[state=checked]:bg-xenon-100"])))),
+    onSelect: function onSelect(e) {
+      return e.preventDefault();
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex-1 flex items-start relative py-2 pr-5 overflow-hidden"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex-1 truncate mr-4"]))),
+        children: children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenu.ItemIndicator, {
+        asChild: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.Check, {
+          className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["absolute right-0 text-accent-600 h-5"])))
+        })
+      })]
+    })
+  }));
+};
+RadioItem.displayName = "RadioItem";
+var _default = exports["default"] = RadioItem;

package/cjs/MenuButton/components/items/ToggleItem.d.ts

@@ -0,0 +1,9 @@
+import type { IconComponentType } from "Icons";
+import type { FC } from "react";
+import type { ToggleProps } from "../../../Toggle";
+export interface ToggleItemProps extends Omit<ToggleProps, "onSelect"> {
+    startIcon?: IconComponentType;
+    onSelect?: (event: Event) => void;
+}
+export declare const ToggleItem: FC<ToggleItemProps>;
+export default ToggleItem;

package/cjs/MenuButton/components/items/ToggleItem.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ToggleItem = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var DropdownMenu = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+var _Toggle = require("../../../Toggle");
+var _useMenuItemProps = _interopRequireDefault(require("../../useMenuItemProps"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _excluded = ["className", "checked", "startIcon", "children", "onSelect"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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) { (0, _defineProperty2["default"])(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; }
+var ToggleItem = exports.ToggleItem = function ToggleItem(props) {
+  var itemProps = (0, _useMenuItemProps["default"])(props);
+  var _props$itemProps = _objectSpread(_objectSpread({}, props), itemProps),
+    className = _props$itemProps.className,
+    checked = _props$itemProps.checked,
+    StartIcon = _props$itemProps.startIcon,
+    children = _props$itemProps.children,
+    _onSelect = _props$itemProps.onSelect,
+    toggleProps = (0, _objectWithoutProperties2["default"])(_props$itemProps, _excluded);
+  var isControlled = typeof checked === "boolean";
+  var _useState = (0, _react.useState)(isControlled ? checked : toggleProps.defaultChecked),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    internalChecked = _useState2[0],
+    setInternalChecked = _useState2[1];
+  var isChecked = isControlled ? checked : internalChecked;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenu.CheckboxItem, {
+    asChild: true,
+    onSelect: function onSelect(event) {
+      // we prevent the default behavior from Radix which consist in closing
+      // the menu when clicking on an item list while we want to keep it open
+      event.preventDefault();
+      _onSelect === null || _onSelect === void 0 || _onSelect(event);
+      if (!isControlled) {
+        setInternalChecked(!internalChecked);
+      }
+    },
+    checked: isChecked,
+    disabled: toggleProps.disabled,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), className),
+      children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 shrink-0 text-grey-500"]))),
+        width: "1rem",
+        height: "1rem"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex-1 truncate mr-4"]))),
+        children: children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, _objectSpread(_objectSpread({
+        decorative: true,
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"])))
+      }, toggleProps), {}, {
+        checked: isChecked
+      }))]
+    })
+  });
+};
+var _default = exports["default"] = ToggleItem;

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

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

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ButtonItem = require("./ButtonItem");
+Object.keys(_ButtonItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ButtonItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ButtonItem[key];
+    }
+  });
+});
+var _LinkItem = require("./LinkItem");
+Object.keys(_LinkItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _LinkItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _LinkItem[key];
+    }
+  });
+});
+var _RadioItem = require("./RadioItem");
+Object.keys(_RadioItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RadioItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _RadioItem[key];
+    }
+  });
+});
+var _ToggleItem = require("./ToggleItem");
+Object.keys(_ToggleItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ToggleItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ToggleItem[key];
+    }
+  });
+});

package/cjs/MenuButton/index.d.ts

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

package/cjs/MenuButton/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ExperimentalMenuButton", {
+  enumerable: true,
+  get: function get() {
+    return _MenuButton["default"];
+  }
+});
+var _MenuButton = _interopRequireDefault(require("./MenuButton"));

package/cjs/MenuButton/useMenuItemProps.d.ts

@@ -0,0 +1,11 @@
+import type { EventHandler, MouseEvent } from "react";
+export interface BaseItemProps<T extends HTMLElement = HTMLElement> {
+    className?: string;
+    disabled?: boolean;
+    onClick?: EventHandler<MouseEvent<T>>;
+}
+export declare const useMenuItemProps: <T extends HTMLElement = HTMLElement>(props: BaseItemProps<T>) => {
+    className: string;
+    onClick: ((event: MouseEvent<T, globalThis.MouseEvent>) => void) | undefined;
+};
+export default useMenuItemProps;

package/cjs/MenuButton/useMenuItemProps.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMenuItemProps = exports["default"] = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _templateObject;
+var useMenuItemProps = exports.useMenuItemProps = function useMenuItemProps(props) {
+  var className = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n      flex items-center\n      min-h-10 px-4 text-left\n      focus:no-underline hover:no-underline\n      ", "\n    "])), props.disabled ? "text-grey-300 cursor-not-allowed outline-none" : "text-inherit hover:bg-grey-100 focus:bg-grey-100 focus:outline-none cursor-pointer"), props.className);
+  return {
+    className: className,
+    onClick: props.onClick
+  };
+};
+var _default = exports["default"] = useMenuItemProps;

package/cjs/Sidebar/SidebarButtonLink.d.ts

@@ -1,5 +1,5 @@
 import type { MouseEventHandler, ReactNode, VFC } from "react";
-import type { IconComponentType } from "../types";
+import type { IconComponentType } from "../Icons";
 export declare type SidebarButtonLinkIcon = IconComponentType | {
     active: IconComponentType;
     inactive: IconComponentType;

package/cjs/Sidebar/SidebarLink.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode, VFC } from "react";
-import type { IconComponentType } from "../types";
+import type { IconComponentType } from "../Icons";
 export declare type SidebarLinkProps = {
     icon: IconComponentType;
     href: string;

package/cjs/Sidebar/SidebarLinksGroup/SidebarLinksGroup.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode, VFC } from "react";
-import type { IconComponentType } from "../../types";
+import type { IconComponentType } from "../../Icons";
 import type { SidebarLinksGroupLink } from "./types";
 declare type SidebarLinksGroupBaseProps = {
     id?: string;

package/cjs/Tag/Tag.js

@@ -67,8 +67,8 @@ var Tag = exports.Tag = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
   var contextLocale = (0, _Satellite.useLocale)("tag");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TAG_LOCALE), contextLocale), propsLocale);
   var tagClassName = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["tag"]))), VARIANT_CLASSNAMES[variant], className);
-  var isInsideAutocomplete = (0, _AutoComplete.useIsInsideAutocomplete)();
-  var tabIndexProps = isInsideAutocomplete ? {
+  var isInsideAutoComplete = (0, _AutoComplete.useIsInsideAutoComplete)();
+  var tabIndexProps = isInsideAutoComplete ? {
     tabIndex: -1
   } : {};
   var addable = Boolean(onAdd);

package/cjs/index.d.ts

@@ -23,11 +23,13 @@ export * from "./Field";
 export * from "./Flag";
 export * from "./FlexGrid";
 export * from "./HelpUnderline";
+export * from "./Icons";
 export * from "./Input";
 export * from "./Insert";
 export * from "./KeyboardKey";
 export * from "./Link";
 export * from "./Medallion";
+export * from "./MenuButton";
 export * from "./Modal";
 export * from "./Pagination";
 export * from "./Popover";

package/cjs/index.js

@@ -290,6 +290,18 @@ Object.keys(_HelpUnderline).forEach(function (key) {
     }
   });
 });
+var _Icons = require("./Icons");
+Object.keys(_Icons).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Icons[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Icons[key];
+    }
+  });
+});
 var _Input = require("./Input");
 Object.keys(_Input).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -350,6 +362,18 @@ Object.keys(_Medallion).forEach(function (key) {
     }
   });
 });
+var _MenuButton = require("./MenuButton");
+Object.keys(_MenuButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _MenuButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _MenuButton[key];
+    }
+  });
+});
 var _Modal = require("./Modal");
 Object.keys(_Modal).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/styles/helpers/icons.js

@@ -1,10 +1,10 @@
 "use strict";
 
-var Icon = require("react-feather");
 var _require = require("react"),
   createElement = _require.createElement;
 var _require2 = require("react-dom/server"),
   renderToStaticMarkup = _require2.renderToStaticMarkup;
+var Icon = require("react-feather");
 
 /**
  * Render inline SVG for a Feather icon

package/cjs/types.d.ts

@@ -1,6 +1,3 @@
-import type { ComponentClass, SVGAttributes, VoidFunctionComponent } from "react";
-export declare type IconProps = SVGAttributes<SVGElement>;
-export declare type IconComponentType = VoidFunctionComponent<IconProps> | ComponentClass<IconProps>;
 export declare type ColorVariant = "accent" | "grey" | "green" | "blue" | "orange" | "red";
 /**
  * Ensures at least one type is required

package/cjs/utils/sortObjectAlphabetically.d.ts

@@ -0,0 +1 @@
+export declare function sortObjectAlphabetically(obj: Record<string, any>): Record<string, any>;

package/cjs/utils/sortObjectAlphabetically.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sortObjectAlphabetically = sortObjectAlphabetically;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+function sortObjectAlphabetically(obj) {
+  var sortedEntries = Object.entries(obj).sort(function (_ref, _ref2) {
+    var _ref3 = (0, _slicedToArray2["default"])(_ref, 1),
+      keyA = _ref3[0];
+    var _ref4 = (0, _slicedToArray2["default"])(_ref2, 1),
+      keyB = _ref4[0];
+    return keyA.localeCompare(keyB);
+  });
+  return Object.fromEntries(sortedEntries);
+}

package/esm/AutoComplete/AutoComplete.js

@@ -20,7 +20,7 @@ import ScrollIndicator from "../ScrollIndicator";
 import stl from "../styles/helpers/satellitePrefixer";
 import Tag from "../Tag";
 import uniqBy from "../utils/uniqBy";
-import { AutocompleteProvider } from "./components/AutocompleteContext";
+import { AutoCompleteProvider } from "./components/AutoCompleteContext";
 import AutoCompleteEmptyState from "./components/AutoCompleteEmptyState";
 import { DefaultOptionItem } from "./components/DefaultOptionItem";
 import { DEFAULT_AUTOCOMPLETE_LOCALE, defaultCreateFromInputValue, filter, optionToString } from "./utils";
@@ -293,20 +293,15 @@ export var AutoComplete = function AutoComplete(_ref) {
   var shouldShowDefaultEmptyState = emptyState === undefined && !!inputValue.length;
   var shouldShowEmptyState = !!emptyState;
   var hideMenu = !combobox.isOpen || items.length === 0 && !shouldShowEmptyState && !shouldShowDefaultEmptyState;
-  var OptionItem = useMemo(function () {
-    return optionItemComponent !== null && optionItemComponent !== void 0 ? optionItemComponent : function (props) {
-      return /*#__PURE__*/_jsx(DefaultOptionItem, _objectSpread(_objectSpread({}, props), {}, {
-        locale: locale
-      }));
-    };
-  }, [optionItemComponent, locale]);
+  var OptionItem = optionItemComponent !== null && optionItemComponent !== void 0 ? optionItemComponent : DefaultOptionItem;
   useEffect(function () {
     updateRef(internalsRef, {
       inputRef: inputRef,
       inputValue: inputValue
     });
   }, [inputRef, internalsRef, inputValue]);
-  return /*#__PURE__*/_jsx(AutocompleteProvider, {
+  return /*#__PURE__*/_jsx(AutoCompleteProvider, {
+    locale: locale,
     children: /*#__PURE__*/_jsxs("div", {
       className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex"]))), className),
       ref: function ref(el) {

package/esm/AutoComplete/components/AutoCompleteContext.d.ts

@@ -0,0 +1,10 @@
+import type { PropsWithChildren, VFC } from "react";
+import type { AutoCompleteLocale } from "../types";
+declare type AutoCompleteContextType = {
+    locale: Required<AutoCompleteLocale>;
+};
+declare type AutoCompleteProviderProps = PropsWithChildren<AutoCompleteContextType>;
+export declare const AutoCompleteProvider: VFC<AutoCompleteProviderProps>;
+export declare const useIsInsideAutoComplete: () => boolean;
+export declare const useAutoCompleteLocale: () => Required<AutoCompleteLocale>;
+export {};

package/esm/AutoComplete/components/AutoCompleteContext.js

@@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+var AutoCompleteContext = /*#__PURE__*/createContext(null);
+export var AutoCompleteProvider = function AutoCompleteProvider(_ref) {
+  var locale = _ref.locale,
+    children = _ref.children;
+  return /*#__PURE__*/_jsx(AutoCompleteContext.Provider, {
+    value: {
+      locale: locale
+    },
+    children: children
+  });
+};
+export var useIsInsideAutoComplete = function useIsInsideAutoComplete() {
+  return !!useContext(AutoCompleteContext);
+};
+export var useAutoCompleteLocale = function useAutoCompleteLocale() {
+  var context = useContext(AutoCompleteContext);
+  if (!context) {
+    throw new Error("useAutoCompleteLocale must be used inside AutoCompleteProvider");
+  }
+  return context.locale;
+};

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

@@ -1,6 +1,6 @@
 import type { ReactNode, VFC } from "react";
+import type { IconComponentType } from "../../Icons";
 import type { MedallionVariant } from "../../Medallion";
-import type { IconComponentType } from "../../types";
 export interface AutoCompleteEmptyStateProps {
     icon?: IconComponentType;
     variant?: MedallionVariant;

package/esm/AutoComplete/components/DefaultOptionItem.js

@@ -1,6 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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 stl from "../../styles/helpers/satellitePrefixer";
+import { useAutoCompleteLocale } from "./AutoCompleteContext";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var metadataSpacer = /*#__PURE__*/_jsx("span", {
@@ -11,12 +15,14 @@ export var DefaultOptionItem = function DefaultOptionItem(_ref) {
   var _locale$optionItemPre;
   var option = _ref.option,
     multiple = _ref.multiple,
-    locale = _ref.locale;
+    localeProp = _ref.locale;
+  var contextLocale = useAutoCompleteLocale();
+  var locale = _objectSpread(_objectSpread({}, contextLocale), localeProp);
   return /*#__PURE__*/_jsxs("div", {
     className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate py-2"]))),
     children: [/*#__PURE__*/_jsx("span", {
       className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["font-semibold text-md text-grey-900"]))),
-      children: option["new"] ? "".concat(locale === null || locale === void 0 || (_locale$optionItemPre = locale.optionItemPrefix) === null || _locale$optionItemPre === void 0 ? void 0 : _locale$optionItemPre.call(locale, multiple), " ").concat(option.label) : option.label
+      children: option["new"] ? "".concat((_locale$optionItemPre = locale.optionItemPrefix) === null || _locale$optionItemPre === void 0 ? void 0 : _locale$optionItemPre.call(locale, multiple), " ").concat(option.label) : option.label
     }), option.metadata && option.metadata.length > 0 && /*#__PURE__*/_jsx("ul", {
       className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex text-grey-600"]))),
       children: option.metadata.map(function (metadata, idx) {