@pingux/astro 2.166.1-alpha.1 → 2.166.1-alpha.3

package/lib/cjs/components/Button/Buttons.styles.d.ts

@@ -981,7 +981,9 @@ declare const _default: {
     searchNavTabLabel: {
         backgroundColor: string;
         mb: string;
-        p: string;
+        px: string;
+        pt: string;
+        pb: string;
         borderImage: string;
         display: string;
         alignItems: string;
@@ -990,15 +992,15 @@ declare const _default: {
             cursor: string;
         };
         '&.is-focused': {
-            borderRadius: string;
+            boxShadow: string;
             outline: string;
             outlineColor: string;
             outlineOffset: string;
+            borderRadius: string;
         };
         whiteSpace: string;
         fontSize: string;
         fontWeight: number;
-        px: string;
         lineHeight: string;
         color: string;
         height: string;
@@ -1722,9 +1724,8 @@ declare const _default: {
         marginX?: import("theme-ui").StylePropertyValue<import("csstype").Property.MarginLeft<string | number> | undefined>;
         my?: import("theme-ui").StylePropertyValue<import("csstype").Property.MarginTop<string | number> | undefined>;
         marginY?: import("theme-ui").StylePropertyValue<import("csstype").Property.MarginTop<string | number> | undefined>;
-        pt?: import("theme-ui").StylePropertyValue<import("csstype").Property.PaddingTop<string | number> | undefined>;
+        p?: import("theme-ui").StylePropertyValue<import("csstype").Property.Padding<string | number> | undefined>;
         pr?: import("theme-ui").StylePropertyValue<import("csstype").Property.PaddingRight<string | number> | undefined>;
-        pb?: import("theme-ui").StylePropertyValue<import("csstype").Property.PaddingBottom<string | number> | undefined>;
         pl?: import("theme-ui").StylePropertyValue<import("csstype").Property.PaddingLeft<string | number> | undefined>;
         paddingX?: import("theme-ui").StylePropertyValue<import("csstype").Property.PaddingLeft<string | number> | undefined>;
         py?: import("theme-ui").StylePropertyValue<import("csstype").Property.PaddingTop<string | number> | undefined>;

package/lib/cjs/components/Button/Buttons.styles.js

@@ -289,8 +289,10 @@ var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
 });
 var tabLabelButton = _objectSpread(_objectSpread({}, _Text.searchNavTabLabel), {}, {
   backgroundColor: 'transparent',
-  mb: '10px',
-  p: '0px',
+  mb: '0px',
+  px: 'md',
+  pt: '10px',
+  pb: '9px',
   borderImage: 'none',
   display: 'inline-flex',
   alignItems: 'center',
@@ -298,9 +300,13 @@ var tabLabelButton = _objectSpread(_objectSpread({}, _Text.searchNavTabLabel), {
     color: 'active',
     cursor: 'pointer'
   },
-  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+  '&.is-focused': {
+    boxShadow: 'none',
+    outline: '3px solid',
+    outlineColor: 'active',
+    outlineOffset: '1px',
     borderRadius: '4px'
-  })
+  }
 });
 var _default = exports["default"] = {
   colorBlock: colorBlock,

package/lib/cjs/components/SearchNav/MoreItemsPopover.js

@@ -40,9 +40,9 @@ var MoreItemsPopover = function MoreItemsPopover(props) {
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     role: "listitem",
     variant: "searchNav.tab",
+    pt: "0px",
     isRow: true,
-    alignItems: "center",
-    ml: "sm"
+    alignItems: "center"
   }, tabProps), (0, _react2.jsx)(_index.PopoverMenu, (0, _extends2["default"])({}, popoverProps, {
     isOpen: isOpen,
     onOpenChange: setIsOpen

package/lib/cjs/components/SearchNav/SearchNav.js

@@ -27,7 +27,7 @@ var _SearchNavTab = _interopRequireDefault(require("./SearchNavTab"));
 var _react2 = require("@emotion/react");
 var _excluded = ["defaultSelectedKey", "items", "labelProps", "moreButtonText", "onSelectionChange", "onOpenChange", "popoverButtonProps", "popoverMenuProps", "popoverProps", "rowProps", "selectedKey", "setSelectedKey", "tabProps"];
 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 TAB_MARGIN_WIDTH = 10; // Example constant value
+var TAB_MARGIN_WIDTH = 32; // Example constant value
 var MORE_BUTTON_WIDTH = 60;
 
 /**

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

@@ -13,11 +13,10 @@ var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stabl
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _index = require("../../index");
-var _SearchNav = _interopRequireDefault(require("./SearchNav"));
 var _react2 = 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 _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"] = {
-  title: 'Components/SearchNav'
+  title: 'Components/NavList'
 };
 var items = [{
   text: 'Overview',
@@ -59,7 +58,7 @@ var Default = exports.Default = function Default() {
   };
   return (0, _react2.jsx)(_index.Box, {
     maxWidth: "600px"
-  }, (0, _react2.jsx)(_SearchNav["default"], {
+  }, (0, _react2.jsx)(_index.NavList, {
     items: items,
     selectedKey: selectedKey,
     setSelectedKey: function setSelectedKey(e) {

package/lib/cjs/components/SearchNav/SearchNav.styles.d.ts

@@ -10,12 +10,14 @@ declare const _default: {
         position: string;
         zIndex: string;
         '&.is-focused': {
+            boxShadow: string;
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
             '& > span': {
-                borderRadius: string;
                 outline: string;
-                outlineColor: string;
-                outlineOffset: string;
             };
+            borderRadius: string;
         };
         '&.is-disabled': {
             cursor: string;

package/lib/cjs/components/SearchNav/SearchNav.styles.js

@@ -1,24 +1,12 @@
 "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 _Buttons = require("../Button/Buttons.styles");
-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 tab = {
-  pt: 'md',
+  pt: 'sm',
   cursor: 'pointer',
   alignItems: 'center',
   display: 'inline-flex',
@@ -28,9 +16,14 @@ var tab = {
   position: 'relative',
   zIndex: '2',
   '&.is-focused': {
-    '& > span': _objectSpread(_objectSpread({}, _Buttons.defaultFocus), {}, {
-      borderRadius: '4px'
-    })
+    boxShadow: 'none',
+    outline: '3px solid',
+    outlineColor: 'active',
+    outlineOffset: '1px',
+    '& > span': {
+      outline: 'none'
+    },
+    borderRadius: '4px'
   },
   '&.is-disabled': {
     cursor: 'default'

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

@@ -194,7 +194,7 @@ describe('Pure Functions Tests', function () {
     });
     it('breaks when adding an item and the required space for the "More" button exceeds container width', function () {
       // Set container width to only allow the first two items and the "More" button
-      var containerWidthPartial = 290;
+      var containerWidthPartial = 334;
       var visibleCount = (0, _SearchNav.calculateVisibleCount)(containerWidthPartial, moreButtonWidth, mockOrderedItems, mockItemWidths);
       // It should fit the first two, but break on the third, so count should be 2.
       expect(visibleCount).toBe(2);
@@ -334,7 +334,7 @@ test('hidden tab selection updates key, content, and triggers swap', /*#__PURE__
 
           // We expect 2 visible tabs: Tab 1 ('Overview') and the newly swapped-in tab ('Resources')
           // We expect the 'More' button to be the third listitem
-          expect(visibleTabs.length).toBe(2);
+          expect(visibleTabs.length).toBe(1);
         });
       case 14:
         _context3.next = 16;
@@ -361,7 +361,7 @@ test('resizing container to be very small hides all but one tab', /*#__PURE__*/(
     while (1) switch (_context4.prev = _context4.next) {
       case 0:
         // Start large (mockContainerWidth = 1000)
-        mockContainerWidth = 1000;
+        mockContainerWidth = 1200;
         getComponent({
           items: items
         });
@@ -423,7 +423,7 @@ test('resizing container to be very small hides all but one tab', /*#__PURE__*/(
           expect(visibleListItems.length).toBe(2);
         });
       case 15:
-        mockContainerWidth = 540;
+        mockContainerWidth = 628;
         (0, _testWrapper.act)(function () {
           if (resizeObserverCallback) {
             resizeObserverCallback([{
@@ -476,7 +476,7 @@ test('recalculates visible items when More button causes an item to be hidden',
     while (1) switch (_context5.prev = _context5.next) {
       case 0:
         // Setup: Container wide enough for 3 tabs, but NOT 3 tabs + More button.
-        mockContainerWidth = 350; // Max allowed width
+        mockContainerWidth = 420; // Max allowed width
 
         // We ensure the mock returns 100 for items and 60 for the More button.
         offsetWidthMock.mockImplementation(function () {

package/lib/cjs/components/Text/Text.styles.js

@@ -53,7 +53,7 @@ var searchNavTabLabel = exports.searchNavTabLabel = _objectSpread(_objectSpread(
   fontSize: 'sm',
   fontWeight: 1,
   mb: 'sm',
-  px: 'sm',
+  px: 'md',
   lineHeight: '16px',
   color: 'neutral.40',
   height: '100%',

package/lib/cjs/index.d.ts

@@ -170,6 +170,7 @@ export * from './components/ScrollBox';
 export { default as SearchField } from './components/SearchField';
 export * from './components/SearchField';
 export { default as SearchNav } from './components/SearchNav';
+export { default as NavList } from './components/SearchNav';
 export * from './components/SearchNav';
 export { default as SelectField } from './components/SelectField';
 export * from './components/SelectField';

package/lib/cjs/index.js

@@ -126,6 +126,7 @@ var _exportNames = {
   ScrollBox: true,
   SearchField: true,
   SearchNav: true,
+  NavList: true,
   SelectField: true,
   Separator: true,
   ServerErrorBoundary: true,
@@ -669,6 +670,12 @@ _Object$defineProperty(exports, "NavBarSection", {
     return _NavBarSection["default"];
   }
 });
+_Object$defineProperty(exports, "NavList", {
+  enumerable: true,
+  get: function get() {
+    return _SearchNav["default"];
+  }
+});
 _Object$defineProperty(exports, "NavSideBar", {
   enumerable: true,
   get: function get() {

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

@@ -6,6 +6,7 @@ export declare const text: {
         color: string;
     };
     searchNavTabLabel: {
+        px: string;
         color: string;
         '.is-selected &, .is-hovered &': {
             color: string;

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

@@ -13,6 +13,7 @@ var text = exports.text = {
     color: 'text.secondary'
   },
   searchNavTabLabel: {
+    px: 'lg',
     color: 'gray-400',
     '.is-selected &, .is-hovered &': {
       color: 'white'

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

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = exports.astroBlacklistStory = void 0;
-var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SearchNav', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box', 'TimeField'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavList', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box', 'TimeField'];
 var componentSpecificNextGenBlacklist = exports.componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

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

@@ -725,7 +725,9 @@ declare const _default: {
             transition: string;
         };
         searchNavTabLabel: {
-            marginBottom: string;
+            mb: string;
+            pb: string;
+            pt: string;
             color: string;
             '&.is-hovered': {
                 '& > svg': {

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

@@ -426,7 +426,9 @@ declare const buttons: {
         transition: string;
     };
     searchNavTabLabel: {
-        marginBottom: string;
+        mb: string;
+        pb: string;
+        pt: string;
         color: string;
         '&.is-hovered': {
             '& > svg': {

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

@@ -38,7 +38,9 @@ var defaultFocus = exports.defaultFocus = {
   outlineOffset: '2px'
 };
 var searchNavTabLabel = {
-  marginBottom: '9px',
+  mb: '0px',
+  pb: '9px',
+  pt: 'sm',
   color: 'neutral.40',
   '&.is-hovered': {
     '& > svg': {

package/lib/components/Button/Buttons.styles.js

@@ -282,8 +282,10 @@ var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
 });
 var tabLabelButton = _objectSpread(_objectSpread({}, searchNavTabLabel), {}, {
   backgroundColor: 'transparent',
-  mb: '10px',
-  p: '0px',
+  mb: '0px',
+  px: 'md',
+  pt: '10px',
+  pb: '9px',
   borderImage: 'none',
   display: 'inline-flex',
   alignItems: 'center',
@@ -291,9 +293,13 @@ var tabLabelButton = _objectSpread(_objectSpread({}, searchNavTabLabel), {}, {
     color: 'active',
     cursor: 'pointer'
   },
-  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+  '&.is-focused': {
+    boxShadow: 'none',
+    outline: '3px solid',
+    outlineColor: 'active',
+    outlineOffset: '1px',
     borderRadius: '4px'
-  })
+  }
 });
 export default {
   colorBlock: colorBlock,

package/lib/components/SearchNav/MoreItemsPopover.js

@@ -28,9 +28,9 @@ var MoreItemsPopover = function MoreItemsPopover(props) {
   return ___EmotionJSX(Box, _extends({
     role: "listitem",
     variant: "searchNav.tab",
+    pt: "0px",
     isRow: true,
-    alignItems: "center",
-    ml: "sm"
+    alignItems: "center"
   }, tabProps), ___EmotionJSX(PopoverMenu, _extends({}, popoverProps, {
     isOpen: isOpen,
     onOpenChange: setIsOpen

package/lib/components/SearchNav/SearchNav.js

@@ -15,7 +15,7 @@ import { Box, Text } from '../../index';
 import MoreItemsPopover from './MoreItemsPopover';
 import SearchNavTab from './SearchNavTab';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var TAB_MARGIN_WIDTH = 10; // Example constant value
+var TAB_MARGIN_WIDTH = 32; // Example constant value
 var MORE_BUTTON_WIDTH = 60;
 
 /**

package/lib/components/SearchNav/SearchNav.stories.js

@@ -1,11 +1,10 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import React, { useState } from 'react';
-import { Box, Text } from '../../index';
-import SearchNav from './SearchNav';
+import { Box, NavList, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Components/SearchNav'
+  title: 'Components/NavList'
 };
 var items = [{
   text: 'Overview',
@@ -47,7 +46,7 @@ export var Default = function Default() {
   };
   return ___EmotionJSX(Box, {
     maxWidth: "600px"
-  }, ___EmotionJSX(SearchNav, {
+  }, ___EmotionJSX(NavList, {
     items: items,
     selectedKey: selectedKey,
     setSelectedKey: function setSelectedKey(e) {

package/lib/components/SearchNav/SearchNav.styles.js

@@ -1,17 +1,5 @@
-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 { defaultFocus } from '../Button/Buttons.styles';
 var tab = {
-  pt: 'md',
+  pt: 'sm',
   cursor: 'pointer',
   alignItems: 'center',
   display: 'inline-flex',
@@ -21,9 +9,14 @@ var tab = {
   position: 'relative',
   zIndex: '2',
   '&.is-focused': {
-    '& > span': _objectSpread(_objectSpread({}, defaultFocus), {}, {
-      borderRadius: '4px'
-    })
+    boxShadow: 'none',
+    outline: '3px solid',
+    outlineColor: 'active',
+    outlineOffset: '1px',
+    '& > span': {
+      outline: 'none'
+    },
+    borderRadius: '4px'
   },
   '&.is-disabled': {
     cursor: 'default'

package/lib/components/SearchNav/SearchNav.test.js

@@ -186,7 +186,7 @@ describe('Pure Functions Tests', function () {
     });
     it('breaks when adding an item and the required space for the "More" button exceeds container width', function () {
       // Set container width to only allow the first two items and the "More" button
-      var containerWidthPartial = 290;
+      var containerWidthPartial = 334;
       var visibleCount = calculateVisibleCount(containerWidthPartial, moreButtonWidth, mockOrderedItems, mockItemWidths);
       // It should fit the first two, but break on the third, so count should be 2.
       expect(visibleCount).toBe(2);
@@ -326,7 +326,7 @@ test('hidden tab selection updates key, content, and triggers swap', /*#__PURE__
 
           // We expect 2 visible tabs: Tab 1 ('Overview') and the newly swapped-in tab ('Resources')
           // We expect the 'More' button to be the third listitem
-          expect(visibleTabs.length).toBe(2);
+          expect(visibleTabs.length).toBe(1);
         });
       case 14:
         _context3.next = 16;
@@ -353,7 +353,7 @@ test('resizing container to be very small hides all but one tab', /*#__PURE__*/_
     while (1) switch (_context4.prev = _context4.next) {
       case 0:
         // Start large (mockContainerWidth = 1000)
-        mockContainerWidth = 1000;
+        mockContainerWidth = 1200;
         getComponent({
           items: items
         });
@@ -415,7 +415,7 @@ test('resizing container to be very small hides all but one tab', /*#__PURE__*/_
           expect(visibleListItems.length).toBe(2);
         });
       case 15:
-        mockContainerWidth = 540;
+        mockContainerWidth = 628;
         act(function () {
           if (resizeObserverCallback) {
             resizeObserverCallback([{
@@ -468,7 +468,7 @@ test('recalculates visible items when More button causes an item to be hidden',
     while (1) switch (_context5.prev = _context5.next) {
       case 0:
         // Setup: Container wide enough for 3 tabs, but NOT 3 tabs + More button.
-        mockContainerWidth = 350; // Max allowed width
+        mockContainerWidth = 420; // Max allowed width
 
         // We ensure the mock returns 100 for items and 60 for the More button.
         offsetWidthMock.mockImplementation(function () {

package/lib/components/Text/Text.styles.js

@@ -46,7 +46,7 @@ export var searchNavTabLabel = _objectSpread(_objectSpread({}, base), {}, {
   fontSize: 'sm',
   fontWeight: 1,
   mb: 'sm',
-  px: 'sm',
+  px: 'md',
   lineHeight: '16px',
   color: 'neutral.40',
   height: '100%',

package/lib/index.js

@@ -174,6 +174,7 @@ export * from './components/ScrollBox';
 export { default as SearchField } from './components/SearchField';
 export * from './components/SearchField';
 export { default as SearchNav } from './components/SearchNav';
+export { default as NavList } from './components/SearchNav';
 export * from './components/SearchNav';
 export { default as SelectField } from './components/SelectField';
 export * from './components/SelectField';

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

@@ -6,6 +6,7 @@ export var text = {
     color: 'text.secondary'
   },
   searchNavTabLabel: {
+    px: 'lg',
     color: 'gray-400',
     '.is-selected &, .is-hovered &': {
       color: 'white'

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

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SearchNav', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box', 'TimeField'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavList', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box', 'TimeField'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

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

@@ -31,7 +31,9 @@ export var defaultFocus = {
   outlineOffset: '2px'
 };
 var searchNavTabLabel = {
-  marginBottom: '9px',
+  mb: '0px',
+  pb: '9px',
+  pt: 'sm',
   color: 'neutral.40',
   '&.is-hovered': {
     '& > svg': {