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

package/lib/cjs/styles/templates/Nav/HeaderBar.js

@@ -61,7 +61,7 @@ var HeaderBar = function HeaderBar() {
     isRow: true,
     alignItems: "center",
     justifyContent: "space-between"
-  }, (0, _react2.jsx)(_EnvironmentBreadcrumb.WithSections, null), (0, _react2.jsx)(_index.Box, {
+  }, (0, _react2.jsx)(_EnvironmentBreadcrumb.DefaultClosed, null), (0, _react2.jsx)(_index.Box, {
     isRow: true
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,

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

@@ -221,6 +221,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)
+});
 export default {
   critical: critical,
   "default": _objectSpread(_objectSpread({}, base), {}, {
@@ -232,6 +245,7 @@ export default {
     '&.is-focused': _objectSpread({}, defaultFocus)
   }),
   filter: filter,
+  headerBar: headerBar,
   inline: inline,
   inlinePrimary: inlinePrimary,
   link: link,

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

@@ -154,17 +154,63 @@ export var Default = function Default(args) {
     }) : null);
   });
 };
-export var WithSections = function WithSections() {
-  var _useState3 = useState(environmentsWithSections),
+export var DefaultClosed = function DefaultClosed(args) {
+  var _useState3 = useState({
+      name: 'Snail',
+      isSandbox: true
+    }),
     _useState4 = _slicedToArray(_useState3, 2),
-    environments = _useState4[0],
-    setEnvironments = _useState4[1];
-  var _useState5 = useState({
+    selectedEnvironment = _useState4[0],
+    setSelectedEnvironment = _useState4[1];
+  var envNode = ___EmotionJSX(Box, {
+    isRow: true,
+    key: selectedEnvironment.name
+  }, ___EmotionJSX(Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
+    label: "SANDBOX",
+    variant: "environmentBadge",
+    bg: "neutral.40"
+  }) : null);
+  var findEnvObj = function findEnvObj(envName) {
+    return _findInstanceProperty(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 ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, args, {
+    items: defaultEnvironments,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange
+  }), function (_ref4) {
+    var name = _ref4.name,
+      isSandbox = _ref4.isSandbox;
+    return ___EmotionJSX(Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? ___EmotionJSX(Badge, {
+      label: "SANDBOX",
+      variant: "environmentBadge",
+      bg: "neutral.40"
+    }) : null);
+  });
+};
+export var WithSections = function WithSections() {
+  var _useState5 = useState(environmentsWithSections),
+    _useState6 = _slicedToArray(_useState5, 2),
+    environments = _useState6[0],
+    setEnvironments = _useState6[1];
+  var _useState7 = useState({
       name: 'Consumer Banking Prod'
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selectedEnvironment = _useState6[0],
-    setSelectedEnvironment = _useState6[1];
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedEnvironment = _useState8[0],
+    setSelectedEnvironment = _useState8[1];
   var recentEnvShown = 3;
   var getUpdatedRecentEnvs = function getUpdatedRecentEnvs(envObj, prevEnvs) {
     var _context3;
@@ -226,19 +272,19 @@ export 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 ___EmotionJSX(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 ___EmotionJSX(Item, {
         key: _concatInstanceProperty(_context5 = "".concat(sectionName, "-")).call(_context5, itemName),
         childItems: itemOptions,
@@ -259,13 +305,13 @@ export var OrgLevel = function OrgLevel() {
   });
 };
 export var DefaultOpen = function DefaultOpen() {
-  var _useState7 = useState({
+  var _useState9 = useState({
       name: 'Dog',
       isSandbox: true
     }),
-    _useState8 = _slicedToArray(_useState7, 2),
-    selectedEnvironment = _useState8[0],
-    setSelectedEnvironment = _useState8[1];
+    _useState10 = _slicedToArray(_useState9, 2),
+    selectedEnvironment = _useState10[0],
+    setSelectedEnvironment = _useState10[1];
   var envNode = ___EmotionJSX(Box, {
     isRow: true,
     key: selectedEnvironment.name
@@ -277,8 +323,8 @@ export var DefaultOpen = function DefaultOpen() {
     bg: "neutral.40"
   }) : null);
   var findEnvObj = function findEnvObj(envName) {
-    return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref5) {
-      var name = _ref5.name;
+    return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref7) {
+      var name = _ref7.name;
       return name === envName;
     });
   };
@@ -292,9 +338,9 @@ export 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 ___EmotionJSX(Item, {
       key: name,
       textValue: name
@@ -306,17 +352,17 @@ export var DefaultOpen = function DefaultOpen() {
   });
 };
 export var ControlledMenu = function ControlledMenu() {
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    isOpen = _useState10[0],
-    setIsOpen = _useState10[1];
-  var _useState11 = useState({
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isOpen = _useState12[0],
+    setIsOpen = _useState12[1];
+  var _useState13 = useState({
       name: 'Shark',
       isSandbox: true
     }),
-    _useState12 = _slicedToArray(_useState11, 2),
-    selectedEnvironment = _useState12[0],
-    setSelectedEnvironment = _useState12[1];
+    _useState14 = _slicedToArray(_useState13, 2),
+    selectedEnvironment = _useState14[0],
+    setSelectedEnvironment = _useState14[1];
   var envNode = ___EmotionJSX(Box, {
     isRow: true,
     key: selectedEnvironment.name
@@ -328,8 +374,8 @@ export var ControlledMenu = function ControlledMenu() {
     bg: "neutral.40"
   }) : null);
   var findEnvObj = function findEnvObj(envName) {
-    return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref7) {
-      var name = _ref7.name;
+    return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref9) {
+      var name = _ref9.name;
       return name === envName;
     });
   };
@@ -344,9 +390,9 @@ export 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 ___EmotionJSX(Item, {
       key: name,
       textValue: name
@@ -358,13 +404,13 @@ export var ControlledMenu = function ControlledMenu() {
   });
 };
 export var RightAlignedBadges = function RightAlignedBadges(args) {
-  var _useState13 = useState({
+  var _useState15 = useState({
       name: 'Snail',
       isSandbox: true
     }),
-    _useState14 = _slicedToArray(_useState13, 2),
-    selectedEnvironment = _useState14[0],
-    setSelectedEnvironment = _useState14[1];
+    _useState16 = _slicedToArray(_useState15, 2),
+    selectedEnvironment = _useState16[0],
+    setSelectedEnvironment = _useState16[1];
   var envNode = ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(Text, {
@@ -375,8 +421,8 @@ export var RightAlignedBadges = function RightAlignedBadges(args) {
     bg: "neutral.40"
   }) : null);
   var findEnvObj = function findEnvObj(envName) {
-    return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref9) {
-      var name = _ref9.name;
+    return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref11) {
+      var name = _ref11.name;
       return name === envName;
     });
   };
@@ -418,9 +464,9 @@ export 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 ___EmotionJSX(Item, {
       key: name,
       textValue: name

package/lib/components/NavBar/NavBar.js

@@ -1,10 +1,14 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["defaultSelectedKey", "selectedKey", "setSelectedKey", "hasRestoreFocus", "defaultExpandedKeys", "children", "variant"];
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useState } from 'react';
 import { FocusScope, useFocusManager } from '@react-aria/focus';
 import PropTypes from 'prop-types';
 import { NavBarContext } from '../../context/NavBarContext';
+import useNavBarStyling from '../../hooks/useNavBarStyling/useNavBarStyling';
 import useProgressiveState from '../../hooks/useProgressiveState';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import Box from '../Box/Box';
@@ -23,8 +27,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 = _objectWithoutProperties(props, _excluded);
   var _useState = useState(defaultExpandedKeys),
     _useState2 = _slicedToArray(_useState, 2),
     expandedKeys = _useState2[0],
@@ -33,6 +40,7 @@ var NavBar = function NavBar(props) {
     _useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
     selectedKey = _useProgressiveState2[0],
     setSelectedKey = _useProgressiveState2[1];
+  var navStyles = useNavBarStyling(variant);
   var items = _Array$isArray(children) ? _mapInstanceProperty(children).call(children, function (child) {
     return {
       item: child,
@@ -46,16 +54,17 @@ var NavBar = function NavBar(props) {
     selectedKey: selectedKey,
     setSelectedKey: setSelectedKeyProp || setSelectedKey,
     expandedKeys: expandedKeys,
-    setExpandedKeys: setExpandedKeys
+    setExpandedKeys: setExpandedKeys,
+    navStyles: navStyles
   };
   return ___EmotionJSX(NavBarContext.Provider, {
     value: contextValue
-  }, ___EmotionJSX(Box, {
-    variant: "navBar.container",
+  }, ___EmotionJSX(Box, _extends({
+    variant: navStyles.navBar,
     role: "navigation",
     as: "nav"
-  }, items.length ? ___EmotionJSX(FocusScope, {
-    restoreFocus: true
+  }, others), items.length ? ___EmotionJSX(FocusScope, {
+    restoreFocus: hasRestoreFocus
   }, _mapInstanceProperty(items).call(items, function (_ref) {
     var item = _ref.item,
       key = _ref.key;
@@ -88,6 +97,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.oneOf(['default', 'popupNav']),
+  /** Whether or not the focus will return to the previously focused element upon unmount. */
+  hasRestoreFocus: PropTypes.bool,
   /** The initial selected key in the collection (uncontrolled). */
   defaultSelectedKey: PropTypes.string,
   /** The initial expanded keys in the collection (uncontrolled). */
@@ -103,6 +116,8 @@ NavBar.propTypes = {
 };
 NavBar.defaultProps = {
   defaultSelectedKey: '',
-  defaultExpandedKeys: []
+  defaultExpandedKeys: [],
+  variant: 'default',
+  hasRestoreFocus: true
 };
 export default NavBar;

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

@@ -22,6 +22,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',
@@ -35,6 +43,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%',
@@ -66,6 +86,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.body), {}, {
   pl: '0'
 });
@@ -89,6 +139,8 @@ var itemButton = {
   maxWidth: '100%',
   wordWrap: 'break-word',
   wordBreak: 'break-word',
+  paddingLeft: '45px',
+  paddingRight: '45px',
   '&.is-focused': {
     outline: '1px solid',
     outlineColor: 'focus'
@@ -104,6 +156,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',
@@ -123,6 +197,16 @@ var headerText = _objectSpread(_objectSpread({}, 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',
@@ -158,6 +242,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({}, quiet), {}, {
   width: '100%',
   '&.is-focused': {
@@ -171,15 +262,49 @@ var sectionButton = _objectSpread(_objectSpread({}, quiet), {}, {
     backgroundColor: 'accent.5'
   }
 });
+var popUpSectionButton = _objectSpread(_objectSpread({}, 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
+});
 export 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
 };

package/lib/components/NavBarSection/NavBarItem.js

@@ -56,7 +56,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var color = isSelected ? 'white' : 'neutral.95';
   return ___EmotionJSX(Box, _extends({
     id: key,
-    variant: "navBar.item",
+    variant: state.navStyles.navBarItem,
     isRow: true,
     tabIndex: 0,
     className: classNames,
@@ -80,7 +80,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
       fill: color
     }
   }), ___EmotionJSX(Text, {
-    variant: "variants.navBar.headerText"
+    variant: state.navStyles.navBarItemText
   }, text)));
 });
 NavBarItem.propTypes = {

package/lib/components/NavBarSection/NavBarItemBody.js

@@ -3,12 +3,14 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import React, { Fragment } from 'react';
 import { useKeyboard } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
+import { useNavBarContext } from '../../context/NavBarContext';
 import { Box, Separator, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NavBarItemBody = function NavBarItemBody(_ref) {
   var _context;
   var item = _ref.item,
     onKeyDown = _ref.onKeyDown;
+  var state = useNavBarContext();
   var renderSubTitle = function renderSubTitle(child) {
     var _child$hasSeparator = child.hasSeparator,
       hasSeparator = _child$hasSeparator === void 0 ? true : _child$hasSeparator,
@@ -31,10 +33,7 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
     }, child);
   };
   return ___EmotionJSX(Box, {
-    sx: {
-      alignItems: 'stretch',
-      mb: 'md'
-    }
+    variant: state.navStyles.navBarItemBody
   }, _mapInstanceProperty(_context = item.children).call(_context, renderChild));
 };
 var ChildItemWrapper = function ChildItemWrapper(_ref2) {

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

@@ -1,14 +1,15 @@
 import React from 'react';
 import { Text } from '../..';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import NavBar from '../NavBar';
 import NavBarItemBody from './NavBarItemBody';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var getComponent = function getComponent(item) {
-  return render(___EmotionJSX(NavBarItemBody, {
+  return render(___EmotionJSX(NavBar, null, ___EmotionJSX(NavBarItemBody, {
     item: {
       children: [item]
     }
-  }));
+  })));
 };
 var SUBTITLE = 'subtitle';
 var TEXT = 'text';

package/lib/components/NavBarSection/NavBarItemButton.js

@@ -1,17 +1,6 @@
-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 _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 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) { _defineProperty(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; }
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useNavBarContext } from '../../context/NavBarContext';
@@ -37,16 +26,11 @@ var NavBarItemButton = function NavBarItemButton(props) {
     classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Button, _extends({
     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. */