@pingux/astro 1.41.0-alpha.5 → 1.42.0-alpha.0

package/lib/cjs/components/ComboBox/ComboBoxInput.js

@@ -44,12 +44,14 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
-
-var _reactAria = require("react-aria");
+var _focus = require("@react-aria/focus");
 
 var _interactions = require("@react-aria/interactions");
 
+var _utils = require("@react-aria/utils");
+
+var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
+
 var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
@@ -94,23 +96,21 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       wrapperProps = props.wrapperProps,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
-  var _useHover = (0, _interactions.useHover)({}),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
   var textFieldProps = _objectSpread({
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
-    containerProps: _objectSpread(_objectSpread({
-      sx: style,
-      variant: 'forms.comboBox.container'
-    }, hoverProps), containerProps)
-  }, (0, _reactAria.mergeProps)(inputProps, others)); // istanbul ignore next
+    containerProps: containerProps
+  }, (0, _utils.mergeProps)(inputProps, others)); // istanbul ignore next
 
 
   (0, _react.useImperativeHandle)(ref, function () {
     return inputRef.current;
-  }); // START - minimum delay time for loading indicator = 500ms
+  });
+
+  var _useHover = (0, _interactions.useHover)({}),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered; // START - minimum delay time for loading indicator = 500ms
+
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -149,7 +149,7 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   var button = !isReadOnly && (0, _react2.jsx)(_.Box, {
     isRow: true,
-    variant: "forms.comboBox.inputInContainerSlot"
+    variant: "boxes.inputInContainerSlot"
   }, // Render loader after delay if filtering or loading
   showLoading && (isOpen || menuTrigger === 'manual' || loadingState === _loadingStates["default"].LOADING) && (0, _react2.jsx)(_.Loader, {
     variant: "loader.withinInput"
@@ -157,7 +157,7 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     preventFocusOnPress: true,
     isPressed: isOpen
   }, (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
-    variant: "forms.comboBox.button"
+    variant: "comboBox"
   }, triggerProps, {
     ref: triggerRef,
     isDisabled: isDisabled || isReadOnly,
@@ -168,16 +168,20 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       transform: 'rotate(180deg)'
     } : null
   }))));
-  return (0, _react2.jsx)(_reactAria.FocusRing, {
+  return (0, _react2.jsx)(_focus.FocusRing, {
     within: true,
     isTextInput: true,
     focusClass: "is-focused",
     focusRingClass: "focus-ring",
     autoFocus: hasAutoFocus
-  }, (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({}, textFieldProps, {
-    wrapperProps: _objectSpread({
+  }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    isRow: true,
+    style: style,
+    variant: "forms.comboBox.container"
+  }, hoverProps, wrapperProps), (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({}, textFieldProps, {
+    wrapperProps: {
       ref: inputWrapperRef
-    }, wrapperProps),
+    },
     controlProps: _objectSpread({
       variant: 'forms.comboBox.input'
     }, controlProps),
@@ -188,7 +192,7 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     slots: {
       inContainer: button
     }
-  })));
+  }))));
 });
 ComboBoxInput.propTypes = _objectSpread({
   containerProps: _propTypes["default"].shape({}),

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

@@ -44,15 +44,19 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _combobox = require("@react-aria/combobox");
 
-var _reactAria = require("react-aria");
+var _utils = require("@react-aria/utils");
 
-var _reactStately = require("react-stately");
+var _focus = require("@react-aria/focus");
 
 var _i18n = require("@react-aria/i18n");
 
-var _utils = require("@react-aria/utils");
+var _overlays = require("@react-aria/overlays");
+
+var _combobox2 = require("@react-stately/combobox");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
@@ -179,7 +183,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }),
       contains = _useFilter.contains;
 
-  var state = (0, _reactStately.useComboBoxState)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
+  var state = (0, _combobox2.useComboBoxState)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
     defaultItems: isReadOnly ? [] : defaultItems,
     items: items,
     onSelectionChange: hasAddOption || hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
@@ -189,7 +193,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     if (shouldShowAddOption) state.selectionManager.setFocusedKey(addOption);
   }, [shouldShowAddOption, inputValue, addOption, state.isOpen]);
 
-  var _useComboBox = (0, _reactAria.useComboBox)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
+  var _useComboBox = (0, _combobox.useComboBox)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
     buttonRef: buttonRef,
     popoverRef: popoverRef,
     listBoxRef: listBoxRef,
@@ -204,7 +208,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       shouldSelectOnPressUp = listBoxProps.shouldSelectOnPressUp,
       otherListBoxProps = (0, _objectWithoutProperties2["default"])(listBoxProps, _excluded2);
 
-  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
+  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
     targetRef: inputWrapperRef,
     overlayRef: popoverRef,
     scrollRef: listBoxRef,
@@ -260,9 +264,9 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     placement: placement,
     ref: popoverRef,
     style: style
-  }, (0, _react2.jsx)(_reactAria.FocusScope, {
+  }, (0, _react2.jsx)(_focus.FocusScope, {
     restoreFocus: true
-  }, (0, _react2.jsx)(_reactAria.DismissButton, {
+  }, (0, _react2.jsx)(_overlays.DismissButton, {
     onDismiss: state.close
   }), (0, _react2.jsx)(_ScrollBox["default"], scrollBoxProps, (0, _react2.jsx)(_ListBox["default"], (0, _extends2["default"])({
     ref: listBoxRef,
@@ -274,7 +278,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onLoadMore: onLoadMore,
     isFocusedOnHover: shouldFocusOnHover,
     isSelectedOnPressUp: shouldSelectOnPressUp
-  }, otherListBoxProps))), (0, _react2.jsx)(_reactAria.DismissButton, {
+  }, otherListBoxProps))), (0, _react2.jsx)(_overlays.DismissButton, {
     onDismiss: state.close
   })));
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ComboBox["default"], (0, _extends2["default"])({}, props, {

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

@@ -52,11 +52,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactStately = require("react-stately");
+var _addonActions = require("@storybook/addon-actions");
 
 var _i18n = require("@react-aria/i18n");
 
-var _addonActions = require("@storybook/addon-actions");
+var _data = require("@react-stately/data");
 
 var _ = require("../../");
 
@@ -270,7 +270,7 @@ exports.WithSections = WithSections;
 
 var AsyncLoading = function AsyncLoading() {
   // This example uses `useAsyncList` from "@react-stately/data"
-  var list = (0, _reactStately.useAsyncList)({
+  var list = (0, _data.useAsyncList)({
     load: function load(_ref) {
       return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
         var signal, cursor, filterText, res, json;

package/lib/cjs/components/CopyText/CopyButton.js

@@ -40,10 +40,11 @@ var CopyButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
     ref: ref,
     "aria-label": "copy to clipboard",
-    variant: "copyButton"
+    variant: "buttons.copy"
   }, (0, _lodash.omit)(props, 'iconProps')), (0, _react2.jsx)(_Icon["default"], (0, _extends2["default"])({
     icon: _ContentCopyIcon["default"],
-    size: 15
+    size: 15,
+    color: "text.secondary"
   }, props === null || props === void 0 ? void 0 : props.iconProps)));
 });
 CopyButton.propTypes = {

package/lib/cjs/components/CopyText/CopyText.js

@@ -28,10 +28,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
+var _focus = require("@react-aria/focus");
 
 var _interactions = require("@react-aria/interactions");
 
+var _utils = require("@react-aria/utils");
+
 var _liveAnnouncer = require("@react-aria/live-announcer");
 
 var _index = require("../../index");
@@ -84,7 +86,7 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       hoverProps = _useHover.hoverProps,
       isHovered = _useHover.isHovered;
 
-  var _useFocusRing = (0, _reactAria.useFocusRing)(),
+  var _useFocusRing = (0, _focus.useFocusRing)(),
       focusProps = _useFocusRing.focusProps,
       isFocusVisible = _useFocusRing.isFocusVisible;
 
@@ -131,7 +133,7 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   delete pressProps.onPointerDown;
   var content = mode === 'link' || mode === 'nonClickableContent' ? children : (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: contentRef
-  }, (0, _reactAria.mergeProps)(focusProps, pressProps)), children);
+  }, (0, _utils.mergeProps)(focusProps, pressProps)), children);
   var tooltip = isCopied ? 'Copied!' : tooltipText;
   var isTooltipOpen = isFocusVisible || isHovered || isCopied;
   var pressableRef = (0, _react.useRef)();
@@ -154,7 +156,7 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       ref: wrapperRef,
       isRow: true,
       tabIndex: 0
-    }, (0, _reactAria.mergeProps)(hoverProps, others), wrapperProps), content, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({
+    }, (0, _utils.mergeProps)(hoverProps, others), wrapperProps), content, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({
       onPress: copyToClipboard
     }, focusProps))));
   }
@@ -163,13 +165,13 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
       ref: ref,
       isRow: true,
-      variant: "copyText.copy"
+      variant: "boxes.copy"
     }, wrapperProps, others), content, (0, _react2.jsx)(TooltipWrapper, {
       isOpen: isTooltipOpen,
       tooltip: tooltip
     }, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({
       onPress: copyToClipboard
-    }, (0, _reactAria.mergeProps)(hoverProps, focusProps)))));
+    }, (0, _utils.mergeProps)(hoverProps, focusProps)))));
   }
 
   return (0, _react2.jsx)(TooltipWrapper, {
@@ -178,14 +180,14 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     targetRef: pressableRef
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: pressableRef
-  }, (0, _reactAria.mergeProps)(hoverProps, pressableProps), {
+  }, (0, _utils.mergeProps)(hoverProps, pressableProps), {
     sx: {
       width: 'fit-content'
     }
   }), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: ref,
     isRow: true,
-    variant: "copyText.copy"
+    variant: "boxes.copy"
   }, others), content, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({
     onPress: copyToClipboard
   }, focusProps)))));

package/lib/cjs/components/DataTable/DataTable.js

@@ -36,19 +36,25 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
-
-var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
+var _utils = require("@react-aria/utils");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _focus = require("@react-aria/focus");
 
-var _reactAria = require("react-aria");
+var _visuallyHidden = require("@react-aria/visually-hidden");
 
 var _virtualizer = require("@react-aria/virtualizer");
 
+var _table = require("@react-stately/table");
+
 var _layout = require("@react-stately/layout");
 
-var _table = require("@react-stately/table");
+var _table2 = require("@react-aria/table");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
+
+var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
 
 var _DataTableContext = require("../../context/DataTableContext");
 
@@ -90,32 +96,6 @@ var ROW_HEIGHTS = {
     large: 75
   }
 };
-/**
- * Inspired by [TableView](https://react-spectrum.adobe.com/react-spectrum/TableView.html)
- * from React Spectrum and [useTableState](https://react-spectrum.adobe.com/react-stately/useTableState.html)
- * from React Stately.
- *
- * DataTable is a complex collection component that is built from many child elements including
- * columns, rows and cells. Columns are defined within DataTableHeader element via DataTableColumn
- * and rows are defined within a DataTableBody element via DataTableRow. Rows contain DataTableCell
- * elements that correspond to each column.
- *
- * [TableHeader](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=defined%20using%20the-,TableHeader,-%2C%20Column%2C)
- * uses the alias DataTableHeader.
- *
- * [Column](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=the%20TableHeader%2C-,Column,-%2C%20TableBody%2C)
- * uses the alias DataTableColumn.
- *
- * [Cell](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=Row%2C%20and-,Cell,-components%2C%20which%20support)
- * uses the alias DataTableCell.
- *
- * [Row](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=%2C%20TableBody%2C-,Row,-%2C%20and%20Cell%20components)
- * uses the alias DataTableCell.
- *
- * [TableBody](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=%2C%20Column%2C-,TableBody,-%2C%20Row%2C%20and)
- * uses the alias DataTableBody.
-*/
-
 var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var width = props.width,
       height = props.height,
@@ -145,7 +125,7 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   layout.collection = state.collection;
   layout.getColumnWidth = columnState.getColumnWidth;
 
-  var _useTable = (0, _reactAria.useTable)(_objectSpread(_objectSpread({}, props), {}, {
+  var _useTable = (0, _table2.useTable)(_objectSpread(_objectSpread({}, props), {}, {
     isVirtualized: true,
     layout: layout,
     onRowAction: onAction
@@ -321,7 +301,7 @@ function TableHeader(_ref) {
   var children = _ref.children,
       otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
 
-  var _useTableRowGroup = (0, _reactAria.useTableRowGroup)(),
+  var _useTableRowGroup = (0, _table2.useTableRowGroup)(),
       rowGroupProps = _useTableRowGroup.rowGroupProps;
 
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, rowGroupProps, otherProps), children);
@@ -336,7 +316,7 @@ function TableColumnHeader(props) {
   var _useDataTableContext = (0, _DataTableContext.useDataTableContext)(),
       state = _useDataTableContext.state;
 
-  var _useTableColumnHeader = (0, _reactAria.useTableColumnHeader)({
+  var _useTableColumnHeader = (0, _table2.useTableColumnHeader)({
     node: column,
     isVirtualized: true
   }, state, ref),
@@ -356,21 +336,21 @@ function TableColumnHeader(props) {
   }, "is-align-".concat(columnProps.align), columnProps.align)),
       classNames = _useStatusClasses.classNames;
 
-  return (0, _react2.jsx)(_reactAria.FocusRing, {
+  return (0, _react2.jsx)(_focus.FocusRing, {
     focusRingClass: "is-key-focused",
     focusClass: "is-click-focused"
-  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, _reactAria.mergeProps.apply(void 0, allProps), {
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, _utils.mergeProps.apply(void 0, allProps), {
     ref: ref,
     variant: "dataTable.tableHeadCell",
     className: classNames
-  }), columnProps.hideHeader ? (0, _react2.jsx)(_reactAria.VisuallyHidden, null, column.rendered) : (0, _react2.jsx)(_index.Box, null, column.rendered), columnProps.allowsSorting && (0, _react2.jsx)(_index.Box, null, arrowIcon)));
+  }), columnProps.hideHeader ? (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, column.rendered) : (0, _react2.jsx)(_index.Box, null, column.rendered), columnProps.allowsSorting && (0, _react2.jsx)(_index.Box, null, arrowIcon)));
 }
 
 function TableRowGroup(_ref2) {
   var children = _ref2.children,
       otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
 
-  var _useTableRowGroup2 = (0, _reactAria.useTableRowGroup)(),
+  var _useTableRowGroup2 = (0, _table2.useTableRowGroup)(),
       rowGroupProps = _useTableRowGroup2.rowGroupProps;
 
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, rowGroupProps, otherProps), children);
@@ -386,23 +366,23 @@ function TableRow(_ref3) {
   var _useDataTableContext2 = (0, _DataTableContext.useDataTableContext)(),
       state = _useDataTableContext2.state;
 
-  var _useTableRow = (0, _reactAria.useTableRow)({
+  var _useTableRow = (0, _table2.useTableRow)({
     node: item,
     isVirtualized: true
   }, state, ref),
       rowProps = _useTableRow.rowProps;
 
-  var _useFocusRing = (0, _reactAria.useFocusRing)({
+  var _useFocusRing = (0, _focus.useFocusRing)({
     within: true
   }),
       isFocusVisibleWithin = _useFocusRing.isFocusVisible,
       focusWithinProps = _useFocusRing.focusProps;
 
-  var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
+  var _useFocusRing2 = (0, _focus.useFocusRing)(),
       isFocusVisible = _useFocusRing2.isFocusVisible,
       focusProps = _useFocusRing2.focusProps;
 
-  var props = (0, _reactAria.mergeProps)(rowProps, otherProps, focusWithinProps, focusProps);
+  var props = (0, _utils.mergeProps)(rowProps, otherProps, focusWithinProps, focusProps);
 
   var _useStatusClasses3 = (0, _hooks.useStatusClasses)({
     'is-row-focus-visible': isFocusVisible || isFocusVisibleWithin
@@ -426,7 +406,7 @@ function TableHeaderRow(_ref4) {
 
   var ref = (0, _react.useRef)();
 
-  var _useTableHeaderRow = (0, _reactAria.useTableHeaderRow)({
+  var _useTableHeaderRow = (0, _table2.useTableHeaderRow)({
     node: item,
     isVirtualized: true
   }, state, ref),
@@ -447,7 +427,7 @@ function TableCell(_ref5) {
   var ref = (0, _react.useRef)();
   var columnProps = cell.column.props;
 
-  var _useTableCell = (0, _reactAria.useTableCell)({
+  var _useTableCell = (0, _table2.useTableCell)({
     node: cell,
     isVirtualized: true
   }, state, ref),
@@ -456,7 +436,7 @@ function TableCell(_ref5) {
   var _useStatusClasses4 = (0, _hooks.useStatusClasses)((0, _defineProperty2["default"])({}, "is-align-".concat(columnProps.align), columnProps.align)),
       classNames = _useStatusClasses4.classNames;
 
-  return (0, _react2.jsx)(_reactAria.FocusRing, {
+  return (0, _react2.jsx)(_focus.FocusRing, {
     focusRingClass: "is-key-focused"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, gridCellProps, {
     ref: ref,

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

@@ -52,24 +52,24 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireDefault(require("react"));
 
-var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
+var _data = require("@react-stately/data");
 
 var _ApplicationIcon = _interopRequireDefault(require("mdi-react/ApplicationIcon"));
 
-var _reactStately = require("react-stately");
+var _addonActions = require("@storybook/addon-actions");
 
 var _faker = require("@faker-js/faker");
 
-var _addonActions = require("@storybook/addon-actions");
+var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
 
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 
+var _DataTable = _interopRequireDefault(require("./DataTable.mdx"));
+
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
 var _index = require("../../index");
 
-var _DataTable = _interopRequireDefault(require("./DataTable.mdx"));
-
 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; }
@@ -243,7 +243,7 @@ var CustomContent = function CustomContent(args) {
     return items[Math.floor(Math.random() * items.length)];
   };
 
-  var list = (0, _reactStately.useAsyncList)({
+  var list = (0, _data.useAsyncList)({
     load: function load(_ref) {
       return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
         var _context, _context2, _context3;
@@ -285,7 +285,7 @@ var CustomContent = function CustomContent(args) {
                     id: key,
                     date: chromatic ? '2022-12-25' : "".concat(_faker.faker.date.past().toLocaleDateString('fr-CA')),
                     category: chromatic ? 'Other' : "".concat(random(['App Catalog', 'Delete Environment', 'Other'])),
-                    status: (0, _react2.jsx)(_index.DataTableBadge, {
+                    status: (0, _react2.jsx)(_index.DataTableChip, {
                       cell: chromatic ? 'Pending' : "".concat(random(['Pending', 'Rejected', 'Approved', 'Failed']))
                     }),
                     submitted_by: chromatic ? 'John Doe' : (0, _concat["default"])(_context4 = "".concat(_faker.faker.name.firstName(), " ")).call(_context4, _faker.faker.name.lastName()),

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

@@ -26,13 +26,13 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _Text = require("../Text/Text.styles");
+var _text = require("./../../styles/variants/text");
 
 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 tableCell = _objectSpread(_objectSpread({}, _Text.text.tableData), {}, {
+var tableCell = _objectSpread(_objectSpread({}, _text.text.tableData), {}, {
   color: 'text.primary',
   position: 'relative',
   display: 'flex',
@@ -105,7 +105,7 @@ var tableCenteredWrapper = {
   height: '100%'
 };
 
-var tableHeadCell = _objectSpread(_objectSpread({}, _Text.text.label), {}, {
+var tableHeadCell = _objectSpread(_objectSpread({}, _text.text.label), {}, {
   cursor: 'default',
   backgroundColor: 'accent.99',
   flexDirection: 'row !important',

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

@@ -46,10 +46,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactStately = require("react-stately");
-
 var _react2 = require("@testing-library/react");
 
+var _data = require("@react-stately/data");
+
 var _reactHooks = require("@testing-library/react-hooks");
 
 var _DataTable = _interopRequireDefault(require("./DataTable"));
@@ -507,7 +507,7 @@ describe('Sortable with useAsyncList', function () {
           case 0:
             load = jest.fn().mockImplementation(getItems);
             _renderHook = (0, _reactHooks.renderHook)(function () {
-              return (0, _reactStately.useAsyncList)({
+              return (0, _data.useAsyncList)({
                 load: load
               });
             }), result = _renderHook.result;
@@ -549,7 +549,7 @@ describe('Sortable with useAsyncList', function () {
             load = jest.fn().mockImplementation(getItems);
             sort = jest.fn().mockImplementation(getItems2);
             _renderHook2 = (0, _reactHooks.renderHook)(function () {
-              return (0, _reactStately.useAsyncList)({
+              return (0, _data.useAsyncList)({
                 load: load,
                 sort: sort,
                 initialSortDescriptor: {
@@ -730,7 +730,7 @@ describe('Sortable DataTable with useAsyncList', function () {
         switch (_context12.prev = _context12.next) {
           case 0:
             _renderHook3 = (0, _reactHooks.renderHook)(function () {
-              return (0, _reactStately.useAsyncList)({
+              return (0, _data.useAsyncList)({
                 load: load,
                 sort: sort,
                 initialSortDescriptor: {
@@ -830,7 +830,7 @@ describe('Sortable DataTable with useAsyncList', function () {
         switch (_context17.prev = _context17.next) {
           case 0:
             _renderHook4 = (0, _reactHooks.renderHook)(function () {
-              return (0, _reactStately.useAsyncList)({
+              return (0, _data.useAsyncList)({
                 load: load,
                 sort: sort,
                 initialSortDescriptor: {
@@ -962,7 +962,7 @@ describe('Sortable DataTable with useAsyncList', function () {
         switch (_context28.prev = _context28.next) {
           case 0:
             _renderHook5 = (0, _reactHooks.renderHook)(function () {
-              return (0, _reactStately.useAsyncList)({
+              return (0, _data.useAsyncList)({
                 load: function load() {
                   return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee17() {
                     return _regenerator["default"].wrap(function _callee17$(_context21) {
@@ -1157,7 +1157,7 @@ describe('Sortable DataTable with useAsyncList', function () {
         switch (_context34.prev = _context34.next) {
           case 0:
             _renderHook6 = (0, _reactHooks.renderHook)(function () {
-              return (0, _reactStately.useAsyncList)({
+              return (0, _data.useAsyncList)({
                 load: function load() {
                   return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee25() {
                     return _regenerator["default"].wrap(function _callee25$(_context29) {

package/lib/cjs/components/DataTable/{DataTableBadge.js → DataTableChip.js}

@@ -35,10 +35,10 @@ 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; }
 
 /* eslint-disable no-nested-ternary */
-var DataTableBadge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var DataTableChip = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var cell = _ref.cell;
   var color = cell === 'Pending' ? 'line.light' : cell === 'Failed' ? 'warning.bright' : cell === 'Rejected' ? 'critical.bright' : 'success.dark';
-  return (0, _react2.jsx)(_index.Badge, {
+  return (0, _react2.jsx)(_index.Chip, {
     label: cell,
     bg: "white",
     ref: ref,
@@ -56,8 +56,8 @@ var DataTableBadge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     color: color
   }));
 });
-DataTableBadge.propTypes = {
+DataTableChip.propTypes = {
   cell: _propTypes["default"].string
 };
-var _default = DataTableBadge;
+var _default = DataTableChip;
 exports["default"] = _default;

package/lib/cjs/components/DataTable/{DataTableBadge.test.js → DataTableChip.test.js}

@@ -12,7 +12,7 @@ var _react3 = require("@emotion/react");
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _react2.render)((0, _react3.jsx)(_index.DataTableBadge, props));
+  return (0, _react2.render)((0, _react3.jsx)(_index.DataTableChip, props));
 };
 
 test('renders component with rejected label', function () {

package/lib/cjs/components/DataTable/index.js

@@ -8,10 +8,10 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-_Object$defineProperty(exports, "DataTableBadge", {
+_Object$defineProperty(exports, "DataTableChip", {
   enumerable: true,
   get: function get() {
-    return _DataTableBadge["default"];
+    return _DataTableChip["default"];
   }
 });
 
@@ -45,7 +45,7 @@ _Object$defineProperty(exports, "default", {
 
 var _DataTable = _interopRequireDefault(require("./DataTable"));
 
-var _DataTableBadge = _interopRequireDefault(require("./DataTableBadge"));
+var _DataTableChip = _interopRequireDefault(require("./DataTableChip"));
 
 var _DataTableMultiLine = _interopRequireDefault(require("./DataTableMultiLine"));