@adecore/ui 0.31.11 → 0.32.0

package/dist/menu/parts.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { createContext, useContext } from 'react';
 import clsx from 'clsx';
 import { Check, ChevronRight } from 'lucide-react';
@@ -7,10 +7,11 @@ import { Menu as BaseMenu } from '@base-ui/react/menu';
 import { Separator as BaseSeparator } from '@base-ui/react/separator';
 import { useRender } from '@base-ui/react/use-render';
 import { withClass } from '../class-name.js';
-import { Icon } from '../Icon.js';
-import { Tooltip } from '../Tooltip.js';
+import { Icon } from "../Icon.js";
+import { Tooltip } from "../Tooltip.js";
 import { splitPlacement } from '../placement.js';
 import { renderPositioner } from '../popup-layer.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MenuKindContext = createContext('menu');
 /*
  * A menu hangs under its trigger, lined up with its start, unless there is no room. A context menu
@@ -18,9 +19,16 @@ const MenuKindContext = createContext('menu');
  * up by the popup's own padding so its first row lines up with the row that opened it.
  */
 const PLACEMENT = {
-    menu: { side: 'bottom', align: 'start', sideOffset: 6 },
-    context: {},
-    submenu: { sideOffset: 4, alignOffset: -4 }
+  menu: {
+    side: 'bottom',
+    align: 'start',
+    sideOffset: 6
+  },
+  context: {},
+  submenu: {
+    sideOffset: 4,
+    alignOffset: -4
+  }
 };
 /* The label above a group of rows. It takes the line height of the row it sits in. */
 export const MENU_LABEL = 'px-2.5 pt-1.5 pb-0.5 text-xs/[inherit] text-text-faint';
@@ -30,13 +38,55 @@ const MENU_HINT = 'ml-auto pl-3 text-xs/[inherit] text-text-faint';
    negative margin buys back from its 4px of padding, and it is softer than a border a surface ends with. */
 const MENU_SEPARATOR = '-mx-1 my-1 h-px bg-border-soft';
 export function MenuRoot(props) {
-    return (_jsx(MenuKindContext, { value: "menu", children: _jsx(BaseMenu.Root, { ...props }) }));
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = /*#__PURE__*/_jsx(MenuKindContext, {
+      value: "menu",
+      children: /*#__PURE__*/_jsx(BaseMenu.Root, {
+        ...props
+      })
+    });
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
 }
 export function ContextMenuRoot(props) {
-    return (_jsx(MenuKindContext, { value: "context", children: _jsx(BaseContextMenu.Root, { ...props }) }));
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = /*#__PURE__*/_jsx(MenuKindContext, {
+      value: "context",
+      children: /*#__PURE__*/_jsx(BaseContextMenu.Root, {
+        ...props
+      })
+    });
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
 }
 export function MenuSubmenuRoot(props) {
-    return (_jsx(MenuKindContext, { value: "submenu", children: _jsx(BaseMenu.SubmenuRoot, { ...props }) }));
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = /*#__PURE__*/_jsx(MenuKindContext, {
+      value: "submenu",
+      children: /*#__PURE__*/_jsx(BaseMenu.SubmenuRoot, {
+        ...props
+      })
+    });
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
 }
 export const MenuTrigger = BaseMenu.Trigger;
 export const ContextMenuTrigger = BaseContextMenu.Trigger;
@@ -45,72 +95,860 @@ export const ContextMenuTrigger = BaseContextMenu.Trigger;
  * decided once. The popup scrolls inside the room the window leaves it; `className` adds a minimum
  * width or a layout of its own, such as a grid of swatches.
  */
-export function MenuPopup({ className, ...props }) {
-    const defaults = PLACEMENT[useContext(MenuKindContext)];
-    const [placement, popupProps] = splitPlacement(props);
-    return (_jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { className: "popup-positioner", render: renderPositioner, ...placement, side: placement.side ?? defaults.side, align: placement.align ?? defaults.align, sideOffset: placement.sideOffset ?? defaults.sideOffset, alignOffset: placement.alignOffset ?? defaults.alignOffset, children: _jsx(BaseMenu.Popup, { className: withClass('menu-popup', className), ...popupProps }) }) }));
+export function MenuPopup(t0) {
+  const $ = _c(12);
+  const {
+    className,
+    ...props
+  } = t0;
+  const defaults = PLACEMENT[useContext(MenuKindContext)];
+  const [placement, popupProps] = splitPlacement(props);
+  const t1 = placement.side ?? defaults.side;
+  const t2 = placement.align ?? defaults.align;
+  const t3 = placement.sideOffset ?? defaults.sideOffset;
+  const t4 = placement.alignOffset ?? defaults.alignOffset;
+  let t5;
+  if ($[0] !== className) {
+    t5 = withClass("menu-popup", className);
+    $[0] = className;
+    $[1] = t5;
+  } else {
+    t5 = $[1];
+  }
+  let t6;
+  if ($[2] !== popupProps || $[3] !== t5) {
+    t6 = /*#__PURE__*/_jsx(BaseMenu.Popup, {
+      className: t5,
+      ...popupProps
+    });
+    $[2] = popupProps;
+    $[3] = t5;
+    $[4] = t6;
+  } else {
+    t6 = $[4];
+  }
+  let t7;
+  if ($[5] !== placement || $[6] !== t1 || $[7] !== t2 || $[8] !== t3 || $[9] !== t4 || $[10] !== t6) {
+    t7 = /*#__PURE__*/_jsx(BaseMenu.Portal, {
+      children: /*#__PURE__*/_jsx(BaseMenu.Positioner, {
+        className: "popup-positioner",
+        render: renderPositioner,
+        ...placement,
+        side: t1,
+        align: t2,
+        sideOffset: t3,
+        alignOffset: t4,
+        children: t6
+      })
+    });
+    $[5] = placement;
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+    $[10] = t6;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  return t7;
 }
-export function MenuItem({ unstyled = false, className, ...props }) {
-    return _jsx(BaseMenu.Item, { className: unstyled ? className : withClass('menu-item', className), ...props });
+export function MenuItem(t0) {
+  const $ = _c(10);
+  let className;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      unstyled: t1,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+  }
+  const unstyled = t1 === undefined ? false : t1;
+  let t2;
+  if ($[4] !== className || $[5] !== unstyled) {
+    t2 = unstyled ? className : withClass("menu-item", className);
+    $[4] = className;
+    $[5] = unstyled;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== props || $[8] !== t2) {
+    t3 = /*#__PURE__*/_jsx(BaseMenu.Item, {
+      className: t2,
+      ...props
+    });
+    $[7] = props;
+    $[8] = t2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
 }
 /*
  * The slot before the label of a row that can be checked, in a menu or a list that reads as one. It
  * is one line of the row tall, so a row with a second line keeps the tick beside its first. Radio and
  * checkbox items draw it themselves; a plain row that shows a state hands it `checked`.
  */
-export function MenuCheck({ kind, checked, className, ref }) {
-    const tick = _jsx(Icon, { icon: Check, size: kind === 'radio' ? 14 : 12 });
-    const indicator = checked !== undefined ? (checked && tick) : kind === 'radio' ? (_jsx(BaseMenu.RadioItemIndicator, { className: "flex", children: tick })) : (_jsx(BaseMenu.CheckboxItemIndicator, { className: "flex", children: tick }));
-    return (_jsx("span", { ref: ref, className: clsx('grid h-lh w-4 shrink-0 place-items-center', className), children: kind === 'checkbox' ? _jsx("span", { className: "grid h-4 w-4 place-items-center rounded border border-border-strong", children: indicator }) : indicator }));
+export function MenuCheck(t0) {
+  const $ = _c(15);
+  const {
+    kind,
+    checked,
+    className,
+    ref
+  } = t0;
+  const t1 = kind === "radio" ? 14 : 12;
+  let t2;
+  if ($[0] !== t1) {
+    t2 = /*#__PURE__*/_jsx(Icon, {
+      icon: Check,
+      size: t1
+    });
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const tick = t2;
+  let t3;
+  if ($[2] !== checked || $[3] !== kind || $[4] !== tick) {
+    t3 = checked !== undefined ? checked && tick : kind === "radio" ? /*#__PURE__*/_jsx(BaseMenu.RadioItemIndicator, {
+      className: "flex",
+      children: tick
+    }) : /*#__PURE__*/_jsx(BaseMenu.CheckboxItemIndicator, {
+      className: "flex",
+      children: tick
+    });
+    $[2] = checked;
+    $[3] = kind;
+    $[4] = tick;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const indicator = t3;
+  let t4;
+  if ($[6] !== className) {
+    t4 = clsx("grid h-lh w-4 shrink-0 place-items-center", className);
+    $[6] = className;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== indicator || $[9] !== kind) {
+    t5 = kind === "checkbox" ? /*#__PURE__*/_jsx("span", {
+      className: "grid h-4 w-4 place-items-center rounded border border-border-strong",
+      children: indicator
+    }) : indicator;
+    $[8] = indicator;
+    $[9] = kind;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== ref || $[12] !== t4 || $[13] !== t5) {
+    t6 = /*#__PURE__*/_jsx("span", {
+      ref: ref,
+      className: t4,
+      children: t5
+    });
+    $[11] = ref;
+    $[12] = t4;
+    $[13] = t5;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  return t6;
 }
 /* A row that is on or off. The box before its label is part of it. */
-export function MenuCheckboxItem({ unstyled = false, indicator = 'start', className, children, ...props }) {
-    if (unstyled) {
-        return (_jsx(BaseMenu.CheckboxItem, { className: className, ...props, children: children }));
+export function MenuCheckboxItem(t0) {
+  const $ = _c(22);
+  let children;
+  let className;
+  let props;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      unstyled: t1,
+      indicator: t2,
+      className,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    t1 = $[4];
+    t2 = $[5];
+  }
+  const unstyled = t1 === undefined ? false : t1;
+  const indicator = t2 === undefined ? "start" : t2;
+  if (unstyled) {
+    let t3;
+    if ($[6] !== children || $[7] !== className || $[8] !== props) {
+      t3 = /*#__PURE__*/_jsx(BaseMenu.CheckboxItem, {
+        className: className,
+        ...props,
+        children: children
+      });
+      $[6] = children;
+      $[7] = className;
+      $[8] = props;
+      $[9] = t3;
+    } else {
+      t3 = $[9];
     }
-    return (_jsxs(BaseMenu.CheckboxItem, { className: withClass('menu-item', className), ...props, children: [indicator === 'start' && _jsx(MenuCheck, { kind: "checkbox" }), children, indicator === 'end' && _jsx(MenuCheck, { kind: "checkbox", className: "ml-auto" })] }));
+    return t3;
+  }
+  let t3;
+  if ($[10] !== className) {
+    t3 = withClass("menu-item", className);
+    $[10] = className;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  let t4;
+  if ($[12] !== indicator) {
+    t4 = indicator === "start" && /*#__PURE__*/_jsx(MenuCheck, {
+      kind: "checkbox"
+    });
+    $[12] = indicator;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  let t5;
+  if ($[14] !== indicator) {
+    t5 = indicator === "end" && /*#__PURE__*/_jsx(MenuCheck, {
+      kind: "checkbox",
+      className: "ml-auto"
+    });
+    $[14] = indicator;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  let t6;
+  if ($[16] !== children || $[17] !== props || $[18] !== t3 || $[19] !== t4 || $[20] !== t5) {
+    t6 = /*#__PURE__*/_jsxs(BaseMenu.CheckboxItem, {
+      className: t3,
+      ...props,
+      children: [t4, children, t5]
+    });
+    $[16] = children;
+    $[17] = props;
+    $[18] = t3;
+    $[19] = t4;
+    $[20] = t5;
+    $[21] = t6;
+  } else {
+    t6 = $[21];
+  }
+  return t6;
 }
 export const MenuRadioGroup = BaseMenu.RadioGroup;
 /* One of several. The tick before its label is part of it. */
-export function MenuRadioItem({ unstyled = false, indicator = 'start', className, children, ...props }) {
-    if (unstyled) {
-        return (_jsx(BaseMenu.RadioItem, { className: className, ...props, children: children }));
+export function MenuRadioItem(t0) {
+  const $ = _c(22);
+  let children;
+  let className;
+  let props;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      unstyled: t1,
+      indicator: t2,
+      className,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    t1 = $[4];
+    t2 = $[5];
+  }
+  const unstyled = t1 === undefined ? false : t1;
+  const indicator = t2 === undefined ? "start" : t2;
+  if (unstyled) {
+    let t3;
+    if ($[6] !== children || $[7] !== className || $[8] !== props) {
+      t3 = /*#__PURE__*/_jsx(BaseMenu.RadioItem, {
+        className: className,
+        ...props,
+        children: children
+      });
+      $[6] = children;
+      $[7] = className;
+      $[8] = props;
+      $[9] = t3;
+    } else {
+      t3 = $[9];
     }
-    return (_jsxs(BaseMenu.RadioItem, { className: withClass('menu-item', className), ...props, children: [indicator === 'start' && _jsx(MenuCheck, { kind: "radio" }), children, indicator === 'end' && _jsx(MenuCheck, { kind: "radio", className: "ml-auto" })] }));
+    return t3;
+  }
+  let t3;
+  if ($[10] !== className) {
+    t3 = withClass("menu-item", className);
+    $[10] = className;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  let t4;
+  if ($[12] !== indicator) {
+    t4 = indicator === "start" && /*#__PURE__*/_jsx(MenuCheck, {
+      kind: "radio"
+    });
+    $[12] = indicator;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  let t5;
+  if ($[14] !== indicator) {
+    t5 = indicator === "end" && /*#__PURE__*/_jsx(MenuCheck, {
+      kind: "radio",
+      className: "ml-auto"
+    });
+    $[14] = indicator;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  let t6;
+  if ($[16] !== children || $[17] !== props || $[18] !== t3 || $[19] !== t4 || $[20] !== t5) {
+    t6 = /*#__PURE__*/_jsxs(BaseMenu.RadioItem, {
+      className: t3,
+      ...props,
+      children: [t4, children, t5]
+    });
+    $[16] = children;
+    $[17] = props;
+    $[18] = t3;
+    $[19] = t4;
+    $[20] = t5;
+    $[21] = t6;
+  } else {
+    t6 = $[21];
+  }
+  return t6;
 }
-export function MenuSubmenuTrigger({ className, children, chevron = true, ...props }) {
-    return (_jsxs(BaseMenu.SubmenuTrigger, { className: withClass('menu-item', className), ...props, children: [children, chevron && _jsx(Icon, { icon: ChevronRight, size: 14, className: "ml-auto text-text-faint" })] }));
+export function MenuSubmenuTrigger(t0) {
+  const $ = _c(14);
+  let children;
+  let className;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      className,
+      children,
+      chevron: t1,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    t1 = $[4];
+  }
+  const chevron = t1 === undefined ? true : t1;
+  let t2;
+  if ($[5] !== className) {
+    t2 = withClass("menu-item", className);
+    $[5] = className;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== chevron) {
+    t3 = chevron && /*#__PURE__*/_jsx(Icon, {
+      icon: ChevronRight,
+      size: 14,
+      className: "ml-auto text-text-faint"
+    });
+    $[7] = chevron;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== children || $[10] !== props || $[11] !== t2 || $[12] !== t3) {
+    t4 = /*#__PURE__*/_jsxs(BaseMenu.SubmenuTrigger, {
+      className: t2,
+      ...props,
+      children: [children, t3]
+    });
+    $[9] = children;
+    $[10] = props;
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  return t4;
 }
 /*
  * A row with buttons at its end that reads as one row. Its first item is the row, every `RowAction`
  * and `RowSubmenuTrigger` after it an item of its own, so the arrow keys reach each.
  */
-export function MenuRow({ render, className, ref, ...props }) {
-    return useRender({ render, ref, defaultTagName: 'div', props: { role: 'group', ...props, className: clsx('menu-row', className) } });
+export function MenuRow(t0) {
+  const $ = _c(14);
+  let className;
+  let props;
+  let ref;
+  let render;
+  if ($[0] !== t0) {
+    ({
+      render,
+      className,
+      ref,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = ref;
+    $[4] = render;
+  } else {
+    className = $[1];
+    props = $[2];
+    ref = $[3];
+    render = $[4];
+  }
+  let t1;
+  if ($[5] !== className) {
+    t1 = clsx("menu-row", className);
+    $[5] = className;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== props || $[8] !== t1) {
+    t2 = {
+      role: "group",
+      ...props,
+      className: t1
+    };
+    $[7] = props;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  let t3;
+  if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+    t3 = {
+      render,
+      ref,
+      defaultTagName: "div",
+      props: t2
+    };
+    $[10] = ref;
+    $[11] = render;
+    $[12] = t2;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  return useRender(t3);
 }
 /* A button in a `Menu.Row` that acts at once, named by its tooltip. `closeOnClick={false}` keeps the menu open. */
-export function MenuRowAction({ icon, label, iconClassName, className, ...props }) {
-    return (_jsx(Tooltip, { label: label, name: true, children: _jsx(BaseMenu.Item, { className: withClass('menu-item menu-row-action', className), ...props, children: _jsx(Icon, { icon: icon, size: 14, className: iconClassName }) }) }));
+export function MenuRowAction(t0) {
+  const $ = _c(18);
+  let className;
+  let icon;
+  let iconClassName;
+  let label;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      icon,
+      label,
+      iconClassName,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = icon;
+    $[3] = iconClassName;
+    $[4] = label;
+    $[5] = props;
+  } else {
+    className = $[1];
+    icon = $[2];
+    iconClassName = $[3];
+    label = $[4];
+    props = $[5];
+  }
+  let t1;
+  if ($[6] !== className) {
+    t1 = withClass("menu-item menu-row-action", className);
+    $[6] = className;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  let t2;
+  if ($[8] !== icon || $[9] !== iconClassName) {
+    t2 = /*#__PURE__*/_jsx(Icon, {
+      icon: icon,
+      size: 14,
+      className: iconClassName
+    });
+    $[8] = icon;
+    $[9] = iconClassName;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  let t3;
+  if ($[11] !== props || $[12] !== t1 || $[13] !== t2) {
+    t3 = /*#__PURE__*/_jsx(BaseMenu.Item, {
+      className: t1,
+      ...props,
+      children: t2
+    });
+    $[11] = props;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  let t4;
+  if ($[15] !== label || $[16] !== t3) {
+    t4 = /*#__PURE__*/_jsx(Tooltip, {
+      label: label,
+      name: true,
+      children: t3
+    });
+    $[15] = label;
+    $[16] = t3;
+    $[17] = t4;
+  } else {
+    t4 = $[17];
+  }
+  return t4;
 }
 /*
  * A button in a `Menu.Row` that opens a submenu, inside a `Menu.SubmenuRoot`. It has no tooltip: the
  * submenu opens on the same hover and says what the button holds.
  */
-export function MenuRowSubmenuTrigger({ icon, label, iconClassName, className, ...props }) {
-    return (_jsx(BaseMenu.SubmenuTrigger, { className: withClass('menu-item menu-row-action', className), "aria-label": label, ...props, children: _jsx(Icon, { icon: icon, size: 14, className: iconClassName }) }));
+export function MenuRowSubmenuTrigger(t0) {
+  const $ = _c(16);
+  let className;
+  let icon;
+  let iconClassName;
+  let label;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      icon,
+      label,
+      iconClassName,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = icon;
+    $[3] = iconClassName;
+    $[4] = label;
+    $[5] = props;
+  } else {
+    className = $[1];
+    icon = $[2];
+    iconClassName = $[3];
+    label = $[4];
+    props = $[5];
+  }
+  let t1;
+  if ($[6] !== className) {
+    t1 = withClass("menu-item menu-row-action", className);
+    $[6] = className;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  let t2;
+  if ($[8] !== icon || $[9] !== iconClassName) {
+    t2 = /*#__PURE__*/_jsx(Icon, {
+      icon: icon,
+      size: 14,
+      className: iconClassName
+    });
+    $[8] = icon;
+    $[9] = iconClassName;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  let t3;
+  if ($[11] !== label || $[12] !== props || $[13] !== t1 || $[14] !== t2) {
+    t3 = /*#__PURE__*/_jsx(BaseMenu.SubmenuTrigger, {
+      className: t1,
+      "aria-label": label,
+      ...props,
+      children: t2
+    });
+    $[11] = label;
+    $[12] = props;
+    $[13] = t1;
+    $[14] = t2;
+    $[15] = t3;
+  } else {
+    t3 = $[15];
+  }
+  return t3;
 }
 /* Also right between two groups of rows in a popover that reads as a menu. */
-export function MenuSeparator({ className, ...props }) {
-    return _jsx(BaseSeparator, { className: withClass(MENU_SEPARATOR, className), ...props });
+export function MenuSeparator(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = withClass(MENU_SEPARATOR, className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx(BaseSeparator, {
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
 export const MenuGroup = BaseMenu.Group;
-export function MenuGroupLabel({ unstyled = false, className, ...props }) {
-    return _jsx(BaseMenu.GroupLabel, { className: unstyled ? className : withClass(MENU_LABEL, className), ...props });
+export function MenuGroupLabel(t0) {
+  const $ = _c(10);
+  let className;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      unstyled: t1,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+  }
+  const unstyled = t1 === undefined ? false : t1;
+  let t2;
+  if ($[4] !== className || $[5] !== unstyled) {
+    t2 = unstyled ? className : withClass(MENU_LABEL, className);
+    $[4] = className;
+    $[5] = unstyled;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== props || $[8] !== t2) {
+    t3 = /*#__PURE__*/_jsx(BaseMenu.GroupLabel, {
+      className: t2,
+      ...props
+    });
+    $[7] = props;
+    $[8] = t2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
 }
 /* A label above rows that are not a `Menu.Group` of their own, such as a row of swatches. */
-export function MenuLabel({ render, className, ref, ...props }) {
-    return useRender({ render, ref, defaultTagName: 'div', props: { ...props, className: clsx(MENU_LABEL, className) } });
-}
-export function MenuHint({ render, className, ref, ...props }) {
-    return useRender({ render, ref, defaultTagName: 'span', props: { ...props, className: clsx(MENU_HINT, className) } });
+export function MenuLabel(t0) {
+  const $ = _c(14);
+  let className;
+  let props;
+  let ref;
+  let render;
+  if ($[0] !== t0) {
+    ({
+      render,
+      className,
+      ref,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = ref;
+    $[4] = render;
+  } else {
+    className = $[1];
+    props = $[2];
+    ref = $[3];
+    render = $[4];
+  }
+  let t1;
+  if ($[5] !== className) {
+    t1 = clsx(MENU_LABEL, className);
+    $[5] = className;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== props || $[8] !== t1) {
+    t2 = {
+      ...props,
+      className: t1
+    };
+    $[7] = props;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  let t3;
+  if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+    t3 = {
+      render,
+      ref,
+      defaultTagName: "div",
+      props: t2
+    };
+    $[10] = ref;
+    $[11] = render;
+    $[12] = t2;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  return useRender(t3);
 }
+export function MenuHint(t0) {
+  const $ = _c(14);
+  let className;
+  let props;
+  let ref;
+  let render;
+  if ($[0] !== t0) {
+    ({
+      render,
+      className,
+      ref,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = ref;
+    $[4] = render;
+  } else {
+    className = $[1];
+    props = $[2];
+    ref = $[3];
+    render = $[4];
+  }
+  let t1;
+  if ($[5] !== className) {
+    t1 = clsx(MENU_HINT, className);
+    $[5] = className;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== props || $[8] !== t1) {
+    t2 = {
+      ...props,
+      className: t1
+    };
+    $[7] = props;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  let t3;
+  if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+    t3 = {
+      render,
+      ref,
+      defaultTagName: "span",
+      props: t2
+    };
+    $[10] = ref;
+    $[11] = render;
+    $[12] = t2;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  return useRender(t3);
+}