@pingux/astro 1.39.0 → 1.39.2-alpha.0

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

@@ -35,6 +35,7 @@ var base = {
   width: '100%',
   height: '1px',
   my: '5px',
+  flexShrink: 0,
   '&.is-vertical': {
     width: '1px',
     height: '100%',
@@ -43,16 +44,14 @@ var base = {
 };
 
 var navBarSeparator = _objectSpread(_objectSpread({}, base), {}, {
-  width: '100%',
-  backgroundColor: 'neutral.60',
-  my: 0
+  width: 'auto',
+  my: 'md',
+  mx: 'md',
+  backgroundColor: 'neutral.60'
 });
 
-var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, base), {}, {
-  mt: '15px',
-  ml: '45px',
-  width: 'calc(100% - 60px)',
-  backgroundColor: 'neutral.60'
+var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, navBarSeparator), {}, {
+  ml: '45px'
 });
 
 var _default = {

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

@@ -177,20 +177,23 @@ var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
 
 var navBarSubtitle = {
   ml: 'md',
-  mb: '15px',
-  fontWeight: 3,
-  fontSize: '11px',
+  my: 'sm',
+  fontWeight: 1,
+  fontSize: 'sm',
   color: 'accent.80',
   zIndex: '100'
 };
 
 var navBarHeaderText = _objectSpread(_objectSpread({}, wordWrap), {}, {
   whiteSpace: 'break-spaces',
-  lineHeight: '13px',
-  fontSize: '13px',
+  lineHeight: 1,
+  fontSize: 'md',
   fontWeight: 1,
   maxWidth: '150px',
-  color: 'white'
+  color: 'neutral.95',
+  '.is-selected &': {
+    color: 'white'
+  }
 });
 
 var collapsiblePanellItem = _objectSpread(_objectSpread({}, wordWrap), {}, {

package/lib/components/AccordionGridGroup/AccordionGridGroup.js

@@ -130,7 +130,8 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       keyboardDelegate: keyboardDelegate
     }
   }, ___EmotionJSX(Box, _extends({}, mergeProps(gridProps, containerProps), {
-    ref: accordionGridRef
+    ref: accordionGridRef,
+    role: "treegrid"
   }), _mapInstanceProperty(_context2 = _Array$from(state.collection)).call(_context2, function (item) {
     return ___EmotionJSX(AccordionGridItem, _extends({
       key: item.key,

package/lib/components/AccordionGridItem/AccordionGridItem.js

@@ -65,7 +65,6 @@ var AccordionGridItem = function AccordionGridItem(props) {
   delete rowProps.onClick;
   return ___EmotionJSX(Box, _extends({
     as: "div",
-    role: "row",
     tabindex: "0"
   }, mergeProps(rowProps, others), {
     "aria-selected": isSelected,

package/lib/components/CheckboxField/CheckboxField.stories.js

@@ -27,6 +27,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/CheckboxField',
   component: CheckboxField,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: _objectSpread({
     label: {
       control: {

package/lib/components/CollapsiblePanel/CollapsiblePanel.stories.js

@@ -31,6 +31,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/CollapsiblePanel',
   component: CollapsiblePanel,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: {
     listTitle: {
       defaultValue: 'Selected Groups'

package/lib/components/ComboBoxField/ComboBoxField.stories.js

@@ -116,6 +116,13 @@ var actions = {
 export default {
   title: 'Form/ComboBoxField',
   component: ComboBoxField,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: _objectSpread({
     label: {
       control: {

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

@@ -25,7 +25,14 @@ import { Item, Section, Chip, Box, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/EnvironmentBreadcrumb',
-  component: EnvironmentBreadcrumb
+  component: EnvironmentBreadcrumb,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
 };
 var defaultEnvironments = [{
   name: 'Default'

package/lib/components/IconButton/IconButton.js

@@ -90,7 +90,9 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
         fill: chipBg
       }
     }
-  }, mergeProps(buttonProps, others, hoverProps, focusProps)), children);
+  }, mergeProps(buttonProps, others, hoverProps, focusProps), {
+    onPointerOver: hoverProps.onPointerEnter
+  }), children);
 
   if (title) {
     return ___EmotionJSX(TooltipTrigger, {

package/lib/components/ListBox/ListBox.test.js

@@ -6,6 +6,7 @@ import { axe } from 'jest-axe';
 import { useListState } from '@react-stately/list';
 import { render, screen } from '@testing-library/react';
 import { Section } from '@react-stately/collections';
+import userEvent from '@testing-library/user-event';
 import ListBox from '.';
 import { Item } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -145,4 +146,14 @@ test('renders sections and items within section', function () {
   expect(section).toBeInTheDocument();
   var options = screen.getAllByRole('option');
   expect(options.length).toBe(itemsWithSections[0].options.length);
+});
+test('should have is-focused class when hover', function () {
+  getSectionsComponent();
+  var options = screen.getAllByRole('option');
+  expect(options[0]).not.toHaveClass('is-focused');
+  userEvent.hover(options[0]);
+  expect(options[0]).toHaveClass('is-focused');
+  userEvent.hover(options[1]);
+  expect(options[0]).not.toHaveClass('is-focused');
+  expect(options[1]).toHaveClass('is-focused');
 });

package/lib/components/ListBox/Option.js

@@ -58,9 +58,17 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
       isSelected = _useOption.isSelected,
       isFocused = _useOption.isFocused;
 
+  var focused = isFocused || (state === null || state === void 0 ? void 0 : (_state$selectionManag = state.selectionManager) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.focusedKey) === item.key;
+
+  var setFocusOnHover = function setFocusOnHover() {
+    if (!focused) {
+      state.selectionManager.setFocusedKey(item.key);
+    }
+  };
+
   var _useStatusClasses = useStatusClasses(null, {
     isDisabled: isDisabled || isSeparator,
-    isFocused: isFocused || (state === null || state === void 0 ? void 0 : (_state$selectionManag = state.selectionManager) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.focusedKey) === item.key,
+    isFocused: focused,
     isSelected: isSelected
   }),
       classNames = _useStatusClasses.classNames;
@@ -77,7 +85,8 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: optionRef,
     variant: "listBox.option",
     "data-id": dataId,
-    className: classNames
+    className: classNames,
+    onPointerOver: setFocusOnHover
   }, optionProps, others), isSelected && ___EmotionJSX(Icon, {
     icon: CircleSmallIcon
   }), rendered);

package/lib/components/ListItem/ListItem.stories.js

@@ -10,7 +10,14 @@ import Separator from '../Separator';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/ListItem',
-  component: ListItem
+  component: ListItem,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Separator, {

package/lib/components/ListView/ListView.stories.js

@@ -24,6 +24,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/ListView',
   component: ListView,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: {
     loadingState: {
       control: {

package/lib/components/MultivaluesField/MultivaluesField.stories.js

@@ -152,26 +152,26 @@ var HTMLIcon = function HTMLIcon(props) {
     d: "M9.81667 8.83325C9.85 8.55825 9.875 8.28325 9.875 7.99992C9.875 7.71659 9.85 7.44159 9.81667 7.16659H11.225C11.2917 7.43325 11.3333 7.71242 11.3333 7.99992C11.3333 8.28742 11.2917 8.56659 11.225 8.83325H9.81667ZM9.07917 11.1499C9.32917 10.6874 9.52084 10.1874 9.65417 9.66659H10.8833C10.4833 10.3541 9.84584 10.8874 9.07917 11.1499ZM8.975 8.83325H7.025C6.98334 8.55825 6.95834 8.28325 6.95834 7.99992C6.95834 7.71659 6.98334 7.43742 7.025 7.16659H8.975C9.0125 7.43742 9.04167 7.71659 9.04167 7.99992C9.04167 8.28325 9.0125 8.55825 8.975 8.83325ZM8 11.3166C7.65417 10.8166 7.375 10.2624 7.20417 9.66659H8.79584C8.625 10.2624 8.34584 10.8166 8 11.3166ZM6.33334 6.33325H5.11667C5.5125 5.64159 6.15417 5.10825 6.91667 4.84992C6.66667 5.31242 6.47917 5.81242 6.33334 6.33325ZM5.11667 9.66659H6.33334C6.47917 10.1874 6.66667 10.6874 6.91667 11.1499C6.15417 10.8874 5.5125 10.3541 5.11667 9.66659ZM4.775 8.83325C4.70834 8.56659 4.66667 8.28742 4.66667 7.99992C4.66667 7.71242 4.70834 7.43325 4.775 7.16659H6.18334C6.15 7.44159 6.125 7.71659 6.125 7.99992C6.125 8.28325 6.15 8.55825 6.18334 8.83325H4.775ZM8 4.67909C8.34584 5.17909 8.625 5.73742 8.79584 6.33325H7.20417C7.375 5.73742 7.65417 5.17909 8 4.67909ZM10.8833 6.33325H9.65417C9.52084 5.81242 9.32917 5.31242 9.07917 4.84992C9.84584 5.11242 10.4833 5.64159 10.8833 6.33325ZM8 3.83325C5.69584 3.83325 3.83334 5.70825 3.83334 7.99992C3.83334 9.10499 4.27232 10.1648 5.05372 10.9462C5.44064 11.3331 5.89996 11.64 6.40549 11.8494C6.91101 12.0588 7.45283 12.1666 8 12.1666C9.10507 12.1666 10.1649 11.7276 10.9463 10.9462C11.7277 10.1648 12.1667 9.10499 12.1667 7.99992C12.1667 7.45274 12.0589 6.91093 11.8495 6.4054C11.6401 5.89988 11.3332 5.44055 10.9463 5.05364C10.5594 4.66673 10.1 4.35982 9.59452 4.15042C9.08899 3.94103 8.54718 3.83325 8 3.83325Z",
     fill: "#4660A2"
   }))), ___EmotionJSX("defs", null, ___EmotionJSX("clipPath", {
-    id: "clip0_709_18936"
+    className: "clip0_709_18936"
   }, ___EmotionJSX("rect", {
     width: "16",
     height: "16",
     fill: "white"
   })), ___EmotionJSX("clipPath", {
-    id: "clip1_709_18936"
+    className: "clip1_709_18936"
   }, ___EmotionJSX("rect", {
     width: "10",
     height: "10",
     fill: "white",
     transform: "translate(3 3)"
   })), ___EmotionJSX("clipPath", {
-    id: "clip2_709_18936"
+    className: "clip2_709_18936"
   }, ___EmotionJSX("rect", {
     width: "16",
     height: "16",
     fill: "white"
   })), ___EmotionJSX("clipPath", {
-    id: "clip3_709_18936"
+    className: "clip3_709_18936"
   }, ___EmotionJSX("rect", {
     width: "10",
     height: "10",

package/lib/components/NavBar/NavBar.stories.js

@@ -254,7 +254,10 @@ var data = [{
   }, "Notifications"), ___EmotionJSX(NavBarItemLink, {
     key: "Experiences Vanity Domains",
     id: "Experiences Vanity Domains",
-    href: "https://pingidentity.com/"
+    href: "https://pingidentity.com/",
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
   }, "Vanity Domains"), ___EmotionJSX(NavBarItemButton, {
     key: "Experiences Sender",
     id: "Experiences Sender"
@@ -269,7 +272,6 @@ var secondData = [{
     id: "MFA Button Users",
     key: "MFA Button Users"
   }, "Users"), {
-    hasSeparator: false,
     subTitle: 'PingOne Services'
   }, ___EmotionJSX(NavBarItemButton, {
     key: "MFA Button Group",
@@ -342,8 +344,7 @@ export var Default = function Default() {
     href: "https://pingidentity.com",
     target: "_blank"
   }, logo)), ___EmotionJSX(Separator, {
-    marginTop: "lg",
-    marginBottom: "0px",
+    m: 0,
     backgroundColor: "neutral.60"
   }), ___EmotionJSX(Box, {
     variant: "navBar.sectionContainer",
@@ -356,7 +357,6 @@ export var Default = function Default() {
     text: "Overview"
   }), ___EmotionJSX(NavBarSection, {
     items: data,
-    hasSeparator: true,
     "data-id": "nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
     items: secondData,
@@ -365,6 +365,7 @@ export var Default = function Default() {
     "data-id": "second-nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
     items: thirdData,
+    hasSeparator: true,
     "data-id": "third-nav-bar-section"
   })));
 };
@@ -400,8 +401,7 @@ export var Controlled = function Controlled() {
     href: "https://pingidentity.com",
     target: "_blank"
   }, logo)), ___EmotionJSX(Separator, {
-    marginTop: "lg",
-    marginBottom: "0px",
+    m: "0",
     backgroundColor: "neutral.60",
     key: "top-separator"
   }), ___EmotionJSX(Box, {
@@ -416,7 +416,6 @@ export var Controlled = function Controlled() {
     text: "Overview"
   }), ___EmotionJSX(NavBarSection, {
     items: data,
-    hasSeparator: true,
     "data-id": "first-nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
     items: secondData,

package/lib/components/NavBarSection/NavBarItem.js

@@ -64,6 +64,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  var color = isSelected ? 'white' : 'neutral.95';
   return ___EmotionJSX(Box, _extends({
     id: key,
     variant: "navBar.navItem",
@@ -73,7 +74,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: navItemRef
   }, mergedProps, {
     sx: {
-      maxHeight: '30px'
+      flexGrow: 0
     }
   }), ___EmotionJSX(Box, {
     isRow: true,
@@ -83,11 +84,11 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
   }, icon && ___EmotionJSX(Icon, {
     icon: icon,
     "aria-label": text,
-    size: 20,
+    size: "sm",
     sx: {
-      mr: '10px',
-      color: 'white',
-      fill: 'white'
+      mr: 'sm',
+      color: color,
+      fill: color
     }
   }), ___EmotionJSX(Text, {
     variant: "navBarHeaderText"

package/lib/components/NavBarSection/NavBarItemBody.js

@@ -13,19 +13,17 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
       onKeyDown = _ref.onKeyDown;
 
   var renderSubTitle = function renderSubTitle(child) {
-    var hasSeparator = child.hasSeparator,
+    var _child$hasSeparator = child.hasSeparator,
+        hasSeparator = _child$hasSeparator === void 0 ? true : _child$hasSeparator,
         subTitle = child.subTitle;
     return ___EmotionJSX(Fragment, {
       key: "fragment".concat(subTitle)
-    }, (hasSeparator || hasSeparator === undefined) && ___EmotionJSX(Separator, {
+    }, hasSeparator && ___EmotionJSX(Separator, {
       variant: "separator.navBarSubtitleSeparator"
     }), ___EmotionJSX(Text, {
       key: "text".concat(subTitle),
-      sx: {
-        mb: 'sm',
-        ml: '45px',
-        mt: 'md'
-      },
+      ml: "45px",
+      mt: hasSeparator ? '0' : undefined,
       variant: "text.navBarSubtitle"
     }, subTitle));
   };
@@ -39,8 +37,8 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
 
   return ___EmotionJSX(Box, {
     sx: {
-      alignItems: 'flex-start',
-      mb: '15px'
+      alignItems: 'stretch',
+      mb: 'md'
     }
   }, _mapInstanceProperty(_context = item.children).call(_context, renderChild));
 };

package/lib/components/NavBarSection/NavBarItemButton.js

@@ -47,7 +47,8 @@ var NavBarItemButton = function NavBarItemButton(props) {
     id: key,
     variant: "navItemButton",
     onPress: onNavPress,
-    className: classNames
+    className: classNames,
+    color: isSelected ? 'white' : undefined
   }, others, {
     sx: _objectSpread({
       paddingLeft: '45px',

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -44,6 +44,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  var color = childSelected && !isExpanded ? 'white' : 'neutral.95';
   return ___EmotionJSX(Box, {
     variant: "navBar.itemHeaderContainer",
     className: classNames,
@@ -54,8 +55,8 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     size: "sm",
     sx: {
       mr: '10px',
-      color: 'white',
-      fill: 'white'
+      color: color,
+      fill: color
     },
     "aria-hidden": "true"
   }), ___EmotionJSX(Text, {
@@ -68,10 +69,10 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     }
   }, ___EmotionJSX(Icon, {
     icon: isExpanded ? MenuUp : MenuDown,
-    size: "xs",
+    size: "sm",
     sx: {
-      color: 'white',
-      fill: 'white'
+      color: color,
+      fill: color
     },
     "aria-label": isExpanded ? 'Menu up' : 'Menu down'
   })));

package/lib/components/NavBarSection/NavBarItemLink.js

@@ -46,7 +46,8 @@ var NavBarItemLink = function NavBarItemLink(props) {
     id: key,
     variant: "buttons.navItemButton",
     className: classNames,
-    onPress: onNavPress
+    onPress: onNavPress,
+    color: isSelected ? 'white' : undefined
   }, others, {
     sx: _objectSpread({
       paddingLeft: '45px',

package/lib/components/NavBarSection/NavBarSection.js

@@ -10,7 +10,7 @@ import React, { useRef } from 'react';
 import { useFocusManager } from '@react-aria/focus';
 import { useKeyboard } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
-import { Box, Button, Separator, Text } from '../../';
+import { Button, Separator, Text } from '../../';
 import { useNavBarContext } from '../../context/NavBarContext';
 import NavBarItemBody from './NavBarItemBody';
 import NavBarItemHeader from './NavBarItemHeader';
@@ -34,8 +34,11 @@ var NavBarSection = function NavBarSection(_ref) {
     return item.children;
   });
 
-  return ___EmotionJSX(React.Fragment, null, title && ___EmotionJSX(Text, {
-    variant: "text.navBarSubtitle"
+  return ___EmotionJSX(React.Fragment, null, hasSeparator && ___EmotionJSX(Separator, {
+    variant: "separator.navBarSeparator"
+  }), title && ___EmotionJSX(Text, {
+    variant: "text.navBarSubtitle",
+    mt: hasSeparator ? '0' : undefined
   }, title), ___EmotionJSX("ul", _extends({
     ref: ref,
     style: {
@@ -50,16 +53,6 @@ var NavBarSection = function NavBarSection(_ref) {
       key: item.key,
       item: item
     }));
-  })), hasSeparator && ___EmotionJSX(Box, {
-    sx: {
-      pl: '15px',
-      pr: '15px',
-      my: '10px',
-      mt: '15px',
-      mb: '15px'
-    }
-  }, ___EmotionJSX(Separator, {
-    variant: "separator.navBarSeparator"
   })));
 };
 

package/lib/components/PasswordField/PasswordField.stories.js

@@ -23,6 +23,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/PasswordField',
   component: PasswordField,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: _objectSpread({
     status: {
       control: {

package/lib/components/SearchField/SearchField.stories.js

@@ -24,6 +24,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/SearchField',
   component: SearchField,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: _objectSpread({
     label: {
       control: {

package/lib/components/SwitchField/SwitchField.stories.js

@@ -23,6 +23,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/SwitchField',
   component: SwitchField,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: _objectSpread({
     label: {
       control: {

package/lib/components/TextAreaField/TextAreaField.stories.js

@@ -26,6 +26,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/TextAreaField',
   component: TextAreaField,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: _objectSpread({
     label: {
       control: {

package/lib/components/TextField/TextField.stories.js

@@ -30,6 +30,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/TextField',
   component: TextField,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: _objectSpread({
     labelMode: {
       control: {

package/lib/recipes/DatePicker.stories.js

@@ -10,7 +10,14 @@ import statuses from '../utils/devUtils/constants/statuses';
 import PopoverContainer from '../components/PopoverContainer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Recipes/Date Picker'
+  title: 'Recipes/Date Picker',
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
 };
 var sx = {
   calendarIcon: {

package/lib/recipes/ListAndPanel.stories.js

@@ -342,6 +342,7 @@ export var Default = function Default() {
     title: "Profile"
   }, selectedItemId >= 0 && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconButton, {
     variant: "inverted",
+    "aria-label": "pencil icon button",
     sx: sx.iconButton
   }, ___EmotionJSX(PencilIcon, {
     size: 20

package/lib/recipes/MaskedValue.stories.js

@@ -21,6 +21,13 @@ export default {
       },
       defaultValue: 'A secret piece of text'
     }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
   }
 };
 var sx = {

package/lib/styles/variants/buttons.js

@@ -65,16 +65,15 @@ var navItemButton = {
   cursor: 'pointer',
   borderRadius: 0,
   backgroundColor: 'transparent',
-  paddingTop: '5px',
-  paddingBottom: '5px',
+  paddingTop: 'sm',
+  paddingBottom: 'sm',
   display: 'block',
-  color: 'neutral.95',
-  fontSize: 'sm',
-  fontWeight: 1,
+  color: 'neutral.90',
+  fontSize: 'md',
+  fontWeight: 0,
   flexGrow: '1',
   width: '100%',
   textAlign: 'left',
-  lineHeight: '16px',
   whiteSpace: 'break-spaces',
   overflowWrap: 'break-word',
   maxWidth: '100%',
@@ -423,9 +422,12 @@ var chipDeleteStandard = {
 };
 
 var chipDeleteButton = _objectSpread(_objectSpread({}, chipDeleteStandard), {}, {
-  '&.is-focused, &.is-hovered': _objectSpread({
+  '&.is-focused': _objectSpread({
     bg: 'accent.40'
   }, focusWithCroppedOutline),
+  '&.is-hovered': {
+    bg: 'accent.40'
+  },
   '&.is-pressed': {
     bg: 'accent.20',
     borderColor: 'accent.20'