@pingux/astro 2.0.0-alpha.4 → 2.0.0-alpha.6

package/lib/cjs/components/ListViewItem/ListViewItem.styles.js

@@ -36,7 +36,7 @@ var container = {
   },
   '&.has-separator': {
     borderBottom: '1px solid',
-    borderBottomColor: 'line.hairline'
+    borderBottomColor: 'line.light'
   }
 };
 var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
@@ -50,7 +50,7 @@ var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
       right: 0,
       bottom: 0,
       borderBottom: '1px solid',
-      borderBottomColor: 'line.hairline'
+      borderBottomColor: 'line.light'
     },
     '&.is-focused': {
       '&:after': {

package/lib/cjs/components/Menu/Menu.js

@@ -23,15 +23,17 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
+var _interactions = require("@react-aria/interactions");
 var _utils = require("@react-aria/utils");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _MenuContext = require("../../context/MenuContext");
 var _hooks = require("../../hooks");
 var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
+var _hoverProps = require("../../utils/devUtils/props/hoverProps");
 var _Box = _interopRequireDefault(require("../Box"));
 var _MenuItem = _interopRequireDefault(require("../MenuItem"));
 var _react2 = require("@emotion/react");
-var _excluded = ["isDisabled", "onAction", "onSelectionChange", "isNotFocusedOnHover"];
+var _excluded = ["isDisabled", "isNotFocusedOnHover", "onAction", "onHoverChange", "onHoverEnd", "onHoverStart", "onSelectionChange"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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; }
 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; }
@@ -46,12 +48,21 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var Menu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _context;
   var isDisabled = props.isDisabled,
+    isNotFocusedOnHover = props.isNotFocusedOnHover,
     onAction = props.onAction,
+    onHoverChange = props.onHoverChange,
+    onHoverEnd = props.onHoverEnd,
+    onHoverStart = props.onHoverStart,
     onSelectionChange = props.onSelectionChange,
-    isNotFocusedOnHover = props.isNotFocusedOnHover,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var contextProps = (0, _react.useContext)(_MenuContext.MenuContext);
   var completeProps = _objectSpread({}, (0, _reactAria.mergeProps)(contextProps, props));
+  var _useHover = (0, _interactions.useHover)({
+      onHoverChange: onHoverChange,
+      onHoverEnd: onHoverEnd,
+      onHoverStart: onHoverStart
+    }),
+    hoverProps = _useHover.hoverProps;
   var state = (0, _reactStately.useTreeState)(completeProps);
   var menuRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
@@ -74,7 +85,7 @@ var Menu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: menuRef,
     variant: "menu",
     "aria-orientation": _orientation["default"].VERTICAL
-  }, others, (0, _reactAria.mergeProps)(focusProps, menuProps)), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
+  }, others, (0, _reactAria.mergeProps)(focusProps, menuProps, hoverProps)), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
     return (0, _react2.jsx)(_MenuItem["default"], {
       key: item.key,
       item: item,
@@ -86,7 +97,7 @@ var Menu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
   }));
 });
-Menu.propTypes = {
+Menu.propTypes = _objectSpread({
   /** The type of selection that is allowed. */
   selectionMode: _propTypes["default"].oneOf(['none', 'single', 'multiple']),
   /**
@@ -137,7 +148,7 @@ Menu.propTypes = {
    * extended description for the object.
    */
   'aria-details': _propTypes["default"].string
-};
+}, _hoverProps.onHoverPropTypes);
 Menu.defaultProps = {
   selectionMode: 'none',
   isDisabled: false

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

@@ -1,5 +1,12 @@
 "use strict";
 
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
@@ -8,11 +15,15 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = exports.Default = void 0;
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactStately = require("react-stately");
+var _hoverProps = require("../../utils/devUtils/props/hoverProps");
 var _Text = _interopRequireDefault(require("../Text"));
 var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
+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) { (0, _defineProperty2["default"])(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; }
 var _default = {
   title: 'Components/Menu',
   component: _["default"],
@@ -26,7 +37,7 @@ var _default = {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     selectionMode: {},
     isDisabled: {},
     isNotFocusedOnHover: {},
@@ -70,7 +81,7 @@ var _default = {
         type: 'none'
       }
     }
-  }
+  }, _hoverProps.onHoverArgTypes)
 };
 exports["default"] = _default;
 var Default = function Default(_ref) {

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

@@ -78,9 +78,11 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }),
     pressProps = _usePress.pressProps;
   var whitelistedProps = (0, _omit["default"])(props, (0, _keys["default"])(others));
-  var _useSwitch = (0, _reactAria.useSwitch)(_objectSpread({
+  var _useSwitch = (0, _reactAria.useSwitch)(_objectSpread(_objectSpread({
       children: label
-    }, whitelistedProps), state, switchRef),
+    }, whitelistedProps), {}, {
+      'aria-label': 'switch-field'
+    }), state, switchRef),
     inputProps = _useSwitch.inputProps;
   var statusClasses = {
     isSelected: inputProps.checked

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

@@ -392,7 +392,7 @@ var Default = function Default(_ref) {
               right: 0,
               bottom: 0,
               borderBottom: '1px solid',
-              borderBottomColor: 'line.hairline'
+              borderBottomColor: 'line.light'
             }
           }
         }

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

@@ -20,7 +20,7 @@ var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
 var _PencilIcon = _interopRequireDefault(require("mdi-react/PencilIcon"));
 var _PlusIcon = _interopRequireDefault(require("mdi-react/PlusIcon"));
 var _hooks = require("../hooks");
-var _index = require("../index");
+var _ = require("..");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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; }
@@ -151,7 +151,8 @@ var sx = {
   },
   listElement: {
     wrapper: {
-      minHeight: '60px'
+      minHeight: '60px',
+      pl: '14px'
     },
     iconWrapper: {
       mr: 'auto',
@@ -165,7 +166,7 @@ var sx = {
     avatar: {
       width: '25px',
       height: '25px',
-      mr: 'md'
+      mr: '14px'
     },
     title: {
       alignSelf: 'start',
@@ -178,66 +179,112 @@ var sx = {
       alignSelf: 'start'
     },
     menuWrapper: {
-      alignSelf: 'center'
+      alignSelf: 'center',
+      pr: '4px'
     }
   }
 };
 var ListElement = function ListElement(_ref) {
   var item = _ref.item,
+    isHoverable = _ref.isHoverable,
     onClosePanel = _ref.onClosePanel;
-  return (0, _react2.jsx)(_index.Box, {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    mousePosition = _useState4[0],
+    setMousePosition = _useState4[1];
+  var listItemRef = (0, _react.useRef)();
+  var handleMenuHoverEnd = function handleMenuHoverEnd() {
+    var currentPositionX = mousePosition.currentPositionX,
+      currentPositionY = mousePosition.currentPositionY;
+    var _listItemRef$current$ = listItemRef.current.getBoundingClientRect(),
+      height = _listItemRef$current$.height,
+      right = _listItemRef$current$.right,
+      top = _listItemRef$current$.top;
+    var hasMovedBackToRow = currentPositionY < top + height && currentPositionX < right;
+    if (hasMovedBackToRow) {
+      setIsHovered(true);
+      return;
+    }
+    setIsHovered(false);
+  };
+  var handleMouseMove = function handleMouseMove(e) {
+    setMousePosition({
+      currentPositionX: e.clientX,
+      currentPositionY: e.clientY
+    });
+  };
+  var handleHoveEnd = function handleHoveEnd() {
+    setIsHovered(false);
+  };
+  var handleHoveStart = function handleHoveStart() {
+    setIsHovered(true);
+  };
+  return (0, _react2.jsx)(_.ListItem, {
+    isHovered: isHoverable && isHovered,
     isRow: true,
+    onHoverEnd: handleHoveEnd,
+    onHoverStart: handleHoveStart,
+    onMouseMove: handleMouseMove,
+    ref: listItemRef,
     sx: sx.listElement.wrapper
-  }, (0, _react2.jsx)(_index.Box, {
+  }, (0, _react2.jsx)(_.Box, {
     isRow: true,
     sx: sx.listElement.iconWrapper
-  }, (0, _react2.jsx)(_index.Icon, {
+  }, (0, _react2.jsx)(_.Icon, {
     icon: item.avatar,
     size: "md",
     sx: sx.listElement.icon
-  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+  }), (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.Text, {
     variant: "bodyStrong",
     sx: sx.listElement.title
-  }, item.lastName, ",", ' ', item.firstName), (0, _react2.jsx)(_index.Text, {
+  }, item.lastName, ",", ' ', item.firstName), (0, _react2.jsx)(_.Text, {
     variant: "subtitle",
     sx: sx.listElement.subtitle
-  }, item.email))), (0, _react2.jsx)(_index.Box, {
+  }, item.email))), (0, _react2.jsx)(_.Box, {
     isRow: true,
     sx: sx.listElement.menuWrapper
-  }, (0, _react2.jsx)(_index.SwitchField, {
+  }, (0, _react2.jsx)(_.SwitchField, {
     "aria-label": "active user",
     isDefaultSelected: true,
     alignSelf: "center",
     mr: "sm"
-  }), (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.IconButton, {
+  }), (0, _react2.jsx)(_.PopoverMenu, null, (0, _react2.jsx)(_.IconButton, {
     "aria-label": "more icon button",
     mr: onClosePanel ? 'sm' : 0
-  }, (0, _react2.jsx)(_index.Icon, {
+  }, (0, _react2.jsx)(_.Icon, {
     icon: _MoreVertIcon["default"],
     size: "md"
-  })), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_reactStately.Item, {
+  })), (0, _react2.jsx)(_.Menu, {
+    onAction: handleHoveEnd,
+    onHoverEnd: handleMenuHoverEnd,
+    onHoverStart: handleHoveStart
+  }, (0, _react2.jsx)(_reactStately.Item, {
     key: "enable"
   }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
     key: "disable"
   }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
     key: "delete"
-  }, "Delete user"))), onClosePanel && (0, _react2.jsx)(_index.IconButton, {
+  }, "Delete user"))), onClosePanel && (0, _react2.jsx)(_.IconButton, {
     "aria-label": "close icon button",
     onPress: onClosePanel
-  }, (0, _react2.jsx)(_index.Icon, {
+  }, (0, _react2.jsx)(_.Icon, {
     size: "sm",
     icon: _CloseIcon["default"]
   }))));
 };
 var Default = function Default() {
-  var _useState = (0, _react.useState)(),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    selectedItemId = _useState2[0],
-    setSelectedItemId = _useState2[1];
-  var _useState3 = (0, _react.useState)(),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    selectedKeys = _useState4[0],
-    setSelectedKeys = _useState4[1];
+  var _useState5 = (0, _react.useState)(),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    selectedItemId = _useState6[0],
+    setSelectedItemId = _useState6[1];
+  var _useState7 = (0, _react.useState)(),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    selectedKeys = _useState8[0],
+    setSelectedKeys = _useState8[1];
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
     panelState = _useOverlayPanelState.state,
     onPanelClose = _useOverlayPanelState.onClose;
@@ -260,62 +307,65 @@ var Default = function Default() {
       closePanelHandler();
     }
   };
-  return (0, _react2.jsx)(_index.Box, {
-    sx: sx.wrapper
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+  var title = (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.Box, {
     align: "center",
     isRow: true,
     mb: "xs",
     role: "heading",
     "aria-level": "1"
-  }, (0, _react2.jsx)(_index.Text, {
+  }, (0, _react2.jsx)(_.Text, {
     fontSize: "xx",
     fontWeight: 3,
     fontColor: "text.primary"
-  }, heading), (0, _react2.jsx)(_index.IconButton, {
+  }, heading), (0, _react2.jsx)(_.IconButton, {
     "aria-label": "icon button",
     ml: "sm",
     variant: "inverted"
-  }, (0, _react2.jsx)(_index.Icon, {
+  }, (0, _react2.jsx)(_.Icon, {
     icon: _PlusIcon["default"],
     size: "sm"
-  }))), (0, _react2.jsx)(_index.Text, {
+  }))), (0, _react2.jsx)(_.Text, {
     fontSize: "sm",
     color: "text.secondary",
     fontWeight: 0,
     width: "800px"
-  }, description, (0, _react2.jsx)(_index.Link, {
+  }, description, (0, _react2.jsx)(_.Link, {
     href: "https://uilibrary.ping-eng.com/",
     sx: {
       fontSize: '13px'
     }
-  }, " Learn more"))), (0, _react2.jsx)(_index.SearchField, {
+  }, " Learn more")));
+  return (0, _react2.jsx)(_.Box, {
+    sx: sx.wrapper
+  }, title, (0, _react2.jsx)(_.SearchField, {
     position: "fixed",
     mb: "lg",
     mt: "lg",
     width: "400px",
     placeholder: "Search",
     "aria-label": "search"
-  }), (0, _react2.jsx)(_index.Separator, {
+  }), (0, _react2.jsx)(_.Separator, {
     margin: 0
-  }), (0, _react2.jsx)(_index.ListView, {
+  }), (0, _react2.jsx)(_.ListView, {
     items: items,
     onSelectionChange: selectItemHandler,
     ref: panelTriggerRef,
-    selectedKeys: selectedKeys
+    selectedKeys: selectedKeys,
+    isHoverable: false
   }, function (item) {
     return (0, _react2.jsx)(_reactStately.Item, {
       key: item.email,
       textValue: item.email,
-      hasSeparator: true,
+      hasSeparator: item.hasSeparator,
       listItemProps: {
-        pl: 15,
-        minHeight: 75
+        minHeight: 75,
+        padding: 1
       }
     }, (0, _react2.jsx)(ListElement, {
+      isHoverable: true,
       item: item
     }));
-  }), (0, _react2.jsx)(_index.OverlayPanel, {
+  }), (0, _react2.jsx)(_.OverlayPanel, {
     isOpen: panelState.isOpen,
     state: panelState,
     triggerRef: panelTriggerRef,
@@ -325,17 +375,17 @@ var Default = function Default() {
     contain: true,
     restoreFocus: true,
     autoFocus: true
-  }, (0, _react2.jsx)(_index.Box, {
+  }, (0, _react2.jsx)(_.Box, {
     sx: sx.listElementWrapper
   }, (0, _react2.jsx)(ListElement, {
     item: selectedItemId >= 0 ? items[selectedItemId] : [],
     onClosePanel: closePanelHandler
-  })), (0, _react2.jsx)(_index.Separator, {
+  })), (0, _react2.jsx)(_.Separator, {
     margin: 0,
     sx: sx.separator
-  }), (0, _react2.jsx)(_index.Box, {
+  }), (0, _react2.jsx)(_.Box, {
     sx: sx.tabsWrapper
-  }, (0, _react2.jsx)(_index.Tabs, {
+  }, (0, _react2.jsx)(_.Tabs, {
     tabListProps: {
       justifyContent: 'center'
     },
@@ -344,42 +394,42 @@ var Default = function Default() {
         position: 'relative'
       }
     }
-  }, (0, _react2.jsx)(_index.Tab, {
+  }, (0, _react2.jsx)(_.Tab, {
     title: "Profile"
-  }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.IconButton, {
+  }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.IconButton, {
     variant: "inverted",
     "aria-label": "pencil icon button",
     sx: sx.iconButton
   }, (0, _react2.jsx)(_PencilIcon["default"], {
     size: 20
-  })), (0, _react2.jsx)(_index.Text, {
+  })), (0, _react2.jsx)(_.Text, {
     sx: sx.itemLabel,
     variant: "base"
-  }, "Full Name"), (0, _react2.jsx)(_index.Text, {
+  }, "Full Name"), (0, _react2.jsx)(_.Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].firstName, ' ', items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
+  }, items[selectedItemId].firstName, ' ', items[selectedItemId].lastName), (0, _react2.jsx)(_.Text, {
     sx: sx.itemLabel,
     variant: "base"
-  }, "First Name"), (0, _react2.jsx)(_index.Text, {
+  }, "First Name"), (0, _react2.jsx)(_.Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].firstName), (0, _react2.jsx)(_index.Text, {
+  }, items[selectedItemId].firstName), (0, _react2.jsx)(_.Text, {
     sx: sx.itemLabel,
     variant: "base"
-  }, "Last Name"), (0, _react2.jsx)(_index.Text, {
+  }, "Last Name"), (0, _react2.jsx)(_.Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
+  }, items[selectedItemId].lastName), (0, _react2.jsx)(_.Text, {
     sx: sx.itemLabel,
     variant: "base"
-  }, "Email"), (0, _react2.jsx)(_index.Text, {
+  }, "Email"), (0, _react2.jsx)(_.Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].email))), (0, _react2.jsx)(_index.Tab, {
+  }, items[selectedItemId].email))), (0, _react2.jsx)(_.Tab, {
     title: "Group Memberships"
-  }, (0, _react2.jsx)(_index.Text, null, "Group Memberships")), (0, _react2.jsx)(_index.Tab, {
+  }, (0, _react2.jsx)(_.Text, null, "Group Memberships")), (0, _react2.jsx)(_.Tab, {
     title: "Account Info"
-  }, (0, _react2.jsx)(_index.Text, null, "Account Info")))))));
+  }, (0, _react2.jsx)(_.Text, null, "Account Info")))))));
 };
 exports.Default = Default;

package/lib/cjs/styles/colors.js

@@ -21,7 +21,9 @@ exports.active = active;
 var critical = {
   bright: '#a31300',
   dark: '#a31300',
-  light: '#ffebe7'
+  light: '#ffebe7',
+  primaryDark: _chromaJs["default"].mix('#a31300', '#000000', 0.2).hex(),
+  secondaryDark: _chromaJs["default"].mix('#a31300', '#000000', 0.4).hex()
 };
 exports.critical = critical;
 var success = {

package/lib/cjs/utils/devUtils/props/hoverProps.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onHoverPropTypes = exports.onHoverArgTypes = exports.baseDocSettings = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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) { (0, _defineProperty2["default"])(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; }
+var descriptions = {
+  onHoverStart: 'Handler that is called when a hover interaction starts.',
+  onHoverEnd: 'Handler that is called when a hover interaction ends.',
+  onHoverChange: 'Handler that is called when the hover state changes.'
+};
+var baseDocSettings = {
+  type: {
+    summary: 'func'
+  },
+  control: {
+    type: null
+  },
+  table: {
+    category: 'Hover Handlers'
+  }
+};
+exports.baseDocSettings = baseDocSettings;
+var onHoverArgTypes = {
+  'onHoverStart': _objectSpread({
+    description: descriptions.onHoverStart
+  }, baseDocSettings),
+  'onHoverEnd': _objectSpread({
+    description: descriptions.onHoverEnd
+  }, baseDocSettings),
+  'onHoverChange': _objectSpread({
+    description: descriptions.onHoverChange
+  }, baseDocSettings)
+};
+exports.onHoverArgTypes = onHoverArgTypes;
+var onHoverPropTypes = {
+  onHoverStart: _propTypes["default"].func,
+  onHoverEnd: _propTypes["default"].func,
+  onHoverChange: _propTypes["default"].func
+};
+exports.onHoverPropTypes = onHoverPropTypes;

package/lib/components/Badge/Badge.stories.js

@@ -15,7 +15,7 @@ import BadgeReadme from './Badge.mdx';
 import Badge from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Badge',
+  title: 'Components/Badge',
   component: Badge,
   argTypes: {
     bg: {
@@ -164,7 +164,7 @@ export var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
     }
   }, ___EmotionJSX(IconButton, {
     "aria-label": "delete",
-    variant: "buttons.chipWithSlotDeleteButton"
+    variant: "badgeDeleteButton"
   }, ___EmotionJSX(Icon, {
     icon: Clear,
     size: 14

package/lib/components/Badge/Badge.styles.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 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 { defaultFocus, focusWithCroppedOutline } from '../Button/Buttons.styles';
+import { focusWithCroppedOutline } from '../Button/Buttons.styles';
 export var baseBadge = {
   cursor: 'default',
   p: '3px 5px 4px 5px',
@@ -85,22 +85,11 @@ export var deleteButton = {
   mx: '3px !important'
 };
 export var badgeDeleteButton = _objectSpread(_objectSpread({}, deleteButton), {}, {
-  '&.is-focused': _objectSpread({
-    bg: 'accent.40'
-  }, focusWithCroppedOutline),
-  '&.is-hovered': {
-    bg: 'accent.40'
-  },
-  '&.is-pressed': {
-    bg: 'accent.20',
-    borderColor: 'accent.20'
-  }
-});
-export var badgeWithSlotDeleteButton = _objectSpread(_objectSpread({}, deleteButton), {}, {
+  outline: 'none',
   path: {
     fill: 'neutral.40'
   },
-  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline),
   '&.is-hovered': {
     backgroundColor: '#e5e9f8 !important',
     path: {
@@ -145,6 +134,5 @@ export default {
   deleteButton: deleteButton,
   countBadge: countBadge,
   countNeutral: countNeutral,
-  badgeWithSlotDeleteButton: badgeWithSlotDeleteButton,
   badgeDeleteButton: badgeDeleteButton
 };

package/lib/components/Button/Button.stories.js

@@ -18,7 +18,7 @@ delete variants.ICON_BUTTON;
 delete variants.INVERTED;
 
 // add designer approved variants for devs to use here
-var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success'];
+var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
 export default {
   title: 'Components/Button',
   component: Button,
@@ -122,4 +122,14 @@ export var FilterButton = function FilterButton() {
   }, ___EmotionJSX(Icon, {
     icon: FilterIcon
   })));
+};
+export var Critical = function Critical() {
+  return ___EmotionJSX(Button, {
+    variant: "critical"
+  }, "Button Text");
+};
+export var Primary = function Primary() {
+  return ___EmotionJSX(Button, {
+    variant: "primary"
+  }, "Button Text");
 };