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

package/lib/cjs/styles/themeOverrides/onyxUiLibraryOverride.js

@@ -0,0 +1,217 @@
+"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 _nextGen = _interopRequireDefault(require("../themes/next-gen"));
+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({}, _nextGen["default"].buttons.critical), _nextGen["default"].buttons.defaultHover)
+  },
+  danger: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGen["default"].buttons.danger), _nextGen["default"].buttons.defaultHover)
+  },
+  success: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGen["default"].buttons.success), _nextGen["default"].buttons.defaultHover)
+  },
+  "default": {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGen["default"].buttons["default"]), _nextGen["default"].buttons.defaultHover),
+    '&:focus': _objectSpread({}, _nextGen["default"].buttons.defaultHover)
+  },
+  inline: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGen["default"].buttons.inline), _nextGen["default"].buttons.defaultHover)
+  },
+  inlinePrimary: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGen["default"].buttons.inlinePrimary), _nextGen["default"].buttons.defaultHover)
+  },
+  text: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGen["default"].buttons.text), _nextGen["default"].buttons.defaultHover)
+  },
+  inverted: _objectSpread(_objectSpread({}, _nextGen["default"].buttons.inverted), {}, {
+    ':focus': {
+      border: 'none'
+    }
+  }),
+  primary: {
+    '&:hover': _objectSpread({}, _nextGen["default"].buttons.primary)
+  },
+  link: {
+    'body &': _nextGen["default"].buttons.link,
+    'body &:hover': _nextGen["default"].buttons.link,
+    '&:not(.disabled):hover': {
+      color: 'active',
+      borderColor: 'transparent'
+    }
+  },
+  iconButtons: _objectSpread(_objectSpread({}, _nextGen["default"].buttons.iconButtons), {}, {
+    base: _objectSpread(_objectSpread({}, _nextGen["default"].buttons.iconButtons.base), {}, {
+      ':focus': _objectSpread(_objectSpread({}, _nextGen["default"].buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    }),
+    inverted: _objectSpread(_objectSpread({}, _nextGen["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({}, _nextGen["default"].input), _nextGen["default"].numberFieldStyles), {}, {
+      '&[type=text]': _objectSpread(_objectSpread({}, _nextGen["default"].text.inputValue), {}, {
+        backgroundColor: 'white',
+        borderColor: _onyxTokens.astroTokens.color.input.border
+      }),
+      '&[type=text]:focus': {
+        outline: '1px solid',
+        outlineColor: "".concat(_onyxTokens.astroTokens.color.blue[500]),
+        outlineOffset: '0px',
+        borderColor: "".concat(_onyxTokens.astroTokens.color.blue[500], " !important")
+      }
+    })
+  },
+  select: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGen["default"].text.inputValue), {}, {
+      borderColor: _onyxTokens.astroTokens.color.input.border
+    })
+  },
+  search: {
+    wrapper: {
+      '& input[type=search]': _objectSpread(_objectSpread({}, _nextGen["default"].text.inputValue), {}, {
+        borderColor: _onyxTokens.astroTokens.color.input.border,
+        fontSize: '15px',
+        bg: 'white',
+        '::placeholder': _objectSpread(_objectSpread({}, _nextGen["default"].text.placeholder), {}, {
+          fontStyle: 'unset',
+          fontSize: '15px'
+        })
+      }),
+      '& input[type=search]:focus': {
+        outline: '1px solid',
+        outlineColor: _onyxTokens.astroTokens.color.blue[500],
+        outlineOffset: '0px',
+        borderColor: "".concat(_onyxTokens.astroTokens.color.blue[500], " !important")
+      }
+    }
+  },
+  label: {
+    'body &': {
+      textTransform: 'none'
+    },
+    checkbox: {
+      textTransform: 'none'
+    }
+  }
+};
+var links = {
+  app: {
+    '&:hover': _objectSpread({}, _nextGen["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({}, _nextGen["default"].variants.accordion.header), {}, {
+      '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _nextGen["default"].buttons.defaultHover), {}, {
+        color: 'active'
+      }),
+      '&:focus': _objectSpread(_objectSpread({}, _nextGen["default"].buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    })
+  },
+  rockerButton: {
+    thumbSwitch: _objectSpread(_objectSpread({}, _nextGen["default"].variants.rockerButton.thumbSwitch), {}, {
+      ':focus': {
+        border: 'none'
+      },
+      '&.is-selected:hover': {
+        color: 'black'
+      },
+      ':not(.is-selected):hover': {
+        color: 'black'
+      }
+    })
+  },
+  environmentBreadcrumb: {
+    button: {
+      current: {
+        '&:hover:not(.disabled)': _objectSpread({}, _nextGen["default"].variants.environmentBreadcrumb.button.current),
+        '&:focus': _objectSpread({}, _nextGen["default"].variants.environmentBreadcrumb.button.current)
+      }
+    }
+  }
+};
+var _default = exports["default"] = {
+  buttons: buttons,
+  forms: forms,
+  links: links,
+  variants: variants
+};

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -177,7 +177,12 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: inputWrapperRef,
     onResize: onResize
   });
-  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.
+  useLayoutEffect(onResize, [onResize, state.isOpen]);
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: menuWidth,
     minWidth: menuWidth

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

@@ -19,7 +19,7 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerat
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 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 _context37, _context38; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context37 = ownKeys(Object(t), !0)).call(_context37, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_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 ? _forEachInstanceProperty(_context39 = ownKeys(Object(t), !0)).call(_context39, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_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; }; }
@@ -1575,6 +1575,97 @@ test('a blank title does not render', /*#__PURE__*/_asyncToGenerator(/*#__PURE__
     }
   }, _callee33);
 })));
+test('popover width re-measures when the menu opens to prevent flickering', /*#__PURE__*/_asyncToGenerator(/*#__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 = screen.queryByRole('button');
+        _context36.next = 7;
+        return userEvent.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__*/_asyncToGenerator(/*#__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 = screen.queryByRole('button'); // Open the menu at 500px
+        _context37.next = 6;
+        return userEvent.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.click(button);
+      case 13:
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+
+        // Simulate wrapper shrinking back
+        mockWidth = 300;
+
+        // Reopen — width should reflect the new measurement
+        _context37.next = 17;
+        return userEvent.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
@@ -1599,12 +1690,12 @@ describe('when isReadOnly is true', function () {
       name: defaultProps.label
     })).toHaveValue(TEST_DEFAULT_INPUT_VALUE);
   });
-  test('the dropdown does not open when clicked', /*#__PURE__*/_asyncToGenerator(/*#__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__*/_asyncToGenerator(/*#__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.click(screen.getByRole('combobox', {
             name: defaultProps.label
           }));
@@ -1614,9 +1705,9 @@ describe('when isReadOnly is true', function () {
           })).not.toBeInTheDocument();
         case 4:
         case "end":
-          return _context36.stop();
+          return _context38.stop();
       }
-    }, _callee34);
+    }, _callee36);
   })));
 });
 universalComponentTests({

package/lib/index.js

@@ -229,7 +229,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/recipes/CountryPicker.stories.js

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

package/lib/styles/themeOverrides/onyxDarkUiLibraryOverride.js

@@ -0,0 +1,204 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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) { _defineProperty(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; }
+import { astroTokens, astroTokensDark } from '@pingux/onyx-tokens';
+import theme from './nextGenDarkMode';
+var buttons = {
+  critical: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.critical), theme.buttons.defaultHover)
+  },
+  danger: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.danger), theme.buttons.defaultHover)
+  },
+  success: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.success), theme.buttons.defaultHover)
+  },
+  "default": {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons["default"]), theme.buttons.defaultHover),
+    '&:focus': _objectSpread({}, theme.buttons.defaultHover)
+  },
+  inline: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.inline), theme.buttons.defaultHover)
+  },
+  inlinePrimary: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.inlinePrimary), theme.buttons.defaultHover)
+  },
+  text: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.text), theme.buttons.defaultHover)
+  },
+  inverted: _objectSpread(_objectSpread({}, theme.buttons.inverted), {}, {
+    ':focus': {
+      border: 'none'
+    }
+  }),
+  primary: {
+    '&:hover': _objectSpread({}, theme.buttons.primary)
+  },
+  link: {
+    'body &': theme.buttons.link,
+    'body &:hover': theme.buttons.link,
+    '&:not(.disabled):hover': {
+      color: 'active',
+      borderColor: 'transparent'
+    }
+  },
+  iconButtons: _objectSpread(_objectSpread({}, theme.buttons.iconButtons), {}, {
+    base: _objectSpread(_objectSpread({}, theme.buttons.iconButtons.base), {}, {
+      ':focus': _objectSpread(_objectSpread({}, theme.buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    }),
+    inverted: _objectSpread(_objectSpread({}, theme.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(astroTokens.color.blue[500], " !important")
+    },
+    numberField: _objectSpread(_objectSpread(_objectSpread({}, theme.input), theme.numberFieldStyles), {}, {
+      '&[type=text]': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
+        backgroundColor: 'white',
+        borderColor: astroTokensDark.color.gray[500]
+      }),
+      '&[type=text]:focus': {
+        borderColor: "".concat(astroTokens.color.blue[500], " !important")
+      }
+    })
+  },
+  select: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
+      borderColor: astroTokensDark.color.gray[500]
+    })
+  },
+  search: {
+    wrapper: {
+      '& input[type=search]': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
+        borderColor: astroTokensDark.color.gray[500],
+        fontSize: '15px',
+        bg: 'white',
+        '::placeholder': _objectSpread(_objectSpread({}, theme.text.placeholder), {}, {
+          fontStyle: 'unset',
+          fontSize: '15px'
+        })
+      }),
+      '& input[type=search]:focus': {
+        borderColor: "".concat(astroTokens.color.blue[500], " !important")
+      }
+    }
+  },
+  label: {
+    'body &': {
+      textTransform: 'none'
+    },
+    checkbox: {
+      textTransform: 'none'
+    }
+  }
+};
+var links = {
+  app: {
+    '&:hover': _objectSpread({}, theme.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({}, theme.variants.accordion.header), {}, {
+      '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.defaultHover), {}, {
+        color: 'active'
+      }),
+      '&:focus': _objectSpread(_objectSpread({}, theme.buttons.defaultFocus), {}, {
+        border: 'none'
+      })
+    })
+  },
+  rockerButton: {
+    thumbSwitch: _objectSpread(_objectSpread({}, theme.variants.rockerButton.thumbSwitch), {}, {
+      ':focus': {
+        border: 'none'
+      },
+      '&.is-selected:hover': {
+        color: 'white'
+      },
+      ':not(.is-selected):hover': {
+        color: 'white'
+      }
+    })
+  },
+  environmentBreadcrumb: {
+    button: {
+      current: {
+        '&:hover:not(.disabled)': _objectSpread({}, theme.variants.environmentBreadcrumb.button.current),
+        '&:focus': _objectSpread({}, theme.variants.environmentBreadcrumb.button.current)
+      }
+    }
+  }
+};
+export default {
+  buttons: buttons,
+  forms: forms,
+  links: links,
+  variants: variants
+};