@pingux/astro 1.42.0 → 2.0.0-alpha.1

package/lib/cjs/components/Link/Link.js

@@ -24,16 +24,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _themeUi = require("theme-ui");
-
-var _link = require("@react-aria/link");
+var _reactAria = require("react-aria");
 
-var _focus = require("@react-aria/focus");
+var _themeUi = require("theme-ui");
 
 var _interactions = require("@react-aria/interactions");
 
-var _utils = require("@react-aria/utils");
-
 var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
@@ -62,11 +58,11 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return linkRef.current;
   });
 
-  var _useFocusRing = (0, _focus.useFocusRing)(),
+  var _useFocusRing = (0, _reactAria.useFocusRing)(),
       isFocusVisible = _useFocusRing.isFocusVisible,
       focusProps = _useFocusRing.focusProps;
 
-  var _useLink = (0, _link.useLink)(props, linkRef),
+  var _useLink = (0, _reactAria.useLink)(props, linkRef),
       linkProps = _useLink.linkProps;
 
   var _useHover = (0, _interactions.useHover)(props),
@@ -91,7 +87,7 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: classNames,
     ref: linkRef,
     role: "link"
-  }, others, (0, _utils.mergeProps)(hoverProps, pressProps, linkProps, focusProps)));
+  }, others, (0, _reactAria.mergeProps)(hoverProps, pressProps, linkProps, focusProps)));
 });
 Link.propTypes = {
   /** Whether the link is disabled. */

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

@@ -20,7 +20,7 @@ var _ = _interopRequireDefault(require("."));
 
 var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
 
-var _links = _interopRequireDefault(require("../../styles/variants/links"));
+var _Link = _interopRequireDefault(require("./Link.styles"));
 
 var _react2 = require("@emotion/react");
 
@@ -51,7 +51,7 @@ var _default = {
     variant: {
       control: {
         type: 'select',
-        options: (0, _keys["default"])(_links["default"])
+        options: (0, _keys["default"])(_Link["default"])
       }
     }
   }

package/lib/cjs/{styles/variants/links.js → components/Link/Link.styles.js}

@@ -26,7 +26,7 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _buttons = require("./buttons");
+var _Buttons = require("../Button/Buttons.styles");
 
 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; }
 
@@ -41,7 +41,7 @@ var app = {
   '&.is-hovered': {
     textDecoration: 'underline'
   },
-  '&.is-focused': _objectSpread({}, _buttons.focusWithCroppedOutline),
+  '&.is-focused': _objectSpread({}, _Buttons.focusWithCroppedOutline),
   '&.is-pressed': {
     color: 'accent.40',
     textDecoration: 'underline'
@@ -56,7 +56,7 @@ var web = _objectSpread(_objectSpread({}, app), {}, {
   '&:visited': {
     color: 'decorative.7'
   },
-  '&.is-focused': _objectSpread({}, _buttons.focusWithCroppedOutline)
+  '&.is-focused': _objectSpread({}, _Buttons.focusWithCroppedOutline)
 });
 
 var _default = {

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -48,6 +48,8 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _hooks = require("../../hooks");
 
 var _SelectFieldBase = _interopRequireDefault(require("../SelectFieldBase"));
@@ -93,18 +95,19 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   }), ref),
       selectFieldProps = (0, _extends2["default"])({}, _useSelectField);
 
-  var fieldControlProps = selectFieldProps.fieldControlProps,
+  var fieldControlInputProps = selectFieldProps.fieldControlInputProps,
       isLoadingInitial = selectFieldProps.isLoadingInitial,
       state = selectFieldProps.state,
       triggerProps = selectFieldProps.triggerProps,
       triggerRef = selectFieldProps.triggerRef;
   var trigger = (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
-    className: fieldControlProps.className,
+    className: fieldControlInputProps.className,
     ref: triggerRef,
     variant: "link",
-    tabIndex: isDisabled ? -1 : 0,
+    tabIndex: isDisabled ? -1 : 0
+  }, triggerProps, ariaProps, {
     "aria-describedby": helperText && helperTextId
-  }, triggerProps, ariaProps), (0, _react2.jsx)(_.Text, {
+  }), (0, _react2.jsx)(_.Text, {
     variant: "label",
     color: "active"
   }, placeholder), (0, _react2.jsx)(_.Box, {
@@ -128,7 +131,7 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     trigger: trigger
   }));
 });
-LinkSelectField.propTypes = _objectSpread({
+LinkSelectField.propTypes = _objectSpread(_objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: _propTypes["default"].oneOf(['start', 'end', 'middle']),
 
@@ -214,20 +217,8 @@ LinkSelectField.propTypes = _objectSpread({
    *
    * (key: Key) => any
    */
-  onSelectionChange: _propTypes["default"].func,
-
-  /**
-   * Props object passed along to `useSelect` from React Aria, `useSelectState` from React Stately,
-   * and/or the visible button representation for the select input.
-   */
-  controlProps: _propTypes["default"].shape({}),
-
-  /** Props object passed along to the root container as-is. */
-  containerProps: _propTypes["default"].shape({}),
-
-  /** Props object passed along to the label as-is. */
-  labelProps: _propTypes["default"].shape({})
-}, _ariaAttributes.ariaAttributesBasePropTypes);
+  onSelectionChange: _propTypes["default"].func
+}, _fieldAttributes.inputFieldAttributesBasePropTypes), _ariaAttributes.ariaAttributesBasePropTypes);
 LinkSelectField.defaultProps = {
   placeholder: 'Select',
   status: _statuses["default"].DEFAULT,

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

@@ -48,14 +48,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _overlays = require("@react-aria/overlays");
+var _reactAria = require("react-aria");
 
-var _data = require("@react-stately/data");
+var _reactStately = require("react-stately");
 
 var _2 = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _react2 = require("@emotion/react");
@@ -80,7 +82,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -116,18 +118,17 @@ var _default = {
     isDisabled: {},
     isOpen: {},
     isRequired: {},
-    controlProps: {},
     selectedKey: {
       control: {
         type: 'none'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, (0, _extends2["default"])({}, args, {
     width: "100%"
   }), (0, _react2.jsx)(_2.Item, {
     key: "red"
@@ -301,7 +302,7 @@ var DynamicItems = function DynamicItems() {
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
       items = _useState4[0];
 
-  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, {
+  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, {
     label: "Select an option...",
     items: items
   }, function (item) {
@@ -320,7 +321,7 @@ DynamicItems.parameters = {
 
 var AsyncLoading = function AsyncLoading() {
   // This example uses `useAsyncList` from "@react-stately/data"
-  var list = (0, _data.useAsyncList)({
+  var list = (0, _reactStately.useAsyncList)({
     load: function load(_ref) {
       return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
         var signal, cursor, res, json;
@@ -361,7 +362,7 @@ var AsyncLoading = function AsyncLoading() {
       }))();
     }
   });
-  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, {
+  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, {
     label: "Pick a Pokemon",
     items: list.items,
     isLoading: list.isLoading,

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

@@ -43,16 +43,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _listbox = require("@react-aria/listbox");
-
-var _utils = require("@react-aria/utils");
-
-var _virtualizer = require("@react-aria/virtualizer");
+var _reactAria = require("react-aria");
 
 var _i18n = require("@react-aria/i18n");
 
+var _listbox = require("@react-aria/listbox");
+
 var _layout = require("@react-stately/layout");
 
+var _virtualizer = require("@react-aria/virtualizer");
+
 var _ListBoxContext = require("./ListBoxContext");
 
 var _index = require("./index.js");
@@ -196,7 +196,7 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   return (0, _react2.jsx)(_ListBoxContext.ListBoxContext.Provider, {
     value: state
-  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _utils.mergeProps)(listBoxProps, others), {
+  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(listBoxProps, others), {
     style: {
       outline: 'none'
     },

package/lib/cjs/{styles/variants/listBox.js → components/ListBox/ListBox.styles.js}

@@ -26,7 +26,7 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _text = require("../variants/text");
+var _Text = require("../Text/Text.styles");
 
 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; }
 
@@ -35,14 +35,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var listBox = {
   outline: 'none'
 };
-listBox.option = _objectSpread(_objectSpread({}, _text.text.base), {}, {
+listBox.option = _objectSpread(_objectSpread({}, _Text.text.base), {}, {
   px: 'md',
   py: 'sm',
   alignItems: 'center',
   outline: 'none',
   wordBreak: 'break-word',
   cursor: 'pointer',
-  '&.is-selected': _objectSpread(_objectSpread({}, _text.text.inputValue), {}, {
+  '&.is-selected': _objectSpread(_objectSpread({}, _Text.text.inputValue), {}, {
     pl: 0
   }),
   '&.is-focused': {
@@ -56,5 +56,13 @@ listBox.selectField = {
   pl: 0,
   outline: 'none'
 };
+listBox.sectionTitle = {
+  fontSize: 'sm',
+  fontWeight: '3',
+  color: 'text.secondary',
+  height: '36px',
+  ml: 'sm',
+  justifyContent: 'center'
+};
 var _default = listBox;
 exports["default"] = _default;

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

@@ -12,12 +12,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _jestAxe = require("jest-axe");
 
+var _reactStately = require("react-stately");
+
 var _list = require("@react-stately/list");
 
 var _react2 = require("@testing-library/react");
 
-var _collections = require("@react-stately/collections");
-
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
 var _ = _interopRequireDefault(require("."));
@@ -85,7 +85,7 @@ var getSectionsComponent = function getSectionsComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _react2.render)((0, _react3.jsx)(ListBoxWithSections, (0, _extends2["default"])({}, defaultWithSectionsProps, props), function (section) {
     return (// eslint-disable-next-line testing-library/no-node-access
-      (0, _react3.jsx)(_collections.Section, {
+      (0, _react3.jsx)(_reactStately.Section, {
         key: section.name,
         title: section.name,
         items: section.options

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

@@ -22,10 +22,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _listbox = require("@react-aria/listbox");
-
 var _i18n = require("@react-aria/i18n");
 
+var _listbox = require("@react-aria/listbox");
+
 var _virtualizer = require("@react-aria/virtualizer");
 
 var _ListBoxContext = require("./ListBoxContext");
@@ -74,7 +74,7 @@ var ListBoxSection = function ListBoxSection(props) {
   }, groupProps), item.key !== state.collection.getFirstKey() && (0, _react2.jsx)(_Separator["default"], {
     mt: "0px"
   }), item.rendered && (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, headingProps, {
-    variant: "boxes.listBoxSectionTitle"
+    variant: "listBox.sectionTitle"
   }), item.rendered)), (0, _react2.jsx)(_Box["default"], {
     style: (0, _virtualizer.layoutInfoToStyle)(reusableView.layoutInfo, direction)
   }, children));

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

@@ -36,12 +36,12 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _CircleSmallIcon = _interopRequireDefault(require("mdi-react/CircleSmallIcon"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _listbox = require("@react-aria/listbox");
 
-var _CircleSmallIcon = _interopRequireDefault(require("mdi-react/CircleSmallIcon"));
-
 var _hooks = require("../../hooks");
 
 var _Box = _interopRequireDefault(require("../Box"));

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

@@ -63,7 +63,7 @@ var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     role: "listitem",
     ref: ref,
     as: "li",
-    variant: "boxes.listItem",
+    variant: "listItem.container",
     isRow: true
   }, hoverProps, others), children);
 });

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+var container = {
+  display: 'flex',
+  flex: '1 1 0px',
+  cursor: 'pointer',
+  height: '64px',
+  pl: 'md',
+  pr: 'sm',
+  pt: 16,
+  pb: 16,
+  justifyContent: 'center',
+  bg: 'accent.99',
+  '&.is-selected': {
+    bg: 'white'
+  },
+  '&.is-hovered': {
+    bg: 'white'
+  }
+};
+var _default = {
+  container: container
+};
+exports["default"] = _default;

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

@@ -28,19 +28,17 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireDefault(require("react"));
 
-var _collections = require("@react-stately/collections");
+var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
 
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
 
-var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
-
 var _FormSelectIcon = _interopRequireDefault(require("mdi-react/FormSelectIcon"));
 
-var _data = require("@react-stately/data");
+var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
 
-var _addonActions = require("@storybook/addon-actions");
+var _reactStately = require("react-stately");
 
-var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
+var _addonActions = require("@storybook/addon-actions");
 
 var _ = _interopRequireDefault(require("."));
 
@@ -599,7 +597,7 @@ var Default = function Default(_ref2) {
   return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, props, args, {
     items: items
   }), function (item) {
-    return (0, _react2.jsx)(_collections.Item, {
+    return (0, _react2.jsx)(_reactStately.Item, {
       key: item.name,
       textValue: item.name,
       "data-id": item.key
@@ -748,7 +746,7 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
     };
   }();
 
-  var list = (0, _data.useAsyncList)({
+  var list = (0, _reactStately.useAsyncList)({
     load: function load(_ref5) {
       return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
         var signal, cursor, filterText;
@@ -792,7 +790,7 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
     loadingState: list.loadingState,
     onLoadMore: list.loadMore
   }), function (item) {
-    return (0, _react2.jsx)(_collections.Item, {
+    return (0, _react2.jsx)(_reactStately.Item, {
       key: item.name,
       textValue: item.name
     }, (0, _react2.jsx)(ListElement, {
@@ -819,7 +817,7 @@ var MultipleSelection = function MultipleSelection(_ref6) {
     items: items,
     selectionMode: "multiple"
   }), function (item) {
-    return (0, _react2.jsx)(_collections.Item, {
+    return (0, _react2.jsx)(_reactStately.Item, {
       key: item.name,
       textValue: item.name
     }, (0, _react2.jsx)(ListElement, {

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

@@ -14,11 +14,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _lodash = _interopRequireDefault(require("lodash"));
 
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _reactAria = require("react-aria");
 
-var _focus = require("@react-aria/focus");
+var _reactStately = require("react-stately");
 
-var _collections = require("@react-stately/collections");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 
@@ -78,12 +78,12 @@ var getComponent = function getComponent() {
       _ref$renderFn = _ref.renderFn,
       renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
 
-  return renderFn((0, _react2.jsx)(_focus.FocusScope, {
+  return renderFn((0, _react2.jsx)(_reactAria.FocusScope, {
     restoreFocus: true
   }, (0, _react2.jsx)(_ListView["default"], (0, _extends2["default"])({}, defaultProps, props, {
     items: items
   }), function (item) {
-    return (0, _react2.jsx)(_collections.Item, {
+    return (0, _react2.jsx)(_reactStately.Item, {
       key: item.key,
       textValue: item.name,
       "data-id": item.key
@@ -101,7 +101,7 @@ var getComponentEmpty = function getComponentEmpty() {
       _ref2$renderFn = _ref2.renderFn,
       renderFn = _ref2$renderFn === void 0 ? _testWrapper.render : _ref2$renderFn;
 
-  return renderFn((0, _react2.jsx)(_focus.FocusScope, {
+  return renderFn((0, _react2.jsx)(_reactAria.FocusScope, {
     restoreFocus: true
   }, (0, _react2.jsx)(_ListView["default"], (0, _extends2["default"])({}, defaultProps, props))));
 };
@@ -113,12 +113,12 @@ var getComponentWithCheckbox = function getComponentWithCheckbox() {
       _ref3$renderFn = _ref3.renderFn,
       renderFn = _ref3$renderFn === void 0 ? _testWrapper.render : _ref3$renderFn;
 
-  return renderFn((0, _react2.jsx)(_focus.FocusScope, {
+  return renderFn((0, _react2.jsx)(_reactAria.FocusScope, {
     restoreFocus: true
   }, (0, _react2.jsx)(_ListView["default"], (0, _extends2["default"])({}, defaultProps, props, {
     items: items
   }), function (item) {
-    return (0, _react2.jsx)(_collections.Item, {
+    return (0, _react2.jsx)(_reactStately.Item, {
       key: item.key,
       textValue: item.name,
       "data-id": item.key

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

@@ -20,12 +20,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _utils = require("@react-aria/utils");
-
-var _focus = require("@react-aria/focus");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _reactAria = require("react-aria");
+
 var _list = require("@react-aria/list");
 
 var _interactions = require("@react-aria/interactions");
@@ -60,13 +58,13 @@ var ListViewItem = function ListViewItem(props) {
   var rowRef = (0, _react.useRef)();
   var isSelectable = state.selectionManager.selectionMode !== 'none';
 
-  var _useFocusRing = (0, _focus.useFocusRing)({
+  var _useFocusRing = (0, _reactAria.useFocusRing)({
     within: true
   }),
       isFocusVisibleWithin = _useFocusRing.isFocusVisible,
       focusWithinProps = _useFocusRing.focusProps;
 
-  var _useFocusRing2 = (0, _focus.useFocusRing)(),
+  var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
       focusProps = _useFocusRing2.focusProps,
       isFocusVisible = _useFocusRing2.isFocusVisible;
 
@@ -83,7 +81,7 @@ var ListViewItem = function ListViewItem(props) {
       gridCellProps = _useListItem.gridCellProps;
 
   var isSelected = state.selectionManager.isSelected(item.key);
-  var mergedProps = (0, _utils.mergeProps)(raRowProps, hoverProps, focusWithinProps, focusProps);
+  var mergedProps = (0, _reactAria.mergeProps)(raRowProps, hoverProps, focusWithinProps, focusProps);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isHovered: isSelectable && isHovered,
@@ -103,9 +101,9 @@ var ListViewItem = function ListViewItem(props) {
       outline: 'none'
     }
   }), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    as: "div"
+    as: "div",
+    variant: "listViewItem.container"
   }, gridCellProps, {
-    variant: "boxes.listViewItem",
     isFocused: isDisabled ? false : isFocusVisible,
     isDisabled: isDisabled,
     isSelected: isSelected,

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

@@ -0,0 +1,88 @@
+"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["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/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) { (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 container = {
+  display: 'flex',
+  padding: '0px 15px 0px 25px',
+  flex: '1 1 0px',
+  minHeight: '80px',
+  justifyContent: 'center',
+  bg: 'accent.99',
+  outline: 'none',
+  '&.is-selected': {
+    bg: 'white'
+  },
+  '&.is-hovered': {
+    bg: 'white',
+    cursor: 'pointer'
+  },
+  '&.is-focused': {
+    boxShadow: '0 0 0 1px inset #D033FF'
+  },
+  '&.has-separator': {
+    borderBottom: '1px solid',
+    borderBottomColor: 'line.hairline'
+  }
+};
+
+var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
+  minHeight: '75px',
+  height: '76px',
+  '&.has-inset-separator': {
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      width: 'calc(100% - 43px)',
+      right: 0,
+      bottom: 0,
+      borderBottom: '1px solid',
+      borderBottomColor: 'line.hairline'
+    },
+    '&.is-focused': {
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        width: 'calc(100% - 43px)',
+        right: 0,
+        bottom: 0,
+        borderBottom: '1px solid',
+        borderBottomColor: 'focus'
+      }
+    }
+  }
+});
+
+var _default = {
+  container: container,
+  linkedViewContainer: linkedViewContainer
+};
+exports["default"] = _default;