@guardian/stand 0.0.15 → 0.0.16

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/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,7 +1,7 @@
 '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');
@@ -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-link-button/IconLinkButton.cjs

@@ -1,7 +1,7 @@
 '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');
@@ -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/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 };

package/dist/components/menu/styles.cjs

@@ -0,0 +1,103 @@
+'use strict';
+
+var react = require('@emotion/react');
+var menu = require('../../styleD/build/typescript/component/menu.cjs');
+var typography = require('../../styleD/utils/semantic/typography.cjs');
+
+const defaultMenuTheme = menu.componentMenu.menu;
+const menuStyles = (theme) => react.css`
+	display: ${theme.shared.display};
+	flex-direction: ${theme.shared["flex-direction"]};
+	border: ${theme.shared.border};
+	background: ${theme.shared["background-color"]};
+`;
+const defaultMenuSectionTheme = menu.componentMenu.menuSection;
+const menuSectionHeaderStyles = (theme, { size }) => react.css`
+	display: ${theme.header.shared.display};
+	align-items: ${theme.header.shared["align-items"]};
+	padding: ${theme.header.shared.padding.top}
+		${theme.header.shared.padding.right} ${theme.header.shared.padding.bottom}
+		${theme.header.shared.padding.left};
+	height: ${theme.header[size].height};
+	background: ${theme.header.shared["background-color"]};
+	color: ${theme.header.shared.color};
+	${typography.convertTypographyToEmotionStringStyle(theme.header[size].typography)}
+`;
+const defaultMenuItemTheme = menu.componentMenu.menuItem;
+const menuItemStyles = (theme, { description }, isFocusVisible = false) => react.css`
+	display: ${theme.shared.display};
+	grid-template-columns: ${theme.shared["grid-template-columns"]};
+	grid-template-areas: ${description ? theme.shared["grid-template-areas-with-description"] : theme.shared["grid-template-areas"]};
+	gap: ${theme.shared.gap};
+	align-items: ${theme.shared["align-items"]};
+	padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+		${theme.shared.padding.bottom} ${theme.shared.padding.left};
+	border-bottom: ${theme.shared["border-bottom"]};
+	&:last-child {
+		border-bottom: ${theme.shared[":last-child"]["border-bottom"]};
+	}
+	&[data-hovered],
+	&:hover {
+		background: ${theme.shared[":hover"]["background-color"]};
+	}
+	${isFocusVisible ? react.css`
+				outline: ${theme.shared[":focus-visible"]["outline"]};
+				outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+				background: ${theme.shared[":hover"]["background-color"]};
+			` : react.css`
+				outline: none;
+			`}
+`;
+const menuItemIconStyles = (theme, { size }) => react.css`
+	grid-area: ${theme.shared.icon["grid-area"]};
+	align-self: ${theme.shared.icon["align-self"]};
+	color: ${theme.shared.icon.color};
+	/* Ensure the line-height matches the font line-height of the label for alignment */
+	line-height: ${theme[size].icon["line-height"]};
+`;
+const menuItemLabelStyles = (theme) => react.css`
+	grid-area: ${theme.shared.label["grid-area"]};
+	color: ${theme.shared.label.color};
+	${typography.convertTypographyToEmotionStringStyle(theme.shared.label.typography)}
+	)}
+`;
+const menuItemDescriptionStyles = (theme) => react.css`
+	grid-area: ${theme.shared.description["grid-area"]};
+	color: ${theme.shared.description.color};
+	${typography.convertTypographyToEmotionStringStyle(theme.shared.description.typography)}
+`;
+const menuItemAsideStyles = (theme) => react.css`
+	grid-area: ${theme.shared.aside["grid-area"]};
+	justify-self: ${theme.shared.aside["justify-self"]};
+	align-self: ${theme.shared.aside["align-self"]};
+	color: ${theme.shared.aside.color};
+	${typography.convertTypographyToEmotionStringStyle(theme.shared.aside.typography)}
+`;
+const defaultMenuSeparatorTheme = menu.componentMenu.menuSeparator;
+const menuSeparatorStyles = (theme) => react.css`
+	background-color: ${theme.shared["background-color"]};
+	height: ${theme.shared.height};
+	width: ${theme.shared.width};
+`;
+const defaultMenuPopoverTheme = menu.componentMenu.menuPopover;
+const menuPopoverStyles = (theme, { size }) => react.css`
+	overflow: ${theme.shared.overflow};
+	max-width: ${theme[size]["max-width"]};
+	width: ${theme[size].width};
+	box-shadow: ${theme.shared.shadow};
+`;
+
+exports.defaultMenuItemTheme = defaultMenuItemTheme;
+exports.defaultMenuPopoverTheme = defaultMenuPopoverTheme;
+exports.defaultMenuSectionTheme = defaultMenuSectionTheme;
+exports.defaultMenuSeparatorTheme = defaultMenuSeparatorTheme;
+exports.defaultMenuTheme = defaultMenuTheme;
+exports.menuItemAsideStyles = menuItemAsideStyles;
+exports.menuItemDescriptionStyles = menuItemDescriptionStyles;
+exports.menuItemIconStyles = menuItemIconStyles;
+exports.menuItemLabelStyles = menuItemLabelStyles;
+exports.menuItemStyles = menuItemStyles;
+exports.menuPopoverStyles = menuPopoverStyles;
+exports.menuSectionHeaderStyles = menuSectionHeaderStyles;
+exports.menuSeparatorStyles = menuSeparatorStyles;
+exports.menuStyles = menuStyles;