@moderneinc/design-system-components 7.1.0-next.b16a41 → 7.1.0

package/dist/index.js

@@ -1806,7 +1806,7 @@ const StyledMenuItem = styles.styled(MenuItem)(({ theme }) => ({
     borderRadius: 0,
     color: designSystemTokens.semanticColors.color.icon.default,
     textDecoration: 'none',
-    fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.default),
+    fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.caption),
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     lineHeight: '20px',
     transition: theme.transitions.create(['background-color'], {
@@ -1826,6 +1826,7 @@ const StyledMenuItem = styles.styled(MenuItem)(({ theme }) => ({
     },
     [`&.${MenuItem.menuItemClasses.focusVisible}`]: {
         backgroundColor: designSystemTokens.semanticColors.color.surface.rowHover,
+        outline: 'none',
     },
 }));
 const MenuItemContent = styles.styled('div')({
@@ -1903,7 +1904,11 @@ function ModMenuItem({ icon, shortcut, secondaryText, children, component, href,
     // root is `button` (as of @mui/material 9.2) — so an `href` on the default root lands as
     // an attribute on the `<li>` and never navigates (#722). Root at an anchor instead,
     // unless the caller named a component (e.g. a router link) themselves.
-    const rootProps = { ...rest, href, component: component ?? (href ? 'a' : undefined) };
+    const rootProps = {
+        ...rest,
+        href,
+        component: component ?? (href ? 'a' : undefined),
+    };
     return (jsxRuntime.jsx(StyledMenuItem, { ...rootProps, children: jsxRuntime.jsxs(MenuItemContent, { children: [icon && jsxRuntime.jsx(IconWrapper$1, { children: icon }), jsxRuntime.jsxs(LabelContainer$3, { children: [jsxRuntime.jsx(Label$3, { children: children }), secondaryText && jsxRuntime.jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsxRuntime.jsx(Shortcut, { children: shortcut })] }) }));
 }
 ModMenuItem.displayName = 'ModMenuItem';