@pingux/astro 2.193.1-alpha.0 → 2.194.0-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/index.d.ts

@@ -226,7 +226,10 @@ export * from './components/TreeView';
 export { PaginationContext } from './context/PaginationContext';
 export { default as NextGenDarkTheme } from './styles/themeOverrides/nextGenDarkMode';
 export { default as OnyxDarkTheme } from './styles/themeOverrides/nextGenDarkMode';
+export { default as OnyxDarkUiLibraryOverride } from './styles/themeOverrides/onyxDarkUiLibraryOverride';
 export { default as OnyxSideNavOverride } from './styles/themeOverrides/onyxSideNav';
+export { default as OnyxUiLibraryOverride } from './styles/themeOverrides/onyxUiLibraryOverride';
+export { default as AstroUiLibraryOverride } from './styles/themeOverrides/uiLibraryOverride';
 export { default as NextGenTheme } from './styles/themes/next-gen';
 export { default as OnyxTheme } from './styles/themes/next-gen';
 export * from './types';

package/lib/cjs/index.js

@@ -157,7 +157,10 @@ var _exportNames = {
   PaginationContext: true,
   NextGenDarkTheme: true,
   OnyxDarkTheme: true,
+  OnyxDarkUiLibraryOverride: true,
   OnyxSideNavOverride: true,
+  OnyxUiLibraryOverride: true,
+  AstroUiLibraryOverride: true,
   NextGenTheme: true,
   OnyxTheme: true,
   OverlayProvider: true,
@@ -226,6 +229,12 @@ _Object$defineProperty(exports, "AstroProvider", {
     return _AstroProvider["default"];
   }
 });
+_Object$defineProperty(exports, "AstroUiLibraryOverride", {
+  enumerable: true,
+  get: function get() {
+    return _uiLibraryOverride["default"];
+  }
+});
 _Object$defineProperty(exports, "AstroWrapper", {
   enumerable: true,
   get: function get() {
@@ -718,6 +727,12 @@ _Object$defineProperty(exports, "OnyxDarkTheme", {
     return _nextGenDarkMode["default"];
   }
 });
+_Object$defineProperty(exports, "OnyxDarkUiLibraryOverride", {
+  enumerable: true,
+  get: function get() {
+    return _onyxDarkUiLibraryOverride["default"];
+  }
+});
 _Object$defineProperty(exports, "OnyxSideNavOverride", {
   enumerable: true,
   get: function get() {
@@ -730,6 +745,12 @@ _Object$defineProperty(exports, "OnyxTheme", {
     return _nextGen["default"];
   }
 });
+_Object$defineProperty(exports, "OnyxUiLibraryOverride", {
+  enumerable: true,
+  get: function get() {
+    return _onyxUiLibraryOverride["default"];
+  }
+});
 _Object$defineProperty(exports, "OverlayPanel", {
   enumerable: true,
   get: function get() {
@@ -2232,7 +2253,10 @@ _forEachInstanceProperty(_context82 = _Object$keys(_TreeView)).call(_context82,
 });
 var _PaginationContext = require("./context/PaginationContext");
 var _nextGenDarkMode = _interopRequireDefault(require("./styles/themeOverrides/nextGenDarkMode"));
+var _onyxDarkUiLibraryOverride = _interopRequireDefault(require("./styles/themeOverrides/onyxDarkUiLibraryOverride"));
 var _onyxSideNav = _interopRequireDefault(require("./styles/themeOverrides/onyxSideNav"));
+var _onyxUiLibraryOverride = _interopRequireDefault(require("./styles/themeOverrides/onyxUiLibraryOverride"));
+var _uiLibraryOverride = _interopRequireDefault(require("./styles/themeOverrides/uiLibraryOverride"));
 var _nextGen = _interopRequireDefault(require("./styles/themes/next-gen"));
 var _types = require("./types");
 _forEachInstanceProperty(_context83 = _Object$keys(_types)).call(_context83, function (key) {

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/themeOverrides/onyxDarkUiLibraryOverride.js

@@ -0,0 +1,211 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _onyxTokens = require("@pingux/onyx-tokens");
+var _nextGenDarkMode = _interopRequireDefault(require("./nextGenDarkMode"));
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var buttons = {
+  critical: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.critical), _nextGenDarkMode["default"].buttons.defaultHover)
+  },
+  danger: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.danger), _nextGenDarkMode["default"].buttons.defaultHover)
+  },
+  success: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.success), _nextGenDarkMode["default"].buttons.defaultHover)
+  },
+  "default": {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons["default"]), _nextGenDarkMode["default"].buttons.defaultHover),
+    '&:focus': _objectSpread({}, _nextGenDarkMode["default"].buttons.defaultHover)
+  },
+  inline: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.inline), _nextGenDarkMode["default"].buttons.defaultHover)
+  },
+  inlinePrimary: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.inlinePrimary), _nextGenDarkMode["default"].buttons.defaultHover)
+  },
+  text: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.text), _nextGenDarkMode["default"].buttons.defaultHover)
+  },
+  inverted: _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.inverted), {}, {
+    ':focus': {
+      border: 'none'
+    }
+  }),
+  primary: {
+    '&:hover': _objectSpread({}, _nextGenDarkMode["default"].buttons.primary)
+  },
+  link: {
+    'body &': _nextGenDarkMode["default"].buttons.link,
+    'body &:hover': _nextGenDarkMode["default"].buttons.link,
+    '&:not(.disabled):hover': {
+      color: 'active',
+      borderColor: 'transparent'
+    }
+  },
+  iconButtons: _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.iconButtons), {}, {
+    base: _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.iconButtons.base), {}, {
+      ':focus': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    }),
+    inverted: _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.iconButtons.inverted), {}, {
+      ':focus': {
+        border: 'none'
+      }
+    }),
+    datePicker: {
+      containedIcon: {
+        '&:not(.disabled):hover': {
+          border: 'none'
+        },
+        '&:focus': {
+          border: 'none'
+        }
+      }
+    }
+  }),
+  // not sure what this references
+  filter: {
+    '&:not(.disabled):hover': {
+      borderColor: 'accent.40',
+      color: 'accent.40'
+    }
+  }
+};
+var forms = {
+  input: {
+    '&[type=password]': {
+      backgroundColor: 'white !important',
+      borderColor: '#caced3 !important'
+    },
+    '&[type=password]:focus': {
+      borderColor: "".concat(_onyxTokens.astroTokens.color.blue[500], " !important")
+    },
+    numberField: _objectSpread(_objectSpread(_objectSpread({}, _nextGenDarkMode["default"].input), _nextGenDarkMode["default"].numberFieldStyles), {}, {
+      '&[type=text]': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].text.inputValue), {}, {
+        backgroundColor: 'white',
+        borderColor: _onyxTokens.astroTokensDark.color.gray[500]
+      }),
+      '&[type=text]:focus': {
+        borderColor: "".concat(_onyxTokens.astroTokens.color.blue[500], " !important")
+      }
+    })
+  },
+  select: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].text.inputValue), {}, {
+      borderColor: _onyxTokens.astroTokensDark.color.gray[500]
+    })
+  },
+  search: {
+    wrapper: {
+      '& input[type=search]': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].text.inputValue), {}, {
+        borderColor: _onyxTokens.astroTokensDark.color.gray[500],
+        fontSize: '15px',
+        bg: 'white',
+        '::placeholder': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].text.placeholder), {}, {
+          fontStyle: 'unset',
+          fontSize: '15px'
+        })
+      }),
+      '& input[type=search]:focus': {
+        borderColor: "".concat(_onyxTokens.astroTokens.color.blue[500], " !important")
+      }
+    }
+  },
+  label: {
+    'body &': {
+      textTransform: 'none'
+    },
+    checkbox: {
+      textTransform: 'none'
+    }
+  }
+};
+var links = {
+  app: {
+    '&:hover': _objectSpread({}, _nextGenDarkMode["default"].links.app)
+  },
+  skip: {
+    '&:hover': {
+      color: 'white',
+      textDecoration: 'none',
+      '&:focus': {
+        outline: '2px solid',
+        outlineColor: 'active',
+        color: 'white',
+        textDecoration: 'none'
+      }
+    },
+    '&:visited': {
+      color: 'white',
+      textDecoration: 'none'
+    },
+    '&.is-pressed': {
+      color: 'white',
+      textDecoration: 'none'
+    }
+  },
+  pingLogo: {
+    '&:hover': {
+      '&.is-focused': {
+        outline: '2px solid',
+        outlineColor: 'active',
+        outlineOffset: '-2px'
+      }
+    }
+  }
+};
+var variants = {
+  accordion: {
+    header: _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].variants.accordion.header), {}, {
+      '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.defaultHover), {}, {
+        color: 'active'
+      }),
+      '&:focus': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    })
+  },
+  rockerButton: {
+    thumbSwitch: _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].variants.rockerButton.thumbSwitch), {}, {
+      ':focus': {
+        border: 'none'
+      },
+      '&.is-selected:hover': {
+        color: 'white'
+      },
+      ':not(.is-selected):hover': {
+        color: 'white'
+      }
+    })
+  },
+  environmentBreadcrumb: {
+    button: {
+      current: {
+        '&:hover:not(.disabled)': _objectSpread({}, _nextGenDarkMode["default"].variants.environmentBreadcrumb.button.current),
+        '&:focus': _objectSpread({}, _nextGenDarkMode["default"].variants.environmentBreadcrumb.button.current)
+      }
+    }
+  }
+};
+var _default = exports["default"] = {
+  buttons: buttons,
+  forms: forms,
+  links: links,
+  variants: variants
+};

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

@@ -0,0 +1,130 @@
+declare const _default: {
+    buttons: {
+        critical: {
+            '&:not(.disabled):hover': any;
+        };
+        danger: {
+            '&:not(.disabled):hover': any;
+        };
+        success: {
+            '&:not(.disabled):hover': any;
+        };
+        default: {
+            '&:not(.disabled):hover': any;
+            '&:focus': any;
+        };
+        inline: {
+            '&:not(.disabled):hover': any;
+        };
+        inlinePrimary: {
+            '&:not(.disabled):hover': any;
+        };
+        text: {
+            '&:not(.disabled):hover': any;
+        };
+        inverted: any;
+        primary: {
+            '&:hover': any;
+        };
+        link: {
+            'body &': any;
+            'body &:hover': any;
+            '&:not(.disabled):hover': {
+                color: string;
+                borderColor: string;
+            };
+        };
+        iconButtons: any;
+        filter: {
+            '&:not(.disabled):hover': {
+                borderColor: string;
+                color: string;
+            };
+        };
+    };
+    forms: {
+        input: {
+            '&[type=password]': {
+                backgroundColor: string;
+                borderColor: string;
+            };
+            '&[type=password]:focus': {
+                borderColor: string;
+            };
+            numberField: any;
+        };
+        select: {
+            '&:not(.disabled):hover': any;
+        };
+        search: {
+            wrapper: {
+                '& input[type=search]': any;
+                '& input[type=search]:focus': {
+                    outline: string;
+                    outlineColor: any;
+                    outlineOffset: string;
+                    borderColor: string;
+                };
+            };
+        };
+        label: {
+            'body &': {
+                textTransform: string;
+            };
+            checkbox: {
+                textTransform: string;
+            };
+        };
+    };
+    links: {
+        app: {
+            '&:hover': any;
+        };
+        skip: {
+            '&:hover': {
+                color: string;
+                textDecoration: string;
+                '&:focus': {
+                    outline: string;
+                    outlineColor: string;
+                    color: string;
+                    textDecoration: string;
+                };
+            };
+            '&:visited': {
+                color: string;
+                textDecoration: string;
+            };
+            '&.is-pressed': {
+                color: string;
+                textDecoration: string;
+            };
+        };
+        pingLogo: {
+            '&:hover': {
+                '&.is-focused': {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
+            };
+        };
+    };
+    variants: {
+        accordion: {
+            header: any;
+        };
+        rockerButton: {
+            thumbSwitch: any;
+        };
+        environmentBreadcrumb: {
+            button: {
+                current: {
+                    '&:hover:not(.disabled)': any;
+                    '&:focus': any;
+                };
+            };
+        };
+    };
+};
+export default _default;