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

package/lib/cjs/hooks/usePagination/usePagination.js

@@ -0,0 +1,178 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _parseInt2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/parse-int"));
+var _react = require("react");
+var _PaginationContext = require("../../context/PaginationContext");
+var _useProgressiveState5 = _interopRequireDefault(require("../useProgressiveState"));
+var _excluded = ["currentPageIndex", "nextButtonProps", "offsetCount", "offsetMenuProps", "offsetOptions", "onOffsetCountChange", "onPageIndexChange", "previousButtonProps", "totalCount"];
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var getRangeString = function getRangeString(_ref) {
+  var _context, _context2;
+  var first = _ref.first,
+    last = _ref.last,
+    total = _ref.total;
+  return (0, _concat["default"])(_context = (0, _concat["default"])(_context2 = "".concat(first + 1, "-")).call(_context2, Math.min(last + 1, total), " of ")).call(_context, total);
+};
+var getNewIndexOnOffsetChange = function getNewIndexOnOffsetChange(_ref2) {
+  var first = _ref2.first,
+    newOffset = _ref2.newOffset;
+  var newLast = Math.floor(first / newOffset);
+  return newLast;
+};
+var defaultOffsetOptions = [10, 25, 50];
+var usePagination = function usePagination(props) {
+  var currentPageIndexProp = props.currentPageIndex,
+    nextButtonProps = props.nextButtonProps,
+    offsetCountProp = props.offsetCount,
+    offsetMenuProps = props.offsetMenuProps,
+    _props$offsetOptions = props.offsetOptions,
+    offsetOptions = _props$offsetOptions === void 0 ? defaultOffsetOptions : _props$offsetOptions,
+    onOffsetCountChange = props.onOffsetCountChange,
+    onPageIndexChange = props.onPageIndexChange,
+    previousButtonProps = props.previousButtonProps,
+    totalCount = props.totalCount,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var isMountedRef = (0, _react.useRef)(false);
+  var initialIndexValue = currentPageIndexProp || 0;
+  var initialOffsetValue = offsetCountProp || 10;
+  var _useProgressiveState = (0, _useProgressiveState5["default"])(currentPageIndexProp, initialIndexValue),
+    _useProgressiveState2 = (0, _slicedToArray2["default"])(_useProgressiveState, 2),
+    currentPageIndex = _useProgressiveState2[0],
+    setCurrentPageIndex = _useProgressiveState2[1];
+  var _useProgressiveState3 = (0, _useProgressiveState5["default"])(offsetCountProp, initialOffsetValue),
+    _useProgressiveState4 = (0, _slicedToArray2["default"])(_useProgressiveState3, 2),
+    offsetCount = _useProgressiveState4[0],
+    setOffsetCount = _useProgressiveState4[1];
+  var _useState = (0, _react.useState)(currentPageIndex),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    firstRenderedIndex = _useState2[0],
+    setFirstRenderedIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)((currentPageIndex + 1) * offsetCount - 1),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    lastRenderedIndex = _useState4[0],
+    setLastRenderedIndex = _useState4[1];
+  (0, _react.useEffect)(function () {
+    var calculatedLastIndex = (currentPageIndex + 1) * offsetCount - 1;
+    setFirstRenderedIndex(currentPageIndex * offsetCount);
+    setLastRenderedIndex(Math.min(calculatedLastIndex, totalCount));
+  }, [currentPageIndex, offsetCount, totalCount]);
+  (0, _react.useEffect)(function () {
+    if (isMountedRef.current) {
+      var newIndex = getNewIndexOnOffsetChange({
+        newOffset: offsetCount,
+        first: firstRenderedIndex
+      });
+      setCurrentPageIndex(newIndex);
+      if (onPageIndexChange) {
+        onPageIndexChange(newIndex);
+      }
+    }
+  }, [offsetCount]);
+  (0, _react.useEffect)(function () {
+    isMountedRef.current = true;
+  }, []);
+  var lastIndex = Math.ceil(totalCount / offsetCount);
+  var isFirstIndex = currentPageIndex === 0;
+  var isLastIndex = lastIndex - 1 === currentPageIndex;
+  var popoverButtonString = (0, _react.useMemo)(function () {
+    return getRangeString({
+      first: firstRenderedIndex,
+      last: lastRenderedIndex,
+      total: totalCount
+    });
+  }, [firstRenderedIndex, lastRenderedIndex, totalCount]);
+  var setOffsetCountCallback = (0, _react.useCallback)(function (keys) {
+    if (keys !== null && keys !== void 0 && keys.currentKey) {
+      setOffsetCount((0, _parseInt2["default"])(keys.currentKey, 10));
+      if (onOffsetCountChange && isMountedRef.current) {
+        onOffsetCountChange((0, _parseInt2["default"])(keys.currentKey, 10));
+      }
+    }
+  }, [setOffsetCount, onOffsetCountChange, isMountedRef]);
+  var paginationState = (0, _react.useMemo)(function () {
+    return {
+      isFirstIndex: isFirstIndex,
+      isLastIndex: isLastIndex,
+      firstRenderedIndex: firstRenderedIndex,
+      lastRenderedIndex: lastRenderedIndex,
+      offsetCount: offsetCount,
+      totalCount: totalCount,
+      currentPageIndex: currentPageIndex,
+      popoverButtonString: popoverButtonString,
+      setOffsetCount: setOffsetCountCallback,
+      offsetOptions: offsetOptions
+    };
+  }, [isFirstIndex, isLastIndex, firstRenderedIndex, lastRenderedIndex, offsetCount, totalCount, currentPageIndex, popoverButtonString, setOffsetCountCallback, offsetOptions]);
+  var contextState = (0, _react.useMemo)(function () {
+    return {
+      firstRenderedIndex: firstRenderedIndex,
+      lastRenderedIndex: lastRenderedIndex,
+      offsetCount: offsetCount,
+      totalCount: totalCount,
+      currentPageIndex: currentPageIndex
+    };
+  }, [firstRenderedIndex, lastRenderedIndex, offsetCount, totalCount, currentPageIndex]);
+  var _useContext = (0, _react.useContext)(_PaginationContext.PaginationContext),
+    setPaginationState = _useContext.setPaginationState;
+  (0, _react.useEffect)(function () {
+    if (setPaginationState) {
+      setPaginationState(_objectSpread({}, contextState));
+    }
+  }, [contextState, setPaginationState]);
+  var nextIndex = function nextIndex() {
+    if (!isLastIndex) {
+      setCurrentPageIndex(currentPageIndex + 1);
+      if (onPageIndexChange) {
+        onPageIndexChange(currentPageIndex + 1);
+      }
+    }
+  };
+  var previousIndex = function previousIndex() {
+    if (!isFirstIndex) {
+      setCurrentPageIndex(currentPageIndex - 1);
+      if (onPageIndexChange) {
+        onPageIndexChange(currentPageIndex - 1);
+      }
+    }
+  };
+  var nextButtonPropsSpread = _objectSpread(_objectSpread({
+    'aria-label': 'Next Page'
+  }, nextButtonProps), {}, {
+    isDisabled: isLastIndex,
+    onPress: nextIndex
+  });
+  var previousButtonPropsSpread = _objectSpread(_objectSpread({
+    'aria-label': 'Previous Page'
+  }, previousButtonProps), {}, {
+    isDisabled: isFirstIndex,
+    onPress: previousIndex
+  });
+  var containerProps = _objectSpread({}, others);
+  return {
+    state: paginationState,
+    previousButtonProps: previousButtonPropsSpread,
+    nextButtonProps: nextButtonPropsSpread,
+    containerProps: containerProps,
+    offsetMenuProps: offsetMenuProps
+  };
+};
+var _default = usePagination;
+exports["default"] = _default;

package/lib/cjs/hooks/usePaginationState/index.d.ts

@@ -0,0 +1 @@
+export { default } from './usePaginationState';

package/lib/cjs/hooks/usePaginationState/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+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
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _usePaginationState["default"];
+  }
+});
+var _usePaginationState = _interopRequireDefault(require("./usePaginationState"));

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

@@ -0,0 +1,4 @@
+declare const usePaginationState: () => {
+    paginationState: import("../../types/pagination").PaginationContextState;
+};
+export default usePaginationState;

package/lib/cjs/hooks/usePaginationState/usePaginationState.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+var _PaginationContext = require("../../context/PaginationContext");
+var usePaginationState = function usePaginationState() {
+  var _useContext = (0, _react.useContext)(_PaginationContext.PaginationContext),
+    paginationState = _useContext.paginationState;
+  return {
+    paginationState: paginationState
+  };
+};
+var _default = usePaginationState;
+exports["default"] = _default;

package/lib/cjs/index.d.ts

@@ -134,6 +134,8 @@ export * from './components/NumberField';
 export { default as OverlayPanel } from './components/OverlayPanel';
 export * from './components/OverlayPanel';
 export { default as PageHeader } from './components/PageHeader';
+export { default as Pagination } from './components/Pagination';
+export { default as PaginationProvider } from './components/Pagination/PaginationProvider';
 export { default as PanelHeader } from './components/PanelHeader';
 export { default as PanelHeaderCloseButton } from './components/PanelHeader/controls/PanelHeaderCloseButton';
 export { default as PanelHeaderMenu } from './components/PanelHeader/controls/PanelHeaderMenu';
@@ -206,6 +208,7 @@ export { default as TooltipTrigger } from './components/TooltipTrigger';
 export * from './components/TooltipTrigger';
 export { default as TreeView } from './components/TreeView';
 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 NextGenTheme } from './styles/themes/next-gen';

package/lib/cjs/index.js

@@ -101,6 +101,8 @@ var _exportNames = {
   NumberField: true,
   OverlayPanel: true,
   PageHeader: true,
+  Pagination: true,
+  PaginationProvider: true,
   PanelHeader: true,
   PanelHeaderCloseButton: true,
   PanelHeaderMenu: true,
@@ -142,6 +144,7 @@ var _exportNames = {
   TimeZonePicker: true,
   TooltipTrigger: true,
   TreeView: true,
+  PaginationContext: true,
   NextGenDarkTheme: true,
   OnyxDarkTheme: true,
   NextGenTheme: true,
@@ -675,6 +678,24 @@ _Object$defineProperty(exports, "PageHeader", {
     return _PageHeader["default"];
   }
 });
+_Object$defineProperty(exports, "Pagination", {
+  enumerable: true,
+  get: function get() {
+    return _Pagination["default"];
+  }
+});
+_Object$defineProperty(exports, "PaginationContext", {
+  enumerable: true,
+  get: function get() {
+    return _PaginationContext.PaginationContext;
+  }
+});
+_Object$defineProperty(exports, "PaginationProvider", {
+  enumerable: true,
+  get: function get() {
+    return _PaginationProvider["default"];
+  }
+});
 _Object$defineProperty(exports, "PanelHeader", {
   enumerable: true,
   get: function get() {
@@ -1639,6 +1660,8 @@ _forEachInstanceProperty(_context47 = _Object$keys(_OverlayPanel)).call(_context
   });
 });
 var _PageHeader = _interopRequireDefault(require("./components/PageHeader"));
+var _Pagination = _interopRequireDefault(require("./components/Pagination"));
+var _PaginationProvider = _interopRequireDefault(require("./components/Pagination/PaginationProvider"));
 var _PanelHeader = _interopRequireDefault(require("./components/PanelHeader"));
 var _PanelHeaderCloseButton = _interopRequireDefault(require("./components/PanelHeader/controls/PanelHeaderCloseButton"));
 var _PanelHeaderMenu = _interopRequireDefault(require("./components/PanelHeader/controls/PanelHeaderMenu"));
@@ -2031,6 +2054,7 @@ _forEachInstanceProperty(_context79 = _Object$keys(_TreeView)).call(_context79,
     }
   });
 });
+var _PaginationContext = require("./context/PaginationContext");
 var _nextGenDarkMode = _interopRequireDefault(require("./styles/themeOverrides/nextGenDarkMode"));
 var _nextGen = _interopRequireDefault(require("./styles/themes/next-gen"));
 var _types = require("./types");

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

@@ -8,6 +8,9 @@ declare const buttons: {
             color: string;
         };
     };
+    paginationMenu: {
+        color: string;
+    };
     neutral: {
         color: string;
     };

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

@@ -66,6 +66,9 @@ var buttons = {
       color: 'black'
     }
   },
+  paginationMenu: {
+    color: 'text.secondary'
+  },
   neutral: {
     color: 'gray-400'
   },

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

@@ -8,6 +8,10 @@ export declare const componentSpecificNextGenBlacklist: {
     PasswordField: string[];
     TextField: string[];
     OverlayPanel: string[];
+    NavBar: string[];
+};
+export declare const astroBlacklistStory: {
+    NavBar: string[];
 };
 export declare const nextGenOnlyComponents: string[];
 export default nextGenConvertedComponents;

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

@@ -4,8 +4,8 @@ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/obje
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = void 0;
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton'];
+exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = exports.astroBlacklistStory = void 0;
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'Pagination'];
 var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],
@@ -14,9 +14,14 @@ var componentSpecificNextGenBlacklist = {
   MultivaluesField: ['Condensed', 'Condensed With Section'],
   PasswordField: ['Success'],
   TextField: ['Success'],
-  OverlayPanel: ['Expandable']
+  OverlayPanel: ['Expandable'],
+  NavBar: ['Default', 'Controlled', 'Auto Collapse']
 };
 exports.componentSpecificNextGenBlacklist = componentSpecificNextGenBlacklist;
+var astroBlacklistStory = {
+  NavBar: ['Onyx Default']
+};
+exports.astroBlacklistStory = astroBlacklistStory;
 var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input'];
 exports.nextGenOnlyComponents = nextGenOnlyComponents;
 var _default = nextGenConvertedComponents;

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

@@ -1086,6 +1086,23 @@ declare const _default: {
             };
             transition: string;
         };
+        paginationMenu: {
+            px: string;
+            py: string;
+            color: string;
+            transition: string;
+            fontSize: string;
+            textDecoration: string;
+            '&.is-pressed': {
+                textDecoration: string;
+                outline: string;
+                color: string;
+            };
+            '&.is-focused': {
+                textDecoration: string;
+                outline: string;
+            };
+        };
     };
     forms: {
         input: import("theme-ui").ThemeUICSSObject;
@@ -1903,6 +1920,15 @@ declare const _default: {
             };
             transition: string;
         };
+        navBarLogoLink: {
+            borderRadius: string;
+            px: string;
+            py: string;
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+            };
+        };
     };
     cards: {
         interactive: {
@@ -2041,11 +2067,15 @@ declare const _default: {
         };
         navBar: {
             container: {
+                fontFamily: string;
                 width: string;
                 p: string;
                 backgroundColor: string;
                 boxShadow: string;
             };
+            sectionContainer: {
+                pt: string;
+            };
             sectionButton: {
                 borderRadius: string;
                 '&.is-hovered': {

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

@@ -853,5 +853,22 @@ declare const buttons: {
         };
         transition: string;
     };
+    paginationMenu: {
+        px: string;
+        py: string;
+        color: string;
+        transition: string;
+        fontSize: string;
+        textDecoration: string;
+        '&.is-pressed': {
+            textDecoration: string;
+            outline: string;
+            color: string;
+        };
+        '&.is-focused': {
+            textDecoration: string;
+            outline: string;
+        };
+    };
 };
 export default buttons;

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

@@ -153,6 +153,11 @@ var link = {
     outline: 'none'
   }
 };
+var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
+  px: '0px',
+  py: '0px',
+  color: 'text.primary'
+});
 var withIcon = _objectSpread(_objectSpread({}, secondary), {}, {
   display: 'inline-flex'
 });
@@ -350,7 +355,8 @@ var buttons = {
   primaryWithIcon: primaryWithIcon,
   iconButtons: iconButtons,
   modalCloseButton: modalCloseButton,
-  aiChat: aiChat
+  aiChat: aiChat,
+  paginationMenu: paginationMenu
 };
 var _default = buttons;
 exports["default"] = _default;

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

@@ -229,5 +229,14 @@ declare const _default: {
         };
         transition: string;
     };
+    navBarLogoLink: {
+        borderRadius: string;
+        px: string;
+        py: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+        };
+    };
 };
 export default _default;

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

@@ -17,6 +17,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _button = _interopRequireDefault(require("./button"));
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var navBarFocus = {
+  outline: '2px solid',
+  outlineColor: 'active'
+};
 var nextGen = {
   color: 'gray-800',
   fontSize: 'md',
@@ -69,6 +73,12 @@ var button = _objectSpread(_objectSpread({}, _button["default"]["default"]), {},
 var primaryButton = _objectSpread(_objectSpread({}, _button["default"].primary), {}, {
   textDecoration: 'none'
 });
+var navBarLogoLink = {
+  borderRadius: '4px',
+  px: 'md',
+  py: 'sm',
+  '&.is-focused': _objectSpread({}, navBarFocus)
+};
 var _default = {
   nextGen: nextGen,
   onyx: onyx,
@@ -76,6 +86,7 @@ var _default = {
   footerLinks: footerLinks,
   footerHeader: footerHeader,
   button: button,
-  primaryButton: primaryButton
+  primaryButton: primaryButton,
+  navBarLogoLink: navBarLogoLink
 };
 exports["default"] = _default;

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

@@ -9,11 +9,15 @@ export declare const navBarFocus: {
 };
 export declare const navBar: {
     container: {
+        fontFamily: string;
         width: string;
         p: string;
         backgroundColor: string;
         boxShadow: string;
     };
+    sectionContainer: {
+        pt: string;
+    };
     sectionButton: {
         borderRadius: string;
         '&.is-hovered': {

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

@@ -29,11 +29,15 @@ var navBarFocus = {
 exports.navBarFocus = navBarFocus;
 var navBar = {
   container: {
+    fontFamily: 'standard',
     width: '252px',
     p: 'sm',
     backgroundColor: 'background.base',
     boxShadow: '0 .5rem 1rem rgba(0, 0, 0, .15)'
   },
+  sectionContainer: {
+    pt: '0'
+  },
   sectionButton: {
     borderRadius: '4px',
     '&.is-hovered': {
@@ -47,7 +51,7 @@ var navBar = {
   itemButton: {
     py: '.75rem',
     paddingLeft: '53px',
-    color: 'text.primary',
+    color: 'gray-700',
     borderRadius: '4px',
     '&.is-focused': _objectSpread({}, navBarFocus),
     '&.is-hovered': {
@@ -55,7 +59,7 @@ var navBar = {
     },
     '&.is-pressed': {
       backgroundColor: 'gray-200',
-      color: 'text.primary'
+      color: 'gray-700'
     },
     '&.is-selected': {
       bg: 'lightblue',
@@ -64,7 +68,7 @@ var navBar = {
     }
   },
   subtitle: {
-    color: 'text.primary'
+    color: 'gray-700'
   },
   headerText: {
     color: 'text.primary',
@@ -88,13 +92,13 @@ var navBar = {
   item: {
     px: '1rem',
     py: '.75rem',
-    color: 'text.primary',
+    color: 'gray-700',
     borderRadius: '4px',
     '&.is-hovered': {
       backgroundColor: 'light'
     },
     '> div > svg': {
-      fill: 'text.primary'
+      fill: 'gray-700'
     },
     '&.is-pressed': {
       backgroundColor: 'gray-200'
@@ -121,10 +125,10 @@ var navBar = {
     '&.is-selected': _objectSpread({}, navBarSelected),
     backgroundColor: 'transparent',
     '> svg': {
-      fill: 'text.primary'
+      fill: 'gray-700'
     },
     '> div > svg': {
-      fill: 'text.primary'
+      fill: 'gray-700'
     }
   },
   navBarItemBody: {

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

@@ -230,11 +230,15 @@ declare const _default: {
     };
     navBar: {
         container: {
+            fontFamily: string;
             width: string;
             p: string;
             backgroundColor: string;
             boxShadow: string;
         };
+        sectionContainer: {
+            pt: string;
+        };
         sectionButton: {
             borderRadius: string;
             '&.is-hovered': {

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

@@ -45,6 +45,7 @@ var _Message = _interopRequireDefault(require("../../components/Messages/Message
 var _Modal = _interopRequireDefault(require("../../components/Modal/Modal.styles"));
 var _NavBar = _interopRequireDefault(require("../../components/NavBar/NavBar.styles"));
 var _OverlayPanel = _interopRequireDefault(require("../../components/OverlayPanel/OverlayPanel.styles"));
+var _Pagination = _interopRequireDefault(require("../../components/Pagination/Pagination.styles"));
 var _PanelHeader = _interopRequireDefault(require("../../components/PanelHeader/PanelHeader.styles"));
 var _PopoverMenu = _interopRequireDefault(require("../../components/PopoverMenu/PopoverMenu.styles"));
 var _ProgressBar = _interopRequireDefault(require("../../components/ProgressBar/ProgressBar.styles"));
@@ -96,8 +97,9 @@ var _default = _objectSpread({
   modal: _Modal["default"],
   navBar: _NavBar["default"],
   overlayPanel: _OverlayPanel["default"],
-  popoverMenu: _PopoverMenu["default"],
+  pagination: _Pagination["default"],
   panelHeader: _PanelHeader["default"],
+  popoverMenu: _PopoverMenu["default"],
   progressBar: _ProgressBar["default"],
   rockerButton: _RockerButton["default"],
   scrollBox: _ScrollBox["default"],