@pingux/astro 2.193.0 → 2.193.2-alpha.0

package/lib/cjs/components/ComboBoxField/ComboBoxField.js

@@ -187,7 +187,12 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: inputWrapperRef,
     onResize: onResize
   });
-  (0, _utils.useLayoutEffect)(onResize, [onResize]);
+
+  // Re-measure synchronously (before paint) whenever the menu opens or closes,
+  // so the Popover renders with the correct width on the first frame.
+  // Without state.isOpen in deps, width updates rely solely on ResizeObserver
+  // which fires asynchronously after paint, causing a visible flicker.
+  (0, _utils.useLayoutEffect)(onResize, [onResize, state.isOpen]);
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: menuWidth,
     minWidth: menuWidth

package/lib/cjs/components/ComboBoxField/ComboBoxField.test.js

@@ -44,7 +44,7 @@ var _universalFormSubmitTest = require("../../utils/testUtils/universalFormSubmi
 var _react3 = require("@emotion/react");
 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 _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty2(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context37, _context38; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty2(_context37 = ownKeys(Object(t), !0)).call(_context37, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty2(_context38 = ownKeys(Object(t))).call(_context38, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context39, _context40; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty2(_context39 = ownKeys(Object(t), !0)).call(_context39, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty2(_context40 = ownKeys(Object(t))).call(_context40, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _regeneratorRuntime() { "use strict"; var r = _regenerator(), e = r.m(_regeneratorRuntime), t = (_Object$getPrototypeOf ? _Object$getPrototypeOf(e) : e.__proto__).constructor; function n(r) { var e = "function" == typeof r && r.constructor; return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name)); } var o = { "throw": 1, "return": 2, "break": 3, "continue": 3 }; function a(r) { var e, t; return function (n) { e || (e = { stop: function stop() { return t(n.a, 2); }, "catch": function _catch() { return n.v; }, abrupt: function abrupt(r, e) { return t(n.a, o[r], e); }, delegateYield: function delegateYield(r, o, a) { return e.resultName = o, t(n.d, _regeneratorValues(r), a); }, finish: function finish(r) { return t(n.f, r); } }, t = function t(r, _t, o) { n.p = e.prev, n.n = e.next; try { return r(_t, o); } finally { e.next = n.n; } }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n; try { return r.call(this, e); } finally { n.p = e.prev, n.n = e.next; } }; } return (_regeneratorRuntime = function _regeneratorRuntime() { return { wrap: function wrap(e, t, n, o) { return r.w(a(e), t, n, o && _reverseInstanceProperty(o).call(o)); }, isGeneratorFunction: n, mark: r.m, awrap: function awrap(r, e) { return new _OverloadYield(r, e); }, AsyncIterator: _regeneratorAsyncIterator, async: function async(r, e, t, o, u) { return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u); }, keys: _regeneratorKeys, values: _regeneratorValues }; })(); }
 function _regeneratorValues(e) { if (null != e) { var t = e["function" == typeof _Symbol && _Symbol$iterator || "@@iterator"], r = 0; if (t) return t.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) return { next: function next() { return e && r >= e.length && (e = void 0), { value: e && e[r++], done: !e }; } }; } throw new TypeError(_typeof(e) + " is not iterable"); }
 function _regeneratorKeys(e) { var n = Object(e), r = []; for (var t in n) r.unshift(t); return function e() { for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e; return e.done = !0, e; }; }
@@ -1582,6 +1582,97 @@ test('a blank title does not render', /*#__PURE__*/(0, _asyncToGenerator2["defau
     }
   }, _callee33);
 })));
+test('popover width re-measures when the menu opens to prevent flickering', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee34() {
+  var mockWidth, offsetWidthSpy, button, listbox, popoverContainer;
+  return _regeneratorRuntime().wrap(function _callee34$(_context36) {
+    while (1) switch (_context36.prev = _context36.next) {
+      case 0:
+        // Simulate a scenario like the Country Picker recipe where the input wrapper
+        // starts narrow (110px) and expands to full width when the menu opens.
+        mockWidth = 110;
+        offsetWidthSpy = jest.spyOn(window.HTMLElement.prototype, 'offsetWidth', 'get').mockImplementation(function () {
+          return mockWidth;
+        });
+        getComponent();
+
+        // Simulate the wrapper expanding before the menu opens
+        // (e.g., parent CSS changes from width: 110px to width: 100%)
+        mockWidth = 500;
+        button = _testWrapper.screen.queryByRole('button');
+        _context36.next = 7;
+        return _userEvent["default"].click(button);
+      case 7:
+        _context36.next = 9;
+        return findListbox();
+      case 9:
+        listbox = _context36.sent;
+        // The popover container receives the inline style with width/minWidth.
+        // Without the fix, menuWidth would be stale (110) because useLayoutEffect
+        // only ran on mount. With the fix, it re-measures on state.isOpen change.
+        popoverContainer = listbox.closest('[role="presentation"]');
+        expect(popoverContainer).toHaveStyle({
+          width: '500px',
+          'min-width': '500px'
+        });
+        offsetWidthSpy.mockRestore();
+      case 13:
+      case "end":
+        return _context36.stop();
+    }
+  }, _callee34);
+})));
+test('popover width stays in sync when closing and reopening at different widths', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee35() {
+  var mockWidth, offsetWidthSpy, button, listbox, popoverContainer;
+  return _regeneratorRuntime().wrap(function _callee35$(_context37) {
+    while (1) switch (_context37.prev = _context37.next) {
+      case 0:
+        mockWidth = 500;
+        offsetWidthSpy = jest.spyOn(window.HTMLElement.prototype, 'offsetWidth', 'get').mockImplementation(function () {
+          return mockWidth;
+        });
+        getComponent();
+        button = _testWrapper.screen.queryByRole('button'); // Open the menu at 500px
+        _context37.next = 6;
+        return _userEvent["default"].click(button);
+      case 6:
+        _context37.next = 8;
+        return findListbox();
+      case 8:
+        listbox = _context37.sent;
+        popoverContainer = listbox.closest('[role="presentation"]');
+        expect(popoverContainer).toHaveStyle({
+          width: '500px'
+        });
+
+        // Close the menu
+        _context37.next = 13;
+        return _userEvent["default"].click(button);
+      case 13:
+        expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+
+        // Simulate wrapper shrinking back
+        mockWidth = 300;
+
+        // Reopen — width should reflect the new measurement
+        _context37.next = 17;
+        return _userEvent["default"].click(button);
+      case 17:
+        _context37.next = 19;
+        return findListbox();
+      case 19:
+        listbox = _context37.sent;
+        popoverContainer = listbox.closest('[role="presentation"]');
+        expect(popoverContainer).toHaveStyle({
+          width: '300px',
+          'min-width': '300px'
+        });
+        offsetWidthSpy.mockRestore();
+      case 23:
+      case "end":
+        return _context37.stop();
+    }
+  }, _callee35);
+})));
 describe('when isReadOnly is true', function () {
   var testProp = {
     isReadOnly: true
@@ -1606,12 +1697,12 @@ describe('when isReadOnly is true', function () {
       name: defaultProps.label
     })).toHaveValue(TEST_DEFAULT_INPUT_VALUE);
   });
-  test('the dropdown does not open when clicked', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee34() {
-    return _regeneratorRuntime().wrap(function _callee34$(_context36) {
-      while (1) switch (_context36.prev = _context36.next) {
+  test('the dropdown does not open when clicked', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee36() {
+    return _regeneratorRuntime().wrap(function _callee36$(_context38) {
+      while (1) switch (_context38.prev = _context38.next) {
         case 0:
           getComponent(testProp);
-          _context36.next = 3;
+          _context38.next = 3;
           return _userEvent["default"].click(_testWrapper.screen.getByRole('combobox', {
             name: defaultProps.label
           }));
@@ -1621,9 +1712,9 @@ describe('when isReadOnly is true', function () {
           })).not.toBeInTheDocument();
         case 4:
         case "end":
-          return _context36.stop();
+          return _context38.stop();
       }
-    }, _callee34);
+    }, _callee36);
   })));
 });
 (0, _universalComponentTest.universalComponentTests)({

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/recipes/CountryPicker.stories.js

@@ -35,7 +35,6 @@ var sx = {
   },
   comboBoxFieldWrapperOpen: {
     position: 'absolute',
-    transition: '0.2s width ease',
     width: '100%'
   },
   comboBoxFieldWrapperClose: {

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;