@mirohq/design-system-dropdown-menu 3.3.0-dropdown.0 → 3.3.0-dropdown.10

package/dist/main.js

@@ -5,10 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var RadixDropdownMenu = require('@radix-ui/react-dropdown-menu');
 var designSystemIcons = require('@mirohq/design-system-icons');
+var designSystemUtils = require('@mirohq/design-system-utils');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemStyles = require('@mirohq/design-system-styles');
-var designSystemSwitch = require('@mirohq/design-system-switch');
+var designSystemScrollArea = require('@mirohq/design-system-scroll-area');
+var designSystemBaseSwitch = require('@mirohq/design-system-base-switch');
+var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,112 +36,311 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var RadixDropdownMenu__namespace = /*#__PURE__*/_interopNamespace(RadixDropdownMenu);
 
+const ItemDescription = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "-webkit-box",
+  width: "100%",
+  WebkitBoxOrient: "vertical",
+  WebkitLineClamp: 2,
+  overflow: "hidden",
+  gridArea: "item-description",
+  fontSize: "$150",
+  color: "$text-neutrals-subtle"
+});
+
+const LeftSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: "$100",
+  gridArea: "left-slot"
+});
+
+const StyledIllustrationSlot = designSystemStitches.styled(LeftSlot, {
+  width: "$13"
+});
+
+const Context$1 = React.createContext({
+  rightSlotMount: () => 0,
+  rightSlotDestroy: () => {
+  },
+  containerSpacing: "medium"
+});
+const ContentProvider = ({
+  children,
+  containerSpacing = "medium"
+}) => {
+  const [maxWidth, setMaxWidth] = React.useState(0);
+  const maxRef = React.useRef(0);
+  const indexRef = React.useRef(0);
+  const widthMapRef = React.useRef(/* @__PURE__ */ new Map());
+  const updateMaxWith = React.useCallback((value) => {
+    maxRef.current = value;
+    setMaxWidth(value);
+  }, []);
+  const rightSlotMount = React.useCallback(
+    (width) => {
+      indexRef.current++;
+      widthMapRef.current.set(indexRef.current, width);
+      if (width > maxRef.current) {
+        updateMaxWith(width);
+      }
+      return indexRef.current;
+    },
+    [updateMaxWith]
+  );
+  const rightSlotDestroy = React.useCallback(
+    (index) => {
+      widthMapRef.current.delete(index);
+      if (widthMapRef.current.size === 0) {
+        updateMaxWith(0);
+      } else {
+        const maximum = Math.max(...Array.from(widthMapRef.current.values()));
+        updateMaxWith(maximum);
+      }
+    },
+    [updateMaxWith]
+  );
+  const formattedChildren = designSystemUtils.addPropsToChildren(children, () => true, {
+    UNSAFE_style: {
+      "--right-slot-max-width": `${Math.ceil(maxWidth)}px`
+    }
+  });
+  return /* @__PURE__ */ React__default["default"].createElement(Context$1.Provider, {
+    value: {
+      rightSlotMount,
+      rightSlotDestroy,
+      containerSpacing
+    }
+  }, formattedChildren);
+};
+const useContent = () => React.useContext(Context$1);
+
+const StyledRightSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginLeft: "auto",
+  paddingLeft: "$200",
+  gridArea: "right-slot",
+  height: "$5",
+  width: "$7",
+  minWidth: "max-content",
+  textAlign: "right",
+  "&:empty": {
+    paddingLeft: "$none"
+  }
+});
+
+const RightSlot = (props) => {
+  const { rightSlotMount, rightSlotDestroy } = useContent();
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (ref.current !== null) {
+      const width = ref.current.getBoundingClientRect().width;
+      const index = rightSlotMount(width);
+      return () => rightSlotDestroy(index);
+    }
+    return () => {
+    };
+  }, [rightSlotMount, rightSlotDestroy, ref]);
+  return /* @__PURE__ */ React__default["default"].createElement(StyledRightSlot, {
+    ref,
+    ...props
+  });
+};
+
+const HotkeySlot = designSystemStitches.styled(RightSlot, {
+  color: "$text-neutrals-subtle"
+});
+
 const itemDefaults = {
   all: "unset",
   boxSizing: "border-box",
   fontSize: 14,
   lineHeight: "20px",
-  color: "rgba(5, 0, 56, 1)",
+  color: "$text-neutrals",
   borderRadius: "$50",
-  display: "flex",
-  alignItems: "center",
-  height: "$11",
-  padding: "$100 $150",
+  display: "grid",
+  gridTemplateColumns: "auto 1fr minmax(auto, var(--right-slot-max-width))",
+  gridTemplateRows: "1fr auto",
+  gridTemplateAreas: `'left-slot item-text right-slot'
+    'left-slot item-description right-slot'`,
+  alignItems: "start",
+  minHeight: "$10",
+  padding: "$100 $100",
   position: "relative",
   userSelect: "none",
   cursor: "pointer",
-  "&[data-disabled]": {
-    color: "rgba(9, 9, 9, 0.4)",
-    pointerEvents: "none"
+  "&[data-no-left-slot]": {
+    gridTemplateColumns: "1fr minmax(auto, var(--right-slot-max-width))",
+    gridTemplateRows: "auto",
+    gridTemplateAreas: `'item-text right-slot'
+    'item-description right-slot'`
+  },
+  "&:not(:last-child)": {
+    marginBottom: "$50"
+  },
+  "&:not(:first-child)": {
+    marginTop: "$50"
   },
   ...designSystemStyles.focus.defaults,
-  "&:hover": {
-    background: "rgba(232, 236, 255, 1)",
-    color: "rgba(69, 91, 237, 1)",
-    boxShadow: "none"
+  '&:disabled, &[aria-disabled="true"], &[data-disabled]': {
+    cursor: "default",
+    [`&, & ${ItemDescription}, & ${HotkeySlot}`]: {
+      color: "$text-neutrals-disabled"
+    },
+    [`& ${StyledIllustrationSlot}`]: {
+      filter: "grayscale(1)"
+    }
+  },
+  "&:disabled, &[data-disabled]": {
+    pointerEvents: "none"
+  },
+  '&:hover:not([aria-disabled="true"])': {
+    background: "$background-primary-subtle-hover",
+    color: "$text-primary-hover",
+    '&:not([aria-disabled="true"])': {
+      boxShadow: "none"
+    }
+  },
+  '&:active:not([aria-disabled="true"])': {
+    background: "$background-primary-subtle-active",
+    boxShadow: "none",
+    color: "$text-primary-active"
   },
   '&[tabindex="0"]': {
     zIndex: "1"
   }
 };
 
-const StyledIndicator = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {});
-const checkboxItemStyles = {
+const StyledIndicator = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+});
+const StyledCheckboxItem = designSystemStitches.styled(RadixDropdownMenu__namespace.CheckboxItem, {
   ...itemDefaults,
   [`&[data-state="checked"] ${StyledIndicator}`]: {
     color: "$icon-primary"
   },
-  [`&[data-state="checked"]:hover ${StyledIndicator}`]: {
+  [`&[data-state="checked"]:hover:not([aria-disabled="true"]) ${StyledIndicator}`]: {
     color: "$icon-primary-hover"
   },
-  [`&[data-disabled] ${StyledIndicator}`]: {
+  [`
+    &[aria-disabled="true"] ${StyledIndicator},
+    &[data-disabled] ${StyledIndicator}
+  `]: {
     color: "$icon-neutrals-disabled"
   }
-};
-const StyledCheckboxItem = designSystemStitches.styled(
-  RadixDropdownMenu__namespace.CheckboxItem,
-  checkboxItemStyles
-);
-
-const IconSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  display: "flex",
-  alignItems: "center",
-  marginRight: "$100",
-  width: "$6"
-});
-const RightSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  display: "flex",
-  alignItems: "center",
-  marginLeft: "auto",
-  paddingLeft: "$200"
-});
-const ContentSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  display: "flex",
-  alignItems: "center"
 });
 
-const CheckboxItemRoot = ({
-  disabled = false,
-  onChange,
+const useAriaDisabled = ({
+  "aria-disabled": ariaDisabled,
+  onKeyDown,
   onSelect,
-  ref,
-  ...restProps
-}) => /* @__PURE__ */ React__default["default"].createElement(StyledCheckboxItem, {
-  ...restProps,
-  ref,
-  disabled,
-  onCheckedChange: onChange,
-  onSelect: (event) => {
-    event.preventDefault();
-    onSelect == null ? void 0 : onSelect(event);
+  onPointerMove,
+  onClick
+}, preventDefault = false) => React.useMemo(
+  () => ({
+    "aria-disabled": designSystemUtils.booleanify(ariaDisabled) ? ariaDisabled : void 0,
+    onKeyDown: (e) => {
+      if (designSystemUtils.booleanify(ariaDisabled) && e.code !== "ArrowUp" && e.code !== "ArrowDown") {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      onKeyDown == null ? void 0 : onKeyDown(e);
+    },
+    onSelect: (e) => {
+      if (preventDefault) {
+        e.preventDefault();
+      }
+      if (designSystemUtils.booleanify(ariaDisabled)) {
+        e.preventDefault();
+        return;
+      }
+      onSelect == null ? void 0 : onSelect(e);
+    },
+    onPointerMove: (e) => {
+      if (designSystemUtils.booleanify(ariaDisabled)) {
+        e.preventDefault();
+        return;
+      }
+      onPointerMove == null ? void 0 : onPointerMove(e);
+    },
+    onClick: (e) => {
+      if (designSystemUtils.booleanify(ariaDisabled)) {
+        e.preventDefault();
+        return;
+      }
+      onClick == null ? void 0 : onClick(e);
+    }
+  }),
+  [ariaDisabled, onKeyDown, onSelect, onPointerMove, onClick, preventDefault]
+);
+
+const Context = React.createContext({
+  leftSlotMount: () => {
+  },
+  leftSlotDestroy: () => {
   }
 });
-const CheckboxItem = React__default["default"].forwardRef(({ children, checked, disabled, ...restProps }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(CheckboxItemRoot, {
-  ...restProps,
-  checked,
-  disabled,
-  ref: forwardRef
-}, /* @__PURE__ */ React__default["default"].createElement(ContentSlot, null, children), /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(StyledIndicator, null, disabled === true && !checked && /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconProhibit, {
-  size: "small"
-}), checked && /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconCheckMark, {
-  size: "small"
-})))));
-
-const GUTTER_TOKEN = 150;
-const CONTENT_GUTTER = parseInt(designSystemStitches.theme.space[GUTTER_TOKEN]);
+const ItemProvider = ({
+  children
+}) => {
+  const [hasSlot, setHasSlot] = React.useState(false);
+  const leftSlotMount = React.useCallback(() => {
+    setHasSlot(true);
+  }, []);
+  const leftSlotDestroy = React.useCallback(() => {
+    setHasSlot(false);
+  }, []);
+  const formattedChildren = hasSlot ? children : designSystemUtils.addPropsToChildren(children, () => true, {
+    "data-no-left-slot": ""
+  });
+  return /* @__PURE__ */ React__default["default"].createElement(Context.Provider, {
+    value: {
+      leftSlotMount,
+      leftSlotDestroy
+    }
+  }, formattedChildren);
+};
+const useItem = () => React.useContext(Context);
+
+const CheckboxItem = React__default["default"].forwardRef(({ children, checked, onChange, disabled, ...restProps }, forwardRef) => {
+  const ariaDisabledProps = useAriaDisabled(restProps, true);
+  const { "aria-disabled": ariaDisabled } = ariaDisabledProps;
+  return /* @__PURE__ */ React__default["default"].createElement(ItemProvider, null, /* @__PURE__ */ React__default["default"].createElement(StyledCheckboxItem, {
+    ...restProps,
+    ...ariaDisabledProps,
+    ref: forwardRef,
+    checked,
+    disabled,
+    onCheckedChange: onChange
+  }, children, /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(StyledIndicator, null, (disabled === true || designSystemUtils.booleanify(ariaDisabled)) && !checked && /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconProhibit, {
+    weight: "thin",
+    css: { square: "$3", display: "block" }
+  }), checked && /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconCheckMark, {
+    css: { square: "$3", display: "block" }
+  })))));
+});
+
+const CONTENT_GUTTER = parseInt(designSystemStitches.theme.space[150]);
 const CONTENT_OFFSET = parseInt(designSystemStitches.theme.space[50]);
-const ITEM_WITHOUT_RIGHT_SLOT = `[role="menuitem"]:not(:has(${RightSlot}))`;
+const CONTENT_BORDER_FOCUS_ITEM = "2px";
+const CONTENT_PADDING = {
+  small: "$50 $150",
+  medium: "$150",
+  large: "$150 $300"
+};
 const contentDefaults = {
   maxWidth: "$125",
-  backgroundColor: "$white",
+  backgroundColor: "$background-neutrals-container",
   borderRadius: "$50",
-  padding: `$${GUTTER_TOKEN}`,
   boxShadow: "$50",
-  [`&:has(${RightSlot}) > ${ITEM_WITHOUT_RIGHT_SLOT}`]: {
-    paddingRight: "44px"
-  },
-  [`&:has([role="switch"]) > ${ITEM_WITHOUT_RIGHT_SLOT}`]: {
-    paddingRight: "56px"
+  "& [data-radix-scroll-area-viewport]": {
+    padding: `${CONTENT_BORDER_FOCUS_ITEM} $50 ${CONTENT_BORDER_FOCUS_ITEM} ${CONTENT_BORDER_FOCUS_ITEM}`,
+    boxSizing: "border-box"
   },
   "@media (prefers-reduced-motion: no-preference)": {
     animationDuration: "150ms",
@@ -171,7 +373,56 @@ const contentDefaults = {
   zIndex: "$dropdownMenu"
 };
 
-const StyledContent = designSystemStitches.styled(RadixDropdownMenu__namespace.Content, contentDefaults);
+const StyledContent = designSystemStitches.styled(RadixDropdownMenu__namespace.Content, {
+  ...contentDefaults,
+  variants: {
+    containerSpacing: {
+      small: {
+        '&, [role="menu"]': {
+          padding: CONTENT_PADDING.small
+        }
+      },
+      medium: {
+        '&, [role="menu"]': {
+          padding: CONTENT_PADDING.medium
+        }
+      },
+      large: {
+        '&, [role="menu"]': {
+          padding: CONTENT_PADDING.large
+        }
+      }
+    }
+  }
+});
+
+const ScrollableContent = ({
+  children,
+  maxHeight,
+  overflow,
+  containerSpacing
+}) => {
+  const getOverflowMaxHeight = React.useCallback(() => {
+    const [top, , bottom] = CONTENT_PADDING[containerSpacing].split(" ").map((value) => value.replace("$", ""));
+    const topBottom = top !== void 0 && bottom !== void 0 ? `var(--space-${top}) + var(--space-${bottom})` : `var(--space-${top}) + var(--space-${top})`;
+    const overflowMaxHeigh = overflow === "auto" ? `calc(var(--radix-dropdown-menu-content-available-height) - (${topBottom}))` : "auto";
+    const newMaxHeight = `calc(${maxHeight} - (${topBottom}))`;
+    return {
+      maxHeight: maxHeight === void 0 ? overflowMaxHeigh : newMaxHeight
+    };
+  }, [maxHeight, overflow, containerSpacing]);
+  if (overflow === "auto") {
+    return /* @__PURE__ */ React__default["default"].createElement(designSystemScrollArea.ScrollArea, {
+      css: { margin: `-${CONTENT_BORDER_FOCUS_ITEM}` },
+      type: "always"
+    }, /* @__PURE__ */ React__default["default"].createElement(designSystemScrollArea.ScrollArea.Viewport, {
+      css: { ...getOverflowMaxHeight() }
+    }, children), /* @__PURE__ */ React__default["default"].createElement(designSystemScrollArea.ScrollArea.Scrollbar, {
+      orientation: "vertical"
+    }, /* @__PURE__ */ React__default["default"].createElement(designSystemScrollArea.ScrollArea.Thumb, null)));
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children);
+};
 
 const Content = React__default["default"].forwardRef(
   ({
@@ -184,8 +435,14 @@ const Content = React__default["default"].forwardRef(
     avoidCollisions = true,
     sticky = "partial",
     hideWhenDetached = false,
+    containerSpacing = "medium",
+    overflow = "visible",
+    maxHeight,
+    children,
     ...restProps
-  }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledContent, {
+  }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(ContentProvider, {
+    containerSpacing
+  }, /* @__PURE__ */ React__default["default"].createElement(StyledContent, {
     ...restProps,
     ref: forwardRef,
     loop,
@@ -196,29 +453,51 @@ const Content = React__default["default"].forwardRef(
     avoidCollisions,
     collisionPadding,
     sticky,
-    hideWhenDetached
-  })
+    hideWhenDetached,
+    containerSpacing
+  }, /* @__PURE__ */ React__default["default"].createElement(ScrollableContent, {
+    ...{ containerSpacing, maxHeight, overflow }
+  }, children)))
 );
 
-const StyledItem = designSystemStitches.styled(RadixDropdownMenu__namespace.Item, itemDefaults);
+const StyledItem = designSystemStitches.styled(RadixDropdownMenu__namespace.Item, {
+  ...itemDefaults,
+  variants: {
+    hasRightSlot: {
+      true: {
+        paddingRight: "$600"
+      }
+    }
+  }
+});
 
 const Item = React__default["default"].forwardRef(
-  ({ disabled = false, ...restProps }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledItem, {
-    ...restProps,
-    ref: forwardRef,
-    disabled
-  })
+  ({ disabled = false, ...restProps }, forwardRef) => {
+    const ariaDisabledProps = useAriaDisabled(restProps);
+    return /* @__PURE__ */ React__default["default"].createElement(ItemProvider, null, /* @__PURE__ */ React__default["default"].createElement(StyledItem, {
+      ...restProps,
+      ...ariaDisabledProps,
+      disabled,
+      ref: forwardRef
+    }));
+  }
 );
 
-const LinkItem = React__default["default"].forwardRef(({ children, href, ...restProps }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(Item, {
-  asChild: true,
-  ref: forwardRef,
-  ...restProps
-}, /* @__PURE__ */ React__default["default"].createElement("a", {
-  href
-}, children)));
+const LinkItem = React__default["default"].forwardRef(({ children, href, ...restProps }, forwardRef) => {
+  const ariaDisabledProps = useAriaDisabled(restProps);
+  return /* @__PURE__ */ React__default["default"].createElement(Item, {
+    asChild: true,
+    ref: forwardRef,
+    ...restProps,
+    ...ariaDisabledProps
+  }, /* @__PURE__ */ React__default["default"].createElement("a", {
+    href
+  }, children));
+});
 
-const StyledRadioGroup = designSystemStitches.styled(RadixDropdownMenu__namespace.RadioGroup);
+const StyledRadioGroup = designSystemStitches.styled(RadixDropdownMenu__namespace.RadioGroup, {
+  marginY: "$50"
+});
 
 const RadioGroup = React__default["default"].forwardRef((props, forwardRef) => {
   const { onChange, ...restProps } = props;
@@ -229,7 +508,7 @@ const RadioGroup = React__default["default"].forwardRef((props, forwardRef) => {
   });
 });
 
-const StyledRadioContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+const StyledRadioContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -239,7 +518,7 @@ const StyledRadioContainer = designSystemStitches.styled(designSystemPrimitive.P
   border: "1px solid $border-neutrals",
   borderRadius: "$half"
 });
-const StyledPill = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+const StyledPill = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   display: "none",
   width: "$2",
   height: "$2",
@@ -247,7 +526,7 @@ const StyledPill = designSystemStitches.styled(designSystemPrimitive.Primitive.s
 });
 const StyledProhibited = designSystemStitches.styled(designSystemIcons.IconProhibit, {
   display: "none",
-  width: "$3"
+  width: "$3 !important"
 });
 const StyledRadioItem = designSystemStitches.styled(RadixDropdownMenu__namespace.RadioItem, {
   ...itemDefaults,
@@ -259,37 +538,46 @@ const StyledRadioItem = designSystemStitches.styled(RadixDropdownMenu__namespace
       backgroundColor: "$background-primary-prominent-selected"
     }
   },
-  [`&:hover ${StyledRadioContainer}`]: {
+  [`&:hover:not([aria-disabled="true"]) ${StyledRadioContainer}`]: {
     borderColor: "$border-primary-hover",
     [`& ${StyledPill}`]: {
       backgroundColor: "$background-primary-prominent-hover"
     }
   },
-  [`&[data-disabled] ${StyledRadioContainer}`]: {
+  [`
+    &[aria-disabled="true"] ${StyledRadioContainer},
+    &[data-disabled] ${StyledRadioContainer}
+  `]: {
     color: "$icon-neutrals-disabled",
     borderColor: "$border-neutrals-disabled",
     [`& ${StyledPill}`]: {
       backgroundColor: "$icon-neutrals-disabled"
     }
   },
-  [`&[data-state="unchecked"][data-disabled] ${StyledProhibited}`]: {
-    display: "block"
+  '&[data-state="unchecked"]': {
+    [`
+      &[aria-disabled="true"] ${StyledProhibited},
+      &[data-disabled] ${StyledProhibited}
+    `]: {
+      display: "flex"
+    }
   }
 });
 
-const RadioItem = React__default["default"].forwardRef(({ disabled = false, onSelect, children, ...restProps }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledRadioItem, {
-  ...restProps,
-  ref: forwardRef,
-  disabled,
-  onSelect: (event) => {
-    event.preventDefault();
-    onSelect == null ? void 0 : onSelect(event);
-  }
-}, /* @__PURE__ */ React__default["default"].createElement(ContentSlot, null, children), /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(StyledRadioContainer, null, /* @__PURE__ */ React__default["default"].createElement(StyledPill, null), /* @__PURE__ */ React__default["default"].createElement(StyledProhibited, null)))));
+const RadioItem = React__default["default"].forwardRef(({ disabled = false, children, ...restProps }, forwardRef) => {
+  const ariaDisabledProps = useAriaDisabled(restProps, true);
+  return /* @__PURE__ */ React__default["default"].createElement(ItemProvider, null, /* @__PURE__ */ React__default["default"].createElement(StyledRadioItem, {
+    ...restProps,
+    ...ariaDisabledProps,
+    disabled,
+    ref: forwardRef
+  }, children, /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(StyledRadioContainer, null, /* @__PURE__ */ React__default["default"].createElement(StyledPill, null), /* @__PURE__ */ React__default["default"].createElement(StyledProhibited, {
+    weight: "thin"
+  })))));
+});
 
 const StyledSeparator = designSystemStitches.styled(RadixDropdownMenu__namespace.Separator, {
-  borderTop: "1px solid rgba(235, 235, 239, 1)",
-  marginY: "$100"
+  borderTop: "1px solid $border-neutrals-subtle"
 });
 
 const Separator = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledSeparator, {
@@ -297,33 +585,48 @@ const Separator = React__default["default"].forwardRef((props, forwardRef) => /*
   ref: forwardRef
 }));
 
+const StyledSwitch = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+  ...designSystemBaseSwitch.styles.default,
+  width: "$7",
+  height: "$4"
+});
+const StyledSwitchItem = designSystemStitches.styled(RadixDropdownMenu__namespace.CheckboxItem, {
+  ...itemDefaults,
+  [`&[data-state="checked"] ${StyledSwitch}`]: designSystemBaseSwitch.styles.checked,
+  [`&[data-state="checked"]:hover:not([aria-disabled="true"]) ${StyledSwitch}`]: designSystemBaseSwitch.styles.checkedHovered,
+  [`&:hover:not([aria-disabled="true"]) ${StyledSwitch}`]: designSystemBaseSwitch.styles.hovered,
+  [`
+    &[aria-disabled="true"] ${StyledSwitch},
+    &[data-disabled] ${StyledSwitch}
+  `]: designSystemBaseSwitch.styles.disabled
+});
+
 const SwitchItem = React__default["default"].forwardRef(
-  ({ disabled = false, checked, onSelect, children, ...restProps }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(CheckboxItemRoot, {
-    ...restProps,
-    ref: forwardRef,
-    disabled,
-    checked
-  }, /* @__PURE__ */ React__default["default"].createElement(ContentSlot, null, children), /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(designSystemSwitch.Switch, {
-    checked,
-    disabled,
-    onChange: (x) => x,
-    value: ""
-  })))
+  ({ disabled = false, checked, onChange, children, ...restProps }, forwardRef) => {
+    const ariaDisabledProps = useAriaDisabled(restProps, true);
+    return /* @__PURE__ */ React__default["default"].createElement(ItemProvider, null, /* @__PURE__ */ React__default["default"].createElement(StyledSwitchItem, {
+      ...restProps,
+      ...ariaDisabledProps,
+      disabled,
+      checked,
+      onCheckedChange: onChange,
+      ref: forwardRef
+    }, children, /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(StyledSwitch, null, /* @__PURE__ */ React__default["default"].createElement(designSystemBaseSwitch.Thumb, null)))));
+  }
 );
 
-const defaultStyles = {
-  boxSizing: "border-box",
-  cursor: "pointer",
-  ...designSystemStyles.focus.defaults
-};
 const StyledTrigger = designSystemStitches.styled(RadixDropdownMenu__namespace.Trigger, {
   variants: {
     unstyled: {
       true: {
         all: "unset",
-        ...defaultStyles
+        boxSizing: "border-box",
+        cursor: "pointer",
+        ...designSystemStyles.focus.defaults
       },
-      false: defaultStyles
+      false: {
+        cursor: "pointer"
+      }
     }
   }
 });
@@ -336,26 +639,36 @@ const Trigger = React__default["default"].forwardRef(({ asChild = false, onPress
   asChild
 }));
 
+const StyledIconContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+  color: "$icon-neutrals-with-text",
+  display: "flex",
+  alignItems: "center"
+});
 const StyledSubTrigger = designSystemStitches.styled(RadixDropdownMenu__namespace.SubTrigger, {
   ...itemDefaults,
-  '&[data-state="open"]': itemDefaults["&:hover"]
-});
-
-const ArrowIcon = () => /* @__PURE__ */ React__default["default"].createElement("svg", {
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  fill: "currentColor",
-  xmlns: "http://www.w3.org/2000/svg",
-  "data-testid": "submenu-arrow-icon"
-}, /* @__PURE__ */ React__default["default"].createElement("path", {
-  d: "M5.29289 3.29289C5.68342 2.90237 6.31658 2.90237 6.70711 3.29289L11.4142 8L6.70711 12.7071C6.31658 13.0976 5.68342 13.0976 5.29289 12.7071C4.90237 12.3166 4.90237 11.6834 5.29289 11.2929L8.58579 8L5.29289 4.70711C4.90237 4.31658 4.90237 3.68342 5.29289 3.29289Z"
-}));
-const SubTrigger = React__default["default"].forwardRef(({ children, disabled = false, ...restProps }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledSubTrigger, {
-  ...restProps,
-  ref: forwardRef,
-  disabled
-}, /* @__PURE__ */ React__default["default"].createElement(ContentSlot, null, children), /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(ArrowIcon, null))));
+  '&[data-state="open"]': itemDefaults['&:hover:not([aria-disabled="true"])'],
+  [`&[data-state="open"] ${StyledIconContainer}, &:hover:not([aria-disabled="true"]) ${StyledIconContainer}`]: {
+    color: "$icon-primary-hover"
+  }
+});
+
+const SubTrigger = React__default["default"].forwardRef(({ children, disabled = false, ...restProps }, forwardRef) => {
+  const { onSelect, ...ariaDisabledProps } = useAriaDisabled({
+    onKeyDown: restProps.onKeyDown,
+    "aria-disabled": restProps["aria-disabled"]
+  });
+  return /* @__PURE__ */ React__default["default"].createElement(StyledSubTrigger, {
+    ...restProps,
+    ...ariaDisabledProps,
+    disabled,
+    ref: forwardRef
+  }, children, /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(StyledIconContainer, {
+    "data-testid": process.env.NODE_ENV === "test" ? "submenu-arrow-icon" : void 0
+  }, /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconChevronRight, {
+    size: "small",
+    weight: "thin"
+  }))));
+});
 
 const StyledSubContent = designSystemStitches.styled(
   RadixDropdownMenu__namespace.SubContent,
@@ -369,19 +682,29 @@ const SubContent = React__default["default"].forwardRef(
     alignOffset = -CONTENT_GUTTER,
     collisionPadding = 0,
     loop = false,
-    hideWhenDetached = false,
+    hideWhenDetached = true,
     sticky = "partial",
+    overflow = "visible",
+    maxHeight,
+    children,
     ...restProps
-  }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledSubContent, {
-    ...restProps,
-    ref: forwardRef,
-    sideOffset,
-    alignOffset,
-    collisionPadding,
-    loop,
-    hideWhenDetached,
-    sticky
-  })
+  }, forwardRef) => {
+    const { containerSpacing } = useContent();
+    return /* @__PURE__ */ React__default["default"].createElement(ContentProvider, {
+      containerSpacing
+    }, /* @__PURE__ */ React__default["default"].createElement(StyledSubContent, {
+      ...restProps,
+      ref: forwardRef,
+      sideOffset,
+      alignOffset,
+      collisionPadding,
+      loop,
+      hideWhenDetached,
+      sticky
+    }, /* @__PURE__ */ React__default["default"].createElement(ScrollableContent, {
+      ...{ containerSpacing, maxHeight, overflow }
+    }, children)));
+  }
 );
 
 const StyledSub = designSystemStitches.styled(RadixDropdownMenu__namespace.Sub, {});
@@ -407,6 +730,47 @@ const Portal = (props) => /* @__PURE__ */ React__default["default"].createElemen
   ...props
 });
 
+const StyledIconSlot = designSystemStitches.styled(LeftSlot, {
+  square: "$5",
+  "& svg:not([data-icon-component]), & img:not([data-icon-component])": {
+    ...designSystemBaseIcon.styles.size.small,
+    ...designSystemBaseIcon.styles.weight.thin
+  }
+});
+
+const IconSlot = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
+  const { leftSlotMount, leftSlotDestroy } = useItem();
+  const formattedChildren = designSystemUtils.addPropsToChildren(
+    children,
+    designSystemBaseIcon.isIconComponent,
+    {
+      "data-icon-component": "",
+      size: "small",
+      weight: "thin"
+    }
+  );
+  React.useEffect(() => {
+    leftSlotMount();
+    return () => leftSlotDestroy();
+  }, [leftSlotMount, leftSlotDestroy]);
+  return /* @__PURE__ */ React__default["default"].createElement(StyledIconSlot, {
+    ref: forwardRef,
+    ...restProps
+  }, formattedChildren);
+});
+
+const IllustrationSlot = React__default["default"].forwardRef((props, forwardRef) => {
+  const { leftSlotMount, leftSlotDestroy } = useItem();
+  React.useEffect(() => {
+    leftSlotMount();
+    return () => leftSlotDestroy();
+  }, [leftSlotMount, leftSlotDestroy]);
+  return /* @__PURE__ */ React__default["default"].createElement(StyledIllustrationSlot, {
+    ref: forwardRef,
+    ...props
+  });
+});
+
 const DropdownMenu = ({
   defaultOpen = false,
   direction = "ltr",
@@ -432,8 +796,11 @@ const DropdownMenu = ({
 };
 DropdownMenu.CheckboxItem = CheckboxItem;
 DropdownMenu.Content = Content;
+DropdownMenu.HotkeySlot = HotkeySlot;
 DropdownMenu.IconSlot = IconSlot;
+DropdownMenu.IllustrationSlot = IllustrationSlot;
 DropdownMenu.Item = Item;
+DropdownMenu.ItemDescription = ItemDescription;
 DropdownMenu.LinkItem = LinkItem;
 DropdownMenu.Portal = Portal;
 DropdownMenu.RadioGroup = RadioGroup;