@pingux/astro 2.193.0-alpha.0 → 2.193.1-alpha.0

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -30,10 +30,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
-var _ArrowDropDownIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowDropDownIcon"));
-var _ArrowDropUpIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowDropUpIcon"));
 var _ChevronRightIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronRightIcon"));
-var _HomeIcon = _interopRequireDefault(require("@pingux/mdi-react/HomeIcon"));
 var _i18n = require("@react-aria/i18n");
 var _visuallyHidden = require("@react-aria/visually-hidden");
 var _list = require("@react-stately/list");
@@ -71,6 +68,11 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     searchProps = props.searchProps,
     selectedItem = props.selectedItem,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    icons = _useGetTheme.icons;
+  var MenuDown = icons.MenuDown,
+    MenuUp = icons.MenuUp,
+    HomeIcon = icons.HomeIcon;
   var optionsNumberMessageId = (0, _react.useMemo)(function () {
     return (0, _uuid.v4)();
   }, []);
@@ -256,10 +258,12 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     "aria-label": setAriaLabel(selectedItem),
     "data-id": breadCrumbDataIds.environmentButton
   }), selectedItem, (0, _react2.jsx)(_index.Icon, {
-    icon: popoverState.isOpen ? _ArrowDropUpIcon["default"] : _ArrowDropDownIcon["default"],
+    icon: popoverState.isOpen ? MenuUp : MenuDown,
     title: {
       name: popoverState.isOpen ? 'Arrow Drop Up Icon' : 'Arrow Drop Down Icon'
-    }
+    },
+    size: "xs",
+    ml: "xs"
   })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, (0, _reactAria.mergeProps)(overlayProps, positionProps, popoverProps), {
     ref: overlayRef,
     isOpen: popoverState.isOpen,
@@ -307,8 +311,8 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     ref: breadcrumbsRef,
     onAction: handleOnAction,
     iconProps: {
-      color: 'neutral.70',
-      mx: 5,
+      color: 'font.base',
+      mx: 3,
       size: 'xs',
       icon: _ChevronRightIcon["default"]
     }
@@ -320,11 +324,12 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     "data-id": breadCrumbDataIds.orgButton,
     elementType: "Button"
   }, (0, _react2.jsx)(_index.Icon, {
-    icon: _HomeIcon["default"],
+    icon: HomeIcon,
     mr: 7,
     title: {
       name: 'Home Icon'
-    }
+    },
+    size: "sm"
   }), name), selectedItem && (0, _react2.jsx)(_index.Item, {
     key: "itemsSelect",
     elementType: "Fragment"

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -125,9 +125,11 @@ var Default = exports.Default = function Default(args) {
   }, (0, _react2.jsx)(_index.Text, {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
-    label: "SANDBOX",
+    label: "Sandbox",
     variant: "environmentBadge",
-    bg: "neutral.40"
+    bg: "environmentBadge.background",
+    textColor: "magenta",
+    align: "right"
   }) : null);
   var findEnvObj = function findEnvObj(envName) {
     return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref) {
@@ -151,9 +153,10 @@ var Default = exports.Default = function Default(args) {
       key: name,
       textValue: name
     }, name, isSandbox ? (0, _react2.jsx)(_index.Badge, {
-      label: "SANDBOX",
+      label: "Sandbox",
       variant: "environmentBadge",
-      bg: "neutral.40",
+      bg: "environmentBadge.background",
+      textColor: "environmentBadge.text",
       align: "right"
     }) : null);
   });
@@ -236,9 +239,11 @@ var WithSections = exports.WithSections = function WithSections() {
   }, (0, _react2.jsx)(_index.Text, {
     color: "inherit"
   }, selectedEnvironment === null || selectedEnvironment === void 0 ? void 0 : selectedEnvironment.name), selectedEnvironment !== null && selectedEnvironment !== void 0 && selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
-    label: "SANDBOX",
+    label: "Sandbox",
     variant: "environmentBadge",
-    bg: "neutral.40"
+    bg: "environmentBadge.background",
+    textColor: "environmentBadge.text",
+    align: "right"
   }) : null);
   return (0, _react2.jsx)(_index.EnvironmentBreadcrumb, {
     items: environments,
@@ -268,9 +273,10 @@ var WithSections = exports.WithSections = function WithSections() {
       }, (0, _react2.jsx)(_index.Box, {
         isRow: true
       }, itemName, isSandbox ? (0, _react2.jsx)(_index.Badge, {
-        label: "SANDBOX",
+        label: "Sandbox",
         variant: "environmentBadge",
-        bg: "neutral.40",
+        bg: "environmentBadge.background",
+        textColor: "environmentBadge.text",
         align: "right"
       }) : null));
     });
@@ -292,9 +298,10 @@ var DefaultOpen = exports.DefaultOpen = function DefaultOpen() {
   }, (0, _react2.jsx)(_index.Text, {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
-    label: "SANDBOX",
+    label: "Sandbox",
     variant: "environmentBadge",
-    bg: "neutral.40"
+    bg: "environmentBadge.background",
+    textColor: "environmentBadge.text"
   }) : null);
   var findEnvObj = function findEnvObj(envName) {
     return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref5) {
@@ -319,10 +326,10 @@ var DefaultOpen = exports.DefaultOpen = function DefaultOpen() {
       key: name,
       textValue: name
     }, name, isSandbox ? (0, _react2.jsx)(_index.Badge, {
-      label: "SANDBOX",
+      label: "Sandbox",
       variant: "environmentBadge",
-      bg: "neutral.40",
-      align: "right"
+      bg: "environmentBadge.background",
+      textColor: "environmentBadge.text"
     }) : null);
   });
 };
@@ -341,9 +348,10 @@ var ControlledMenu = exports.ControlledMenu = function ControlledMenu() {
   }, (0, _react2.jsx)(_index.Text, {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
-    label: "SANDBOX",
+    label: "Sandbox",
     variant: "environmentBadge",
-    bg: "neutral.40"
+    bg: "environmentBadge.background",
+    textColor: "environmentBadge.text"
   }) : null);
   var findEnvObj = function findEnvObj(envName) {
     return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref7) {
@@ -369,10 +377,10 @@ var ControlledMenu = exports.ControlledMenu = function ControlledMenu() {
       key: name,
       textValue: name
     }, name, isSandbox ? (0, _react2.jsx)(_index.Badge, {
-      label: "SANDBOX",
+      label: "Sandbox",
       variant: "environmentBadge",
-      bg: "neutral.40",
-      align: "right"
+      bg: "environmentBadge.background",
+      textColor: "environmentBadge.text"
     }) : null);
   });
 };

package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts

@@ -49,6 +49,7 @@ declare const useGetTheme: () => {
         p1verify: (props: any) => import("react/jsx-runtime").JSX.Element;
         pam: (props: any) => import("react/jsx-runtime").JSX.Element;
         PingAuthorize: import("@pingux/mdi-react").MdiReactIconComponentType;
+        HomeIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
         pingLogoHorizontalSmall: import("react/jsx-runtime").JSX.Element;
         protect: (props: any) => import("react/jsx-runtime").JSX.Element;
         rocketLaunchIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
@@ -119,6 +120,7 @@ declare const useGetTheme: () => {
         Descending: string;
         popoverMenuIcon: string;
         ErrorCircle: string;
+        HomeIcon: string;
         integrationsIcon: string;
         listViewMenu: string;
         mdiAccountCog: string;

package/lib/cjs/styles/colors.d.ts

@@ -214,6 +214,10 @@ declare const allColors: {
         track: string;
     };
     tooltip: string;
+    environmentBadge: {
+        text: string;
+        background: string;
+    };
 };
 export default allColors;
 export declare const flatColorList: any;
@@ -333,4 +337,8 @@ export declare const getBaseHexColor: (colorName: string) => string | {
         track: string;
     };
     tooltip: string;
+    environmentBadge: {
+        text: string;
+        background: string;
+    };
 };

package/lib/cjs/styles/colors.js

@@ -139,6 +139,10 @@ var tooltip = accent[20];
 var border = {
   hairline: '#E7EEF4'
 };
+var environmentBadge = {
+  text: badge.textColor,
+  background: neutral[40]
+};
 var allColors = {
   black: black,
   background: background,
@@ -161,7 +165,8 @@ var allColors = {
   button: button,
   warning: warning,
   slider: slider,
-  tooltip: tooltip
+  tooltip: tooltip,
+  environmentBadge: environmentBadge
 };
 var _default = exports["default"] = allColors;
 function flattenColors(obj) {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.d.ts

@@ -71,6 +71,10 @@ export declare const colors: {
         message: string;
         fieldHelper: any;
     };
+    environmentBadge: {
+        text: string;
+        background: any;
+    };
     background: {
         base: any;
         secondary: string;

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

@@ -49,6 +49,10 @@ var background = {
   card: '#1a1e22',
   hover: hoverDark
 };
+var environmentBadge = {
+  text: 'black',
+  background: _onyxTokens.astroTokensDark.color.blue[500]
+};
 var twoTone = {
   bg: {
     orange: _onyxTokens.astroTokensDark.color.orange[500],
@@ -152,6 +156,7 @@ var colors = exports.colors = _objectSpread(_objectSpread({
     message: 'white',
     fieldHelper: _onyxTokens.astroTokensDark.color.gray[400]
   },
+  environmentBadge: environmentBadge,
   background: background,
   backgroundBase: backgroundBase,
   backgroundSecondary: backgroundSecondary,

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/icons.d.ts

@@ -11,6 +11,7 @@ declare const _default: {
     Descending: string;
     popoverMenuIcon: string;
     ErrorCircle: string;
+    HomeIcon: string;
     integrationsIcon: string;
     listViewMenu: string;
     mdiAccountCog: string;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts

@@ -14,6 +14,7 @@ export declare const nextGenDarkThemeValues: {
         Descending: string;
         popoverMenuIcon: string;
         ErrorCircle: string;
+        HomeIcon: string;
         integrationsIcon: string;
         listViewMenu: string;
         mdiAccountCog: string;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -443,6 +443,17 @@ declare const _default: {
             };
             '&.is-focus-visible': {
                 zIndex: number;
+                outline: string;
+                outlineOffset: string;
+                boxShadow: string;
+            };
+        };
+    };
+    environmentBreadcrumb: {
+        button: {
+            current: {
+                color: any;
+                fontWeight: number;
             };
         };
     };
@@ -588,6 +599,8 @@ declare const _default: {
     popoverMenu: {
         container: {
             background: string;
+            border: string;
+            borderColor: string;
         };
     };
     dataTable: {

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

@@ -46,7 +46,10 @@ var listBox = {
       }
     },
     '&.is-focus-visible': {
-      zIndex: 1
+      zIndex: 1,
+      outline: '1px solid #ffffff',
+      outlineOffset: '-1px',
+      boxShadow: "inset 0 0 0 2px ".concat(_onyxTokens.astroTokensDark.color.blue[500])
     }
   }
 };
@@ -186,6 +189,14 @@ var statusIcon = {
     }
   }
 };
+var environmentBreadcrumb = {
+  button: {
+    current: {
+      color: _onyxTokens.astroTokensDark.color.gray[100],
+      fontWeight: 2
+    }
+  }
+};
 var _default = exports["default"] = {
   rockerButton: rockerButton,
   rangeCalendar: _rangeCalendar["default"],
@@ -199,6 +210,7 @@ var _default = exports["default"] = {
   lisViewItemChart: _listview.lisViewItemChart,
   navBar: _navbar.navBar,
   listBox: listBox,
+  environmentBreadcrumb: environmentBreadcrumb,
   modal: modal,
   tab: tab,
   iconBadge: _iconBadge["default"],
@@ -208,7 +220,9 @@ var _default = exports["default"] = {
   tooltip: tooltip,
   popoverMenu: {
     container: {
-      background: '#23282e'
+      background: '#23282e',
+      border: '1px solid',
+      borderColor: '#39414B'
     }
   },
   dataTable: {

package/lib/cjs/styles/themeOverrides/onyxSideNav.d.ts

@@ -291,6 +291,7 @@ declare const _default: {
         Descending: string;
         popoverMenuIcon: string;
         ErrorCircle: string;
+        HomeIcon: string;
         integrationsIcon: string;
         listViewMenu: string;
         mdiAccountCog: string;

package/lib/cjs/styles/themes/astro/customProperties/icons.d.ts

@@ -32,6 +32,7 @@ declare const _default: {
     p1verify: (props: any) => import("react/jsx-runtime").JSX.Element;
     pam: (props: any) => import("react/jsx-runtime").JSX.Element;
     PingAuthorize: import("@pingux/mdi-react").MdiReactIconComponentType;
+    HomeIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
     pingLogoHorizontalSmall: import("react/jsx-runtime").JSX.Element;
     protect: (props: any) => import("react/jsx-runtime").JSX.Element;
     rocketLaunchIcon: import("@pingux/mdi-react").MdiReactIconComponentType;

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

@@ -31,6 +31,7 @@ var _EarthIcon = _interopRequireDefault(require("@pingux/mdi-react/EarthIcon"));
 var _EmoticonHappyOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/EmoticonHappyOutlineIcon"));
 var _FingerprintIcon = _interopRequireDefault(require("@pingux/mdi-react/FingerprintIcon"));
 var _GlobeIcon = _interopRequireDefault(require("@pingux/mdi-react/GlobeIcon"));
+var _HomeIcon = _interopRequireDefault(require("@pingux/mdi-react/HomeIcon"));
 var _InformationIcon = _interopRequireDefault(require("@pingux/mdi-react/InformationIcon"));
 var _InformationOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/InformationOutlineIcon"));
 var _KeyChainVariantIcon = _interopRequireDefault(require("@pingux/mdi-react/KeyChainVariantIcon"));
@@ -52,4 +53,4 @@ var _statuses = _interopRequireWildcard(require("../../../../utils/devUtils/cons
 var _navBarIcons = require("./navBarIcons");
 var _statuses$DEFAULT$sta;
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var _default = exports["default"] = (_statuses$DEFAULT$sta = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, _statuses["default"].DEFAULT, _InformationIcon["default"]), _statuses["default"].ERROR, _AlertCircleIcon["default"]), _statuses["default"].SUCCESS, _CheckCircleIcon["default"]), _statuses["default"].WARNING, _AlertIcon["default"]), _statuses.statusIcon.CRITICAL, _AlertCircleOutlineIcon["default"]), _statuses.statusIcon.FATAL, _CloseOctagonOutlineIcon["default"]), _statuses.statusIcon.INFO, _InformationOutlineIcon["default"]), _statuses.statusIcon.MAJOR, _ArrowUpIcon["default"]), _statuses.statusIcon.MINOR, _ArrowDownIcon["default"]), _statuses.statusIcon.WARNING_NEUTRAL, _AlertOutlineIcon["default"]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "aic", _navBarIcons.Aic), "applicationsIcon", _ApplicationOutlineIcon["default"]), "Ascending", _MenuUpIcon["default"]), "authenticationIcon", _CheckCircleOutlineIcon["default"]), "clipboard", _ClipboardIcon["default"]), "CreateIcon", _CreateIcon["default"]), "daVinci", _navBarIcons.DaVinci), "DefaultCircle", _CheckboxBlankCircleOutlineIcon["default"]), "Descending", _MenuDownIcon["default"]), "popoverMenuIcon", _MoreVertIcon["default"]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "ErrorCircle", _AlertCircleIcon["default"]), "integrationsIcon", _ConnectionIcon["default"]), "listViewMenu", _MoreVertIcon["default"]), "mdiAccountCog", _AccountCogIcon["default"]), "mdiAccountMultiple", _AccountMultipleIcon["default"]), "mdiEarth", _EarthIcon["default"]), "mdiEmoticonHappyOutline", _EmoticonHappyOutlineIcon["default"]), "mdiFingerprint", _FingerprintIcon["default"]), "mdiPlayCircleIcon", _PlayCircleIcon["default"]), "mdiScaleBalance", _ScaleBalanceIcon["default"]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "mdiShoCard", _navBarIcons.Credentials), "mdiTransitConnectionVariant", _TransitConnectionVariantIcon["default"]), "mdiViewDashboard", _ViewDashboardIcon["default"]), "mdiWeb", _GlobeIcon["default"]), "MenuDown", _MenuDownIcon["default"]), "MenuUp", _MenuUpIcon["default"]), "monitoringIcon", _PulseIcon["default"]), "openInNew", _OpenInNewIcon["default"]), "overviewIcon", _WebIcon["default"]), "p1verify", _navBarIcons.Verify), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "pam", _navBarIcons.PamIcon), "PingAuthorize", _KeyChainVariantIcon["default"]), "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmallWhite), "protect", _navBarIcons.Protect), "rocketLaunchIcon", _RocketLaunchIcon["default"]), "shareFeedbackIcon", _ChatIcon["default"]), "shieldStar", _ShieldStarOutlineIcon["default"]), "SuccessCircle", _CheckCircleIcon["default"]), "userExperienceIcon", _MonitorScreenshotIcon["default"]), "WarningIcon", _AlertOutlineIcon["default"]));
+var _default = exports["default"] = (_statuses$DEFAULT$sta = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, _statuses["default"].DEFAULT, _InformationIcon["default"]), _statuses["default"].ERROR, _AlertCircleIcon["default"]), _statuses["default"].SUCCESS, _CheckCircleIcon["default"]), _statuses["default"].WARNING, _AlertIcon["default"]), _statuses.statusIcon.CRITICAL, _AlertCircleOutlineIcon["default"]), _statuses.statusIcon.FATAL, _CloseOctagonOutlineIcon["default"]), _statuses.statusIcon.INFO, _InformationOutlineIcon["default"]), _statuses.statusIcon.MAJOR, _ArrowUpIcon["default"]), _statuses.statusIcon.MINOR, _ArrowDownIcon["default"]), _statuses.statusIcon.WARNING_NEUTRAL, _AlertOutlineIcon["default"]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "aic", _navBarIcons.Aic), "applicationsIcon", _ApplicationOutlineIcon["default"]), "Ascending", _MenuUpIcon["default"]), "authenticationIcon", _CheckCircleOutlineIcon["default"]), "clipboard", _ClipboardIcon["default"]), "CreateIcon", _CreateIcon["default"]), "daVinci", _navBarIcons.DaVinci), "DefaultCircle", _CheckboxBlankCircleOutlineIcon["default"]), "Descending", _MenuDownIcon["default"]), "popoverMenuIcon", _MoreVertIcon["default"]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "ErrorCircle", _AlertCircleIcon["default"]), "integrationsIcon", _ConnectionIcon["default"]), "listViewMenu", _MoreVertIcon["default"]), "mdiAccountCog", _AccountCogIcon["default"]), "mdiAccountMultiple", _AccountMultipleIcon["default"]), "mdiEarth", _EarthIcon["default"]), "mdiEmoticonHappyOutline", _EmoticonHappyOutlineIcon["default"]), "mdiFingerprint", _FingerprintIcon["default"]), "mdiPlayCircleIcon", _PlayCircleIcon["default"]), "mdiScaleBalance", _ScaleBalanceIcon["default"]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "mdiShoCard", _navBarIcons.Credentials), "mdiTransitConnectionVariant", _TransitConnectionVariantIcon["default"]), "mdiViewDashboard", _ViewDashboardIcon["default"]), "mdiWeb", _GlobeIcon["default"]), "MenuDown", _MenuDownIcon["default"]), "MenuUp", _MenuUpIcon["default"]), "monitoringIcon", _PulseIcon["default"]), "openInNew", _OpenInNewIcon["default"]), "overviewIcon", _WebIcon["default"]), "p1verify", _navBarIcons.Verify), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "pam", _navBarIcons.PamIcon), "PingAuthorize", _KeyChainVariantIcon["default"]), "HomeIcon", _HomeIcon["default"]), "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmallWhite), "protect", _navBarIcons.Protect), "rocketLaunchIcon", _RocketLaunchIcon["default"]), "shareFeedbackIcon", _ChatIcon["default"]), "shieldStar", _ShieldStarOutlineIcon["default"]), "SuccessCircle", _CheckCircleIcon["default"]), "userExperienceIcon", _MonitorScreenshotIcon["default"]), (0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "WarningIcon", _AlertOutlineIcon["default"]));

package/lib/cjs/styles/themes/astro/customProperties/index.d.ts

@@ -43,6 +43,7 @@ export declare const astroThemeValues: {
         p1verify: (props: any) => import("react/jsx-runtime").JSX.Element;
         pam: (props: any) => import("react/jsx-runtime").JSX.Element;
         PingAuthorize: import("@pingux/mdi-react").MdiReactIconComponentType;
+        HomeIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
         pingLogoHorizontalSmall: import("react/jsx-runtime").JSX.Element;
         protect: (props: any) => import("react/jsx-runtime").JSX.Element;
         rocketLaunchIcon: import("@pingux/mdi-react").MdiReactIconComponentType;

package/lib/cjs/styles/themes/next-gen/colors/colors.d.ts

@@ -104,6 +104,10 @@ declare const colors: {
         };
     };
     tooltip: string;
+    environmentBadge: {
+        text: any;
+        background: any;
+    };
     codeEditor: {
         backgroundColor: any;
         headerColor: any;

package/lib/cjs/styles/themes/next-gen/colors/colors.js

@@ -129,6 +129,10 @@ var codeEditor = {
   headerColor: _onyxTokens.astroTokens.color.gray[900]
 };
 var tooltip = 'black';
+var environmentBadge = {
+  text: _onyxTokens.astroTokens.color.blue[500],
+  background: _onyxTokens.astroTokens.color.blue[100]
+};
 var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColors), _colorTokens.nextGenColors), overrides), {}, {
   badge: badge,
   card: card,
@@ -148,6 +152,7 @@ var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColo
   backgroundHover: backgroundHover,
   iconWrapper: _iconWrapper.iconWrapper,
   tooltip: tooltip,
+  environmentBadge: environmentBadge,
   codeEditor: codeEditor,
   twoTone: _twoTone["default"]
 });

package/lib/cjs/styles/themes/next-gen/customProperties/icons.d.ts

@@ -11,6 +11,7 @@ declare const icons: {
     Descending: string;
     popoverMenuIcon: string;
     ErrorCircle: string;
+    HomeIcon: string;
     integrationsIcon: string;
     listViewMenu: string;
     mdiAccountCog: string;

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

@@ -20,5 +20,5 @@ var _statuses = _interopRequireWildcard(require("../../../../utils/devUtils/cons
 var _navBarIcons = require("../../astro/customProperties/navBarIcons");
 var _icons;
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var icons = (_icons = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, _statuses["default"].DEFAULT, 'info'), _statuses["default"].ERROR, 'error'), _statuses["default"].SUCCESS, 'check_circle'), _statuses["default"].WARNING, 'warning'), _statuses.statusIcon.CRITICAL, 'error'), _statuses.statusIcon.FATAL, 'dangerous'), _statuses.statusIcon.INFO, 'info'), _statuses.statusIcon.MAJOR, 'arrow_upward'), _statuses.statusIcon.MINOR, 'arrow_downward'), _statuses.statusIcon.WARNING_NEUTRAL, 'warning'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "aic", _navBarIcons.Aic), "applicationsIcon", 'apps'), "Ascending", 'arrow_upward'), "authenticationIcon", 'check_circle'), "clipboard", 'content_paste'), "CreateIcon", 'edit'), "daVinci", 'account_tree'), "DefaultCircle", 'circle'), "Descending", 'arrow_downward'), "popoverMenuIcon", 'more_horiz'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "ErrorCircle", 'error'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", _SettingsOutlineIcon["default"]), "mdiEmoticonHappyOutline", _EmoticonHappyOutlineIcon["default"]), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), "mdiScaleBalance", 'balance'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", _TransitConnectionVariantIcon["default"]), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuUp", 'keyboard_arrow_up'), "monitoringIcon", _ShowChartIcon["default"]), "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), "p1verify", 'person_check'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "pam", _navBarIcons.PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmall), "protect", _navBarIcons.Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", _ShieldStarOutlineIcon["default"]), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), "WarningIcon", 'warning'));
+var icons = (_icons = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, _statuses["default"].DEFAULT, 'info'), _statuses["default"].ERROR, 'error'), _statuses["default"].SUCCESS, 'check_circle'), _statuses["default"].WARNING, 'warning'), _statuses.statusIcon.CRITICAL, 'error'), _statuses.statusIcon.FATAL, 'dangerous'), _statuses.statusIcon.INFO, 'info'), _statuses.statusIcon.MAJOR, 'arrow_upward'), _statuses.statusIcon.MINOR, 'arrow_downward'), _statuses.statusIcon.WARNING_NEUTRAL, 'warning'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "aic", _navBarIcons.Aic), "applicationsIcon", 'apps'), "Ascending", 'arrow_upward'), "authenticationIcon", 'check_circle'), "clipboard", 'content_paste'), "CreateIcon", 'edit'), "daVinci", 'account_tree'), "DefaultCircle", 'circle'), "Descending", 'arrow_downward'), "popoverMenuIcon", 'more_horiz'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "ErrorCircle", 'error'), "HomeIcon", 'home'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", _SettingsOutlineIcon["default"]), "mdiEmoticonHappyOutline", _EmoticonHappyOutlineIcon["default"]), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "mdiScaleBalance", 'balance'), "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", _TransitConnectionVariantIcon["default"]), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuUp", 'keyboard_arrow_up'), "monitoringIcon", _ShowChartIcon["default"]), "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "p1verify", 'person_check'), "pam", _navBarIcons.PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmall), "protect", _navBarIcons.Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", _ShieldStarOutlineIcon["default"]), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), (0, _defineProperty2["default"])(_icons, "WarningIcon", 'warning'));
 var _default = exports["default"] = icons;

package/lib/cjs/styles/themes/next-gen/customProperties/index.d.ts

@@ -34,6 +34,7 @@ export declare const nextGenThemeValues: {
         Descending: string;
         popoverMenuIcon: string;
         ErrorCircle: string;
+        HomeIcon: string;
         integrationsIcon: string;
         listViewMenu: string;
         mdiAccountCog: string;

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -87,6 +87,10 @@ declare const _default: {
             };
         };
         tooltip: string;
+        environmentBadge: {
+            text: any;
+            background: any;
+        };
         codeEditor: {
             backgroundColor: any;
             headerColor: any;
@@ -3142,6 +3146,7 @@ declare const _default: {
         Descending: string;
         popoverMenuIcon: string;
         ErrorCircle: string;
+        HomeIcon: string;
         integrationsIcon: string;
         listViewMenu: string;
         mdiAccountCog: string;
@@ -4018,6 +4023,10 @@ declare const _default: {
             width: string;
             color: string;
         };
+        environmentBadge: {
+            backgroundColor: string;
+            color: string;
+        };
         invertedRemovableBadge: {
             backgroundColor: string;
             '& span': {
@@ -5329,6 +5338,14 @@ declare const _default: {
                 px: string;
             };
         };
+        environmentBreadcrumb: {
+            button: {
+                current: {
+                    color: string;
+                    fontWeight: number;
+                };
+            };
+        };
         fieldHelperText: {
             title: {
                 fontSize: string;
@@ -6035,6 +6052,7 @@ declare const _default: {
         popoverMenu: {
             container: {
                 minWidth: string;
+                maxWidth: string;
                 boxShadow: string;
                 transition: string;
                 '&.animate': {

package/lib/cjs/styles/themes/next-gen/variants/badges.d.ts

@@ -825,6 +825,10 @@ export declare const badges: {
         width: string;
         color: string;
     };
+    environmentBadge: {
+        backgroundColor: string;
+        color: string;
+    };
     invertedRemovableBadge: {
         backgroundColor: string;
         '& span': {

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

@@ -163,6 +163,10 @@ var invertedRemovableBadge = _objectSpread({}, dark);
 var removableBadge = _objectSpread(_objectSpread({}, secondary), {}, {
   border: 'none'
 });
+var environmentBadge = {
+  backgroundColor: '#EAF2FD',
+  color: "".concat(_onyxTokens.astroTokens.color.blue[600])
+};
 var badges = exports.badges = {
   dataTableBadge: dataTableBadge,
   baseBadge: _objectSpread({}, baseBadge),
@@ -188,6 +192,7 @@ var badges = exports.badges = {
   badgeDeleteButton: badgeDeleteButton,
   itemBadgeWithSlot: itemBadgeWithSlot,
   removableBadge: removableBadge,
+  environmentBadge: environmentBadge,
   invertedRemovableBadge: invertedRemovableBadge,
   errorCalloutBadge: {
     backgroundColor: 'white !important'

package/lib/cjs/styles/themes/next-gen/variants/environmentBreadcrumb.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    button: {
+        current: {
+            color: string;
+            fontWeight: number;
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var button = {
+  current: {
+    color: 'font.base',
+    fontWeight: 2
+  }
+};
+var _default = exports["default"] = {
+  button: button
+};

package/lib/cjs/styles/themes/next-gen/variants/popoverMenu.d.ts

@@ -1,6 +1,7 @@
 declare const _default: {
     container: {
         minWidth: string;
+        maxWidth: string;
         boxShadow: string;
         transition: string;
         '&.animate': {

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

@@ -8,6 +8,7 @@ exports["default"] = void 0;
 var _onyxTokens = require("@pingux/onyx-tokens");
 var container = {
   minWidth: '150px',
+  maxWidth: '260px',
   boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.176)',
   transition: 'opacity 200ms ease',
   '&.animate': {

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -697,6 +697,14 @@ declare const _default: {
             px: string;
         };
     };
+    environmentBreadcrumb: {
+        button: {
+            current: {
+                color: string;
+                fontWeight: number;
+            };
+        };
+    };
     fieldHelperText: {
         title: {
             fontSize: string;
@@ -1403,6 +1411,7 @@ declare const _default: {
     popoverMenu: {
         container: {
             minWidth: string;
+            maxWidth: string;
             boxShadow: string;
             transition: string;
             '&.animate': {

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

@@ -28,6 +28,7 @@ var _box = require("./box");
 var _button = _interopRequireWildcard(require("./button"));
 var _callout = _interopRequireDefault(require("./callout"));
 var _dataTable = require("./dataTable");
+var _environmentBreadcrumb = _interopRequireDefault(require("./environmentBreadcrumb"));
 var _footer = require("./footer");
 var _iconWrapper = _interopRequireDefault(require("./iconWrapper"));
 var _listview = require("./listview");
@@ -449,6 +450,7 @@ var _default = exports["default"] = {
   callout: _callout["default"],
   codeView: _codeView["default"],
   dataTable: _dataTable.dataTable,
+  environmentBreadcrumb: _environmentBreadcrumb["default"],
   fieldHelperText: fieldHelperText,
   footer: _footer.footer,
   iconWrapper: _iconWrapper["default"],

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -22,15 +22,12 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { FocusScope, mergeProps, useOverlayPosition, useOverlayTrigger } from 'react-aria';
 import { useOverlayTriggerState } from 'react-stately';
-import ArrowDropDownIcon from '@pingux/mdi-react/ArrowDropDownIcon';
-import ArrowDropUpIcon from '@pingux/mdi-react/ArrowDropUpIcon';
 import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
-import HomeIcon from '@pingux/mdi-react/HomeIcon';
 import { useFilter } from '@react-aria/i18n';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useListState } from '@react-stately/list';
 import { v4 as uuid } from 'uuid';
-import { useDebounce, useLocalOrForwardRef } from '../../hooks';
+import { useDebounce, useGetTheme, useLocalOrForwardRef } from '../../hooks';
 import { Breadcrumbs, Button, Icon, Item, PopoverContainer, ScrollBox, SearchField, Text } from '../../index';
 import ListBox from '../ListBox';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -59,6 +56,11 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     searchProps = props.searchProps,
     selectedItem = props.selectedItem,
     others = _objectWithoutProperties(props, _excluded);
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  var MenuDown = icons.MenuDown,
+    MenuUp = icons.MenuUp,
+    HomeIcon = icons.HomeIcon;
   var optionsNumberMessageId = useMemo(function () {
     return uuid();
   }, []);
@@ -244,10 +246,12 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-label": setAriaLabel(selectedItem),
     "data-id": breadCrumbDataIds.environmentButton
   }), selectedItem, ___EmotionJSX(Icon, {
-    icon: popoverState.isOpen ? ArrowDropUpIcon : ArrowDropDownIcon,
+    icon: popoverState.isOpen ? MenuUp : MenuDown,
     title: {
       name: popoverState.isOpen ? 'Arrow Drop Up Icon' : 'Arrow Drop Down Icon'
-    }
+    },
+    size: "xs",
+    ml: "xs"
   })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, mergeProps(overlayProps, positionProps, popoverProps), {
     ref: overlayRef,
     isOpen: popoverState.isOpen,
@@ -295,8 +299,8 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: breadcrumbsRef,
     onAction: handleOnAction,
     iconProps: {
-      color: 'neutral.70',
-      mx: 5,
+      color: 'font.base',
+      mx: 3,
       size: 'xs',
       icon: ChevronRightIcon
     }
@@ -312,7 +316,8 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     mr: 7,
     title: {
       name: 'Home Icon'
-    }
+    },
+    size: "sm"
   }), name), selectedItem && ___EmotionJSX(Item, {
     key: "itemsSelect",
     elementType: "Fragment"

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -114,9 +114,11 @@ export var Default = function Default(args) {
   }, ___EmotionJSX(Text, {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
-    label: "SANDBOX",
+    label: "Sandbox",
     variant: "environmentBadge",
-    bg: "neutral.40"
+    bg: "environmentBadge.background",
+    textColor: "magenta",
+    align: "right"
   }) : null);
   var findEnvObj = function findEnvObj(envName) {
     return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref) {
@@ -140,9 +142,10 @@ export var Default = function Default(args) {
       key: name,
       textValue: name
     }, name, isSandbox ? ___EmotionJSX(Badge, {
-      label: "SANDBOX",
+      label: "Sandbox",
       variant: "environmentBadge",
-      bg: "neutral.40",
+      bg: "environmentBadge.background",
+      textColor: "environmentBadge.text",
       align: "right"
     }) : null);
   });
@@ -225,9 +228,11 @@ export var WithSections = function WithSections() {
   }, ___EmotionJSX(Text, {
     color: "inherit"
   }, selectedEnvironment === null || selectedEnvironment === void 0 ? void 0 : selectedEnvironment.name), selectedEnvironment !== null && selectedEnvironment !== void 0 && selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
-    label: "SANDBOX",
+    label: "Sandbox",
     variant: "environmentBadge",
-    bg: "neutral.40"
+    bg: "environmentBadge.background",
+    textColor: "environmentBadge.text",
+    align: "right"
   }) : null);
   return ___EmotionJSX(EnvironmentBreadcrumb, {
     items: environments,
@@ -257,9 +262,10 @@ export var WithSections = function WithSections() {
       }, ___EmotionJSX(Box, {
         isRow: true
       }, itemName, isSandbox ? ___EmotionJSX(Badge, {
-        label: "SANDBOX",
+        label: "Sandbox",
         variant: "environmentBadge",
-        bg: "neutral.40",
+        bg: "environmentBadge.background",
+        textColor: "environmentBadge.text",
         align: "right"
       }) : null));
     });
@@ -281,9 +287,10 @@ export var DefaultOpen = function DefaultOpen() {
   }, ___EmotionJSX(Text, {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
-    label: "SANDBOX",
+    label: "Sandbox",
     variant: "environmentBadge",
-    bg: "neutral.40"
+    bg: "environmentBadge.background",
+    textColor: "environmentBadge.text"
   }) : null);
   var findEnvObj = function findEnvObj(envName) {
     return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref5) {
@@ -308,10 +315,10 @@ export var DefaultOpen = function DefaultOpen() {
       key: name,
       textValue: name
     }, name, isSandbox ? ___EmotionJSX(Badge, {
-      label: "SANDBOX",
+      label: "Sandbox",
       variant: "environmentBadge",
-      bg: "neutral.40",
-      align: "right"
+      bg: "environmentBadge.background",
+      textColor: "environmentBadge.text"
     }) : null);
   });
 };
@@ -330,9 +337,10 @@ export var ControlledMenu = function ControlledMenu() {
   }, ___EmotionJSX(Text, {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
-    label: "SANDBOX",
+    label: "Sandbox",
     variant: "environmentBadge",
-    bg: "neutral.40"
+    bg: "environmentBadge.background",
+    textColor: "environmentBadge.text"
   }) : null);
   var findEnvObj = function findEnvObj(envName) {
     return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref7) {
@@ -358,10 +366,10 @@ export var ControlledMenu = function ControlledMenu() {
       key: name,
       textValue: name
     }, name, isSandbox ? ___EmotionJSX(Badge, {
-      label: "SANDBOX",
+      label: "Sandbox",
       variant: "environmentBadge",
-      bg: "neutral.40",
-      align: "right"
+      bg: "environmentBadge.background",
+      textColor: "environmentBadge.text"
     }) : null);
   });
 };

package/lib/styles/colors.js

@@ -132,6 +132,10 @@ var tooltip = accent[20];
 var border = {
   hairline: '#E7EEF4'
 };
+var environmentBadge = {
+  text: badge.textColor,
+  background: neutral[40]
+};
 var allColors = {
   black: black,
   background: background,
@@ -154,7 +158,8 @@ var allColors = {
   button: button,
   warning: warning,
   slider: slider,
-  tooltip: tooltip
+  tooltip: tooltip,
+  environmentBadge: environmentBadge
 };
 export default allColors;
 function flattenColors(obj) {

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

@@ -42,6 +42,10 @@ var background = {
   card: '#1a1e22',
   hover: hoverDark
 };
+var environmentBadge = {
+  text: 'black',
+  background: astroTokensDark.color.blue[500]
+};
 var twoTone = {
   bg: {
     orange: astroTokensDark.color.orange[500],
@@ -145,6 +149,7 @@ export var colors = _objectSpread(_objectSpread({
     message: 'white',
     fieldHelper: astroTokensDark.color.gray[400]
   },
+  environmentBadge: environmentBadge,
   background: background,
   backgroundBase: backgroundBase,
   backgroundSecondary: backgroundSecondary,

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

@@ -38,7 +38,10 @@ var listBox = {
       }
     },
     '&.is-focus-visible': {
-      zIndex: 1
+      zIndex: 1,
+      outline: '1px solid #ffffff',
+      outlineOffset: '-1px',
+      boxShadow: "inset 0 0 0 2px ".concat(astroTokensDark.color.blue[500])
     }
   }
 };
@@ -178,6 +181,14 @@ var statusIcon = {
     }
   }
 };
+var environmentBreadcrumb = {
+  button: {
+    current: {
+      color: astroTokensDark.color.gray[100],
+      fontWeight: 2
+    }
+  }
+};
 export default {
   rockerButton: rockerButton,
   rangeCalendar: rangeCalendar,
@@ -191,6 +202,7 @@ export default {
   lisViewItemChart: lisViewItemChart,
   navBar: navBar,
   listBox: listBox,
+  environmentBreadcrumb: environmentBreadcrumb,
   modal: modal,
   tab: tab,
   iconBadge: iconBadge,
@@ -200,7 +212,9 @@ export default {
   tooltip: tooltip,
   popoverMenu: {
     container: {
-      background: '#23282e'
+      background: '#23282e',
+      border: '1px solid',
+      borderColor: '#39414B'
     }
   },
   dataTable: {

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

@@ -21,6 +21,7 @@ import Earth from '@pingux/mdi-react/EarthIcon';
 import EmoticonHappy from '@pingux/mdi-react/EmoticonHappyOutlineIcon';
 import Fingerprint from '@pingux/mdi-react/FingerprintIcon';
 import GlobeIcon from '@pingux/mdi-react/GlobeIcon';
+import HomeIcon from '@pingux/mdi-react/HomeIcon';
 import InformationIcon from '@pingux/mdi-react/InformationIcon';
 import InformationOutlineIcon from '@pingux/mdi-react/InformationOutlineIcon';
 import KeyChainVariant from '@pingux/mdi-react/KeyChainVariantIcon';
@@ -40,4 +41,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), "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));
+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), "HomeIcon", HomeIcon), "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), "protect", Protect), "rocketLaunchIcon", RocketLaunchIcon), "shareFeedbackIcon", ChatIcon), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", CheckCircleIcon), "userExperienceIcon", MonitorScreenshotIcon), _defineProperty(_statuses$DEFAULT$sta, "WarningIcon", WarningIcon));

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

@@ -122,6 +122,10 @@ var codeEditor = {
   headerColor: astroTokens.color.gray[900]
 };
 var tooltip = 'black';
+var environmentBadge = {
+  text: astroTokens.color.blue[500],
+  background: astroTokens.color.blue[100]
+};
 var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColors), nextGenColors), overrides), {}, {
   badge: badge,
   card: card,
@@ -141,6 +145,7 @@ var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColo
   backgroundHover: backgroundHover,
   iconWrapper: iconWrapper,
   tooltip: tooltip,
+  environmentBadge: environmentBadge,
   codeEditor: codeEditor,
   twoTone: twoTone
 });

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

@@ -8,5 +8,5 @@ import TransitConnection from '@pingux/mdi-react/TransitConnectionVariantIcon';
 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, 'info'), statuses.ERROR, 'error'), statuses.SUCCESS, 'check_circle'), statuses.WARNING, 'warning'), statusIcon.CRITICAL, 'error'), statusIcon.FATAL, 'dangerous'), statusIcon.INFO, 'info'), statusIcon.MAJOR, 'arrow_upward'), statusIcon.MINOR, 'arrow_downward'), statusIcon.WARNING_NEUTRAL, 'warning'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "aic", Aic), "applicationsIcon", 'apps'), "Ascending", 'arrow_upward'), "authenticationIcon", 'check_circle'), "clipboard", 'content_paste'), "CreateIcon", 'edit'), "daVinci", 'account_tree'), "DefaultCircle", 'circle'), "Descending", 'arrow_downward'), "popoverMenuIcon", 'more_horiz'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "ErrorCircle", 'error'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", Settings), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), "mdiScaleBalance", 'balance'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuUp", 'keyboard_arrow_up'), "monitoringIcon", ShowChartIcon), "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), "p1verify", 'person_check'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "pam", PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", pingLogoHorizontalSmall), "protect", Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), "WarningIcon", 'warning'));
+var icons = (_icons = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, statuses.DEFAULT, 'info'), statuses.ERROR, 'error'), statuses.SUCCESS, 'check_circle'), statuses.WARNING, 'warning'), statusIcon.CRITICAL, 'error'), statusIcon.FATAL, 'dangerous'), statusIcon.INFO, 'info'), statusIcon.MAJOR, 'arrow_upward'), statusIcon.MINOR, 'arrow_downward'), statusIcon.WARNING_NEUTRAL, 'warning'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "aic", Aic), "applicationsIcon", 'apps'), "Ascending", 'arrow_upward'), "authenticationIcon", 'check_circle'), "clipboard", 'content_paste'), "CreateIcon", 'edit'), "daVinci", 'account_tree'), "DefaultCircle", 'circle'), "Descending", 'arrow_downward'), "popoverMenuIcon", 'more_horiz'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "ErrorCircle", 'error'), "HomeIcon", 'home'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", Settings), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "mdiScaleBalance", 'balance'), "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuUp", 'keyboard_arrow_up'), "monitoringIcon", ShowChartIcon), "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "p1verify", 'person_check'), "pam", PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", pingLogoHorizontalSmall), "protect", Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), _defineProperty(_icons, "WarningIcon", 'warning'));
 export default icons;

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

@@ -156,6 +156,10 @@ var invertedRemovableBadge = _objectSpread({}, dark);
 var removableBadge = _objectSpread(_objectSpread({}, secondary), {}, {
   border: 'none'
 });
+var environmentBadge = {
+  backgroundColor: '#EAF2FD',
+  color: "".concat(astroTokens.color.blue[600])
+};
 export var badges = {
   dataTableBadge: dataTableBadge,
   baseBadge: _objectSpread({}, baseBadge),
@@ -181,6 +185,7 @@ export var badges = {
   badgeDeleteButton: badgeDeleteButton,
   itemBadgeWithSlot: itemBadgeWithSlot,
   removableBadge: removableBadge,
+  environmentBadge: environmentBadge,
   invertedRemovableBadge: invertedRemovableBadge,
   errorCalloutBadge: {
     backgroundColor: 'white !important'

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

@@ -0,0 +1,9 @@
+var button = {
+  current: {
+    color: 'font.base',
+    fontWeight: 2
+  }
+};
+export default {
+  button: button
+};

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

@@ -1,6 +1,7 @@
 import { astroTokens } from '@pingux/onyx-tokens';
 var container = {
   minWidth: '150px',
+  maxWidth: '260px',
   boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.176)',
   transition: 'opacity 200ms ease',
   '&.animate': {

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

@@ -21,6 +21,7 @@ import { box } from './box';
 import button, { defaultFocus } from './button';
 import callout from './callout';
 import { dataTable } from './dataTable';
+import environmentBreadcrumb from './environmentBreadcrumb';
 import { footer } from './footer';
 import iconWrapper from './iconWrapper';
 import { listView, listViewItem, lisViewItemChart } from './listview';
@@ -439,6 +440,7 @@ export default {
   callout: callout,
   codeView: codeView,
   dataTable: dataTable,
+  environmentBreadcrumb: environmentBreadcrumb,
   fieldHelperText: fieldHelperText,
   footer: footer,
   iconWrapper: iconWrapper,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.193.0-alpha.0",
+  "version": "2.193.1-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",