@guardian/stand 0.0.15 → 0.0.17

package/README.md

@@ -181,3 +181,4 @@ Matrix generation in CI uses the same JSON file in the workflow `../.github/work
 - [Style Dictionary](https://guardian.github.io/stand/?path=/docs/style-dictionary--docs)
 - [Architecture Decision Records](https://guardian.github.io/stand/?path=/docs/architecture-decision-records--docs)
 - [Changelog](https://guardian.github.io/stand/?path=/docs/changelog--docs)
+- [Vision](https://guardian.github.io/stand/?path=/docs/vision--docs)

package/dist/TopBar.cjs

@@ -1,9 +1,15 @@
 'use strict';
 
-var TopBarToolName = require('./components/topbar/toolName/TopBarToolName.cjs');
-var TopBar = require('./styleD/build/typescript/component/TopBar.cjs');
+var TopBar$1 = require('./styleD/build/typescript/component/TopBar.cjs');
+var TopBarToolName = require('./components/topbar/topBarToolName/TopBarToolName.cjs');
+var TopBarNavigation = require('./components/topbar/topBarNavigation/TopBarNavigation.cjs');
+var TopBarItem = require('./components/topbar/topBarItem/TopBarItem.cjs');
+var TopBar = require('./components/topbar/TopBar.cjs');
 
 
 
+exports.componentTopBar = TopBar$1.componentTopBar;
 exports.TopBarToolName = TopBarToolName.TopBarToolName;
-exports.componentTopBar = TopBar.componentTopBar;
+exports.TopBarNavigation = TopBarNavigation.TopBarNavigation;
+exports.TopBarItem = TopBarItem.TopBarItem;
+exports.TopBar = TopBar.TopBar;

package/dist/TopBar.js

@@ -1,2 +1,5 @@
-export { TopBarToolName } from './components/topbar/toolName/TopBarToolName.js';
 export { componentTopBar } from './styleD/build/typescript/component/TopBar.js';
+export { TopBarToolName } from './components/topbar/topBarToolName/TopBarToolName.js';
+export { TopBarNavigation } from './components/topbar/topBarNavigation/TopBarNavigation.js';
+export { TopBarItem } from './components/topbar/topBarItem/TopBarItem.js';
+export { TopBar } from './components/topbar/TopBar.js';

package/dist/components/avatar/Avatar.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 var mergeDeep = require('../../util/mergeDeep.cjs');
 var styles = require('./styles.cjs');
 var types = require('./types.cjs');
@@ -22,7 +22,7 @@ function Avatar({
   ...props
 }) {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultAvatarTheme, theme);
-  const [imageError, setImageError] = react.useState(false);
+  const [imageError, setImageError] = React.useState(false);
   const handleImageError = () => {
     setImageError(true);
   };

package/dist/components/button/Button.cjs

@@ -7,7 +7,7 @@ var Icon = require('../icon/Icon.cjs');
 var styles = require('./styles.cjs');
 
 function Button({
-  variant = "emphasised-primary",
+  variant = "primary",
   size = "md",
   theme = {},
   cssOverrides,

package/dist/components/button/Button.js

@@ -4,7 +4,7 @@ import { mergeDeep } from '../../util/mergeDeep.js';
 import { Icon } from '../icon/Icon.js';
 import { buttonStyles, defaultButtonTheme } from './styles.js';
 
-function Button({ variant = "emphasised-primary", size = "md", theme = {}, cssOverrides, icon, ...props }) {
+function Button({ variant = "primary", size = "md", theme = {}, cssOverrides, icon, ...props }) {
   const mergedTheme = mergeDeep(defaultButtonTheme, theme);
   const iconSize = size === "xs" ? "sm" : size;
   return jsx(Button$1, { ...props, css: [buttonStyles(mergedTheme, { variant, size }, !!icon), cssOverrides], children: composeRenderProps(props.children, (children) => (

package/dist/components/button/styles.cjs

@@ -38,22 +38,25 @@ const buttonStyles = (theme, { size, variant }, hasIcon = false, isIconButton =
 			padding: 0;
 		`}
 
-		&[data-hovered] {
+		&[data-hovered], &:hover {
 			background: ${theme[variant].shared[":hover"].backgroundColor};
 			border: ${theme[variant].shared[":hover"].border};
 		}
 
-		&[data-pressed] {
+		&[data-pressed],
+		&:active {
 			background: ${theme[variant].shared[":active"].backgroundColor};
 			border: ${theme[variant].shared[":active"].border};
 		}
 
-		&[data-focus-visible] {
+		&[data-focus-visible],
+		&:focus-visible {
 			outline: ${theme.shared[":focus-visible"].outline};
 			outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
 		}
 
-		&[data-disabled] {
+		&[data-disabled],
+		&:disabled {
 			cursor: ${theme.shared[":disabled"].cursor};
 			color: ${theme[variant].shared[":disabled"].color};
 			background: ${theme[variant].shared[":disabled"].backgroundColor};

package/dist/components/button/styles.js

@@ -36,22 +36,25 @@ const buttonStyles = (theme, { size, variant }, hasIcon = false, isIconButton =
 			padding: 0;
 		`}
 
-		&[data-hovered] {
+		&[data-hovered], &:hover {
 			background: ${theme[variant].shared[":hover"].backgroundColor};
 			border: ${theme[variant].shared[":hover"].border};
 		}
 
-		&[data-pressed] {
+		&[data-pressed],
+		&:active {
 			background: ${theme[variant].shared[":active"].backgroundColor};
 			border: ${theme[variant].shared[":active"].border};
 		}
 
-		&[data-focus-visible] {
+		&[data-focus-visible],
+		&:focus-visible {
 			outline: ${theme.shared[":focus-visible"].outline};
 			outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
 		}
 
-		&[data-disabled] {
+		&[data-disabled],
+		&:disabled {
 			cursor: ${theme.shared[":disabled"].cursor};
 			color: ${theme[variant].shared[":disabled"].color};
 			background: ${theme[variant].shared[":disabled"].backgroundColor};

package/dist/components/byline/Byline.cjs

@@ -6,7 +6,7 @@ var prosemirrorDropcursor = require('prosemirror-dropcursor');
 var prosemirrorHistory = require('prosemirror-history');
 var prosemirrorState = require('prosemirror-state');
 var prosemirrorView = require('prosemirror-view');
-var react = require('react');
+var React = require('react');
 var lib = require('./lib.cjs');
 var placeholder = require('./placeholder.cjs');
 var plugins = require('./plugins.cjs');
@@ -26,15 +26,15 @@ const Byline = ({
   searchContributors,
   onBlur
 }) => {
-  const editorRef = react.useRef(null);
-  const viewRef = react.useRef(null);
-  const dropdownRef = react.useRef(null);
-  const [currentText, setCurrentText] = react.useState("");
-  const [currentOptionIndex, setCurrentOptionIndex] = react.useState(0);
-  const [taggedContributors, setTaggedContributors] = react.useState([]);
-  const [currentDoc, setCurrentDoc] = react.useState(null);
-  const [showDropdown, setShowDropdown] = react.useState(false);
-  const isTypingFromStartRange = react.useRef(
+  const editorRef = React.useRef(null);
+  const viewRef = React.useRef(null);
+  const dropdownRef = React.useRef(null);
+  const [currentText, setCurrentText] = React.useState("");
+  const [currentOptionIndex, setCurrentOptionIndex] = React.useState(0);
+  const [taggedContributors, setTaggedContributors] = React.useState([]);
+  const [currentDoc, setCurrentDoc] = React.useState(null);
+  const [showDropdown, setShowDropdown] = React.useState(false);
+  const isTypingFromStartRange = React.useRef(
     void 0
   );
   const trackTypingFromStart = (tr) => {
@@ -82,7 +82,7 @@ const Byline = ({
     }
     return selectedText.trim() !== "" && showDropdownBasedOnProps;
   };
-  const [enterHit, setEnterHit] = react.useState(false);
+  const [enterHit, setEnterHit] = React.useState(false);
   const checkDropdownVisibility = () => {
     if (dropdownRef.current?.checkVisibility) {
       return dropdownRef.current.checkVisibility();
@@ -90,7 +90,7 @@ const Byline = ({
       return dropdownRef.current?.offsetParent !== null;
     }
   };
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!editorRef.current) {
       return;
     }
@@ -219,7 +219,7 @@ const Byline = ({
       viewRef.current?.destroy();
     };
   }, []);
-  react.useEffect(() => {
+  React.useEffect(() => {
     const numberOfOptions = taggedContributors.length + (allowUntaggedContributors ? 1 : 0);
     if (numberOfOptions) {
       if (currentOptionIndex < 0) {
@@ -242,7 +242,7 @@ const Byline = ({
     taggedContributors.length,
     allowUntaggedContributors
   ]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (showDropdown && currentOptionIndex >= 0) {
       const selectedOption = document.getElementById(
         `contributor-option-${currentOptionIndex}`
@@ -255,7 +255,7 @@ const Byline = ({
       }
     }
   }, [currentOptionIndex, showDropdown]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (enterHit) {
       if (allowUntaggedContributors && currentOptionIndex === taggedContributors.length) {
         lib.addUntaggedContributor(

package/dist/components/favicon/Favicon.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 var mergeDeep = require('../../util/mergeDeep.cjs');
 var Icon = require('../icon/Icon.cjs');
 var styles = require('./styles.cjs');
 
 const Favicon = (props) => {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultFaviconTheme, props.theme ?? {});
-  const [imageError, setImageError] = react.useState(false);
+  const [imageError, setImageError] = React.useState(false);
   const handleImageError = () => {
     setImageError(true);
   };

package/dist/components/icon-button/IconButton.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../util/mergeDeep.cjs');
 var Icon = require('../icon/Icon.cjs');
 var styles = require('./styles.cjs');
 
 function IconButton({
-  variant = "emphasised-primary",
+  variant = "primary",
   size = "md",
   symbol,
   ariaLabel,
@@ -17,8 +17,8 @@ function IconButton({
   ...props
 }) {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultIconButtonTheme, theme);
-  const buttonRef = react.useRef(null);
-  react.useEffect(() => {
+  const buttonRef = React.useRef(null);
+  React.useEffect(() => {
     if (buttonRef.current) {
       buttonRef.current.title = ariaLabel;
     }

package/dist/components/icon-button/IconButton.js

@@ -5,7 +5,7 @@ import { mergeDeep } from '../../util/mergeDeep.js';
 import { Icon } from '../icon/Icon.js';
 import { iconButtonStyles, defaultIconButtonTheme } from './styles.js';
 
-function IconButton({ variant = "emphasised-primary", size = "md", symbol, ariaLabel, theme = {}, cssOverrides, ...props }) {
+function IconButton({ variant = "primary", size = "md", symbol, ariaLabel, theme = {}, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultIconButtonTheme, theme);
   const buttonRef = useRef(null);
   useEffect(() => {

package/dist/components/icon-link-button/IconLinkButton.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../util/mergeDeep.cjs');
 var Icon = require('../icon/Icon.cjs');
 var styles = require('./styles.cjs');
 
 function IconLinkButton({
-  variant = "emphasised-primary",
+  variant = "primary",
   size = "md",
   symbol,
   ariaLabel,
@@ -17,8 +17,8 @@ function IconLinkButton({
   ...props
 }) {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultIconLinkButtonTheme, theme);
-  const linkRef = react.useRef(null);
-  react.useEffect(() => {
+  const linkRef = React.useRef(null);
+  React.useEffect(() => {
     if (linkRef.current) {
       linkRef.current.title = ariaLabel;
     }

package/dist/components/icon-link-button/IconLinkButton.js

@@ -5,7 +5,7 @@ import { mergeDeep } from '../../util/mergeDeep.js';
 import { Icon } from '../icon/Icon.js';
 import { iconLinkButtonStyles, defaultIconLinkButtonTheme } from './styles.js';
 
-function IconLinkButton({ variant = "emphasised-primary", size = "md", symbol, ariaLabel, theme = {}, cssOverrides, ...props }) {
+function IconLinkButton({ variant = "primary", size = "md", symbol, ariaLabel, theme = {}, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultIconLinkButtonTheme, theme);
   const linkRef = useRef(null);
   useEffect(() => {

package/dist/components/link-button/LinkButton.cjs

@@ -7,7 +7,7 @@ var Icon = require('../icon/Icon.cjs');
 var styles = require('./styles.cjs');
 
 function LinkButton({
-  variant = "emphasised-primary",
+  variant = "primary",
   size = "md",
   theme = {},
   cssOverrides,

package/dist/components/link-button/LinkButton.js

@@ -4,7 +4,7 @@ import { mergeDeep } from '../../util/mergeDeep.js';
 import { Icon } from '../icon/Icon.js';
 import { linkButtonStyles, defaultLinkButtonTheme } from './styles.js';
 
-function LinkButton({ variant = "emphasised-primary", size = "md", theme = {}, cssOverrides, icon, ...props }) {
+function LinkButton({ variant = "primary", size = "md", theme = {}, cssOverrides, icon, ...props }) {
   const mergedTheme = mergeDeep(defaultLinkButtonTheme, theme);
   const iconSize = size === "xs" ? "sm" : size;
   return jsx(Link, { ...props, css: [

package/dist/components/menu/Menu.cjs

@@ -0,0 +1,204 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var focus = require('@react-aria/focus');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var styles = require('./styles.cjs');
+var Icon = require('../icon/Icon.cjs');
+
+function Popover({
+  size = "md",
+  children,
+  theme = {},
+  cssOverrides,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultMenuPopoverTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Popover,
+    {
+      css: [styles.menuPopoverStyles(mergedTheme, { size }), cssOverrides],
+      ...props,
+      children
+    }
+  );
+}
+function MenuSeparator({
+  theme = {},
+  cssOverrides,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultMenuSeparatorTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Separator,
+    {
+      orientation: "horizontal",
+      css: [styles.menuSeparatorStyles(mergedTheme), cssOverrides],
+      ...props
+    }
+  );
+}
+function MenuToggle({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+}
+function MenuSection({
+  name,
+  size = "md",
+  theme = {},
+  cssOverrides,
+  children,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultMenuSectionTheme, theme);
+  const items = [];
+  React.Children.forEach(children, (child, i) => {
+    if (!React.isValidElement(child)) {
+      return;
+    }
+    if (child.type === MenuItem) {
+      items.push(
+        React.cloneElement(child, {
+          size,
+          key: `${child.key}-${i}`
+        })
+      );
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.MenuSection, { css: [cssOverrides], ...props, children: [
+    name && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Header, { css: styles.menuSectionHeaderStyles(mergedTheme, { size }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: name }) }),
+    items
+  ] });
+}
+function MenuItem({
+  label,
+  description,
+  aside,
+  icon,
+  size = "md",
+  theme = {},
+  cssOverrides,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultMenuItemTheme, theme);
+  const textValue = props.textValue ?? (typeof label === "string" ? label : void 0);
+  const { isFocusVisible, focusProps } = focus.useFocusRing();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.MenuItem,
+    {
+      ...focusProps,
+      css: [
+        styles.menuItemStyles(mergedTheme, { description }, isFocusVisible),
+        cssOverrides
+      ],
+      ...props,
+      textValue,
+      children: ({ isSelected, selectionMode }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon && selectionMode === "none" ? /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            size,
+            cssOverrides: styles.menuItemIconStyles(mergedTheme, { size }),
+            children: icon
+          }
+        ) : null,
+        isSelected && selectionMode === "multiple" ? /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            size,
+            symbol: "check_box",
+            cssOverrides: styles.menuItemIconStyles(mergedTheme, { size })
+          }
+        ) : null,
+        !isSelected && selectionMode === "multiple" ? /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            size,
+            symbol: "check_box_outline_blank",
+            cssOverrides: styles.menuItemIconStyles(mergedTheme, { size })
+          }
+        ) : null,
+        isSelected && selectionMode === "single" ? /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            size,
+            symbol: "radio_button_checked",
+            cssOverrides: styles.menuItemIconStyles(mergedTheme, { size })
+          }
+        ) : null,
+        !isSelected && selectionMode === "single" ? /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            size,
+            symbol: "radio_button_unchecked",
+            cssOverrides: styles.menuItemIconStyles(mergedTheme, { size })
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.menuItemLabelStyles(mergedTheme), children: label }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.menuItemDescriptionStyles(mergedTheme), children: description }),
+        aside && /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.menuItemAsideStyles(mergedTheme), children: aside })
+      ] })
+    }
+  );
+}
+function Menu({
+  theme = {},
+  size = "md",
+  popoverProps,
+  menuTriggerProps,
+  children,
+  cssOverrides,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultMenuTheme, theme);
+  let trigger = null;
+  const menu = [];
+  React.Children.forEach(children, (child, i) => {
+    if (!React.isValidElement(child)) {
+      return;
+    }
+    if (child.type === MenuToggle) {
+      trigger ?? (trigger = child);
+    } else if (child.type === MenuItem) {
+      menu.push(
+        React.cloneElement(child, {
+          size,
+          key: `${child.key}-${i}`
+        })
+      );
+    } else if (child.type === MenuSection) {
+      menu.push(
+        React.cloneElement(child, {
+          size,
+          key: `${child.key}-${i}`
+        })
+      );
+    } else if (child.type === MenuSeparator) {
+      menu.push(
+        React.cloneElement(child, {
+          key: `${child.key}-${i}`
+        })
+      );
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.MenuTrigger, { ...menuTriggerProps, children: [
+    trigger,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Popover,
+      {
+        containerPadding: 0,
+        placement: "bottom start",
+        size,
+        ...popoverProps,
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Menu, { css: [styles.menuStyles(mergedTheme), cssOverrides], ...props, children: menu })
+      }
+    )
+  ] });
+}
+
+exports.Menu = Menu;
+exports.MenuItem = MenuItem;
+exports.MenuSection = MenuSection;
+exports.MenuSeparator = MenuSeparator;
+exports.MenuToggle = MenuToggle;

package/dist/components/menu/Menu.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { useFocusRing } from '@react-aria/focus';
+import React from 'react';
+import { MenuTrigger, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, Header, Separator, Popover as Popover$1 } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { menuStyles, menuItemIconStyles, menuItemLabelStyles, menuItemDescriptionStyles, menuItemAsideStyles, menuItemStyles, menuSectionHeaderStyles, menuSeparatorStyles, defaultMenuPopoverTheme, menuPopoverStyles, defaultMenuSeparatorTheme, defaultMenuSectionTheme, defaultMenuItemTheme, defaultMenuTheme } from './styles.js';
+import { Icon } from '../icon/Icon.js';
+
+function Popover({ size = "md", children, theme = {}, cssOverrides, ...props }) {
+  const mergedTheme = mergeDeep(defaultMenuPopoverTheme, theme);
+  return jsx(Popover$1, { css: [menuPopoverStyles(mergedTheme, { size }), cssOverrides], ...props, children });
+}
+function MenuSeparator({ theme = {}, cssOverrides, ...props }) {
+  const mergedTheme = mergeDeep(defaultMenuSeparatorTheme, theme);
+  return jsx(Separator, { orientation: "horizontal", css: [menuSeparatorStyles(mergedTheme), cssOverrides], ...props });
+}
+function MenuToggle({ children }) {
+  return jsx(Fragment, { children });
+}
+function MenuSection({ name, size = "md", theme = {}, cssOverrides, children, ...props }) {
+  const mergedTheme = mergeDeep(defaultMenuSectionTheme, theme);
+  const items = [];
+  React.Children.forEach(children, (child, i) => {
+    if (!React.isValidElement(child)) {
+      return;
+    }
+    if (child.type === MenuItem) {
+      items.push(React.cloneElement(child, {
+        size,
+        key: `${child.key}-${i}`
+      }));
+    }
+  });
+  return jsxs(MenuSection$1, { css: [cssOverrides], ...props, children: [name && jsx(Header, { css: menuSectionHeaderStyles(mergedTheme, { size }), children: jsx("span", { children: name }) }), items] });
+}
+function MenuItem({ label, description, aside, icon, size = "md", theme = {}, cssOverrides, ...props }) {
+  const mergedTheme = mergeDeep(defaultMenuItemTheme, theme);
+  const textValue = props.textValue ?? (typeof label === "string" ? label : void 0);
+  const { isFocusVisible, focusProps } = useFocusRing();
+  return jsx(
+    MenuItem$1,
+    { ...focusProps, css: [
+      menuItemStyles(mergedTheme, { description }, isFocusVisible),
+      cssOverrides
+    ], ...props, textValue, children: ({ isSelected, selectionMode }) => jsxs(Fragment, { children: [icon && selectionMode === "none" ? jsx(Icon, { size, cssOverrides: menuItemIconStyles(mergedTheme, { size }), children: icon }) : null, isSelected && selectionMode === "multiple" ? jsx(Icon, { size, symbol: "check_box", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, !isSelected && selectionMode === "multiple" ? jsx(Icon, { size, symbol: "check_box_outline_blank", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, isSelected && selectionMode === "single" ? jsx(Icon, { size, symbol: "radio_button_checked", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, !isSelected && selectionMode === "single" ? jsx(Icon, { size, symbol: "radio_button_unchecked", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, jsx("div", { css: menuItemLabelStyles(mergedTheme), children: label }), description && jsx("div", { css: menuItemDescriptionStyles(mergedTheme), children: description }), aside && jsx("div", { css: menuItemAsideStyles(mergedTheme), children: aside })] }) }
+  );
+}
+function Menu({ theme = {}, size = "md", popoverProps, menuTriggerProps, children, cssOverrides, ...props }) {
+  const mergedTheme = mergeDeep(defaultMenuTheme, theme);
+  let trigger = null;
+  const menu = [];
+  React.Children.forEach(children, (child, i) => {
+    if (!React.isValidElement(child)) {
+      return;
+    }
+    if (child.type === MenuToggle) {
+      trigger ?? (trigger = child);
+    } else if (child.type === MenuItem) {
+      menu.push(React.cloneElement(child, {
+        size,
+        key: `${child.key}-${i}`
+      }));
+    } else if (child.type === MenuSection) {
+      menu.push(React.cloneElement(child, {
+        size,
+        key: `${child.key}-${i}`
+      }));
+    } else if (child.type === MenuSeparator) {
+      menu.push(React.cloneElement(child, {
+        key: `${child.key}-${i}`
+      }));
+    }
+  });
+  return jsxs(MenuTrigger, { ...menuTriggerProps, children: [trigger, jsx(Popover, { containerPadding: 0, placement: "bottom start", size, ...popoverProps, children: jsx(Menu$1, { css: [menuStyles(mergedTheme), cssOverrides], ...props, children: menu }) })] });
+}
+
+export { Menu, MenuItem, MenuSection, MenuSeparator, MenuToggle };