@pingux/astro 1.39.0 → 1.39.1

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/NOTICE.html

@@ -146,7 +146,7 @@
 
   <main class="u-padding--xl">
     <h1>Snyk Licenses Attribution Report</h1>
-    <h4>Report date: 1/5/2023</h4>
+    <h4>Report date: 1/10/2023</h4>
       <h2>Organization: <a href="https://app.snyk.io/org/ux-fbf">UX</a></h2>
     <div class="u-padding-top--sm">
       <h1>

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/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

@@ -445,9 +445,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/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/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

@@ -423,9 +423,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.39.0",
+  "version": "1.39.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",