@pingux/astro 1.1.0-alpha.1 → 1.1.0-alpha.13

package/lib/components/NavBar/NavBar.test.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import GlobeIcon from 'mdi-react/GlobeIcon';
+import ViewDashboard from 'mdi-react/ViewDashboardIcon';
+import AccountMultiple from 'mdi-react/AccountMultipleIcon';
+import TransitConnection from 'mdi-react/TransitConnectionVariantIcon';
+import EmoticonHappy from 'mdi-react/EmoticonHappyOutlineIcon';
+import Fingerprint from 'mdi-react/FingerprintIcon';
+import ScaleBalance from 'mdi-react/ScaleBalanceIcon';
+import Verify from 'mdi-react/VerifiedIcon';
+import NavBar from './NavBar';
+import axeTest from '../../utils/testUtils/testAxe';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import { Box, NavBarSection } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var data = [{
+  icon: GlobeIcon,
+  key: 'Overview',
+  heading: 'Overview',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'A roles title that is really really really really long']
+}, {
+  icon: ViewDashboard,
+  key: 'Dashboard',
+  heading: 'Dashboard',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}, {
+  icon: AccountMultiple,
+  key: 'Identities',
+  heading: 'Identities',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}, {
+  icon: TransitConnection,
+  key: 'Connections',
+  heading: 'Connections',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}, {
+  icon: EmoticonHappy,
+  key: 'Experiences',
+  heading: 'Experiences',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}];
+var secondData = [{
+  icon: Fingerprint,
+  key: 'MFA',
+  heading: 'MFA',
+  children: ['Users', {
+    subTitle: 'PingOne Services'
+  }, 'Group', 'Populations', 'Attributes', 'Roles']
+}, {
+  icon: ScaleBalance,
+  key: 'Risk',
+  heading: 'Risk',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}, {
+  icon: Verify,
+  key: 'Verify',
+  heading: 'Verify',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}];
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(NavBar, props, ___EmotionJSX(Box, {
+    sx: {
+      height: '100%',
+      maxHeight: '100%',
+      overflowY: 'overlay !important'
+    }
+  }, ___EmotionJSX(NavBarSection, {
+    items: data,
+    hasSeparator: true
+  }), ___EmotionJSX(NavBarSection, {
+    items: secondData,
+    title: "test_title"
+  }))));
+};
+
+axeTest(getComponent);
+test('should render basic nav with children', function () {
+  getComponent();
+  var nav = screen.queryByRole('navigation');
+  expect(nav).toBeInTheDocument();
+});
+test('should render title for sections that have titles', function () {
+  getComponent();
+  var title = screen.getByText('test_title');
+  expect(title).toBeInTheDocument();
+});
+test('should render title for itemBodies that have subTitles', function () {
+  getComponent();
+  var subTitle = screen.getByText('PingOne Services');
+  expect(subTitle).toBeInTheDocument();
+});

package/lib/components/NavBar/index.js

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

package/lib/components/NavBarSection/NavBarItemBody.js

@@ -0,0 +1,37 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Separator, Box, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var NavBarItemBody = function NavBarItemBody(props) {
+  var _context;
+
+  return ___EmotionJSX(Box, {
+    sx: {
+      alignItems: 'flex-start',
+      mb: '15px'
+    }
+  }, _mapInstanceProperty(_context = props.item.children).call(_context, function (child) {
+    return child.subTitle ? ___EmotionJSX(Fragment, {
+      key: "fragment".concat(child.subTitle)
+    }, ___EmotionJSX(Separator, {
+      variant: "separator.navBarSubtitleSeparator",
+      key: "separator".concat(child.subTitle)
+    }), ___EmotionJSX(Text, {
+      key: "text".concat(child.subTitle),
+      variant: "text.navBarSubtitle",
+      sx: {
+        mb: '10px',
+        ml: '45px'
+      }
+    }, child.subTitle)) : child;
+  }));
+};
+
+NavBarItemBody.propTypes = {
+  item: PropTypes.shape({
+    children: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))
+  })
+};
+export default NavBarItemBody;

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, Icon, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var NavBarItemHeader = function NavBarItemHeader(props) {
+  var item = props.item;
+  var icon = item.icon;
+  return ___EmotionJSX(Box, {
+    variant: "boxes.navBarItemHeaderContainer",
+    isRow: true
+  }, icon && ___EmotionJSX(Icon, {
+    icon: icon,
+    size: 20,
+    sx: {
+      mr: '10px',
+      color: 'white',
+      fill: 'white'
+    }
+  }), ___EmotionJSX(Text, {
+    variant: "navBarHeaderText"
+  }, props.item.heading));
+};
+
+NavBarItemHeader.propTypes = {
+  item: PropTypes.shape({
+    heading: PropTypes.string,
+    icon: PropTypes.elementType
+  })
+};
+export default NavBarItemHeader;

package/lib/components/NavBarSection/NavBarSection.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Separator, AccordionGridGroup, Text, Item, Box } from '../../index';
+import NavBarItemBody from './NavBarItemBody';
+import NavBarItemHeader from './NavBarItemHeader';
+/**
+ * Composed component that creates an AccordionGrid group
+ * with title, and separator options.
+ *
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var NavBarSection = function NavBarSection(props) {
+  var hasSeparator = props.hasSeparator,
+      title = props.title,
+      items = props.items;
+  return ___EmotionJSX(React.Fragment, null, title && ___EmotionJSX(Text, {
+    variant: "text.navBarSubtitle",
+    sx: {
+      mt: '25px',
+      mb: '15px',
+      ml: '15px'
+    }
+  }, title), ___EmotionJSX(AccordionGridGroup, {
+    items: items
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      headerProps: {
+        variant: 'accordion.accordionGridHeaderNav'
+      },
+      textValue: item
+    }, ___EmotionJSX(NavBarItemHeader, {
+      item: item
+    }), ___EmotionJSX(NavBarItemBody, {
+      item: item
+    }));
+  }), hasSeparator && ___EmotionJSX(Box, {
+    sx: {
+      pl: '15px',
+      pr: '15px',
+      mt: '25px'
+    }
+  }, ___EmotionJSX(Separator, {
+    variant: "separator.navBarSeparator"
+  })));
+};
+
+NavBarSection.defaultProps = {
+  hasSeparator: false
+};
+NavBarSection.propTypes = {
+  /** If true, a separator will render at the end of the section */
+  hasSeparator: PropTypes.bool,
+
+  /** If present, this string will render at the top of the section */
+  title: PropTypes.string,
+
+  /**
+   * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
+   * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
+  */
+  items: PropTypes.arrayOf(PropTypes.shape({}))
+};
+export default NavBarSection;

package/lib/components/NavBarSection/index.js

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

package/lib/components/OverlayPanel/OverlayPanel.stories.js

@@ -3,9 +3,8 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
 import { Item } from '@react-stately/collections';
 import { useOverlayPanelState } from '../../hooks';
-import Button from '../Button/Button';
 import OverlayPanel from './OverlayPanel';
-import { OverlayProvider, Box, Text, List, ListItem, Separator, Messages } from '../../index';
+import { OverlayProvider, Box, Text, List, ListItem, Separator, Messages, Button, AccordionGroup } from '../../index';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -47,9 +46,12 @@ export var Default = function Default(_ref) {
       isOpen: state.isOpen
     }, args), ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
       onPress: state.close
-    }, "Close Panel"), ___EmotionJSX(Text, {
-      pt: "md"
-    }, "Children render here."))))
+    }, "Close Panel"), ___EmotionJSX(AccordionGroup, args, ___EmotionJSX(Item, {
+      key: "accordionKey",
+      textValue: "accordionKey",
+      label: "Accordion Label",
+      "data-id": "accordionItem"
+    }, ___EmotionJSX(Text, null, "Render me!"))))))
   );
 };
 export var InnerPanel = function InnerPanel(_ref2) {

package/lib/components/PopoverContainer/PopoverContainer.test.js

@@ -1,13 +1,20 @@
 import React from 'react';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import { Box } from '../../index';
+import { Box, OverlayPanel } from '../../index';
 import PopoverContainer from './PopoverContainer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(React.Fragment, null, ___EmotionJSX(PopoverContainer, props, ___EmotionJSX(Box, null, "I am in a popover"))));
+};
+
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayPanel, {
+    isOpen: true
+  }, ___EmotionJSX(PopoverContainer, props, ___EmotionJSX(Box, null, "I am in a popover"))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -26,4 +33,12 @@ test('should render a popover with no arrow', function () {
   });
   var arrow = screen.queryByTestId('popover-arrow');
   expect(arrow).not.toBeInTheDocument();
+});
+test('popover will not open if wrapped in an overlayPanel', function () {
+  getComponentInOverlayPanel({
+    popoverProps: {
+      'data-test-id': 'popover-test'
+    }
+  });
+  expect(screen.queryByTestId('popover-test')).not.toBeInTheDocument();
 });

package/lib/components/Separator/Separator.js

@@ -29,7 +29,7 @@ var Separator = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     className: classNames,
-    variant: "separator"
+    variant: "separator.base"
   }, others, separatorProps));
 });
 Separator.propTypes = {

package/lib/components/TextArea/TextArea.js

@@ -12,7 +12,11 @@ import { Textarea as ThemeUITextArea } from 'theme-ui';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TextArea = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(ThemeUITextArea, _extends({
-    ref: ref
+    ref: ref // this requires to fix safari resizing issue (UIP-4995)
+    ,
+    sx: {
+      position: 'relative'
+    }
   }, props));
 });
 TextArea.displayName = 'TextArea';

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -32,7 +32,8 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
       className = props.className,
       isNotFlippable = props.isNotFlippable,
       isDarkMode = props.isDarkMode,
-      hasNoArrow = props.hasNoArrow;
+      hasNoArrow = props.hasNoArrow,
+      targetRef = props.targetRef;
 
   var _React$Children$toArr = React.Children.toArray(children),
       _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
@@ -42,23 +43,24 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
   var state = useTooltipTriggerState(props);
   var tooltipTriggerRef = useRef();
   var overlayRef = useRef();
+  var tooltipRef = targetRef || tooltipTriggerRef;
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
 
   useImperativeHandle(ref, function () {
-    return tooltipTriggerRef.current;
+    return tooltipRef.current;
   });
 
   var _useTooltipTrigger = useTooltipTrigger({
     isDisabled: isDisabled,
     trigger: triggerAction
-  }, state, tooltipTriggerRef),
+  }, state, tooltipRef),
       triggerProps = _useTooltipTrigger.triggerProps,
       tooltipProps = _useTooltipTrigger.tooltipProps;
 
   var _useOverlayPosition = useOverlayPosition({
     placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
-    targetRef: tooltipTriggerRef,
+    targetRef: tooltipRef,
     overlayRef: overlayRef,
     offset: offset,
     // Our API preference is for default false so we invert this since it should be default true
@@ -134,7 +136,10 @@ TooltipTrigger.propTypes = {
   placement: PropTypes.string,
 
   /** By default, opens for both focus and hover. Can be made to open only for focus. */
-  trigger: PropTypes.string
+  trigger: PropTypes.string,
+
+  /* The ref for the element which the overlay positions itself with respect to. */
+  targetRef: PropTypes.shape({})
 };
 TooltipTrigger.defaultProps = {
   align: 'middle',

package/lib/index.js

@@ -27,6 +27,7 @@ export { default as CheckboxField } from './components/CheckboxField';
 export * from './components/CheckboxField';
 export { default as Chip } from './components/Chip';
 export * from './components/Chip';
+export { default as CodeView } from './components/CodeView';
 export { default as ComboBoxField } from './components/ComboBoxField';
 export { default as CopyText } from './components/CopyText';
 export { default as ColorField } from './components/ColorField';
@@ -68,6 +69,10 @@ export { default as Messages } from './components/Messages';
 export * from './components/Messages';
 export { default as Modal } from './components/Modal';
 export * from './components/Modal';
+export { default as NavBar } from './components/NavBar';
+export * from './components/NavBar';
+export { default as NavBarSection } from './components/NavBarSection';
+export * from './components/NavBarSection';
 export { default as MultivaluesField } from './components/MultivaluesField';
 export { default as OverlayPanel } from './components/OverlayPanel';
 export * from './components/OverlayPanel';

package/lib/styles/variants/accordion.js

@@ -18,11 +18,11 @@ var accordion = {
   alignItems: 'flex-start'
 };
 var accordionBody = {
-  display: 'none !important',
+  display: 'none',
   pt: 'md',
   width: '100%',
   '.is-open &': {
-    display: 'flex !important'
+    display: 'flex'
   }
 };
 var accordionGridHeader = {
@@ -56,6 +56,36 @@ var accordionGridHeader = {
     }
   }
 };
+var accordionGridHeaderNav = {
+  padding: '10px 15px 10px 15px',
+  cursor: 'pointer',
+  minHeight: '40px',
+  lineHeight: '30px',
+  outline: 'none',
+  display: 'flex',
+  justifyContent: 'flex-start',
+  flexShrink: 0,
+  wordBreak: 'inherit',
+  whiteSpace: 'nowrap',
+  color: 'neutral.95',
+  flexGrow: 1,
+  fontWeight: 0,
+  fontSize: '16px',
+  mt: '5px',
+  '&.is-focused': {
+    outline: 'none',
+    boxShadow: 'focus',
+    WebkitBoxShadow: 'focus',
+    MozBoxShadow: 'focus'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.10',
+    boxShadow: 'inset 2px 0 0 0 white'
+  },
+  '&.is-pressed': {
+    backgroundColor: 'accent.10'
+  }
+};
 var accordionGridBody = {
   display: 'none !important',
   pl: 'sm',
@@ -69,5 +99,6 @@ export default {
   accordionGridBody: accordionGridBody,
   accordionTitle: accordionTitle,
   accordion: accordion,
-  accordionBody: accordionBody
+  accordionBody: accordionBody,
+  accordionGridHeaderNav: accordionGridHeaderNav
 };

package/lib/styles/variants/boxes.js

@@ -189,6 +189,26 @@ var expandableRow = {
     }
   }
 };
+var navBar = {
+  height: '100%',
+  width: '230px',
+  position: 'absolute',
+  zIndex: '1',
+  top: '0',
+  left: '0',
+  backgroundColor: 'accent.20',
+  overflowY: 'hidden'
+};
+var navBarSectionContainer = {
+  height: '100%',
+  maxHeight: '100%',
+  overflowY: 'overlay !important'
+};
+var navBarItemHeaderContainer = {
+  flexGrow: 1,
+  alignItems: 'center',
+  maxWidth: '180px'
+};
 var datePicker = {
   '.react-calendar': {
     width: 280,
@@ -270,5 +290,8 @@ export default {
   radioContainer: radioContainer,
   scrollbox: scrollbox,
   topShadowScrollbox: topShadowScrollbox,
-  bottomShadowScrollbox: bottomShadowScrollbox
+  bottomShadowScrollbox: bottomShadowScrollbox,
+  navBar: navBar,
+  navBarSectionContainer: navBarSectionContainer,
+  navBarItemHeaderContainer: navBarItemHeaderContainer
 };

package/lib/styles/variants/buttons.js

@@ -52,6 +52,33 @@ var defaultFocus = {
   outline: 'none',
   boxShadow: 'focus'
 };
+var navItemButton = {
+  textDecoration: 'none',
+  outline: 'none',
+  cursor: 'pointer',
+  borderRadius: 0,
+  backgroundColor: 'transparent',
+  paddingTop: '5px',
+  paddingBottom: '5px',
+  display: 'block',
+  color: 'neutral.95',
+  fontSize: 'sm',
+  fontWeight: 1,
+  flexGrow: '1',
+  width: '100%',
+  textAlign: 'left',
+  lineHeight: '16px',
+  whiteSpace: 'break-spaces',
+  overflowWrap: 'break-word',
+  maxWidth: '100%',
+  wordWrap: 'break-word',
+  wordBreak: 'break-word',
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    bg: 'accent.10',
+    boxShadow: 'inset 2px 0 0 0 white'
+  }
+};
 var iconButton = {
   justifyContent: 'center',
   appearance: 'none',
@@ -67,7 +94,7 @@ var iconButton = {
   width: 'inherit',
   height: 'inherit',
   path: {
-    fill: 'neutral.20'
+    fill: 'neutral.40'
   },
   outline: 'none',
   '&.is-focused': _objectSpread({}, defaultFocus),
@@ -82,6 +109,10 @@ var iconButton = {
   }
 };
 
+var square = _objectSpread(_objectSpread({}, iconButton), {}, {
+  borderRadius: '2px'
+});
+
 var modalCloseButton = _objectSpread(_objectSpread({}, iconButton), {}, {
   position: 'absolute',
   top: 14,
@@ -219,6 +250,10 @@ var inverted = _objectSpread(_objectSpread({}, iconButton), {}, {
   }
 });
 
+var invertedSquare = _objectSpread(_objectSpread({}, inverted), {}, {
+  borderRadius: '2px'
+});
+
 var applicationPortal = _objectSpread(_objectSpread({}, iconButton), {}, {
   background: 'transparent',
   '&.is-focused': _objectSpread({}, defaultFocus),
@@ -508,8 +543,11 @@ export default {
   text: text,
   helpHint: helpHint,
   modalCloseButton: modalCloseButton,
+  navItemButton: navItemButton,
   applicationPortalPinned: applicationPortalPinned,
   applicationPortal: applicationPortal,
+  square: square,
+  invertedSquare: invertedSquare,
   tooltipChip: tooltipChip,
   tooltipIconButton: tooltipIconButton,
   tooltipInline: tooltipInline

package/lib/styles/variants/codeView.js

@@ -0,0 +1,68 @@
+import 'a11y-syntax-highlighting/dist/prism/a11y-light.min.css';
+var wrapper = {
+  bg: 'accent.99',
+  border: '1px solid',
+  borderColor: 'accent.95',
+  width: 400,
+  height: 200,
+  my: 5,
+  overflow: 'auto',
+  alignItems: 'center',
+  '&.is-focused, &:focus': {
+    boxShadow: 'focus',
+    outline: 'none'
+  },
+  pre: {
+    backgroundColor: 'transparent',
+    m: 0,
+    p: 10,
+    pr: 0,
+    height: '100%',
+    width: '100%',
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    fontFamily: 'standard',
+    fontSize: 'sm',
+    '& .token-line': {
+      display: 'block',
+      alignItems: 'center',
+      '& .token': {
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-all'
+      }
+    }
+  },
+  '&.has-no-copy-button': {
+    pre: {
+      p: 10
+    }
+  },
+  '&.has-line-numbers': {
+    pre: {
+      p: '0 10px 0 0',
+      overflow: 'auto',
+      '& .token-line:first-of-type *': {
+        pt: 10
+      },
+      '& .token-line': {
+        display: 'flex',
+        '& .token': {
+          whiteSpace: 'pre'
+        }
+      }
+    }
+  }
+};
+var lineNo = {
+  display: 'table-cell',
+  userSelect: 'none',
+  p: 5,
+  m: '0 10px 0 0',
+  bg: 'accent.30',
+  minWidth: 26,
+  color: 'white'
+};
+export default {
+  wrapper: wrapper,
+  lineNo: lineNo
+};

package/lib/styles/variants/link.js

@@ -1,5 +1,5 @@
 var link = {
-  color: 'active',
+  color: 'white',
   fontFamily: 'standard',
   fontSize: 'md',
   textDecoration: 'none',

package/lib/styles/variants/separator.js

@@ -1,4 +1,18 @@
-export default {
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var base = {
   bg: 'neutral.80',
   width: '100%',
   height: '1px',
@@ -8,4 +22,22 @@ export default {
     height: '100%',
     mx: '5px'
   }
+};
+
+var navBarSeparator = _objectSpread(_objectSpread({}, base), {}, {
+  width: '100%',
+  backgroundColor: 'neutral.60'
+});
+
+var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, base), {}, {
+  ml: '45px',
+  width: 'calc(100% - 75px)',
+  mb: '15px',
+  backgroundColor: 'neutral.60'
+});
+
+export default {
+  base: base,
+  navBarSeparator: navBarSeparator,
+  navBarSubtitleSeparator: navBarSubtitleSeparator
 };