@semcore/dropdown-menu 4.47.0 → 16.0.0-prerelease.11

package/lib/esm/DropdownMenu.mjs

@@ -1,386 +1,478 @@
-import X from "@babel/runtime/helpers/esm/toConsumableArray";
-import Y from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import N from "@babel/runtime/helpers/esm/slicedToArray";
-import W from "@babel/runtime/helpers/esm/extends";
-import g from "@babel/runtime/helpers/esm/objectSpread2";
-import Z from "@babel/runtime/helpers/esm/classCallCheck";
-import ee from "@babel/runtime/helpers/esm/createClass";
-import j from "@babel/runtime/helpers/esm/assertThisInitialized";
-import I from "@babel/runtime/helpers/esm/get";
-import y from "@babel/runtime/helpers/esm/getPrototypeOf";
-import te from "@babel/runtime/helpers/esm/inherits";
-import re from "@babel/runtime/helpers/esm/createSuper";
-import M from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as ne } from "@semcore/utils/lib/core/index";
-import oe, { assignProps as m, sstyled as x } from "@semcore/core";
-import i from "react";
-import ie from "classnames";
-import D, { enhance as ae, selectedIndexContext as q, AbstractDropdown as _e } from "@semcore/dropdown";
-import { useBox as se, Flex as z } from "@semcore/flex-box";
-import E, { hideScrollBarsFromScreenReadersContext as ue } from "@semcore/scroll-area";
-import { useUID as de } from "@semcore/utils/lib/uniqueID";
-import { localizedMessages as le } from "./translations/__intergalactic-dynamic-locales.mjs";
-import { useFocusSource as ge } from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
-import { isAdvanceMode as L } from "@semcore/utils/lib/findComponent";
-import { forkRef as G } from "@semcore/utils/lib/ref";
-import { callAllEventHandlers as A } from "@semcore/utils/lib/assignProps";
-import ce from "@semcore/button";
-import { Text as he } from "@semcore/typography";
-var me = ["className"], pe = (
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, createComponent, assignProps, lastInteraction } from "@semcore/core";
+import React from "react";
+import cn from "classnames";
+import Dropdown, { enhance, selectedIndexContext, AbstractDropdown } from "@semcore/dropdown";
+import { useBox, Flex } from "@semcore/flex-box";
+import ScrollAreaComponent, { hideScrollBarsFromScreenReadersContext } from "@semcore/scroll-area";
+import { useUID } from "@semcore/core/lib/utils/uniqueID";
+import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
+import { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
+import { forkRef } from "@semcore/core/lib/utils/ref";
+import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
+import ButtonComponent from "@semcore/button";
+import { Text } from "@semcore/typography";
+var _excluded = ["className"];
+var style = (
   /*__reshadow_css_start__*/
-  (ne.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    `.___SDropdownMenuList_5h0u9_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;position:relative;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_5h0u9_gg_ .___SShadowHorizontal_5h0u9_gg_:after,.___SDropdownMenuList_5h0u9_gg_ .___SShadowHorizontal_5h0u9_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_5h0u9_gg_ .___SShadowHorizontal_5h0u9_gg_._position_median_5h0u9_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,
-        linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
-      )}.___SDropdownMenuList_5h0u9_gg_ .___SShadowHorizontal_5h0u9_gg_._position_median_5h0u9_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,
-        linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
-      )}.___SDropdownMenuList_5h0u9_gg_ .___SShadowHorizontal_5h0u9_gg_._position_start_5h0u9_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,
-        linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
-      )}.___SDropdownMenuList_5h0u9_gg_ .___SShadowHorizontal_5h0u9_gg_._position_end_5h0u9_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,
-        linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
-      )}.___SDropdownMenuList_5h0u9_gg_ .___SShadowVertical_5h0u9_gg_:after,.___SDropdownMenuList_5h0u9_gg_ .___SShadowVertical_5h0u9_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_5h0u9_gg_ .___SShadowVertical_5h0u9_gg_._position_median_5h0u9_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,
-        linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
-      )}.___SDropdownMenuList_5h0u9_gg_ .___SShadowVertical_5h0u9_gg_._position_median_5h0u9_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,
-        linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
-      )}.___SDropdownMenuList_5h0u9_gg_ .___SShadowVertical_5h0u9_gg_._position_start_5h0u9_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,
-        linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
-      )}.___SDropdownMenuList_5h0u9_gg_ .___SShadowVertical_5h0u9_gg_._position_end_5h0u9_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,
-        linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)
-      )}.___SDropdownMenuItemContainer_5h0u9_gg_.__nesting-trigger_5h0u9_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_5h0u9_gg_,.___SItemContentText_5h0u9_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_5h0u9_gg_:first-child,.___SItemContentText_5h0u9_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_5h0u9_gg_:last-child,.___SItemContentText_5h0u9_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_5h0u9_gg_,.___SDropdownMenuNesting_5h0u9_gg_._size_l_5h0u9_gg_,.___SDropdownMenuNesting_5h0u9_gg_._size_m_5h0u9_gg_{padding:0}.___SDropdownMenuNesting_5h0u9_gg_.__highlighted_5h0u9_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownNestingItem_5h0u9_gg_._size_l_5h0u9_gg_,.___SDropdownNestingItem_5h0u9_gg_._size_m_5h0u9_gg_{padding-right:0}.___SDropdownNestingItem_5h0u9_gg_ .___SDropdownMenuItemContainer_5h0u9_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemContent_5h0u9_gg_:focus{outline:0}.___SItemHint_5h0u9_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}`,
-    "5h0u9_gg_"
+    ".___SDropdownMenuList_g9pft_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;position:relative;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_:after,.___SDropdownMenuList_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_._position_median_g9pft_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,\n        linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_._position_median_g9pft_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,\n        linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_._position_start_g9pft_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,\n        linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_g9pft_gg_ .___SShadowHorizontal_g9pft_gg_._position_end_g9pft_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,\n        linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_g9pft_gg_ .___SShadowVertical_g9pft_gg_:after,.___SDropdownMenuList_g9pft_gg_ .___SShadowVertical_g9pft_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_g9pft_gg_ .___SShadowVertical_g9pft_gg_._position_median_g9pft_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,\n        linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_g9pft_gg_ .___SShadowVertical_g9pft_gg_._position_median_g9pft_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,\n        linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_g9pft_gg_ .___SShadowVertical_g9pft_gg_._position_start_g9pft_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,\n        linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_g9pft_gg_ .___SShadowVertical_g9pft_gg_._position_end_g9pft_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,\n        linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuItemContainer_g9pft_gg_.__nesting-trigger_g9pft_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_g9pft_gg_,.___SItemContentText_g9pft_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_g9pft_gg_:first-child,.___SItemContentText_g9pft_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_g9pft_gg_:last-child,.___SItemContentText_g9pft_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_g9pft_gg_,.___SDropdownMenuNesting_g9pft_gg_._size_l_g9pft_gg_,.___SDropdownMenuNesting_g9pft_gg_._size_m_g9pft_gg_{padding:0}.___SDropdownMenuNesting_g9pft_gg_.__highlighted_g9pft_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownNestingItem_g9pft_gg_._size_l_g9pft_gg_,.___SDropdownNestingItem_g9pft_gg_._size_m_g9pft_gg_{padding-right:0}.___SDropdownNestingItem_g9pft_gg_ .___SDropdownMenuItemContainer_g9pft_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemContent_g9pft_gg_:focus{outline:0}.___SItemHint_g9pft_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}",
+    "g9pft_gg_"
   ), {
-    __SDropdownMenuItemContainer: "___SDropdownMenuItemContainer_5h0u9_gg_",
-    "_nesting-trigger": "__nesting-trigger_5h0u9_gg_",
-    __SDropdownMenuNesting: "___SDropdownMenuNesting_5h0u9_gg_",
-    _size_l: "_size_l_5h0u9_gg_",
-    _size_m: "_size_m_5h0u9_gg_",
-    _highlighted: "__highlighted_5h0u9_gg_",
-    __SDropdownNestingItem: "___SDropdownNestingItem_5h0u9_gg_",
-    __SItemContent: "___SItemContent_5h0u9_gg_",
-    __SItemHint: "___SItemHint_5h0u9_gg_",
-    __SDropdownMenuList: "___SDropdownMenuList_5h0u9_gg_",
-    __SShadowHorizontal: "___SShadowHorizontal_5h0u9_gg_",
-    _position_median: "_position_median_5h0u9_gg_",
-    _position_start: "_position_start_5h0u9_gg_",
-    _position_end: "_position_end_5h0u9_gg_",
-    __SShadowVertical: "___SShadowVertical_5h0u9_gg_",
-    __SDropdownMenuItemAddon: "___SDropdownMenuItemAddon_5h0u9_gg_",
-    __SItemContentText: "___SItemContentText_5h0u9_gg_"
+    "__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_g9pft_gg_",
+    "_nesting-trigger": "__nesting-trigger_g9pft_gg_",
+    "__SDropdownMenuNesting": "___SDropdownMenuNesting_g9pft_gg_",
+    "_size_l": "_size_l_g9pft_gg_",
+    "_size_m": "_size_m_g9pft_gg_",
+    "_highlighted": "__highlighted_g9pft_gg_",
+    "__SDropdownNestingItem": "___SDropdownNestingItem_g9pft_gg_",
+    "__SItemContent": "___SItemContent_g9pft_gg_",
+    "__SItemHint": "___SItemHint_g9pft_gg_",
+    "__SDropdownMenuList": "___SDropdownMenuList_g9pft_gg_",
+    "__SShadowHorizontal": "___SShadowHorizontal_g9pft_gg_",
+    "_position_median": "_position_median_g9pft_gg_",
+    "_position_start": "_position_start_g9pft_gg_",
+    "_position_end": "_position_end_g9pft_gg_",
+    "__SShadowVertical": "___SShadowVertical_g9pft_gg_",
+    "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_g9pft_gg_",
+    "__SItemContentText": "___SItemContentText_g9pft_gg_"
   })
-), U = function(_) {
-  var t = _.children;
-  return /* @__PURE__ */ i.createElement(ue.Provider, {
-    value: !0
-  }, t);
-}, H = /* @__PURE__ */ i.createContext({}), P = /* @__PURE__ */ function(n) {
-  te(t, n);
-  var _ = re(t);
-  function t() {
-    var a;
-    Z(this, t);
-    for (var r = arguments.length, o = new Array(r), e = 0; e < r; e++)
-      o[e] = arguments[e];
-    return a = _.call.apply(_, [this].concat(o)), M(j(a), "actionsRef", /* @__PURE__ */ i.createRef()), M(j(a), "role", "menu"), a;
+);
+var ListBoxContextProvider = function ListBoxContextProvider2(_ref22) {
+  var children = _ref22.children;
+  return /* @__PURE__ */ React.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
+    value: true
+  }, children);
+};
+var menuItemContext = /* @__PURE__ */ React.createContext({});
+var DropdownMenuRoot = /* @__PURE__ */ function(_AbstractDropdown) {
+  _inherits(DropdownMenuRoot2, _AbstractDropdown);
+  var _super = _createSuper(DropdownMenuRoot2);
+  function DropdownMenuRoot2() {
+    var _this;
+    _classCallCheck(this, DropdownMenuRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "actionsRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "role", "menu");
+    return _this;
   }
-  return ee(t, [{
+  _createClass(DropdownMenuRoot2, [{
     key: "uncontrolledProps",
-    value: function() {
-      var r = this;
-      return g(g({}, I(y(t.prototype), "uncontrolledProps", this).call(this)), {}, {
-        visible: [null, function(o) {
-          o === !0 && setTimeout(function() {
-            var e, s, u = (e = r.menuRef.current) === null || e === void 0 ? void 0 : e.querySelectorAll('[role="menuitemcheckbox"], [role="menuitemradio"]'), d = (s = r.menuRef.current) === null || s === void 0 ? void 0 : s.querySelector('[aria-checked="true"]');
-            if (d && u && r.asProps.itemsCount === void 0) {
-              r.scrollToNode(d, !0);
-              for (var h = 0; h < u.length; h++)
-                if (u[h] === d) {
-                  r.handlers.highlightedIndex(h);
-                  break;
+    value: function uncontrolledProps() {
+      var _this2 = this;
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DropdownMenuRoot2.prototype), "uncontrolledProps", this).call(this)), {}, {
+        visible: [null, function(visible) {
+          if (visible === true) {
+            setTimeout(function() {
+              var _this2$menuRef$curren, _this2$menuRef$curren2;
+              var options = (_this2$menuRef$curren = _this2.menuRef.current) === null || _this2$menuRef$curren === void 0 ? void 0 : _this2$menuRef$curren.querySelectorAll('[role="menuitemcheckbox"], [role="menuitemradio"]');
+              var selected = (_this2$menuRef$curren2 = _this2.menuRef.current) === null || _this2$menuRef$curren2 === void 0 ? void 0 : _this2$menuRef$curren2.querySelector('[aria-checked="true"]');
+              if (selected && options && _this2.asProps.itemsCount === void 0) {
+                _this2.scrollToNode(selected, true);
+                for (var i = 0; i < options.length; i++) {
+                  if (options[i] === selected) {
+                    _this2.handlers.highlightedIndex(i);
+                    break;
+                  }
                 }
-            }
-          }, 30);
+              }
+            }, 30);
+          }
         }]
       });
     }
   }, {
     key: "itemRef",
-    value: function(r, o, e) {
-      I(y(t.prototype), "itemRef", this).call(this, r, o, e), e === document.activeElement && I(y(t.prototype), "scrollToNode", this).call(this, e);
+    value: function itemRef(props, index, node) {
+      _get(_getPrototypeOf(DropdownMenuRoot2.prototype), "itemRef", this).call(this, props, index, node);
+      if (node === document.activeElement) {
+        _get(_getPrototypeOf(DropdownMenuRoot2.prototype), "scrollToNode", this).call(this, node);
+      }
     }
   }, {
     key: "getTriggerProps",
-    value: function() {
-      var r = this.asProps, o = r.Children, e = r.uid, s = r.visible, u = L(o, [v.Menu.displayName]), d = u ? "igc-".concat(e, "-list") : "igc-".concat(e, "-popper");
-      return g(g({}, I(y(t.prototype), "getTriggerProps", this).call(this)), {}, {
-        onKeyDown: A(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleKeyDownForMenu("trigger")),
-        "aria-controls": s ? d : void 0,
-        "aria-haspopup": u ? "true" : "dialog"
+    value: function getTriggerProps() {
+      var _this$asProps = this.asProps, Children = _this$asProps.Children, uid = _this$asProps.uid, visible = _this$asProps.visible;
+      var hasMenu = isAdvanceMode(Children, [DropdownMenu.Menu.displayName]);
+      var ariaControls = hasMenu ? "igc-".concat(uid, "-list") : "igc-".concat(uid, "-popper");
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DropdownMenuRoot2.prototype), "getTriggerProps", this).call(this)), {}, {
+        onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleKeyDownForMenu("trigger")),
+        "aria-controls": visible ? ariaControls : void 0,
+        "aria-haspopup": hasMenu ? "true" : "dialog"
       });
     }
   }, {
     key: "getListProps",
-    value: function() {
-      return g(g({}, I(y(t.prototype), "getListProps", this).call(this)), {}, {
-        onKeyDown: A(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu("list"), this.handleArrowKeyDown.bind(this))
+    value: function getListProps() {
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DropdownMenuRoot2.prototype), "getListProps", this).call(this)), {}, {
+        onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu("list"), this.handleArrowKeyDown.bind(this))
       });
     }
   }, {
     key: "getPopperProps",
-    value: function() {
-      return g(g({}, I(y(t.prototype), "getPopperProps", this).call(this)), {}, {
-        onKeyDown: A(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this))
+    value: function getPopperProps() {
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DropdownMenuRoot2.prototype), "getPopperProps", this).call(this)), {}, {
+        onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this))
       });
     }
   }, {
     key: "getActionsProps",
-    value: function() {
-      return g(g({}, this.getListProps()), {}, {
+    value: function getActionsProps() {
+      return _objectSpread(_objectSpread({}, this.getListProps()), {}, {
         ref: this.actionsRef,
-        onKeyDown: A(this.handlePreventTabOnActions.bind(this), this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu("list"), this.handleArrowKeyDown.bind(this))
+        onKeyDown: callAllEventHandlers(this.handlePreventTabOnActions.bind(this), this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu("list"), this.handleArrowKeyDown.bind(this))
       });
     }
   }, {
     key: "getItemProps",
-    value: function(r, o) {
-      var e, s = this, u = this.asProps, d = u.highlightedIndex, h = u.visible, l = (e = r.index) !== null && e !== void 0 ? e : o, p = l === d, c = g(g({}, I(y(t.prototype), "getItemProps", this).call(this, r, l)), {}, {
-        tabIndex: p && h ? 0 : -1,
-        ref: function(w) {
-          return s.itemRef(r, l, w);
+    value: function getItemProps(props, index) {
+      var _props$index, _this3 = this;
+      var _this$asProps2 = this.asProps, highlightedIndex = _this$asProps2.highlightedIndex, visible = _this$asProps2.visible;
+      var realIndex = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : index;
+      var isHighlighted = realIndex === highlightedIndex;
+      var itemProps = _objectSpread(_objectSpread({}, _get(_getPrototypeOf(DropdownMenuRoot2.prototype), "getItemProps", this).call(this, props, realIndex)), {}, {
+        tabIndex: isHighlighted && visible ? 0 : -1,
+        ref: function ref(node) {
+          return _this3.itemRef(props, realIndex, node);
         },
         actionsRef: this.actionsRef
       });
-      if (r.tag === ce) {
-        var f, b, S;
-        c.use = (f = r.use) !== null && f !== void 0 ? f : "tertiary", c.theme = (b = r.theme) !== null && b !== void 0 ? b : "muted", c.size = (S = r.size) !== null && S !== void 0 ? S : "s";
+      if (props.tag === ButtonComponent) {
+        var _props$use, _props$theme, _props$size;
+        itemProps.use = (_props$use = props.use) !== null && _props$use !== void 0 ? _props$use : "tertiary";
+        itemProps.theme = (_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : "muted";
+        itemProps.size = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : "s";
+        itemProps.innerOutline = false;
       }
-      return r.selected && (c["aria-checked"] = !0), I(y(t.prototype), "childRole", this) === "menuitemradio" && (c.onClick = function() {
-        s.handlers.visible(!1);
-      }), c;
+      if (props.selected) {
+        itemProps["aria-checked"] = true;
+      }
+      if (_get(_getPrototypeOf(DropdownMenuRoot2.prototype), "childRole", this) === "menuitemradio") {
+        itemProps.onClick = function() {
+          _this3.handlers.visible(false);
+        };
+      }
+      return itemProps;
     }
   }, {
     key: "handleKeyDownForMenu",
-    value: function(r) {
-      var o = this;
+    value: function handleKeyDownForMenu(place) {
+      var _this4 = this;
       return function(e) {
-        var s, u, d = o.asProps, h = d.visible, l = d.placement, p = d.inlineActions;
-        if (r === "list" && !((s = o.menuRef.current) !== null && s !== void 0 && s.contains(e.target)) && !p)
-          return e.stopPropagation(), !1;
-        var c = e.key === "ArrowRight" && (l == null ? void 0 : l.startsWith("right")) || e.key === "ArrowLeft" && (l == null ? void 0 : l.startsWith("left")), f = e.key === "ArrowLeft" && (l == null ? void 0 : l.startsWith("right")) || e.key === "ArrowRight" && (l == null ? void 0 : l.startsWith("left")) || e.key === "Escape", b = (u = e.target.getAttribute("role")) === null || u === void 0 ? void 0 : u.startsWith(I(y(t.prototype), "childRole", o));
-        if (r === "trigger" && (!h || p) && c && b)
-          return o.handlers.visible(!0), o.handlers.highlightedIndex(0), setTimeout(function() {
-            var C, w = o.asProps.highlightedIndex;
-            (C = o.itemRefs[w]) === null || C === void 0 || C.focus();
-          }, 0), e.preventDefault(), e.stopPropagation(), !1;
-        if (r === "list" && h && f && b && (!p || p && (e.key === "Escape" || o.asProps.highlightedIndex === 0))) {
-          var S;
-          return o.handlers.visible(!1), (S = o.triggerRef.current) === null || S === void 0 || S.focus(), e.preventDefault(), e.stopPropagation(), !1;
+        var _this4$menuRef$curren, _e$target$getAttribut;
+        var _this4$asProps = _this4.asProps, visible = _this4$asProps.visible, placement = _this4$asProps.placement, inlineActions = _this4$asProps.inlineActions;
+        if (place === "list" && !((_this4$menuRef$curren = _this4.menuRef.current) !== null && _this4$menuRef$curren !== void 0 && _this4$menuRef$curren.contains(e.target)) && !inlineActions) {
+          e.stopPropagation();
+          return false;
+        }
+        var show = e.key === "ArrowRight" && (placement === null || placement === void 0 ? void 0 : placement.startsWith("right")) || e.key === "ArrowLeft" && (placement === null || placement === void 0 ? void 0 : placement.startsWith("left"));
+        var hide = e.key === "ArrowLeft" && (placement === null || placement === void 0 ? void 0 : placement.startsWith("right")) || e.key === "ArrowRight" && (placement === null || placement === void 0 ? void 0 : placement.startsWith("left")) || e.key === "Escape";
+        var isMenuItem = (_e$target$getAttribut = e.target.getAttribute("role")) === null || _e$target$getAttribut === void 0 ? void 0 : _e$target$getAttribut.startsWith(_get(_getPrototypeOf(DropdownMenuRoot2.prototype), "childRole", _this4));
+        if (place === "trigger" && (!visible || inlineActions) && show && isMenuItem) {
+          _this4.handlers.visible(true);
+          _this4.handlers.highlightedIndex(0);
+          setTimeout(function() {
+            var _this4$itemRefs$highl;
+            var highlightedIndex = _this4.asProps.highlightedIndex;
+            (_this4$itemRefs$highl = _this4.itemRefs[highlightedIndex]) === null || _this4$itemRefs$highl === void 0 ? void 0 : _this4$itemRefs$highl.focus();
+          }, 0);
+          e.preventDefault();
+          e.stopPropagation();
+          return false;
+        }
+        if (place === "list" && visible && hide && isMenuItem) {
+          if (!inlineActions || inlineActions && (e.key === "Escape" || _this4.asProps.highlightedIndex === 0)) {
+            var _this4$triggerRef$cur;
+            _this4.handlers.visible(false);
+            (_this4$triggerRef$cur = _this4.triggerRef.current) === null || _this4$triggerRef$cur === void 0 ? void 0 : _this4$triggerRef$cur.focus();
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+          }
         }
       };
     }
   }, {
     key: "handlePreventTabOnActions",
-    value: function(r) {
-      if (r.key === "Tab")
-        return r.stopPropagation(), r.preventDefault(), !1;
+    value: function handlePreventTabOnActions(e) {
+      if (e.key === "Tab") {
+        e.stopPropagation();
+        e.preventDefault();
+        return false;
+      }
     }
   }, {
     key: "render",
-    value: function() {
-      var r = this.asProps, o = this.asProps, e = o.Children, s = o.selectedIndex, u = o.interaction, d = o.timeout;
-      return this.itemProps = [], /* @__PURE__ */ i.createElement(q.Provider, {
-        value: s
-      }, /* @__PURE__ */ i.createElement(D, m({
-        timeout: d || (u === "hover" ? [0, 100] : void 0)
-      }, r), /* @__PURE__ */ i.createElement(e, null)));
+    value: function render() {
+      var _ref = this.asProps;
+      var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, selectedIndex = _this$asProps3.selectedIndex, interaction = _this$asProps3.interaction, timeout = _this$asProps3.timeout;
+      this.itemProps = [];
+      return /* @__PURE__ */ React.createElement(selectedIndexContext.Provider, {
+        value: selectedIndex
+      }, /* @__PURE__ */ React.createElement(Dropdown, assignProps({
+        "timeout": timeout || (interaction === "hover" ? [0, 100] : void 0)
+      }, _ref), /* @__PURE__ */ React.createElement(Children, null)));
     }
-  }]), t;
-}(_e);
-M(P, "displayName", "DropdownMenu");
-M(P, "style", pe);
-M(P, "enhance", Object.values(ae));
-M(P, "defaultProps", {
+  }]);
+  return DropdownMenuRoot2;
+}(AbstractDropdown);
+_defineProperty(DropdownMenuRoot, "displayName", "DropdownMenu");
+_defineProperty(DropdownMenuRoot, "style", style);
+_defineProperty(DropdownMenuRoot, "enhance", Object.values(enhance));
+_defineProperty(DropdownMenuRoot, "defaultProps", {
   size: "m",
-  defaultVisible: !1,
+  defaultVisible: false,
   defaultHighlightedIndex: 0,
   defaultSelectedIndex: 0,
-  i18n: le,
+  i18n: localizedMessages,
   locale: "en",
   interaction: "click",
-  inlineActions: !1,
+  inlineActions: false,
   placement: "bottom-start",
   timeout: 0
 });
-M(P, "nestedMenuInteraction", {
+_defineProperty(DropdownMenuRoot, "nestedMenuInteraction", {
   trigger: [["onClick", "onMouseEnter"], ["onClick", "onMouseLeave"]],
   popper: [["onMouseEnter"], ["onMouseLeave"]]
 });
-function fe(n) {
-  var _ = arguments[0], t, a = n.styles, r = n.Children, o = E;
-  return t = x(a), /* @__PURE__ */ i.createElement(U, t.cn("ListBoxContextProvider", {}), /* @__PURE__ */ i.createElement(o, t.cn("SDropdownMenuList", g({}, m({
-    shadow: !0
-  }, _))), /* @__PURE__ */ i.createElement(E.Container, {
+function List(_ref23) {
+  var _ref2 = arguments[0], _ref14;
+  var styles = _ref23.styles, Children = _ref23.Children;
+  var SDropdownMenuList = ScrollAreaComponent;
+  return _ref14 = sstyled(styles), /* @__PURE__ */ React.createElement(ListBoxContextProvider, _ref14.cn("ListBoxContextProvider", {}), /* @__PURE__ */ React.createElement(SDropdownMenuList, _ref14.cn("SDropdownMenuList", _objectSpread({}, assignProps({
+    "shadow": true
+  }, _ref2))), /* @__PURE__ */ React.createElement(ScrollAreaComponent.Container, {
     tabIndex: void 0
-  }, /* @__PURE__ */ i.createElement(r, t.cn("Children", {}))), /* @__PURE__ */ i.createElement(E.Bar, {
+  }, /* @__PURE__ */ React.createElement(Children, _ref14.cn("Children", {}))), /* @__PURE__ */ React.createElement(ScrollAreaComponent.Bar, {
     orientation: "horizontal"
-  }), /* @__PURE__ */ i.createElement(E.Bar, {
+  }), /* @__PURE__ */ React.createElement(ScrollAreaComponent.Bar, {
     orientation: "vertical"
   })));
 }
-function ve(n) {
-  var _ = arguments[0], t, a = n.styles, r = z;
-  return t = x(a), /* @__PURE__ */ i.createElement(r, t.cn("SDropdownMenuActions", g({}, m({}, _))));
+function Actions(_ref24) {
+  var _ref3 = arguments[0], _ref15;
+  var styles = _ref24.styles;
+  var SDropdownMenuActions = Flex;
+  return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(SDropdownMenuActions, _ref15.cn("SDropdownMenuActions", _objectSpread({}, assignProps({}, _ref3))));
 }
-function be(n) {
-  var _ = arguments[0], t = n.visible, a = n.disablePortal, r = n.ignorePortalsStacking, o = n.disableEnforceFocus, e = n.interaction, s = n.autoFocus, u = n.animationsDisabled, d = {
-    visible: t,
-    disablePortal: a,
-    ignorePortalsStacking: r,
-    disableEnforceFocus: o,
-    interaction: e,
-    autoFocus: s,
-    animationsDisabled: u
+function Menu(props) {
+  var _ref4 = arguments[0];
+  var visible = props.visible, disablePortal = props.disablePortal, ignorePortalsStacking = props.ignorePortalsStacking, disableEnforceFocus = props.disableEnforceFocus, interaction = props.interaction, autoFocus = props.autoFocus, animationsDisabled = props.animationsDisabled;
+  var popperProps = {
+    visible,
+    disablePortal,
+    ignorePortalsStacking,
+    disableEnforceFocus,
+    interaction,
+    autoFocus,
+    animationsDisabled
   };
-  return /* @__PURE__ */ i.createElement(U, null, /* @__PURE__ */ i.createElement(v.Popper, W({}, d, {
+  return /* @__PURE__ */ React.createElement(ListBoxContextProvider, null, /* @__PURE__ */ React.createElement(DropdownMenu.Popper, _extends({}, popperProps, {
     role: null
-  }), /* @__PURE__ */ i.createElement(v.List, m({}, _))));
+  }), /* @__PURE__ */ React.createElement(DropdownMenu.List, assignProps({}, _ref4))));
 }
-function Se(n) {
-  var _ = arguments[0], t, a = n.id, r = n.styles, o = n.disabled, e = n.Children, s = n.forwardRef, u = n.role, d = n.tabIndex, h = n.actionsRef, l = n["aria-checked"], p = D.Item, c = i.useRef(), f = i.useState(!1), b = N(f, 2), S = b[0], C = b[1], w = {
-    contentId: a,
-    ref: G(s, c),
-    role: u,
-    tabIndex: d,
-    ariaChecked: l
-  }, K = [], T = L(e, [v.displayName], !0), F = L(e, [v.Item.Hint.displayName], !0), R = L(e, [v.Item.Content.displayName], !0) || T || F;
-  if (F) {
-    var B = "igc-".concat(de(), "-option-hint");
-    w.hintId = B, K.push(B);
+function Item(_ref25) {
+  var _ref5 = arguments[0], _ref16;
+  var id = _ref25.id, styles = _ref25.styles, disabled = _ref25.disabled, Children = _ref25.Children, forwardRef = _ref25.forwardRef, role = _ref25.role, tabIndex = _ref25.tabIndex, actionsRef = _ref25.actionsRef, ariaChecked = _ref25["aria-checked"];
+  var SDropdownMenuItemContainer = Dropdown.Item;
+  var itemRef = React.useRef();
+  var _React$useState = React.useState(false), _React$useState2 = _slicedToArray(_React$useState, 2), highlighted = _React$useState2[0], setHighlighted = _React$useState2[1];
+  var menuItemContextValue = {
+    contentId: id,
+    ref: forkRef(forwardRef, itemRef),
+    role,
+    tabIndex,
+    ariaChecked
+  };
+  var ariaDescribes = [];
+  var hasSubMenu = isAdvanceMode(Children, [DropdownMenu.displayName], true);
+  var hasHint = isAdvanceMode(Children, [DropdownMenu.Item.Hint.displayName], true);
+  var advancedMode = isAdvanceMode(Children, [DropdownMenu.Item.Content.displayName], true) || hasSubMenu || hasHint;
+  if (hasHint) {
+    var hintId = "igc-".concat(useUID(), "-option-hint");
+    menuItemContextValue.hintId = hintId;
+    ariaDescribes.push(hintId);
   }
-  T && (w.hasSubMenu = !0), w.ariaDescribes = K, i.useEffect(function() {
-    var $ = function(k) {
-      k.target === c.current && (C(!0), T && k.stopPropagation());
-    }, V = function(k) {
-      k.target === c.current && (C(!1), h.current && (c.current.tabIndex = -1));
+  if (hasSubMenu) {
+    menuItemContextValue.hasSubMenu = true;
+  }
+  menuItemContextValue.ariaDescribes = ariaDescribes;
+  React.useEffect(function() {
+    var onFocus = function onFocus2(e) {
+      if (e.target === itemRef.current) {
+        setHighlighted(true);
+        if (hasSubMenu) {
+          e.stopPropagation();
+        }
+      }
+    };
+    var onBlur = function onBlur2(e) {
+      if (e.target === itemRef.current) {
+        setHighlighted(false);
+        if (actionsRef.current) {
+          itemRef.current.tabIndex = -1;
+        }
+      }
     };
-    return document.addEventListener("focus", $, {
-      capture: !0
-    }), document.addEventListener("blur", V, {
-      capture: !0
-    }), function() {
-      document.removeEventListener("focus", $, {
-        capture: !0
-      }), document.removeEventListener("blur", V, {
-        capture: !0
+    document.addEventListener("focus", onFocus, {
+      capture: true
+    });
+    document.addEventListener("blur", onBlur, {
+      capture: true
+    });
+    return function() {
+      document.removeEventListener("focus", onFocus, {
+        capture: true
+      });
+      document.removeEventListener("blur", onBlur, {
+        capture: true
       });
     };
-  }, [c.current]);
-  var J = ge();
-  return t = x(r), /* @__PURE__ */ i.createElement(H.Provider, {
-    value: w
-  }, /* @__PURE__ */ i.createElement(p, t.cn("SDropdownMenuItemContainer", g({}, m({
-    ref: R ? void 0 : w.ref,
-    "use:highlighted": !o && S && J.current === "keyboard",
-    "use:role": R ? void 0 : u,
-    "use:id": R ? void 0 : a,
-    "use:tabIndex": R ? void 0 : d,
-    "use:aria-checked": R ? void 0 : l
-  }, _))), /* @__PURE__ */ i.createElement(e, t.cn("Children", {}))));
+  }, [itemRef.current]);
+  return _ref16 = sstyled(styles), /* @__PURE__ */ React.createElement(menuItemContext.Provider, {
+    value: menuItemContextValue
+  }, /* @__PURE__ */ React.createElement(SDropdownMenuItemContainer, _ref16.cn("SDropdownMenuItemContainer", _objectSpread({}, assignProps({
+    "ref": advancedMode ? void 0 : menuItemContextValue.ref,
+    "use:highlighted": !disabled && highlighted && lastInteraction.isKeyboard(),
+    "use:role": advancedMode ? void 0 : role,
+    "use:id": advancedMode ? void 0 : id,
+    "use:tabIndex": advancedMode ? void 0 : tabIndex,
+    "use:aria-checked": advancedMode ? void 0 : ariaChecked
+  }, _ref5))), /* @__PURE__ */ React.createElement(Children, _ref16.cn("Children", {}))));
 }
-function O(n) {
-  var _ = se(n, n.forwardRef), t = N(_, 2), a = t[0], r = t[1], o = r.className, e = Y(r, me), s = x(n.styles);
-  return /* @__PURE__ */ i.createElement(a, W({
-    className: ie(s.cn("SDropdownMenuItemAddon", n).className, o) || void 0
-  }, e));
+function Addon(props) {
+  var _useBox = useBox(props, props.forwardRef), _useBox2 = _slicedToArray(_useBox, 2), SDropdownMenuItemAddon = _useBox2[0], _useBox2$ = _useBox2[1], className = _useBox2$.className, other = _objectWithoutProperties(_useBox2$, _excluded);
+  var styles = sstyled(props.styles);
+  return /* @__PURE__ */ React.createElement(SDropdownMenuItemAddon, _extends({
+    className: cn(styles.cn("SDropdownMenuItemAddon", props).className, className) || void 0
+  }, other));
 }
-function we() {
-  var n = arguments[0];
-  return /* @__PURE__ */ i.createElement(D.Trigger, m({}, n));
+function Trigger() {
+  var _ref6 = arguments[0];
+  return /* @__PURE__ */ React.createElement(Dropdown.Trigger, assignProps({}, _ref6));
 }
-function Ie(n) {
-  var _ = arguments[0], t, a = n.styles, r = z, o = i.useRef(), e = i.useContext(H), s = void 0;
-  e.hasSubMenu && (s = "true");
-  var u = i.useState(new Set(e.ariaDescribes)), d = N(u, 2), h = d[0], l = d[1];
-  return i.useEffect(function() {
-    var p = o.current, c = p == null ? void 0 : p.parentElement;
-    c.getAttribute("aria-haspopup") === "true" && c.getAttribute("aria-describedby") && l(function(f) {
-      return f.add(c.getAttribute("aria-describedby")), new Set(f);
-    });
-  }, [e.ariaDescribes]), t = x(a), /* @__PURE__ */ i.createElement(r, t.cn("SItemContent", g({}, m({
-    role: e.role,
-    id: e.contentId,
-    tabIndex: e.tabIndex,
-    ref: G(e.ref, o),
-    "use:aria-describedby": X(h).join(" "),
-    "aria-haspopup": e.hasSubMenu ? "true" : void 0,
-    "aria-expanded": s,
-    "aria-checked": e.ariaChecked,
-    alignItems: "center",
-    justifyContent: e.hasSubMenu ? "space-between" : void 0
-  }, _))));
+function ItemContent(_ref26) {
+  var _ref7 = arguments[0], _ref17;
+  var styles = _ref26.styles;
+  var SItemContent = Flex;
+  var ref = React.useRef();
+  var menuItemCtxValue = React.useContext(menuItemContext);
+  var subMenu = void 0;
+  if (menuItemCtxValue.hasSubMenu) {
+    subMenu = "true";
+  }
+  var _React$useState3 = React.useState(new Set(menuItemCtxValue.ariaDescribes)), _React$useState4 = _slicedToArray(_React$useState3, 2), describedby = _React$useState4[0], setDescribedby = _React$useState4[1];
+  React.useEffect(function() {
+    var element = ref.current;
+    var parent = element === null || element === void 0 ? void 0 : element.parentElement;
+    if (parent.getAttribute("aria-haspopup") === "true" && parent.getAttribute("aria-describedby")) {
+      setDescribedby(function(prev) {
+        prev.add(parent.getAttribute("aria-describedby"));
+        return new Set(prev);
+      });
+    }
+  }, [menuItemCtxValue.ariaDescribes]);
+  return _ref17 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemContent, _ref17.cn("SItemContent", _objectSpread({}, assignProps({
+    "role": menuItemCtxValue.role,
+    "id": menuItemCtxValue.contentId,
+    "tabIndex": menuItemCtxValue.tabIndex,
+    "ref": forkRef(menuItemCtxValue.ref, ref),
+    "use:aria-describedby": _toConsumableArray(describedby).join(" "),
+    "aria-haspopup": menuItemCtxValue.hasSubMenu ? "true" : void 0,
+    "aria-expanded": subMenu,
+    "aria-checked": menuItemCtxValue.ariaChecked,
+    "alignItems": "center",
+    "justifyContent": menuItemCtxValue.hasSubMenu ? "space-between" : void 0
+  }, _ref7))));
 }
-function ye(n) {
-  var _ = arguments[0], t, a = n.styles, r = he;
-  return t = x(a), /* @__PURE__ */ i.createElement(r, t.cn("SItemContentText", g({}, m({}, _))));
+function ItemContentText(_ref27) {
+  var _ref8 = arguments[0], _ref18;
+  var styles = _ref27.styles;
+  var SItemContentText = Text;
+  return _ref18 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemContentText, _ref18.cn("SItemContentText", _objectSpread({}, assignProps({}, _ref8))));
 }
-function xe(n) {
-  var _ = arguments[0], t, a = n.styles, r = z, o = i.useContext(H), e = o.hintId;
-  return t = x(a), /* @__PURE__ */ i.createElement(r, t.cn("SItemHint", g({}, m({
-    id: e,
+function ItemHint(_ref28) {
+  var _ref9 = arguments[0], _ref19;
+  var styles = _ref28.styles;
+  var SItemHint = Flex;
+  var _React$useContext = React.useContext(menuItemContext), hintId = _React$useContext.hintId;
+  return _ref19 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemHint, _ref19.cn("SItemHint", _objectSpread({}, assignProps({
+    "id": hintId,
     "aria-hidden": "true"
-  }, _))));
+  }, _ref9))));
 }
-function De(n) {
-  var _ = arguments[0], t, a = D.Item;
-  return t = x(n.styles), /* @__PURE__ */ i.createElement(a, t.cn("SDropdownMenuItemContainer", g({}, m({
-    variant: "hint"
-  }, _))));
+function Hint(props) {
+  var _ref10 = arguments[0], _ref20;
+  var SDropdownMenuItemContainer = Dropdown.Item;
+  return _ref20 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SDropdownMenuItemContainer, _ref20.cn("SDropdownMenuItemContainer", _objectSpread({}, assignProps({
+    "variant": "hint"
+  }, _ref10))));
 }
-function Ce(n) {
-  var _ = arguments[0], t, a = D.Item;
-  return t = x(n.styles), /* @__PURE__ */ i.createElement(a, t.cn("SDropdownMenuItemContainer", g({}, m({
-    variant: "title"
-  }, _))));
+function Title(props) {
+  var _ref11 = arguments[0], _ref21;
+  var SDropdownMenuItemContainer = Dropdown.Item;
+  return _ref21 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SDropdownMenuItemContainer, _ref21.cn("SDropdownMenuItemContainer", _objectSpread({}, assignProps({
+    "variant": "title"
+  }, _ref11))));
 }
-function Me(n) {
-  var _ = arguments[0], t = n.forwardRef;
-  return /* @__PURE__ */ i.createElement(v.Item, m({
-    ref: t
-  }, _));
+function Nesting(_ref29) {
+  var _ref12 = arguments[0];
+  var forwardRef = _ref29.forwardRef;
+  return /* @__PURE__ */ React.createElement(DropdownMenu.Item, assignProps({
+    "ref": forwardRef
+  }, _ref12));
 }
-function Pe(n) {
-  var _ = arguments[0], t = n.forwardRef;
-  return /* @__PURE__ */ i.createElement(v.Item.Content, m({
-    tag: v.Trigger,
-    ref: t,
+function NestingTrigger(_ref30) {
+  var _ref13 = arguments[0];
+  var forwardRef = _ref30.forwardRef;
+  return /* @__PURE__ */ React.createElement(DropdownMenu.Item.Content, assignProps({
+    "tag": DropdownMenu.Trigger,
+    "ref": forwardRef,
     "use:role": "menuitem"
-  }, _));
+  }, _ref13));
 }
-var v = oe(P, {
-  Trigger: we,
-  Popper: D.Popper,
-  List: fe,
-  Actions: ve,
-  Menu: be,
-  Item: [Se, {
-    Addon: O,
-    Content: Ie,
-    Text: ye,
-    Hint: xe
+var DropdownMenu = createComponent(DropdownMenuRoot, {
+  Trigger,
+  Popper: Dropdown.Popper,
+  List,
+  Actions,
+  Menu,
+  Item: [Item, {
+    Addon,
+    Content: ItemContent,
+    Text: ItemContentText,
+    Hint: ItemHint
   }],
   /**
    * @deprecated. Use just Item. See examples on
    */
-  Nesting: [Me, {
-    Trigger: Pe,
-    Addon: O
+  Nesting: [Nesting, {
+    Trigger: NestingTrigger,
+    Addon
   }],
-  ItemTitle: Ce,
-  ItemHint: De,
-  Group: D.Group
+  ItemTitle: Title,
+  ItemHint: Hint,
+  Group: Dropdown.Group
 }, {
-  parent: [D]
+  parent: [Dropdown]
 });
-v.selectedIndexContext = q;
+DropdownMenu.selectedIndexContext = selectedIndexContext;
 export {
-  v as default
+  DropdownMenu as default
 };