fix(menu): Fix MenuItem icon spacing (#2145)

Fixes: #2144

[category:Components]

Release Note:
Updated spacing between icon and text in our menus from `8px` to `16px` to match our design specs.

Co-authored-by: @mannycarrera4 <mannycarrera4@users.noreply.github.com>
Co-authored-by: manuel.carrera <manuel.carrera@workday.com>

modules/react/menu/lib/MenuItem.tsx

@@ -44,11 +44,10 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
   ({theme}) => {
     return {
       ...type.levels.subtext.large,
-      '& > *:not(style) ~ *:not(style)': {
-        marginLeft: space.xxs,
-      },
-      display: 'block',
+      display: 'grid',
+      alignItems: 'center',
       width: '100%',
+      gap: space.s,
       padding: `${space.xxs} ${space.s}`,
       boxSizing: 'border-box',
       cursor: 'pointer',
@@ -174,7 +173,7 @@ export const MenuItem = createSubcomponent('button')({
   modelHook: useMenuModel,
   elemPropsHook: useMenuItem,
   subComponents: {
-    Icon: SystemIcon,
+    Icon: styled(SystemIcon)({alignSelf: 'start'}),
     Text: styled('span')({flexGrow: 1, alignSelf: 'center'}),
   },
 })<MenuItemProps>(({children, ...elemProps}, Element) => {