@pingux/astro 1.42.0 → 2.0.0-alpha.1

package/lib/components/ColorField/ColorField.js

@@ -16,16 +16,15 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
-import { FocusScope } from '@react-aria/focus';
-import { useVisuallyHidden } from '@react-aria/visually-hidden';
-import { useColorField } from '@react-aria/color';
-import { useColorFieldState } from '@react-stately/color';
-import { useOverlayTriggerState } from '@react-stately/overlays';
-import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
 import PropTypes from 'prop-types';
+import { FocusScope, useOverlayPosition, useOverlayTrigger, useVisuallyHidden, mergeProps } from 'react-aria';
 import { ChromePicker } from 'react-color';
+import { useOverlayTriggerState } from 'react-stately';
+import { useColorField } from '@react-aria/color';
+import { useColorFieldState } from '@react-stately/color';
 import { Box, Button, Input, FieldHelperText, Label } from '../../';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import PopoverContainer from '../PopoverContainer';
 import statuses from '../../utils/devUtils/constants/statuses';
 import useField from '../../hooks/useField';
@@ -85,7 +84,8 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var _useOverlayPosition = useOverlayPosition({
@@ -98,6 +98,8 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     shouldUpdatePosition: true
   }),
       positionProps = _useOverlayPosition.overlayProps;
+  /* istanbul ignore next */
+
 
   var handleButtonPress = useCallback(function () {
     return popoverState.open();
@@ -118,10 +120,10 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     bg: getRgbaFromState(state),
     onPress: handleButtonPress,
     ref: triggerRef,
-    variant: "colorField"
-  }, triggerProps, ariaProps, buttonProps)), ___EmotionJSX(Input, _extends({}, visuallyHiddenProps, fieldControlProps, {
+    variant: "forms.colorField.container"
+  }, mergeProps(buttonProps, ariaProps, triggerProps))), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Input, _extends({}, visuallyHiddenProps, fieldControlInputProps, {
     ref: colorRef
-  })), helperText && ___EmotionJSX(FieldHelperText, {
+  }))), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText), ___EmotionJSX(PopoverContainer, _extends({
     hasNoArrow: true,
@@ -139,7 +141,7 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     onChange: handleColorChange
   }))));
 });
-ColorField.propTypes = _objectSpread({
+ColorField.propTypes = _objectSpread(_objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: PropTypes.oneOf(['start', 'end', 'middle']),
 
@@ -165,17 +167,8 @@ ColorField.propTypes = _objectSpread({
   value: PropTypes.string,
 
   /** Props object that is spread into the Button element. */
-  buttonProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the root (top-level) Box component. */
-  containerProps: PropTypes.shape({}),
-
-  /** Props object that is spread into the input element. */
-  controlProps: PropTypes.shape({}),
-
-  /** Props object that is spread into the label element. */
-  labelProps: PropTypes.shape({})
-}, ariaAttributesBasePropTypes);
+  buttonProps: PropTypes.shape({})
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 ColorField.defaultProps = {
   align: 'middle',
   direction: 'bottom'

package/lib/components/ColorField/ColorField.stories.js

@@ -18,6 +18,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useCallback, useState } from 'react';
 import { ColorField, OverlayProvider } from '../../';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -30,7 +31,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     value: {
       control: {
         type: 'text'
@@ -66,26 +67,11 @@ export default {
       }
     },
     containerProps: {
-      control: {
-        type: 'none'
-      },
-      defaultValue: {
-        sx: {
-          marginLeft: 50
-        }
-      }
-    },
-    controlProps: {
-      control: {
-        type: 'none'
-      }
-    },
-    labelProps: {
       control: {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   var _useState = useState('rgba(127, 0, 127, 1)'),

package/lib/{styles/forms/comboBox.js → components/ColorField/ColorField.styles.js}

@@ -12,16 +12,15 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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 { input as inputBase } from './input';
+import { defaultFocus } from '../Button/Buttons.styles';
+import { neutral } from '../../styles/colors';
 var container = {
-  position: 'relative'
+  border: "1px solid ".concat(neutral['80']),
+  '&:focus-visible': {
+    outline: 'none'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
 };
-
-var input = _objectSpread(_objectSpread({}, inputBase), {}, {
-  pr: 'xl'
-});
-
 export default {
-  container: container,
-  input: input
+  container: container
 };

package/lib/{styles/forms/radio.js → components/ComboBox/ComboBox.styles.js}

@@ -12,22 +12,30 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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; }
 
-// Styles for default radio and variants go here.
-import { focusWithCroppedOutline } from '../variants/buttons'; // Default radio
+import { input as inputBase } from '../Input/Input.styles';
+var container = {
+  position: 'relative'
+};
+
+var input = _objectSpread(_objectSpread({}, inputBase), {}, {
+  pr: 'xl'
+});
 
-export var radio = {
-  width: 20,
-  height: 20,
-  color: 'active',
-  mr: 'xs',
-  // override the default focus styling
-  'input:focus ~ &': {
-    bg: 'transparent'
-  },
-  'input ~ &.is-focused': _objectSpread({}, focusWithCroppedOutline)
+var inputInContainerSlot = {
+  position: 'absolute',
+  bg: 'transparent',
+  right: 'sm',
+  top: '50%',
+  transform: 'translateY(-50%)'
+};
+var button = {
+  bg: 'transparent',
+  color: 'black',
+  padding: 0
 };
-export var radioField = {
-  '.is-horizontal &': {
-    mr: '15px'
-  }
+export default {
+  container: container,
+  input: input,
+  inputInContainerSlot: inputInContainerSlot,
+  button: button
 };

package/lib/components/ComboBox/ComboBoxInput.js

@@ -20,10 +20,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { FocusRing } from '@react-aria/focus';
-import { PressResponder, useHover } from '@react-aria/interactions';
-import { mergeProps } from '@react-aria/utils';
 import MenuDown from 'mdi-react/MenuDownIcon';
+import { FocusRing, mergeProps } from 'react-aria';
+import { PressResponder, useHover } from '@react-aria/interactions';
 import { Box, Button, Icon, Loader, TextField } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { usePropWarning } from '../../hooks';
@@ -52,21 +51,23 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
       wrapperProps = props.wrapperProps,
       others = _objectWithoutProperties(props, _excluded);
 
+  var _useHover = useHover({}),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
   var textFieldProps = _objectSpread({
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
-    containerProps: containerProps
+    containerProps: _objectSpread(_objectSpread({
+      sx: style,
+      variant: 'forms.comboBox.container'
+    }, hoverProps), containerProps)
   }, mergeProps(inputProps, others)); // istanbul ignore next
 
 
   useImperativeHandle(ref, function () {
     return inputRef.current;
-  });
-
-  var _useHover = useHover({}),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered; // START - minimum delay time for loading indicator = 500ms
-
+  }); // START - minimum delay time for loading indicator = 500ms
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -106,7 +107,7 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var button = !isReadOnly && ___EmotionJSX(Box, {
     isRow: true,
-    variant: "boxes.inputInContainerSlot"
+    variant: "forms.comboBox.inputInContainerSlot"
   }, // Render loader after delay if filtering or loading
   showLoading && (isOpen || menuTrigger === 'manual' || loadingState === loadingStates.LOADING) && ___EmotionJSX(Loader, {
     variant: "loader.withinInput"
@@ -114,7 +115,7 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     preventFocusOnPress: true,
     isPressed: isOpen
   }, ___EmotionJSX(Button, _extends({
-    variant: "comboBox"
+    variant: "forms.comboBox.button"
   }, triggerProps, {
     ref: triggerRef,
     isDisabled: isDisabled || isReadOnly,
@@ -132,14 +133,10 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     focusClass: "is-focused",
     focusRingClass: "focus-ring",
     autoFocus: hasAutoFocus
-  }, ___EmotionJSX(Box, _extends({
-    isRow: true,
-    style: style,
-    variant: "forms.comboBox.container"
-  }, hoverProps, wrapperProps), ___EmotionJSX(TextField, _extends({}, textFieldProps, {
-    wrapperProps: {
+  }, ___EmotionJSX(TextField, _extends({}, textFieldProps, {
+    wrapperProps: _objectSpread({
       ref: inputWrapperRef
-    },
+    }, wrapperProps),
     controlProps: _objectSpread({
       variant: 'forms.comboBox.input'
     }, controlProps),
@@ -150,7 +147,7 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     slots: {
       inContainer: button
     }
-  }))));
+  })));
 });
 ComboBoxInput.propTypes = _objectSpread({
   containerProps: PropTypes.shape({}),

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -21,13 +21,11 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useCallback, useRef, useState, forwardRef, useImperativeHandle, useEffect } from 'react';
-import { useComboBox } from '@react-aria/combobox';
-import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
-import { FocusScope } from '@react-aria/focus';
-import { useFilter } from '@react-aria/i18n';
-import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
-import { useComboBoxState } from '@react-stately/combobox';
 import PropTypes from 'prop-types';
+import { DismissButton, FocusScope, useComboBox, useOverlayPosition } from 'react-aria';
+import { useComboBoxState } from 'react-stately';
+import { useFilter } from '@react-aria/i18n';
+import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import ComboBoxInput from '../ComboBox';
 import { usePropWarning } from '../../hooks';

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

@@ -22,9 +22,9 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useState } from 'react';
-import { action } from '@storybook/addon-actions';
+import { useAsyncList } from 'react-stately';
 import { useFilter } from '@react-aria/i18n';
-import { useAsyncList } from '@react-stately/data';
+import { action } from '@storybook/addon-actions';
 import { Item, OverlayProvider, Section } from '../../';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import ComboBoxField from './ComboBoxField';

package/lib/components/CopyText/CopyButton.js

@@ -10,11 +10,10 @@ var CopyButton = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(IconButton, _extends({
     ref: ref,
     "aria-label": "copy to clipboard",
-    variant: "buttons.copy"
+    variant: "copyButton"
   }, omit(props, 'iconProps')), ___EmotionJSX(Icon, _extends({
     icon: ContentCopy,
-    size: 15,
-    color: "text.secondary"
+    size: 15
   }, props === null || props === void 0 ? void 0 : props.iconProps)));
 });
 CopyButton.propTypes = {

package/lib/components/CopyText/CopyText.js

@@ -6,9 +6,8 @@ var _excluded = ["children", "tooltip"],
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { useFocusRing } from '@react-aria/focus';
+import { mergeProps, useFocusRing } from 'react-aria';
 import { useHover, usePress } from '@react-aria/interactions';
-import { mergeProps } from '@react-aria/utils';
 import { announce } from '@react-aria/live-announcer';
 import { Box, Tooltip, TooltipTrigger } from '../../index';
 import CopyButton from './CopyButton';
@@ -133,7 +132,7 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
     return ___EmotionJSX(Box, _extends({
       ref: ref,
       isRow: true,
-      variant: "boxes.copy"
+      variant: "copyText.copy"
     }, wrapperProps, others), content, ___EmotionJSX(TooltipWrapper, {
       isOpen: isTooltipOpen,
       tooltip: tooltip
@@ -155,7 +154,7 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
   }), ___EmotionJSX(Box, _extends({
     ref: ref,
     isRow: true,
-    variant: "boxes.copy"
+    variant: "copyText.copy"
   }, others), content, ___EmotionJSX(CopyButton, _extends({
     onPress: copyToClipboard
   }, focusProps)))));

package/lib/components/CopyText/CopyText.styles.js

@@ -0,0 +1,48 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+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 } from '../Button/Buttons.styles';
+var copy = {
+  alignItems: 'center',
+  wordBreak: 'break-all',
+  overflowWrap: 'break-word',
+  '& .is-focused': {
+    outline: '1px solid',
+    outlineColor: 'active',
+    outlineOffset: '4px',
+    borderRadius: '4px'
+  },
+  '& span': {
+    cursor: 'text'
+  }
+};
+export var copyButton = {
+  ml: 'xs',
+  outline: 'none',
+  height: 'auto',
+  cursor: 'pointer',
+  path: {
+    fill: 'neutral.10'
+  },
+  '&.is-focused': _objectSpread({
+    boxShadow: 'none'
+  }, defaultFocus),
+  ':focus': {
+    outline: 'none'
+  }
+};
+export default {
+  copy: copy,
+  copyButton: copyButton
+};

package/lib/components/DataTable/DataTable.js

@@ -18,16 +18,13 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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 React, { forwardRef, useCallback, useMemo, useRef } from 'react';
-import { mergeProps } from '@react-aria/utils';
-import { FocusRing, useFocusRing } from '@react-aria/focus';
-import { VisuallyHidden } from '@react-aria/visually-hidden';
-import { layoutInfoToStyle, VirtualizerItem } from '@react-aria/virtualizer';
-import { useTableColumnResizeState, useTableState } from '@react-stately/table';
-import { TableLayout } from '@react-stately/layout';
-import { useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup } from '@react-aria/table';
-import PropTypes from 'prop-types';
 import MenuDownIcon from 'mdi-react/MenuDownIcon';
 import MenuUpIcon from 'mdi-react/MenuUpIcon';
+import PropTypes from 'prop-types';
+import { FocusRing, mergeProps, useFocusRing, useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, VisuallyHidden } from 'react-aria';
+import { layoutInfoToStyle, VirtualizerItem } from '@react-aria/virtualizer';
+import { TableLayout } from '@react-stately/layout';
+import { useTableColumnResizeState, useTableState } from '@react-stately/table';
 import { DataTableContext, useDataTableContext } from '../../context/DataTableContext';
 import DataTableVirtualizer from './DataTableVirtualizer';
 import { useStatusClasses } from '../../hooks';
@@ -51,6 +48,32 @@ 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__*/forwardRef(function (props, ref) {
   var width = props.width,
       height = props.height,

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

@@ -25,15 +25,15 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context8, _context9; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context8 = ownKeys(Object(source), !0)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
-import { useAsyncList } from '@react-stately/data';
+import isChromatic from 'chromatic/isChromatic';
 import ApplicationIcon from 'mdi-react/ApplicationIcon';
-import { action } from '@storybook/addon-actions';
+import { useAsyncList } from 'react-stately';
 import { faker } from '@faker-js/faker';
-import isChromatic from 'chromatic/isChromatic';
+import { action } from '@storybook/addon-actions';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import DataTableReadme from './DataTable.mdx';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { DataTable, DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableRow, DataTableChip, DataTableMenu, DataTableMultiLine } from '../../index';
+import { DataTable, DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableRow, DataTableBadge, DataTableMenu, DataTableMultiLine } from '../../index';
+import DataTableReadme from './DataTable.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/DataTable',
@@ -239,7 +239,7 @@ export var CustomContent = function CustomContent(args) {
                     id: key,
                     date: chromatic ? '2022-12-25' : "".concat(faker.date.past().toLocaleDateString('fr-CA')),
                     category: chromatic ? 'Other' : "".concat(random(['App Catalog', 'Delete Environment', 'Other'])),
-                    status: ___EmotionJSX(DataTableChip, {
+                    status: ___EmotionJSX(DataTableBadge, {
                       cell: chromatic ? 'Pending' : "".concat(random(['Pending', 'Rejected', 'Approved', 'Failed']))
                     }),
                     submitted_by: chromatic ? 'John Doe' : _concatInstanceProperty(_context4 = "".concat(faker.name.firstName(), " ")).call(_context4, faker.name.lastName()),

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

@@ -12,7 +12,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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 { text } from './../../styles/variants/text';
+import { text } from '../Text/Text.styles';
 
 var tableCell = _objectSpread(_objectSpread({}, text.tableData), {}, {
   color: 'text.primary',

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

@@ -32,8 +32,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /* eslint-disable testing-library/no-node-access */
 import React from 'react';
+import { useAsyncList } from 'react-stately';
 import { render, screen, within, fireEvent, act } from '@testing-library/react';
-import { useAsyncList } from '@react-stately/data';
 import { renderHook, act as actHooks } from '@testing-library/react-hooks';
 import DataTable from './DataTable';
 import { DataTableCell, DataTableColumn, DataTableRow, DataTableBody, DataTableHeader } from '../../index';

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

@@ -4,12 +4,12 @@ import AlertIcon from 'mdi-react/AlertIcon';
 import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
 import CheckIcon from 'mdi-react/CheckIcon';
 import PropTypes from 'prop-types';
-import { Chip, Icon } from '../../index';
+import { Badge, Icon } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var DataTableChip = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var DataTableBadge = /*#__PURE__*/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 ___EmotionJSX(Chip, {
+  return ___EmotionJSX(Badge, {
     label: cell,
     bg: "white",
     ref: ref,
@@ -27,7 +27,7 @@ var DataTableChip = /*#__PURE__*/forwardRef(function (_ref, ref) {
     color: color
   }));
 });
-DataTableChip.propTypes = {
+DataTableBadge.propTypes = {
   cell: PropTypes.string
 };
-export default DataTableChip;
+export default DataTableBadge;

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { DataTableChip } from '../../index';
+import { DataTableBadge } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(DataTableChip, props));
+  return render(___EmotionJSX(DataTableBadge, props));
 };
 
 test('renders component with rejected label', function () {

package/lib/components/DataTable/index.js

@@ -1,5 +1,5 @@
 export { default } from './DataTable';
-export { default as DataTableChip } from './DataTableChip';
+export { default as DataTableBadge } from './DataTableBadge';
 export { default as DataTableMultiLine } from './DataTableMultiLine';
 export { default as DataTableVirtualize } from './DataTableVirtualizer';
 export { default as DataTableMenu } from './DataTableMenu';

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -19,16 +19,14 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
-import { useFilter } from '@react-aria/i18n';
-import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
-import HomeIcon from 'mdi-react/HomeIcon';
 import PropTypes from 'prop-types';
-import { useOverlayTriggerState } from '@react-stately/overlays';
-import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
-import { mergeProps } from '@react-aria/utils';
-import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
+import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
-import { FocusScope } from '@react-aria/focus';
+import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
+import HomeIcon from 'mdi-react/HomeIcon';
+import { FocusScope, mergeProps, useOverlayPosition, useOverlayTrigger } from 'react-aria';
+import { useOverlayTriggerState } from 'react-stately';
+import { useFilter } from '@react-aria/i18n';
 import { useListState } from '@react-stately/list';
 import ListBox from '../ListBox';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -221,7 +219,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
   var ItemsSelect = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, _extends({}, triggerProps, {
     onPress: handlePopoverOpen,
     ref: triggerRef,
-    variant: "environmentBreadcrumb.current",
+    variant: "variants.environmentBreadcrumb.button.current",
     "aria-label": setAriaLabel(selectedItem),
     "data-id": breadCrumbDataIds.environmentButton
   }), selectedItem, ___EmotionJSX(Icon, {
@@ -273,7 +271,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, others), ___EmotionJSX(Item, {
     key: "name",
-    variant: "environmentBreadcrumb.current",
+    variant: "variants.environmentBreadcrumb.button.current",
     "data-testid": "name",
     "aria-label": name,
     "data-id": breadCrumbDataIds.orgButton,