@pingux/astro 2.4.2-alpha.0 → 2.5.0-alpha.0

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

@@ -234,6 +234,19 @@ var colorBlock = {
     borderColor: 'accent.20'
   }
 };
+var headerBar = _objectSpread(_objectSpread({}, base), {}, {
+  backgroundColor: 'white',
+  '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
+    border: 'none'
+  }),
+  '&.is-pressed': _objectSpread(_objectSpread({}, defaultActive), {}, {
+    border: 'none',
+    '> div > span': {
+      color: 'white'
+    }
+  }),
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
 var _default = {
   critical: critical,
   "default": _objectSpread(_objectSpread({}, base), {}, {
@@ -245,6 +258,7 @@ var _default = {
     '&.is-focused': _objectSpread({}, defaultFocus)
   }),
   filter: filter,
+  headerBar: headerBar,
   inline: inline,
   inlinePrimary: inlinePrimary,
   link: link,

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

@@ -14,7 +14,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithSections = exports.RightAlignedBadges = exports.OrgLevel = exports.DefaultOpen = exports.Default = exports.ControlledMenu = void 0;
+exports["default"] = exports.WithSections = exports.RightAlignedBadges = exports.OrgLevel = exports.DefaultOpen = exports.DefaultClosed = exports.Default = exports.ControlledMenu = void 0;
 var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
@@ -168,17 +168,64 @@ var Default = function Default(args) {
   });
 };
 exports.Default = Default;
-var WithSections = function WithSections() {
-  var _useState3 = (0, _react.useState)(environmentsWithSections),
+var DefaultClosed = function DefaultClosed(args) {
+  var _useState3 = (0, _react.useState)({
+      name: 'Snail',
+      isSandbox: true
+    }),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    environments = _useState4[0],
-    setEnvironments = _useState4[1];
-  var _useState5 = (0, _react.useState)({
+    selectedEnvironment = _useState4[0],
+    setSelectedEnvironment = _useState4[1];
+  var envNode = (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    key: selectedEnvironment.name
+  }, (0, _react2.jsx)(_index.Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
+    label: "SANDBOX",
+    variant: "environmentBadge",
+    bg: "neutral.40"
+  }) : null);
+  var findEnvObj = function findEnvObj(envName) {
+    return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref3) {
+      var name = _ref3.name;
+      return name === envName;
+    });
+  };
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+  return (0, _react2.jsx)(_index.EnvironmentBreadcrumb, (0, _extends2["default"])({}, args, {
+    items: defaultEnvironments,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange
+  }), function (_ref4) {
+    var name = _ref4.name,
+      isSandbox = _ref4.isSandbox;
+    return (0, _react2.jsx)(_index.Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? (0, _react2.jsx)(_index.Badge, {
+      label: "SANDBOX",
+      variant: "environmentBadge",
+      bg: "neutral.40"
+    }) : null);
+  });
+};
+exports.DefaultClosed = DefaultClosed;
+var WithSections = function WithSections() {
+  var _useState5 = (0, _react.useState)(environmentsWithSections),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    environments = _useState6[0],
+    setEnvironments = _useState6[1];
+  var _useState7 = (0, _react.useState)({
       name: 'Consumer Banking Prod'
     }),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    selectedEnvironment = _useState6[0],
-    setSelectedEnvironment = _useState6[1];
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    selectedEnvironment = _useState8[0],
+    setSelectedEnvironment = _useState8[1];
   var recentEnvShown = 3;
   var getUpdatedRecentEnvs = function getUpdatedRecentEnvs(envObj, prevEnvs) {
     var _context3;
@@ -240,19 +287,19 @@ var WithSections = function WithSections() {
     selectedItem: envNode,
     onSelectionChange: handleEnvPress,
     isDefaultOpen: true
-  }, function (_ref3) {
-    var sectionName = _ref3.name,
-      sectionOptions = _ref3.options,
-      sectionKey = _ref3.key;
+  }, function (_ref5) {
+    var sectionName = _ref5.name,
+      sectionOptions = _ref5.options,
+      sectionKey = _ref5.key;
     return (0, _react2.jsx)(_index.Section, {
       key: sectionKey,
       title: sectionName,
       items: sectionOptions
-    }, function (_ref4) {
+    }, function (_ref6) {
       var _context5;
-      var itemName = _ref4.name,
-        itemOptions = _ref4.options,
-        isSandbox = _ref4.isSandbox;
+      var itemName = _ref6.name,
+        itemOptions = _ref6.options,
+        isSandbox = _ref6.isSandbox;
       return (0, _react2.jsx)(_index.Item, {
         key: (0, _concat["default"])(_context5 = "".concat(sectionName, "-")).call(_context5, itemName),
         childItems: itemOptions,
@@ -275,13 +322,13 @@ var OrgLevel = function OrgLevel() {
 };
 exports.OrgLevel = OrgLevel;
 var DefaultOpen = function DefaultOpen() {
-  var _useState7 = (0, _react.useState)({
+  var _useState9 = (0, _react.useState)({
       name: 'Dog',
       isSandbox: true
     }),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    selectedEnvironment = _useState8[0],
-    setSelectedEnvironment = _useState8[1];
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    selectedEnvironment = _useState10[0],
+    setSelectedEnvironment = _useState10[1];
   var envNode = (0, _react2.jsx)(_index.Box, {
     isRow: true,
     key: selectedEnvironment.name
@@ -293,8 +340,8 @@ var DefaultOpen = function DefaultOpen() {
     bg: "neutral.40"
   }) : null);
   var findEnvObj = function findEnvObj(envName) {
-    return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref5) {
-      var name = _ref5.name;
+    return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref7) {
+      var name = _ref7.name;
       return name === envName;
     });
   };
@@ -308,9 +355,9 @@ var DefaultOpen = function DefaultOpen() {
     selectedItem: envNode,
     onSelectionChange: handleSelectionChange,
     isDefaultOpen: true
-  }, function (_ref6) {
-    var name = _ref6.name,
-      isSandbox = _ref6.isSandbox;
+  }, function (_ref8) {
+    var name = _ref8.name,
+      isSandbox = _ref8.isSandbox;
     return (0, _react2.jsx)(_index.Item, {
       key: name,
       textValue: name
@@ -323,17 +370,17 @@ var DefaultOpen = function DefaultOpen() {
 };
 exports.DefaultOpen = DefaultOpen;
 var ControlledMenu = function ControlledMenu() {
-  var _useState9 = (0, _react.useState)(false),
-    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    isOpen = _useState10[0],
-    setIsOpen = _useState10[1];
-  var _useState11 = (0, _react.useState)({
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    isOpen = _useState12[0],
+    setIsOpen = _useState12[1];
+  var _useState13 = (0, _react.useState)({
       name: 'Shark',
       isSandbox: true
     }),
-    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    selectedEnvironment = _useState12[0],
-    setSelectedEnvironment = _useState12[1];
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    selectedEnvironment = _useState14[0],
+    setSelectedEnvironment = _useState14[1];
   var envNode = (0, _react2.jsx)(_index.Box, {
     isRow: true,
     key: selectedEnvironment.name
@@ -345,8 +392,8 @@ var ControlledMenu = function ControlledMenu() {
     bg: "neutral.40"
   }) : null);
   var findEnvObj = function findEnvObj(envName) {
-    return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref7) {
-      var name = _ref7.name;
+    return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref9) {
+      var name = _ref9.name;
       return name === envName;
     });
   };
@@ -361,9 +408,9 @@ var ControlledMenu = function ControlledMenu() {
     onSelectionChange: handleSelectionChange,
     isOpen: isOpen,
     onOpenChange: setIsOpen
-  }, function (_ref8) {
-    var name = _ref8.name,
-      isSandbox = _ref8.isSandbox;
+  }, function (_ref10) {
+    var name = _ref10.name,
+      isSandbox = _ref10.isSandbox;
     return (0, _react2.jsx)(_index.Item, {
       key: name,
       textValue: name
@@ -376,13 +423,13 @@ var ControlledMenu = function ControlledMenu() {
 };
 exports.ControlledMenu = ControlledMenu;
 var RightAlignedBadges = function RightAlignedBadges(args) {
-  var _useState13 = (0, _react.useState)({
+  var _useState15 = (0, _react.useState)({
       name: 'Snail',
       isSandbox: true
     }),
-    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-    selectedEnvironment = _useState14[0],
-    setSelectedEnvironment = _useState14[1];
+    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+    selectedEnvironment = _useState16[0],
+    setSelectedEnvironment = _useState16[1];
   var envNode = (0, _react2.jsx)(_index.Box, {
     isRow: true
   }, (0, _react2.jsx)(_index.Text, {
@@ -393,8 +440,8 @@ var RightAlignedBadges = function RightAlignedBadges(args) {
     bg: "neutral.40"
   }) : null);
   var findEnvObj = function findEnvObj(envName) {
-    return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref9) {
-      var name = _ref9.name;
+    return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref11) {
+      var name = _ref11.name;
       return name === envName;
     });
   };
@@ -436,9 +483,9 @@ var RightAlignedBadges = function RightAlignedBadges(args) {
     name: "Globochem",
     selectedItem: envNode,
     onSelectionChange: handleSelectionChange
-  }), function (_ref10) {
-    var name = _ref10.name,
-      isSandbox = _ref10.isSandbox;
+  }), function (_ref12) {
+    var name = _ref12.name,
+      isSandbox = _ref12.isSandbox;
     return (0, _react2.jsx)(_index.Item, {
       key: name,
       textValue: name

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

@@ -207,7 +207,10 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.fieldControlWra
       outline: 'none'
     }
   },
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-error': {
+    borderColor: 'critical.dark'
+  }
 }, (0, _defineProperty2["default"])(_objectSpread2, "&.is-".concat(_statuses["default"].ERROR, "::after"), {
   bg: 'critical.bright'
 }), (0, _defineProperty2["default"])(_objectSpread2, "&.is-".concat(_statuses["default"].SUCCESS, "::after"), {

package/lib/cjs/components/NavBar/NavBar.js

@@ -11,15 +11,19 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _focus = require("@react-aria/focus");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _NavBarContext = require("../../context/NavBarContext");
+var _useNavBarStyling = _interopRequireDefault(require("../../hooks/useNavBarStyling/useNavBarStyling"));
 var _useProgressiveState3 = _interopRequireDefault(require("../../hooks/useProgressiveState"));
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _Box = _interopRequireDefault(require("../Box/Box"));
 var _react2 = require("@emotion/react");
+var _excluded = ["defaultSelectedKey", "selectedKey", "setSelectedKey", "hasRestoreFocus", "defaultExpandedKeys", "children", "variant"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -36,8 +40,11 @@ var NavBar = function NavBar(props) {
   var defaultSelectedKey = props.defaultSelectedKey,
     selectedKeyProp = props.selectedKey,
     setSelectedKeyProp = props.setSelectedKey,
+    hasRestoreFocus = props.hasRestoreFocus,
     defaultExpandedKeys = props.defaultExpandedKeys,
-    children = props.children;
+    children = props.children,
+    variant = props.variant,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useState = (0, _react.useState)(defaultExpandedKeys),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     expandedKeys = _useState2[0],
@@ -46,6 +53,7 @@ var NavBar = function NavBar(props) {
     _useProgressiveState2 = (0, _slicedToArray2["default"])(_useProgressiveState, 2),
     selectedKey = _useProgressiveState2[0],
     setSelectedKey = _useProgressiveState2[1];
+  var navStyles = (0, _useNavBarStyling["default"])(variant);
   var items = (0, _isArray["default"])(children) ? (0, _map["default"])(children).call(children, function (child) {
     return {
       item: child,
@@ -59,16 +67,17 @@ var NavBar = function NavBar(props) {
     selectedKey: selectedKey,
     setSelectedKey: setSelectedKeyProp || setSelectedKey,
     expandedKeys: expandedKeys,
-    setExpandedKeys: setExpandedKeys
+    setExpandedKeys: setExpandedKeys,
+    navStyles: navStyles
   };
   return (0, _react2.jsx)(_NavBarContext.NavBarContext.Provider, {
     value: contextValue
-  }, (0, _react2.jsx)(_Box["default"], {
-    variant: "navBar.container",
+  }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    variant: navStyles.navBar,
     role: "navigation",
     as: "nav"
-  }, items.length ? (0, _react2.jsx)(_focus.FocusScope, {
-    restoreFocus: true
+  }, others), items.length ? (0, _react2.jsx)(_focus.FocusScope, {
+    restoreFocus: hasRestoreFocus
   }, (0, _map["default"])(items).call(items, function (_ref) {
     var item = _ref.item,
       key = _ref.key;
@@ -101,6 +110,10 @@ var FocusableItem = function FocusableItem(props) {
   return childWithFocusHandle;
 };
 NavBar.propTypes = {
+  /** This applies a style to the entire nav tree. the options are default and popup. */
+  variant: _propTypes["default"].oneOf(['default', 'popupNav']),
+  /** Whether or not the focus will return to the previously focused element upon unmount. */
+  hasRestoreFocus: _propTypes["default"].bool,
   /** The initial selected key in the collection (uncontrolled). */
   defaultSelectedKey: _propTypes["default"].string,
   /** The initial expanded keys in the collection (uncontrolled). */
@@ -116,7 +129,9 @@ NavBar.propTypes = {
 };
 NavBar.defaultProps = {
   defaultSelectedKey: '',
-  defaultExpandedKeys: []
+  defaultExpandedKeys: [],
+  variant: 'default',
+  hasRestoreFocus: true
 };
 var _default = NavBar;
 exports["default"] = _default;

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

@@ -29,6 +29,14 @@ var container = {
   backgroundColor: 'accent.20',
   overflowY: 'hidden'
 };
+var popUpContainer = _objectSpread(_objectSpread({}, container), {}, {
+  minWidth: '184px',
+  maxWidth: '184px',
+  width: '184px',
+  backgroundColor: 'white',
+  borderRight: '3px solid',
+  borderRightColor: 'active'
+});
 var itemHeaderContainer = {
   flexGrow: 1,
   alignItems: 'center',
@@ -42,6 +50,18 @@ var itemHeaderContainer = {
     boxShadow: 'inset 2px 0 0 0 white'
   }
 };
+var popUpItemHeaderContainer = _objectSpread(_objectSpread({}, itemHeaderContainer), {}, {
+  minHeight: '36px',
+  maxWidth: '184px',
+  pl: 'sm',
+  pr: 'sm',
+  '&.is-selected': {
+    backgroundColor: 'active'
+  }
+});
+var popUpItemListItem = {
+  borderBottom: '1px solid #BDBDBD'
+};
 var sectionContainer = {
   pt: 'sm',
   height: '100%',
@@ -73,6 +93,36 @@ var sectionContainer = {
     scrollbarColor: 'rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.2)'
   }
 };
+var popUpSectionContainer = {
+  height: '100%',
+  maxHeight: '100%',
+  overflowY: 'auto',
+  // these rules are for webkit browsers: chrome, safari, edge
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(147, 163, 219, 1)',
+    borderRadius: '5px'
+  },
+  '&::-webkit-scrollbar': {
+    width: 7
+  },
+  '&::-webkit-scrollbar-track': {
+    backgroundColor: 'accent.95'
+  },
+  // this is a newer standard that only ff supports for now
+  scrollbarColor: 'rgba(229, 233, 248, 1) rgba(0, 0, 0, 0.1)',
+  // can't use theme values here, unfortunately
+  // different colors while hovering over the nav bar
+  '&:hover': {
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: 'rgba(147, 163, 219, 1)',
+      borderRadius: '4px'
+    },
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: 'accent.95'
+    },
+    scrollbarColor: 'rgba(229, 233, 248, 1) rgba(0, 0, 0, 0.2)'
+  }
+};
 var sectionBody = _objectSpread(_objectSpread({}, _AccordionGrid["default"].body), {}, {
   pl: '0'
 });
@@ -96,6 +146,8 @@ var itemButton = {
   maxWidth: '100%',
   wordWrap: 'break-word',
   wordBreak: 'break-word',
+  paddingLeft: '45px',
+  paddingRight: '45px',
   '&.is-focused': {
     outline: '1px solid',
     outlineColor: 'focus'
@@ -111,6 +163,28 @@ var itemButton = {
     bg: 'accent.5'
   }
 };
+var popUpItemButton = _objectSpread(_objectSpread({}, itemButton), {}, {
+  fontSize: 'sm',
+  px: 'sm',
+  color: 'text.primary',
+  '&.is-focused': {
+    outline: '1px solid',
+    outlineColor: 'focus',
+    outlineOffset: '2px'
+  },
+  '&.is-selected': {
+    bg: 'active',
+    color: 'white'
+  },
+  '&.is-hovered': {
+    bg: 'neutral.90',
+    color: 'text.primary'
+  },
+  '&.is-pressed': {
+    bg: 'active',
+    color: 'white'
+  }
+});
 var subtitle = {
   ml: 'md',
   my: 'sm',
@@ -130,6 +204,16 @@ var headerText = _objectSpread(_objectSpread({}, _Text.wordWrap), {}, {
     color: 'white'
   }
 });
+var popUpHeaderText = _objectSpread(_objectSpread({}, headerText), {}, {
+  fontWeight: 3,
+  color: 'text.primary',
+  '.is-pressed &': {
+    color: 'white'
+  },
+  '.is-selected &': {
+    color: 'white'
+  }
+});
 var headerNav = {
   cursor: 'pointer',
   minHeight: '40px',
@@ -165,6 +249,13 @@ var item = _objectSpread(_objectSpread({}, headerNav), {}, {
     boxShadow: 'inset 2px 0 0 0 white'
   }
 });
+var popUpItem = _objectSpread(_objectSpread({}, headerNav), {}, {
+  py: 'sm',
+  px: 'md',
+  '&.is-selected': {
+    boxShadow: 'inset 2px 0 0 0 white'
+  }
+});
 var sectionButton = _objectSpread(_objectSpread({}, _Buttons.quiet), {}, {
   width: '100%',
   '&.is-focused': {
@@ -178,16 +269,50 @@ var sectionButton = _objectSpread(_objectSpread({}, _Buttons.quiet), {}, {
     backgroundColor: 'accent.5'
   }
 });
+var popUpSectionButton = _objectSpread(_objectSpread({}, _Buttons.quiet), {}, {
+  width: '100%',
+  '&.is-focused': {
+    outline: '1px solid',
+    outlineColor: 'focus'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'neutral.90'
+  },
+  '&.is-pressed': {
+    backgroundColor: 'active',
+    color: 'white'
+  },
+  '&.is-pressed > div > div > svg > path': {
+    fill: 'white !important'
+  }
+});
+var navBarItemBody = {
+  alignItems: 'stretch',
+  mb: 'md'
+};
+var popUpNavBarItemBody = _objectSpread(_objectSpread({}, navBarItemBody), {}, {
+  mb: 0
+});
 var _default = {
   container: container,
+  popUpContainer: popUpContainer,
   itemHeaderContainer: itemHeaderContainer,
+  popUpItemHeaderContainer: popUpItemHeaderContainer,
+  popUpItemListItem: popUpItemListItem,
   sectionContainer: sectionContainer,
+  popUpSectionContainer: popUpSectionContainer,
   sectionBody: sectionBody,
   sectionButton: sectionButton,
+  popUpSectionButton: popUpSectionButton,
   itemButton: itemButton,
+  popUpItemButton: popUpItemButton,
   subtitle: subtitle,
   headerText: headerText,
+  popUpHeaderText: popUpHeaderText,
   headerNav: headerNav,
-  item: item
+  item: item,
+  popUpItem: popUpItem,
+  navBarItemBody: navBarItemBody,
+  popUpNavBarItemBody: popUpNavBarItemBody
 };
 exports["default"] = _default;

package/lib/cjs/components/NavBarSection/NavBarItem.js

@@ -69,7 +69,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var color = isSelected ? 'white' : 'neutral.95';
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     id: key,
-    variant: "navBar.item",
+    variant: state.navStyles.navBarItem,
     isRow: true,
     tabIndex: 0,
     className: classNames,
@@ -93,7 +93,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       fill: color
     }
   }), (0, _react2.jsx)(_index.Text, {
-    variant: "variants.navBar.headerText"
+    variant: state.navStyles.navBarItemText
   }, text)));
 });
 NavBarItem.propTypes = {

package/lib/cjs/components/NavBarSection/NavBarItemBody.js

@@ -14,6 +14,7 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 var _react = _interopRequireWildcard(require("react"));
 var _interactions = require("@react-aria/interactions");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _NavBarContext = require("../../context/NavBarContext");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -22,6 +23,7 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
   var _context;
   var item = _ref.item,
     onKeyDown = _ref.onKeyDown;
+  var state = (0, _NavBarContext.useNavBarContext)();
   var renderSubTitle = function renderSubTitle(child) {
     var _child$hasSeparator = child.hasSeparator,
       hasSeparator = _child$hasSeparator === void 0 ? true : _child$hasSeparator,
@@ -44,10 +46,7 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
     }, child);
   };
   return (0, _react2.jsx)(_index.Box, {
-    sx: {
-      alignItems: 'stretch',
-      mb: 'md'
-    }
+    variant: state.navStyles.navBarItemBody
   }, (0, _map["default"])(_context = item.children).call(_context, renderChild));
 };
 var ChildItemWrapper = function ChildItemWrapper(_ref2) {

package/lib/cjs/components/NavBarSection/NavBarItemBody.test.js

@@ -4,14 +4,15 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 var _react = _interopRequireDefault(require("react"));
 var _ = require("../..");
 var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _NavBar = _interopRequireDefault(require("../NavBar"));
 var _NavBarItemBody = _interopRequireDefault(require("./NavBarItemBody"));
 var _react2 = require("@emotion/react");
 var getComponent = function getComponent(item) {
-  return (0, _testWrapper.render)((0, _react2.jsx)(_NavBarItemBody["default"], {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], null, (0, _react2.jsx)(_NavBarItemBody["default"], {
     item: {
       children: [item]
     }
-  }));
+  })));
 };
 var SUBTITLE = 'subtitle';
 var TEXT = 'text';

package/lib/cjs/components/NavBarSection/NavBarItemButton.js

@@ -1,12 +1,5 @@
 "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", {
@@ -14,7 +7,6 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -23,8 +15,6 @@ var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "id", "onPress", "sx"];
-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 NavBarItemButton = function NavBarItemButton(props) {
   var className = props.className,
     key = props.id,
@@ -44,16 +34,11 @@ var NavBarItemButton = function NavBarItemButton(props) {
     classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     id: key,
-    variant: "variants.navBar.itemButton",
+    variant: state.navStyles.navBarItemButton,
     onPress: onNavPress,
     className: classNames,
     color: isSelected ? 'white' : undefined
-  }, others, {
-    sx: _objectSpread({
-      paddingLeft: '45px',
-      paddingRight: '45px'
-    }, sx)
-  }));
+  }, others));
 };
 NavBarItemButton.propTypes = {
   /**  Handler that is called when the press is released over the target. */