@pingux/astro 1.39.0 → 1.39.2-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.39.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.39.0...@pingux/astro@1.39.1) (2023-01-10)
+
+
+### Bug Fixes
+
+* [UIP-5910] hover for IconButton component ([7861d57](https://gitlab.corp.pingidentity.com/ux/pingux/commit/7861d57dd0262cbbca6326e9666e9fc947fddeb6))
+* [UIP-5912] MultivaluesField focusing on hover ([feab343](https://gitlab.corp.pingidentity.com/ux/pingux/commit/feab34344ed02d270effcce78a4d02712df5a5f3))
+* [UIP-5937] ListAndPanel: add aria-label to icon button ([3fa5f46](https://gitlab.corp.pingidentity.com/ux/pingux/commit/3fa5f468d08adbc5fc93e510374322303feb817d))
+* [UIP-5944] Fix Accordion Grid Group Accessibility Violation ([1058ac7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/1058ac75816df16e6b8ce90f10ef8d0575bb0768))
+* [UIP-5945] Storybook: fix code blocks formatting ([78b29ee](https://gitlab.corp.pingidentity.com/ux/pingux/commit/78b29ee7d28e6a82113333b8107a00ba5820087d))
+* [UIP-5946] Fix A11y Violation Icon Chip Multivalues Story ([d52bf42](https://gitlab.corp.pingidentity.com/ux/pingux/commit/d52bf42c4c62b02efdeb7461cdc50814eb760b3e))
+* [UIP-5955] MultivaluesField: remove button focus styles on hover ([4503298](https://gitlab.corp.pingidentity.com/ux/pingux/commit/450329829271f3e19727238bc891768ccccefb6e))
+
+
+
+
+
 # [1.39.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.38.1...@pingux/astro@1.39.0) (2023-01-05)
 
 

package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.js

@@ -172,7 +172,8 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
       keyboardDelegate: keyboardDelegate
     }
   }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, (0, _utils.mergeProps)(gridProps, containerProps), {
-    ref: accordionGridRef
+    ref: accordionGridRef,
+    role: "treegrid"
   }), (0, _map["default"])(_context2 = (0, _from["default"])(state.collection)).call(_context2, function (item) {
     return (0, _react2.jsx)(_AccordionGridItem["default"], (0, _extends2["default"])({
       key: item.key,

package/lib/cjs/components/AccordionGridItem/AccordionGridItem.js

@@ -102,7 +102,6 @@ var AccordionGridItem = function AccordionGridItem(props) {
   delete rowProps.onClick;
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "div",
-    role: "row",
     tabindex: "0"
   }, (0, _utils.mergeProps)(rowProps, others), {
     "aria-selected": isSelected,

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

@@ -65,6 +65,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = {
   title: 'Form/CheckboxField',
   component: _CheckboxField["default"],
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: _objectSpread({
     label: {
       control: {

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

@@ -75,6 +75,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = {
   title: 'Components/CollapsiblePanel',
   component: _CollapsiblePanel["default"],
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: {
     listTitle: {
       defaultValue: 'Selected Groups'

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

@@ -162,6 +162,13 @@ var actions = {
 var _default = {
   title: 'Form/ComboBoxField',
   component: _ComboBoxField["default"],
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: _objectSpread({
     label: {
       control: {

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

@@ -64,7 +64,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var _default = {
   title: 'Components/EnvironmentBreadcrumb',
-  component: _EnvironmentBreadcrumb["default"]
+  component: _EnvironmentBreadcrumb["default"],
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
 };
 exports["default"] = _default;
 var defaultEnvironments = [{

package/lib/cjs/components/IconButton/IconButton.js

@@ -127,7 +127,9 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         fill: chipBg
       }
     }
-  }, (0, _utils.mergeProps)(buttonProps, others, hoverProps, focusProps)), children);
+  }, (0, _utils.mergeProps)(buttonProps, others, hoverProps, focusProps), {
+    onPointerOver: hoverProps.onPointerEnter
+  }), children);
 
   if (title) {
     return (0, _react2.jsx)(_TooltipTrigger["default"], {

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

@@ -18,6 +18,8 @@ var _react2 = require("@testing-library/react");
 
 var _collections = require("@react-stately/collections");
 
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
 var _ = _interopRequireDefault(require("."));
 
 var _index = require("../../index");
@@ -168,4 +170,20 @@ test('renders sections and items within section', function () {
   var options = _react2.screen.getAllByRole('option');
 
   expect(options.length).toBe(itemsWithSections[0].options.length);
+});
+test('should have is-focused class when hover', function () {
+  getSectionsComponent();
+
+  var options = _react2.screen.getAllByRole('option');
+
+  expect(options[0]).not.toHaveClass('is-focused');
+
+  _userEvent["default"].hover(options[0]);
+
+  expect(options[0]).toHaveClass('is-focused');
+
+  _userEvent["default"].hover(options[1]);
+
+  expect(options[0]).not.toHaveClass('is-focused');
+  expect(options[1]).toHaveClass('is-focused');
 });

package/lib/cjs/components/ListBox/Option.js

@@ -96,9 +96,17 @@ var Option = /*#__PURE__*/(0, _react.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 = (0, _hooks.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;
@@ -115,7 +123,8 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: optionRef,
     variant: "listBox.option",
     "data-id": dataId,
-    className: classNames
+    className: classNames,
+    onPointerOver: setFocusOnHover
   }, optionProps, others), isSelected && (0, _react2.jsx)(_Icon["default"], {
     icon: _CircleSmallIcon["default"]
   }), rendered);

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

@@ -32,7 +32,14 @@ var _react2 = require("@emotion/react");
 
 var _default = {
   title: 'Components/ListItem',
-  component: _ListItem["default"]
+  component: _ListItem["default"],
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
 };
 exports["default"] = _default;
 

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

@@ -59,6 +59,13 @@ var _react2 = require("@emotion/react");
 var _default = {
   title: 'Components/ListView',
   component: _["default"],
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: {
     loadingState: {
       control: {

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

@@ -186,26 +186,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"
   }))), (0, _react2.jsx)("defs", null, (0, _react2.jsx)("clipPath", {
-    id: "clip0_709_18936"
+    className: "clip0_709_18936"
   }, (0, _react2.jsx)("rect", {
     width: "16",
     height: "16",
     fill: "white"
   })), (0, _react2.jsx)("clipPath", {
-    id: "clip1_709_18936"
+    className: "clip1_709_18936"
   }, (0, _react2.jsx)("rect", {
     width: "10",
     height: "10",
     fill: "white",
     transform: "translate(3 3)"
   })), (0, _react2.jsx)("clipPath", {
-    id: "clip2_709_18936"
+    className: "clip2_709_18936"
   }, (0, _react2.jsx)("rect", {
     width: "16",
     height: "16",
     fill: "white"
   })), (0, _react2.jsx)("clipPath", {
-    id: "clip3_709_18936"
+    className: "clip3_709_18936"
   }, (0, _react2.jsx)("rect", {
     width: "10",
     height: "10",

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

@@ -289,7 +289,10 @@ var data = [{
   }, "Notifications"), (0, _react2.jsx)(_index.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"), (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Experiences Sender",
     id: "Experiences Sender"
@@ -304,7 +307,6 @@ var secondData = [{
     id: "MFA Button Users",
     key: "MFA Button Users"
   }, "Users"), {
-    hasSeparator: false,
     subTitle: 'PingOne Services'
   }, (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "MFA Button Group",
@@ -378,8 +380,7 @@ var Default = function Default() {
     href: "https://pingidentity.com",
     target: "_blank"
   }, logo)), (0, _react2.jsx)(_index.Separator, {
-    marginTop: "lg",
-    marginBottom: "0px",
+    m: 0,
     backgroundColor: "neutral.60"
   }), (0, _react2.jsx)(_index.Box, {
     variant: "navBar.sectionContainer",
@@ -392,7 +393,6 @@ var Default = function Default() {
     text: "Overview"
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: data,
-    hasSeparator: true,
     "data-id": "nav-bar-section"
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: secondData,
@@ -401,6 +401,7 @@ var Default = function Default() {
     "data-id": "second-nav-bar-section"
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: thirdData,
+    hasSeparator: true,
     "data-id": "third-nav-bar-section"
   })));
 };
@@ -439,8 +440,7 @@ var Controlled = function Controlled() {
     href: "https://pingidentity.com",
     target: "_blank"
   }, logo)), (0, _react2.jsx)(_index.Separator, {
-    marginTop: "lg",
-    marginBottom: "0px",
+    m: "0",
     backgroundColor: "neutral.60",
     key: "top-separator"
   }), (0, _react2.jsx)(_index.Box, {
@@ -455,7 +455,6 @@ var Controlled = function Controlled() {
     text: "Overview"
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: data,
-    hasSeparator: true,
     "data-id": "first-nav-bar-section"
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: secondData,

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

@@ -97,6 +97,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  var color = isSelected ? 'white' : 'neutral.95';
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     id: key,
     variant: "navBar.navItem",
@@ -106,7 +107,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: navItemRef
   }, mergedProps, {
     sx: {
-      maxHeight: '30px'
+      flexGrow: 0
     }
   }), (0, _react2.jsx)(_index.Box, {
     isRow: true,
@@ -116,11 +117,11 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, icon && (0, _react2.jsx)(_index.Icon, {
     icon: icon,
     "aria-label": text,
-    size: 20,
+    size: "sm",
     sx: {
-      mr: '10px',
-      color: 'white',
-      fill: 'white'
+      mr: 'sm',
+      color: color,
+      fill: color
     }
   }), (0, _react2.jsx)(_index.Text, {
     variant: "navBarHeaderText"

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

@@ -41,19 +41,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 (0, _react2.jsx)(_react.Fragment, {
       key: "fragment".concat(subTitle)
-    }, (hasSeparator || hasSeparator === undefined) && (0, _react2.jsx)(_index.Separator, {
+    }, hasSeparator && (0, _react2.jsx)(_index.Separator, {
       variant: "separator.navBarSubtitleSeparator"
     }), (0, _react2.jsx)(_index.Text, {
       key: "text".concat(subTitle),
-      sx: {
-        mb: 'sm',
-        ml: '45px',
-        mt: 'md'
-      },
+      ml: "45px",
+      mt: hasSeparator ? '0' : undefined,
       variant: "text.navBarSubtitle"
     }, subTitle));
   };
@@ -67,8 +65,8 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
 
   return (0, _react2.jsx)(_index.Box, {
     sx: {
-      alignItems: 'flex-start',
-      mb: '15px'
+      alignItems: 'stretch',
+      mb: 'md'
     }
   }, (0, _map["default"])(_context = item.children).call(_context, renderChild));
 };

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

@@ -72,7 +72,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/cjs/components/NavBarSection/NavBarItemHeader.js

@@ -72,6 +72,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  var color = childSelected && !isExpanded ? 'white' : 'neutral.95';
   return (0, _react2.jsx)(_index.Box, {
     variant: "navBar.itemHeaderContainer",
     className: classNames,
@@ -82,8 +83,8 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     size: "sm",
     sx: {
       mr: '10px',
-      color: 'white',
-      fill: 'white'
+      color: color,
+      fill: color
     },
     "aria-hidden": "true"
   }), (0, _react2.jsx)(_index.Text, {
@@ -96,10 +97,10 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     }
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isExpanded ? _MenuUpIcon["default"] : _MenuDownIcon["default"],
-    size: "xs",
+    size: "sm",
     sx: {
-      color: 'white',
-      fill: 'white'
+      color: color,
+      fill: color
     },
     "aria-label": isExpanded ? 'Menu up' : 'Menu down'
   })));

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

@@ -71,7 +71,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/cjs/components/NavBarSection/NavBarSection.js

@@ -67,8 +67,11 @@ var NavBarSection = function NavBarSection(_ref) {
   var childrenItems = (0, _filter["default"])(items).call(items, function (item) {
     return item.children;
   });
-  return (0, _react2.jsx)(_react["default"].Fragment, null, title && (0, _react2.jsx)(_.Text, {
-    variant: "text.navBarSubtitle"
+  return (0, _react2.jsx)(_react["default"].Fragment, null, hasSeparator && (0, _react2.jsx)(_.Separator, {
+    variant: "separator.navBarSeparator"
+  }), title && (0, _react2.jsx)(_.Text, {
+    variant: "text.navBarSubtitle",
+    mt: hasSeparator ? '0' : undefined
   }, title), (0, _react2.jsx)("ul", (0, _extends2["default"])({
     ref: ref,
     style: {
@@ -83,16 +86,6 @@ var NavBarSection = function NavBarSection(_ref) {
       key: item.key,
       item: item
     }));
-  })), hasSeparator && (0, _react2.jsx)(_.Box, {
-    sx: {
-      pl: '15px',
-      pr: '15px',
-      my: '10px',
-      mt: '15px',
-      mb: '15px'
-    }
-  }, (0, _react2.jsx)(_.Separator, {
-    variant: "separator.navBarSeparator"
   })));
 };
 

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

@@ -57,6 +57,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = {
   title: 'Form/PasswordField',
   component: _["default"],
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: _objectSpread({
     status: {
       control: {

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

@@ -59,6 +59,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = {
   title: 'Form/SearchField',
   component: _.SearchField,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: _objectSpread({
     label: {
       control: {

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

@@ -57,6 +57,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = {
   title: 'Form/SwitchField',
   component: _["default"],
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: _objectSpread({
     label: {
       control: {

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

@@ -63,6 +63,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = {
   title: 'Form/TextAreaField',
   component: _["default"],
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: _objectSpread({
     label: {
       control: {

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

@@ -71,6 +71,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = {
   title: 'Form/TextField',
   component: _["default"],
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: _objectSpread({
     labelMode: {
       control: {

package/lib/cjs/recipes/DatePicker.stories.js

@@ -43,7 +43,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var _default = {
-  title: 'Recipes/Date Picker'
+  title: 'Recipes/Date Picker',
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
 };
 exports["default"] = _default;
 var sx = {

package/lib/cjs/recipes/ListAndPanel.stories.js

@@ -379,6 +379,7 @@ var Default = function Default() {
     title: "Profile"
   }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.IconButton, {
     variant: "inverted",
+    "aria-label": "pencil icon button",
     sx: sx.iconButton
   }, (0, _react2.jsx)(_PencilIcon["default"], {
     size: 20

package/lib/cjs/recipes/MaskedValue.stories.js

@@ -51,6 +51,13 @@ var _default = {
       },
       defaultValue: 'A secret piece of text'
     }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
   }
 };
 exports["default"] = _default;

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

@@ -87,16 +87,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%',
@@ -445,9 +444,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'

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

@@ -46,18 +46,17 @@ var itemHeaderContainer = {
   flexGrow: 1,
   alignItems: 'center',
   maxWidth: '230px',
-  padding: '10px 15px 10px 15px',
+  py: 'sm',
+  px: 'md',
   cursor: 'pointer',
   minHeight: '40px',
-  fontWeight: 0,
-  fontSize: '16px',
   '&.is-selected': {
     backgroundColor: 'accent.5',
     boxShadow: 'inset 2px 0 0 0 white'
   }
 };
 var sectionContainer = {
-  pt: '10px',
+  pt: 'sm',
   height: '100%',
   maxHeight: '100%',
   overflowY: 'auto'
@@ -71,7 +70,8 @@ var navItem = {
   cursor: 'pointer',
   minHeight: '40px',
   lineHeight: '30px',
-  padding: '10px 15px 10px 15px',
+  py: 'sm',
+  px: 'md',
   outline: 'none',
   display: 'flex',
   justifyContent: 'flex-start',
@@ -81,7 +81,6 @@ var navItem = {
   color: 'neutral.95',
   flexGrow: 1,
   fontWeight: 0,
-  fontSize: '16px',
   '&.is-focused': {
     outline: '1px solid',
     outlineColor: 'focus'