@pingux/astro 2.0.0-alpha.1 → 2.0.0-alpha.5

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

@@ -7,11 +7,8 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 function ownKeys(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 accordionGrid from '../AccordionGridGroup/AccordionGrid.styles';
 import { quiet } from '../Button/Buttons.styles';
 import { wordWrap } from '../Text/Text.styles';
@@ -69,11 +66,9 @@ var sectionContainer = {
     scrollbarColor: 'rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.2)'
   }
 };
-
 var sectionBody = _objectSpread(_objectSpread({}, accordionGrid.body), {}, {
   pl: '0'
 });
-
 var itemButton = {
   textDecoration: 'none',
   outline: 'none',
@@ -117,7 +112,6 @@ var subtitle = {
   color: 'accent.80',
   zIndex: '100'
 };
-
 var headerText = _objectSpread(_objectSpread({}, wordWrap), {}, {
   whiteSpace: 'break-spaces',
   lineHeight: 1,
@@ -129,7 +123,6 @@ var headerText = _objectSpread(_objectSpread({}, wordWrap), {}, {
     color: 'white'
   }
 });
-
 var headerNav = {
   cursor: 'pointer',
   minHeight: '40px',
@@ -157,7 +150,6 @@ var headerNav = {
     backgroundColor: 'accent.5'
   }
 };
-
 var item = _objectSpread(_objectSpread({}, headerNav), {}, {
   py: 'sm',
   px: 'md',
@@ -166,7 +158,6 @@ var item = _objectSpread(_objectSpread({}, headerNav), {}, {
     boxShadow: 'inset 2px 0 0 0 white'
   }
 });
-
 var sectionButton = _objectSpread(_objectSpread({}, quiet), {}, {
   width: '100%',
   '&.is-focused': {
@@ -180,7 +171,6 @@ var sectionButton = _objectSpread(_objectSpread({}, quiet), {}, {
     backgroundColor: 'accent.5'
   }
 });
-
 export default {
   container: container,
   itemHeaderContainer: itemHeaderContainer,

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

@@ -3,18 +3,18 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useState } from 'react';
 import userEvent from '@testing-library/user-event';
-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 GlobeIcon from 'mdi-react/GlobeIcon';
 import ScaleBalance from 'mdi-react/ScaleBalanceIcon';
+import TransitConnection from 'mdi-react/TransitConnectionVariantIcon';
 import Verify from 'mdi-react/VerifiedIcon';
-import { Box, NavBarSection, NavBarItem, NavBarItemButton, NavBarItemLink, Link, Button } from '../../';
-import NavBar from './NavBar';
+import ViewDashboard from 'mdi-react/ViewDashboardIcon';
+import { Box, Button, Link, NavBarItem, NavBarItemButton, NavBarItemLink, NavBarSection } from '../../index';
 import axeTest from '../../utils/testUtils/testAxe';
-import { render, screen, fireEvent } from '../../utils/testUtils/testWrapper';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import NavBar from './NavBar';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var DATA_ID = 'data-id';
 var SECTION_BUTTON_DATA_ID = 'section-data-id';
@@ -73,7 +73,6 @@ var secondData = [{
   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, {
@@ -101,15 +100,12 @@ var getComponent = function getComponent() {
     "data-testid": "navItem"
   }))));
 };
-
 var ControlledComponent = function ControlledComponent() {
   var _context;
-
   var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedKey = _useState2[0],
-      setSelectedKey = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
   var customData = [{
     icon: GlobeIcon,
     key: 'Environment',
@@ -126,25 +122,19 @@ var ControlledComponent = function ControlledComponent() {
       "data-testid": "group-item"
     }, "Group")]
   }];
-
   var _useState3 = useState(_concatInstanceProperty(_context = []).call(_context, customData)),
-      _useState4 = _slicedToArray(_useState3, 2),
-      thisData = _useState4[0],
-      setData = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    thisData = _useState4[0],
+    setData = _useState4[1];
   var testFunction = function testFunction() {
     var _context2, _context3;
-
     var newArray = _concatInstanceProperty(_context2 = []).call(_context2, customData);
-
     newArray.pop();
     setData(_concatInstanceProperty(_context3 = []).call(_context3, newArray));
   };
-
   var setKeys = function setKeys(e) {
     setSelectedKey(e);
   };
-
   return ___EmotionJSX(NavBar, {
     setSelectedKey: setKeys,
     selectedKey: selectedKey
@@ -176,7 +166,6 @@ var ControlledComponent = function ControlledComponent() {
     "data-id": "third-nav-bar-section"
   })));
 };
-
 var getComponentWithMultipleChildren = function getComponentWithMultipleChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(NavBar, props, ___EmotionJSX(Box, {
@@ -191,15 +180,12 @@ var getComponentWithMultipleChildren = function getComponentWithMultipleChildren
     key: "nav-button"
   }, "test button")));
 };
-
 var clickHeaderButtons = function clickHeaderButtons() {
   var headerButtons = screen.getAllByRole('button');
-
   _mapInstanceProperty(headerButtons).call(headerButtons, function (button) {
     return userEvent.click(button);
   });
 };
-
 axeTest(getComponent);
 test('should render basic nav with children', function () {
   getComponent();
@@ -320,14 +306,12 @@ test('should collapse NavItemBody on Escape key press', function () {
   clickHeaderButtons();
   expect(screen.getByTestId('navItemButton')).toBeInTheDocument();
   var headerButtons = screen.getAllByRole('button');
-
   _mapInstanceProperty(headerButtons).call(headerButtons, function (headerButton) {
     return fireEvent.keyDown(headerButton, {
       key: 'Escape',
       keyCode: 27
     });
   });
-
   expect(screen.queryByText('Users')).not.toBeInTheDocument();
 });
 test('should change focus between NavBarItemHeader on arrow key press', function () {

package/lib/components/NavBarSection/NavBarItem.js

@@ -1,68 +1,58 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["icon", "text", "className", "id", "onPress"];
-import React, { useRef, forwardRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 import { useHover, usePress } from '@react-aria/interactions';
-import { Box, Icon, Text } from '../../index';
-import { useStatusClasses, useNavBarPress } from '../../hooks';
+import PropTypes from 'prop-types';
 import { useNavBarContext } from '../../context/NavBarContext';
+import { useNavBarPress, useStatusClasses } from '../../hooks';
+import { Box, Icon, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var icon = props.icon,
-      text = props.text,
-      className = props.className,
-      key = props.id,
-      onPressCallback = props.onPress,
-      others = _objectWithoutProperties(props, _excluded);
-
+    text = props.text,
+    className = props.className,
+    key = props.id,
+    onPressCallback = props.onPress,
+    others = _objectWithoutProperties(props, _excluded);
   var navItemRef = useRef();
-  /* istanbul ignore next */
 
+  /* istanbul ignore next */
   useImperativeHandle(ref, function () {
     return navItemRef.current;
   });
-
   var _useHover = useHover({}),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
   var _useFocusRing = useFocusRing({
-    within: true
-  }),
-      focusWithinProps = _useFocusRing.focusProps;
-
+      within: true
+    }),
+    focusWithinProps = _useFocusRing.focusProps;
   var _useFocusRing2 = useFocusRing(),
-      focusProps = _useFocusRing2.focusProps,
-      isFocusVisible = _useFocusRing2.isFocusVisible;
-
+    focusProps = _useFocusRing2.focusProps,
+    isFocusVisible = _useFocusRing2.isFocusVisible;
   var state = useNavBarContext();
   var isSelected = state.selectedKey === key;
-
   var _useNavBarPress = useNavBarPress({
-    key: key,
-    onPressCallback: onPressCallback
-  }, state),
-      onNavPress = _useNavBarPress.onNavPress;
-
+      key: key,
+      onPressCallback: onPressCallback
+    }, state),
+    onNavPress = _useNavBarPress.onNavPress;
   var _usePress = usePress({
-    ref: navItemRef,
-    onPress: onNavPress
-  }),
-      pressProps = _usePress.pressProps,
-      isPressed = _usePress.isPressed;
-
+      ref: navItemRef,
+      onPress: onNavPress
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
   var mergedProps = mergeProps(pressProps, hoverProps, focusWithinProps, focusProps, others);
-
   var _useStatusClasses = useStatusClasses(className, {
-    isPressed: isPressed,
-    isHovered: isHovered,
-    isSelected: isSelected,
-    isFocused: isFocusVisible
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isPressed: isPressed,
+      isHovered: isHovered,
+      isSelected: isSelected,
+      isFocused: isFocusVisible
+    }),
+    classNames = _useStatusClasses.classNames;
   var color = isSelected ? 'white' : 'neutral.95';
   return ___EmotionJSX(Box, _extends({
     id: key,
@@ -96,13 +86,10 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
 NavBarItem.propTypes = {
   /**  Handler that is called when the press is released over the target. */
   onPress: PropTypes.func,
-
   /** The icon to render in between each node. */
   icon: PropTypes.elementType,
-
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string,
-
   /** Text that will render within the component */
   text: PropTypes.string
 };

package/lib/components/NavBarSection/NavBarItemBody.js

@@ -3,19 +3,16 @@ 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 { Separator, Box, Text } from '../../index';
+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;
-
+    onKeyDown = _ref.onKeyDown;
   var renderSubTitle = function renderSubTitle(child) {
     var _child$hasSeparator = child.hasSeparator,
-        hasSeparator = _child$hasSeparator === void 0 ? true : _child$hasSeparator,
-        subTitle = child.subTitle;
+      hasSeparator = _child$hasSeparator === void 0 ? true : _child$hasSeparator,
+      subTitle = child.subTitle;
     return ___EmotionJSX(Fragment, {
       key: "fragment".concat(subTitle)
     }, hasSeparator && ___EmotionJSX(Separator, {
@@ -27,14 +24,12 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
       variant: "variants.navBar.subtitle"
     }, subTitle));
   };
-
   var renderChild = function renderChild(child) {
     return child.subTitle ? renderSubTitle(child) : ___EmotionJSX(ChildItemWrapper, {
       onKeyDown: onKeyDown,
       key: "item".concat(child.key || child)
     }, child);
   };
-
   return ___EmotionJSX(Box, {
     sx: {
       alignItems: 'stretch',
@@ -42,24 +37,20 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
     }
   }, _mapInstanceProperty(_context = item.children).call(_context, renderChild));
 };
-
 var ChildItemWrapper = function ChildItemWrapper(_ref2) {
   var children = _ref2.children,
-      _onKeyDown = _ref2.onKeyDown;
+    _onKeyDown = _ref2.onKeyDown;
   var childrenKey = children.key || children;
-
   var _useKeyboard = useKeyboard({
-    onKeyDown: function onKeyDown(e) {
-      return _onKeyDown(e, childrenKey);
-    }
-  }),
-      keyboardProps = _useKeyboard.keyboardProps;
-
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown(e, childrenKey);
+      }
+    }),
+    keyboardProps = _useKeyboard.keyboardProps;
   return ___EmotionJSX(Box, _extends({
     width: "100%"
   }, keyboardProps), children);
 };
-
 NavBarItemBody.propTypes = {
   item: PropTypes.shape({
     children: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import NavBarItemBody from './NavBarItemBody';
-import { Text } from '../../';
+import { Text } from '../..';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import NavBarItemBody from './NavBarItemBody';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var getComponent = function getComponent(item) {
   return render(___EmotionJSX(NavBarItemBody, {
     item: {
@@ -11,14 +10,12 @@ var getComponent = function getComponent(item) {
     }
   }));
 };
-
 var SUBTITLE = 'subtitle';
 var TEXT = 'text';
 describe('NavBarItemBody', function () {
   describe('when its passed a component', function () {
     it('renders the component', function () {
       var childItem = ___EmotionJSX(Text, null, TEXT);
-
       getComponent(childItem);
       expect(screen.getByText(TEXT));
     });

package/lib/components/NavBarSection/NavBarItemButton.js

@@ -10,39 +10,31 @@ 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';
-import { useStatusClasses, useNavBarPress } from '../../hooks';
+import { useNavBarPress, useStatusClasses } from '../../hooks';
 import { Button } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var NavBarItemButton = function NavBarItemButton(props) {
   var className = props.className,
-      key = props.id,
-      onPressCallback = props.onPress,
-      sx = props.sx,
-      others = _objectWithoutProperties(props, _excluded);
-
+    key = props.id,
+    onPressCallback = props.onPress,
+    sx = props.sx,
+    others = _objectWithoutProperties(props, _excluded);
   var state = useNavBarContext();
   var isSelected = state.selectedKey === key;
-
   var _useNavBarPress = useNavBarPress({
-    key: key,
-    onPressCallback: onPressCallback
-  }, state),
-      onNavPress = _useNavBarPress.onNavPress;
-
+      key: key,
+      onPressCallback: onPressCallback
+    }, state),
+    onNavPress = _useNavBarPress.onNavPress;
   var _useStatusClasses = useStatusClasses(className, {
-    isSelected: isSelected
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isSelected: isSelected
+    }),
+    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Button, _extends({
     id: key,
     variant: "variants.navBar.itemButton",
@@ -56,11 +48,9 @@ var NavBarItemButton = function NavBarItemButton(props) {
     }, sx)
   }));
 };
-
 NavBarItemButton.propTypes = {
   /**  Handler that is called when the press is released over the target. */
   onPress: PropTypes.func,
-
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string.isRequired
 };

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -2,48 +2,39 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
 import MenuDown from 'mdi-react/MenuDownIcon';
 import MenuUp from 'mdi-react/MenuUpIcon';
-import { Box, Icon, Text } from '../../index';
+import PropTypes from 'prop-types';
 import { useNavBarContext } from '../../context/NavBarContext';
 import { useStatusClasses } from '../../hooks';
+import { Box, Icon, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var NavBarItemHeader = function NavBarItemHeader(props) {
   var _context;
-
   var item = props.item;
   var icon = item.icon,
-      key = item.key,
-      className = item.className,
-      heading = item.heading;
+    key = item.key,
+    className = item.className,
+    heading = item.heading;
   var navBarState = useNavBarContext();
   var selectedKey = navBarState.selectedKey,
-      setExpandedKeys = navBarState.setExpandedKeys,
-      expandedKeys = navBarState.expandedKeys;
-
+    setExpandedKeys = navBarState.setExpandedKeys,
+    expandedKeys = navBarState.expandedKeys;
   var isExpanded = _includesInstanceProperty(expandedKeys).call(expandedKeys, key);
-
   var array = _mapInstanceProperty(_context = item.children).call(_context, function (i) {
     return i.key;
   });
-
   var childSelected = _includesInstanceProperty(array).call(array, navBarState.selectedKey);
-
   useEffect(function () {
     if (childSelected && isExpanded === false) {
       var _context2;
-
       setExpandedKeys(_concatInstanceProperty(_context2 = []).call(_context2, expandedKeys, [key]));
     }
   }, [selectedKey]);
-
   var _useStatusClasses = useStatusClasses(className, {
-    isSelected: childSelected && !isExpanded
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isSelected: childSelected && !isExpanded
+    }),
+    classNames = _useStatusClasses.classNames;
   var color = childSelected && !isExpanded ? 'white' : 'neutral.95';
   return ___EmotionJSX(Box, {
     variant: "navBar.itemHeaderContainer",
@@ -77,7 +68,6 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     "aria-label": isExpanded ? 'Menu up' : 'Menu down'
   })));
 };
-
 NavBarItemHeader.propTypes = {
   item: PropTypes.shape({
     heading: PropTypes.string,

package/lib/components/NavBarSection/NavBarItemLink.js

@@ -10,38 +10,30 @@ 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"];
-
 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 { Link } from '../../index';
 import { useNavBarContext } from '../../context/NavBarContext';
-import { useStatusClasses, useNavBarPress } from '../../hooks';
+import { useNavBarPress, useStatusClasses } from '../../hooks';
+import { Link } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var NavBarItemLink = function NavBarItemLink(props) {
   var className = props.className,
-      key = props.id,
-      onPressCallback = props.onPress,
-      others = _objectWithoutProperties(props, _excluded);
-
+    key = props.id,
+    onPressCallback = props.onPress,
+    others = _objectWithoutProperties(props, _excluded);
   var state = useNavBarContext();
   var isSelected = state.selectedKey === key;
-
   var _useNavBarPress = useNavBarPress({
-    key: key,
-    onPressCallback: onPressCallback
-  }, state),
-      onNavPress = _useNavBarPress.onNavPress;
-
+      key: key,
+      onPressCallback: onPressCallback
+    }, state),
+    onNavPress = _useNavBarPress.onNavPress;
   var _useStatusClasses = useStatusClasses(className, {
-    isSelected: isSelected
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isSelected: isSelected
+    }),
+    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Link, _extends({
     id: key,
     variant: "variants.navBar.itemButton",
@@ -55,14 +47,11 @@ var NavBarItemLink = function NavBarItemLink(props) {
     }, props.sx)
   }));
 };
-
 NavBarItemLink.propTypes = {
   /**  Specifies the location of the URL */
   href: PropTypes.string,
-
   /**  Handler that is called when the press is released over the target. */
   onPress: PropTypes.func,
-
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string.isRequired
 };