@pingux/astro 2.163.1-alpha.2 → 2.163.1-alpha.3

package/lib/components/PopoverMenu/PopoverMenu.stories.js

@@ -1,10 +1,10 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
-import DotsVerticalIcon from '@pingux/mdi-react/DotsVerticalIcon';
 import { action } from '@storybook/addon-actions';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { useGetTheme } from '../../hooks';
 import { Icon, IconButton, Item, Menu, OverlayProvider, PopoverMenu, Section, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import PopoverMenuReadme from './PopoverMenu.mdx';
@@ -37,17 +37,20 @@ export default {
   }
 };
 export var Default = function Default(args) {
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx,
+    popoverMenuIcon = _useGetTheme.icons.popoverMenuIcon;
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, args, ___EmotionJSX(IconButton, {
       "aria-label": "more options",
-      variant: "inverted"
+      variant: isOnyx ? undefined : 'inverted'
     }, ___EmotionJSX(Icon, {
-      icon: DotsVerticalIcon,
+      icon: popoverMenuIcon,
       size: "md",
       title: {
-        name: 'Dots Vertical Icon'
+        name: 'Dots Icon'
       }
     })), ___EmotionJSX(Menu, {
       onAction: action('onAction')
@@ -59,7 +62,7 @@ export var Default = function Default(args) {
       key: "delete",
       textValue: "delete"
     }, ___EmotionJSX(Text, {
-      color: "critical.bright"
+      color: isOnyx ? 'critical.dark' : 'critical.bright'
     }, "Delete")))))
   );
 };
@@ -70,6 +73,9 @@ Default.parameters = {
   }
 };
 export var DefaultOpen = function DefaultOpen(args) {
+  var _useGetTheme2 = useGetTheme(),
+    isOnyx = _useGetTheme2.themeState.isOnyx,
+    popoverMenuIcon = _useGetTheme2.icons.popoverMenuIcon;
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
@@ -77,12 +83,12 @@ export var DefaultOpen = function DefaultOpen(args) {
       isDefaultOpen: true
     }), ___EmotionJSX(IconButton, {
       "aria-label": "more options",
-      variant: "inverted"
+      variant: isOnyx ? undefined : 'inverted'
     }, ___EmotionJSX(Icon, {
-      icon: DotsVerticalIcon,
+      icon: popoverMenuIcon,
       size: "md",
       title: {
-        name: 'Dots Vertical Icon'
+        name: 'Dots Icon'
       }
     })), ___EmotionJSX(Menu, {
       onAction: action('onAction'),
@@ -95,7 +101,7 @@ export var DefaultOpen = function DefaultOpen(args) {
       key: "delete",
       textValue: "delete"
     }, ___EmotionJSX(Text, {
-      color: "critical.bright"
+      color: isOnyx ? 'critical.dark' : 'critical.bright'
     }, "Delete")))))
   );
 };
@@ -104,6 +110,9 @@ export var Controlled = function Controlled() {
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  var _useGetTheme3 = useGetTheme(),
+    isOnyx = _useGetTheme3.themeState.isOnyx,
+    popoverMenuIcon = _useGetTheme3.icons.popoverMenuIcon;
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
@@ -112,12 +121,12 @@ export var Controlled = function Controlled() {
       onOpenChange: setIsOpen
     }, ___EmotionJSX(IconButton, {
       "aria-label": "more options",
-      variant: "inverted"
+      variant: isOnyx ? undefined : 'inverted'
     }, ___EmotionJSX(Icon, {
-      icon: DotsVerticalIcon,
+      icon: popoverMenuIcon,
       size: "md",
       title: {
-        name: 'Dots Vertical Icon'
+        name: 'Dots Icon'
       }
     })), ___EmotionJSX(Menu, {
       onAction: action('onAction')
@@ -129,11 +138,14 @@ export var Controlled = function Controlled() {
       key: "delete",
       textValue: "delete"
     }, ___EmotionJSX(Text, {
-      color: "critical.bright"
+      color: isOnyx ? 'critical.dark' : 'critical.bright'
     }, "Delete")))))
   );
 };
 export var Placement = function Placement(args) {
+  var _useGetTheme4 = useGetTheme(),
+    isOnyx = _useGetTheme4.themeState.isOnyx,
+    popoverMenuIcon = _useGetTheme4.icons.popoverMenuIcon;
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
@@ -141,12 +153,12 @@ export var Placement = function Placement(args) {
       direction: "left"
     }), ___EmotionJSX(IconButton, {
       "aria-label": "more options",
-      variant: "inverted"
+      variant: isOnyx ? undefined : 'inverted'
     }, ___EmotionJSX(Icon, {
-      icon: DotsVerticalIcon,
+      icon: popoverMenuIcon,
       size: "md",
       title: {
-        name: 'Dots Vertical Icon'
+        name: 'Dots Icon'
       }
     })), ___EmotionJSX(Menu, {
       onAction: action('onAction')
@@ -158,11 +170,14 @@ export var Placement = function Placement(args) {
       key: "delete",
       textValue: "delete"
     }, ___EmotionJSX(Text, {
-      color: "critical.bright"
+      color: isOnyx ? 'critical.dark' : 'critical.bright'
     }, "Delete")))))
   );
 };
 export var NotFlippable = function NotFlippable(args) {
+  var _useGetTheme5 = useGetTheme(),
+    isOnyx = _useGetTheme5.themeState.isOnyx,
+    popoverMenuIcon = _useGetTheme5.icons.popoverMenuIcon;
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
@@ -171,12 +186,12 @@ export var NotFlippable = function NotFlippable(args) {
       isNotFlippable: true
     }), ___EmotionJSX(IconButton, {
       "aria-label": "more options",
-      variant: "inverted"
+      variant: isOnyx ? undefined : 'inverted'
     }, ___EmotionJSX(Icon, {
-      icon: DotsVerticalIcon,
+      icon: popoverMenuIcon,
       size: "md",
       title: {
-        name: 'Dots Vertical Icon'
+        name: 'Dots Icon'
       }
     })), ___EmotionJSX(Menu, {
       onAction: action('onAction')
@@ -188,11 +203,14 @@ export var NotFlippable = function NotFlippable(args) {
       key: "delete",
       textValue: "delete"
     }, ___EmotionJSX(Text, {
-      color: "critical.bright"
+      color: isOnyx ? 'critical.dark' : 'critical.bright'
     }, "Delete")))))
   );
 };
 export var NotClosedOnSelect = function NotClosedOnSelect(args) {
+  var _useGetTheme6 = useGetTheme(),
+    isOnyx = _useGetTheme6.themeState.isOnyx,
+    popoverMenuIcon = _useGetTheme6.icons.popoverMenuIcon;
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
@@ -200,12 +218,12 @@ export var NotClosedOnSelect = function NotClosedOnSelect(args) {
       isNotClosedOnSelect: true
     }), ___EmotionJSX(IconButton, {
       "aria-label": "more options",
-      variant: "inverted"
+      variant: isOnyx ? undefined : 'inverted'
     }, ___EmotionJSX(Icon, {
-      icon: DotsVerticalIcon,
+      icon: popoverMenuIcon,
       size: "md",
       title: {
-        name: 'Dots Vertical Icon'
+        name: 'Dots Icon'
       }
     })), ___EmotionJSX(Menu, {
       onAction: action('onAction')
@@ -217,22 +235,25 @@ export var NotClosedOnSelect = function NotClosedOnSelect(args) {
       key: "delete",
       textValue: "delete"
     }, ___EmotionJSX(Text, {
-      color: "critical.bright"
+      color: isOnyx ? 'critical.dark' : 'critical.bright'
     }, "Delete")))))
   );
 };
 export var WithSeparator = function WithSeparator(args) {
+  var _useGetTheme7 = useGetTheme(),
+    isOnyx = _useGetTheme7.themeState.isOnyx,
+    popoverMenuIcon = _useGetTheme7.icons.popoverMenuIcon;
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, args, ___EmotionJSX(IconButton, {
       "aria-label": "more options",
-      variant: "inverted"
+      variant: isOnyx ? undefined : 'inverted'
     }, ___EmotionJSX(Icon, {
-      icon: DotsVerticalIcon,
+      icon: popoverMenuIcon,
       size: "md",
       title: {
-        name: 'Dots Vertical Icon'
+        name: 'Dots Icon'
       }
     })), ___EmotionJSX(Menu, {
       onAction: action('onAction'),
@@ -245,22 +266,25 @@ export var WithSeparator = function WithSeparator(args) {
       key: "delete",
       textValue: "delete"
     }, ___EmotionJSX(Text, {
-      color: "critical.bright"
+      color: isOnyx ? 'critical.dark' : 'critical.bright'
     }, "Delete"))))))
   );
 };
 export var WithSections = function WithSections(args) {
+  var _useGetTheme8 = useGetTheme(),
+    isOnyx = _useGetTheme8.themeState.isOnyx,
+    popoverMenuIcon = _useGetTheme8.icons.popoverMenuIcon;
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, args, ___EmotionJSX(IconButton, {
       "aria-label": "more options",
-      variant: "inverted"
+      variant: isOnyx ? undefined : 'inverted'
     }, ___EmotionJSX(Icon, {
-      icon: DotsVerticalIcon,
+      icon: popoverMenuIcon,
       size: "md",
       title: {
-        name: 'Dots Vertical Icon'
+        name: 'Dots Icon'
       }
     })), ___EmotionJSX(Menu, {
       onAction: action('onAction'),
@@ -283,7 +307,7 @@ export var WithSections = function WithSections(args) {
       key: "delete",
       textValue: "delete"
     }, ___EmotionJSX(Text, {
-      color: "critical.bright"
+      color: isOnyx ? 'critical.dark' : 'critical.bright'
     }, "Delete"))))))
   );
 };

package/lib/styles/themeOverrides/nextGenDarkMode/colors.js

@@ -154,5 +154,8 @@ export var colors = _objectSpread(_objectSpread({
   font: font,
   badge: badge,
   codeEditor: codeEditor,
+  critical: {
+    dark: nextGenColors['red-100']
+  },
   common: common
 });

package/lib/styles/themeOverrides/nextGenDarkMode/variants/menu.js

@@ -1,20 +1,33 @@
 export var menuItem = {
   item: {
     bg: 'transparent',
-    padding: '10px 10px',
+    padding: '12px 12px',
     outline: 'none',
     color: 'gray-400',
     cursor: 'pointer',
-    '&.is-focused, &.is-selected, &.is-pressed': {
-      bg: 'gray-800',
-      color: 'text.primary',
+    '&.is-hovered': {
+      bg: '#2C323A',
+      color: 'gray-200',
+      '> *': {
+        color: 'gray-200'
+      }
+    },
+    '&.is-focused': {
+      bg: '#2C323A',
+      color: 'gray-200',
+      outline: '1px solid',
+      outlineOffset: '1px',
+      outlineColor: 'primary',
       '> *': {
-        color: 'text.primary'
+        color: 'gray-200'
       }
     },
-    '&.is-pressed': {
+    '&.is-selected, &.is-pressed': {
       color: 'text.secondary',
-      bg: 'gray-800'
+      bg: 'gray-800',
+      '> *': {
+        color: 'gray-200'
+      }
     }
   },
   separator: {

package/lib/styles/themes/astro/customProperties/icons.js

@@ -40,4 +40,4 @@ import WebIcon from '@pingux/mdi-react/WebIcon';
 import { pingLogoHorizontalSmallWhite } from '../../../../utils/devUtils/constants/logos';
 import statuses, { statusIcon } from '../../../../utils/devUtils/constants/statuses';
 import { Aic, Credentials, DaVinci, PamIcon, Protect, Verify } from './navBarIcons';
-export default (_statuses$DEFAULT$sta = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, statuses.DEFAULT, InformationIcon), statuses.ERROR, AlertCircleIcon), statuses.SUCCESS, CheckCircleIcon), statuses.WARNING, AlertIcon), statusIcon.CRITICAL, AlertCircleOutlineIcon), statusIcon.FATAL, CloseOctagonOutlineIcon), statusIcon.INFO, InformationOutlineIcon), statusIcon.MAJOR, ArrowUpIcon), statusIcon.MINOR, ArrowDownIcon), statusIcon.WARNING_NEUTRAL, WarningIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "aic", Aic), "applicationsIcon", ApplicationOutlineIcon), "Ascending", MenuUp), "authenticationIcon", CheckCircleOutlineIcon), "clipboard", Clipboard), "CreateIcon", CreateIcon), "daVinci", DaVinci), "DefaultCircle", DefaultCircle), "Descending", MenuDown), "ErrorCircle", AlertCircleIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "integrationsIcon", ConnectionIcon), "listViewMenu", MoreVertIcon), "mdiAccountCog", mdiAccountCog), "mdiAccountMultiple", AccountMultiple), "mdiEarth", Earth), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", Fingerprint), "mdiPlayCircleIcon", PlayCircle), "mdiScaleBalance", ScaleBalance), "mdiShoCard", Credentials), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", ViewDashboard), "mdiWeb", GlobeIcon), "MenuDown", MenuDown), "MenuUp", MenuUp), "monitoringIcon", PulseIcon), "openInNew", OpenInNew), "overviewIcon", WebIcon), "p1verify", Verify), "pam", PamIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "PingAuthorize", KeyChainVariant), "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), "protect", Protect), "rocketLaunchIcon", RocketLaunchIcon), "shareFeedbackIcon", ChatIcon), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", CheckCircleIcon), "userExperienceIcon", MonitorScreenshotIcon), "WarningIcon", WarningIcon));
+export default (_statuses$DEFAULT$sta = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, statuses.DEFAULT, InformationIcon), statuses.ERROR, AlertCircleIcon), statuses.SUCCESS, CheckCircleIcon), statuses.WARNING, AlertIcon), statusIcon.CRITICAL, AlertCircleOutlineIcon), statusIcon.FATAL, CloseOctagonOutlineIcon), statusIcon.INFO, InformationOutlineIcon), statusIcon.MAJOR, ArrowUpIcon), statusIcon.MINOR, ArrowDownIcon), statusIcon.WARNING_NEUTRAL, WarningIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "aic", Aic), "applicationsIcon", ApplicationOutlineIcon), "Ascending", MenuUp), "authenticationIcon", CheckCircleOutlineIcon), "clipboard", Clipboard), "CreateIcon", CreateIcon), "daVinci", DaVinci), "DefaultCircle", DefaultCircle), "Descending", MenuDown), "popoverMenuIcon", MoreVertIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "ErrorCircle", AlertCircleIcon), "integrationsIcon", ConnectionIcon), "listViewMenu", MoreVertIcon), "mdiAccountCog", mdiAccountCog), "mdiAccountMultiple", AccountMultiple), "mdiEarth", Earth), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", Fingerprint), "mdiPlayCircleIcon", PlayCircle), "mdiScaleBalance", ScaleBalance), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "mdiShoCard", Credentials), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", ViewDashboard), "mdiWeb", GlobeIcon), "MenuDown", MenuDown), "MenuUp", MenuUp), "monitoringIcon", PulseIcon), "openInNew", OpenInNew), "overviewIcon", WebIcon), "p1verify", Verify), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "pam", PamIcon), "PingAuthorize", KeyChainVariant), "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), "protect", Protect), "rocketLaunchIcon", RocketLaunchIcon), "shareFeedbackIcon", ChatIcon), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", CheckCircleIcon), "userExperienceIcon", MonitorScreenshotIcon), "WarningIcon", WarningIcon));

package/lib/styles/themes/next-gen/customProperties/icons.js

@@ -39,5 +39,5 @@ import WidgetsOutlineIcon from '@pingux/mdi-react/WidgetsOutlineIcon';
 import { pingLogoHorizontalSmall } from '../../../../utils/devUtils/constants/logos';
 import statuses, { statusIcon } from '../../../../utils/devUtils/constants/statuses';
 import { Aic, PamIcon, Protect } from '../../astro/customProperties/navBarIcons';
-var icons = (_icons = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, statuses.DEFAULT, InformationOutlineIcon), statuses.ERROR, AlertCircleOutlineIcon), statuses.SUCCESS, CheckCircleOutlineIcon), statuses.WARNING, AlertOutlineIcon), statusIcon.CRITICAL, AlertCircleOutlineIcon), statusIcon.FATAL, CloseOctagonOutlineIcon), statusIcon.INFO, InformationOutlineIcon), statusIcon.MAJOR, ArrowUpIcon), statusIcon.MINOR, ArrowDownIcon), statusIcon.WARNING_NEUTRAL, AlertOutlineIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "aic", Aic), "applicationsIcon", AppsIcon), "Ascending", ArrowUpIcon), "authenticationIcon", CheckCircleOutlineIcon), "clipboard", Clipboard), "CreateIcon", CreateOutlineIcon), "daVinci", FileTreeIcon), "DefaultCircle", DefaultCircle), "Descending", ArrowDownIcon), "ErrorCircle", AlertCircleOutlineIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "integrationsIcon", WidgetsOutlineIcon), "listViewMenu", DotsHorizontalIcon), "mdiAccountCog", mdiAccountCog), "mdiAccountMultiple", AccountMultipleOutlineIcon), "mdiEarth", Settings), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", Fingerprint), "mdiPlayCircleIcon", PlayCircleOutline), "mdiScaleBalance", ScaleBalance), "mdiShoCard", CardAccountDetailsOutlineIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", ViewDashboard), "mdiWeb", GlobeIcon), "MenuDown", ChevronDownIcon), "MenuUp", ChevronUpIcon), "monitoringIcon", ShowChartIcon), "openInNew", OpenInNew), "overviewIcon", DashboardIcon), "p1verify", AccountCheckIcon), "pam", PamIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "PingAuthorize", KeyOutline), "pingLogoHorizontalSmall", pingLogoHorizontalSmall), "protect", Protect), "rocketLaunchIcon", RocketLaunchIcon), "shareFeedbackIcon", ChatIcon), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", CheckCircleOutlineIcon), "userExperienceIcon", PaletteOutlineIcon), "WarningIcon", AlertOutlineIcon));
+var icons = (_icons = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, statuses.DEFAULT, InformationOutlineIcon), statuses.ERROR, AlertCircleOutlineIcon), statuses.SUCCESS, CheckCircleOutlineIcon), statuses.WARNING, AlertOutlineIcon), statusIcon.CRITICAL, AlertCircleOutlineIcon), statusIcon.FATAL, CloseOctagonOutlineIcon), statusIcon.INFO, InformationOutlineIcon), statusIcon.MAJOR, ArrowUpIcon), statusIcon.MINOR, ArrowDownIcon), statusIcon.WARNING_NEUTRAL, AlertOutlineIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "aic", Aic), "applicationsIcon", AppsIcon), "Ascending", ArrowUpIcon), "authenticationIcon", CheckCircleOutlineIcon), "clipboard", Clipboard), "CreateIcon", CreateOutlineIcon), "daVinci", FileTreeIcon), "DefaultCircle", DefaultCircle), "Descending", ArrowDownIcon), "popoverMenuIcon", DotsHorizontalIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "ErrorCircle", AlertCircleOutlineIcon), "integrationsIcon", WidgetsOutlineIcon), "listViewMenu", DotsHorizontalIcon), "mdiAccountCog", mdiAccountCog), "mdiAccountMultiple", AccountMultipleOutlineIcon), "mdiEarth", Settings), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", Fingerprint), "mdiPlayCircleIcon", PlayCircleOutline), "mdiScaleBalance", ScaleBalance), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "mdiShoCard", CardAccountDetailsOutlineIcon), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", ViewDashboard), "mdiWeb", GlobeIcon), "MenuDown", ChevronDownIcon), "MenuUp", ChevronUpIcon), "monitoringIcon", ShowChartIcon), "openInNew", OpenInNew), "overviewIcon", DashboardIcon), "p1verify", AccountCheckIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "pam", PamIcon), "PingAuthorize", KeyOutline), "pingLogoHorizontalSmall", pingLogoHorizontalSmall), "protect", Protect), "rocketLaunchIcon", RocketLaunchIcon), "shareFeedbackIcon", ChatIcon), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", CheckCircleOutlineIcon), "userExperienceIcon", PaletteOutlineIcon), "WarningIcon", AlertOutlineIcon));
 export default icons;

package/lib/styles/themes/next-gen/variants/menu.js

@@ -3,23 +3,53 @@ export var menu = {
   border: '1px solid',
   borderColor: 'border.base'
 };
+export var menuSection = {
+  sectionTitle: {
+    fontWeight: '1',
+    fontSize: 'tiny',
+    lineHeight: 'md',
+    textTransform: 'uppercase',
+    letterSpacing: '1px',
+    height: 'unset',
+    py: 'sm',
+    px: '12px',
+    color: 'font.light',
+    ml: 0
+  }
+};
 export var menuItem = {
   item: {
     bg: 'transparent',
-    padding: '10px 10px',
+    padding: '12px 12px',
     outline: 'none',
-    color: 'text.primary',
+    color: 'gray-700',
+    fontSize: 'md',
+    lineHeight: 'body',
     cursor: 'pointer',
-    '&.is-focused, &.is-selected, &.is-pressed': {
+    borderRadius: '4px',
+    '&.is-hovered': {
+      bg: 'gray-100',
+      color: '#121518',
+      '> *': {
+        color: '#121518'
+      }
+    },
+    '&.is-focused': {
       bg: 'gray-100',
-      color: 'text.primary',
+      color: '#121518',
+      outline: '1px solid',
+      outlineOffset: '1px',
+      outlineColor: 'primary',
       '> *': {
-        color: 'text.primary'
+        color: '#121518'
       }
     },
-    '&.is-pressed': {
-      color: 'text.primary',
-      bg: 'lightblue'
+    '&.is-pressed, &.is-selected': {
+      bg: 'lightblue',
+      color: '#121518',
+      '> *': {
+        color: '#121518'
+      }
     }
   },
   separator: {

package/lib/styles/themes/next-gen/variants/popoverMenu.js

@@ -1,4 +1,5 @@
 var container = {
+  minWidth: '150px',
   transition: 'opacity 200ms ease',
   '&.animate': {
     opacity: 0

package/lib/styles/themes/next-gen/variants/variants.js

@@ -21,7 +21,7 @@ import { dataTable } from './dataTable';
 import { footer } from './footer';
 import iconWrapper from './iconWrapper';
 import { listView, listViewItem, lisViewItemChart } from './listview';
-import { menu, menuItem } from './menu';
+import { menu, menuItem, menuSection } from './menu';
 import { message } from './messages';
 import { navBar } from './navbar';
 import panelHeader from './panelHeader';
@@ -419,6 +419,7 @@ export default {
   loader: loader,
   menu: menu,
   menuItem: menuItem,
+  menuSection: menuSection,
   menuTab: menuTab,
   message: message,
   modal: modal,