@pingux/astro 1.42.0-alpha.0 → 2.0.0-alpha.1

package/lib/components/TooltipTrigger/Tooltip.styles.js

@@ -0,0 +1,71 @@
+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 { text } from '../Button/Buttons.styles';
+import { baseBadge } from '../Badge/Badge.styles';
+var container = {
+  p: 'sm'
+};
+
+var badge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  cursor: 'default',
+  '&.is-hovered, &.is-pressed': {
+    cursor: 'default',
+    outline: 'none'
+  }
+});
+
+export var button = {
+  cursor: 'default',
+  '&.is-hovered, &.is-pressed': {
+    backgroundColor: 'inherit',
+    cursor: 'default',
+    path: {
+      fill: 'neutral.20'
+    }
+  }
+};
+
+var inline = _objectSpread(_objectSpread({}, text), {}, {
+  cursor: 'default',
+  alignSelf: 'flex-start',
+  '&.is-hovered, &.is-pressed': {
+    backgroundColor: 'inherit',
+    cursor: 'default',
+    textDecoration: 'inherit'
+  }
+});
+
+var content = {
+  maxWidth: '10em',
+  maxHeight: '15em',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  WebkitLineClamp: '10',
+  WebkitBoxOrient: 'vertical',
+  display: '-webkit-box !important',
+  wordBreak: 'break-word',
+  '.is-right > * > &, .is-left > * > &': {
+    maxWidth: '24em',
+    maxHeight: '6.5em',
+    WebkitLineClamp: '4'
+  }
+};
+export default {
+  container: container,
+  badge: badge,
+  button: button,
+  inline: inline,
+  content: content
+};

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -4,10 +4,9 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
+import { useOverlayPosition, useTooltipTrigger } from 'react-aria';
+import { useTooltipTriggerState } from 'react-stately';
 import { PressResponder } from '@react-aria/interactions';
-import { useOverlayPosition } from '@react-aria/overlays';
-import { useTooltipTrigger } from '@react-aria/tooltip';
-import { useTooltipTriggerState } from '@react-stately/tooltip';
 import { useStatusClasses, usePropWarning } from '../../hooks';
 import { TooltipContext } from '../../context/TooltipContext/index';
 import PopoverContainer from '../PopoverContainer';

package/lib/components/TooltipTrigger/TooltipTrigger.stories.js

@@ -62,16 +62,16 @@ export var IconWithTooltip = function IconWithTooltip() {
   return ___EmotionJSX(Box, {
     pl: 50
   }, ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(IconButton, {
-    variant: "tooltipIconButton"
+    variant: "tooltip.button"
   }, ___EmotionJSX(Icon, {
     icon: AccountIcon
   })), ___EmotionJSX(Tooltip, null, "Useful tooltip")));
 };
-export var ChipWithTooltip = function ChipWithTooltip() {
+export var BadgeWithTooltip = function BadgeWithTooltip() {
   return ___EmotionJSX(Box, {
     pl: 50
   }, ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, {
-    variant: "tooltipChip",
+    variant: "variants.tooltip.badge",
     bg: "neutral.10"
   }, ___EmotionJSX(Text, {
     variant: "label",
@@ -85,6 +85,6 @@ export var TextWithTooltip = function TextWithTooltip() {
   return ___EmotionJSX(Box, {
     pl: 50
   }, ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, {
-    variant: "tooltipInline"
+    variant: "variants.tooltip.inline"
   }, "Some text"), ___EmotionJSX(Tooltip, null, "Useful tooltip")));
 };

package/lib/hooks/useField/useField.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";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "className", "containerProps", "controlProps", "defaultText", "defaultValue", "direction", "disabledKeys", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "isSelected", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onClear", "onFocus", "onFocusChange", "onLoadMore", "onOpenChange", "onSelectionChange", "placeholder", "role", "selectedKey", "spellCheck", "status", "statusClasses", "type", "value"];
+var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "className", "containerProps", "controlProps", "defaultText", "defaultValue", "direction", "disabledKeys", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "isSelected", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onClear", "onFocus", "onFocusChange", "onLoadMore", "onOpenChange", "onSelectionChange", "placeholder", "role", "selectedKey", "spellCheck", "status", "statusClasses", "type", "value", "wrapperProps"];
 
 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; }
 
@@ -18,10 +18,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { useEffect, useState } from 'react';
 import omit from 'lodash/omit';
 import noop from 'lodash/noop';
-import { useLabel } from '@react-aria/label';
+import { mergeProps, useFocusRing, useLabel } from 'react-aria';
 import { useFocusWithin } from '@react-aria/interactions';
-import { useFocusRing } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
 import { getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { useStatusClasses } from '../../hooks';
@@ -84,6 +82,7 @@ var useField = function useField() {
       statusClasses = props.statusClasses,
       type = props.type,
       value = props.value,
+      wrapperProps = props.wrapperProps,
       others = _objectWithoutProperties(props, _excluded); // 0 could be a valid input for fields, but null, undefined, and '' are not
 
 
@@ -133,13 +132,34 @@ var useField = function useField() {
       isFocusVisible = _useFocusRing.isFocusVisible,
       focusProps = _useFocusRing.focusProps;
 
-  var _useStatusClasses = useStatusClasses(className, _objectSpread(_defineProperty({
+  var _useStatusClasses = useStatusClasses(className, _objectSpread(_objectSpread(_defineProperty({
+    'field-control__wrapper': true,
+    // generates 'field-control__wrapper' class
     hasNoStatusIndicator: hasNoStatusIndicator,
     isFocused: isFocusVisible,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly
-  }, "is-".concat(status), true), statusClasses)),
-      classNames = _useStatusClasses.classNames;
+  }, "is-".concat(status), true), statusClasses), wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.statusClasses)),
+      wrapperClasses = _useStatusClasses.classNames;
+
+  var _useStatusClasses2 = useStatusClasses(className, _objectSpread(_objectSpread(_defineProperty({
+    'field-control__input': true,
+    // generates 'field-control__input' class
+    hasNoStatusIndicator: hasNoStatusIndicator,
+    isFocused: isFocusVisible,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly
+  }, "is-".concat(status), true), statusClasses), controlProps === null || controlProps === void 0 ? void 0 : controlProps.statusClasses)),
+      inputClasses = _useStatusClasses2.classNames;
+
+  var _useStatusClasses3 = useStatusClasses(className, _objectSpread(_objectSpread(_defineProperty({
+    'field-label': true,
+    hasNoStatusIndicator: hasNoStatusIndicator,
+    isFocused: isFocusVisible,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly
+  }, "is-".concat(status), true), statusClasses), labelProps === null || labelProps === void 0 ? void 0 : labelProps.statusClasses)),
+      labelClasses = _useStatusClasses3.classNames;
 
   var _getAriaAttributeProp = getAriaAttributeProps(others),
       ariaProps = _getAriaAttributeProp.ariaProps,
@@ -155,7 +175,7 @@ var useField = function useField() {
   var isLeftLabel = labelMode === labelModes.LEFT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === labelModes.LEFT;
   var isFloatLabelActive = isFloatLabel && (hasValue || (containerProps === null || containerProps === void 0 ? void 0 : containerProps.isFloatLabelActive));
 
-  var _useStatusClasses2 = useStatusClasses(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, {
+  var _useStatusClasses4 = useStatusClasses(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, _objectSpread(_objectSpread({
     'field-container': true,
     // generates 'field-container' class
     hasValue: hasValue,
@@ -163,8 +183,8 @@ var useField = function useField() {
     isLeftLabel: isLeftLabel,
     isFloatLabel: isFloatLabel,
     isFloatLabelActive: isFloatLabelActive
-  }),
-      containerClasses = _useStatusClasses2.classNames;
+  }, statusClasses), containerProps === null || containerProps === void 0 ? void 0 : containerProps.statusClasses)),
+      containerClasses = _useStatusClasses4.classNames;
 
   var fieldContainerProps = _objectSpread(_objectSpread(_objectSpread({}, nonAriaProps), mergeProps(containerProps, focusWithinProps)), {}, {
     className: containerClasses,
@@ -173,11 +193,11 @@ var useField = function useField() {
     }, containerProps === null || containerProps === void 0 ? void 0 : containerProps.sx)
   });
 
-  var fieldControlProps = _objectSpread(_objectSpread(_objectSpread({
+  var fieldControlInputProps = _objectSpread(_objectSpread(_objectSpread({
     autoComplete: autocomplete || autoComplete,
     autoCorrect: autoCorrect,
     autoFocus: hasAutoFocus,
-    className: classNames,
+    className: inputClasses,
     defaultSelected: isDefaultSelected,
     defaultValue: defaultValue,
     disabled: isDisabled,
@@ -201,15 +221,20 @@ var useField = function useField() {
 
   var fieldLabelProps = _objectSpread(_objectSpread({
     children: label,
-    className: classNames,
+    className: labelClasses,
     hintText: hintText,
     isRequired: isRequired,
     mode: labelMode
   }, raLabelProps), labelProps);
 
+  var fieldControlWrapperProps = _objectSpread({
+    className: wrapperClasses
+  }, wrapperProps);
+
   return {
     fieldContainerProps: fieldContainerProps,
-    fieldControlProps: fieldControlProps,
+    fieldControlInputProps: fieldControlInputProps,
+    fieldControlWrapperProps: fieldControlWrapperProps,
     fieldLabelProps: fieldLabelProps
   };
 };

package/lib/hooks/useField/useField.test.js

@@ -21,10 +21,16 @@ var defaultProps = {
   autoComplete: 'off',
   className: 'test',
   containerProps: {
-    id: 'test'
+    id: 'test',
+    statusClasses: {
+      isContainer: true
+    }
   },
   controlProps: {
-    id: 'test'
+    id: 'test',
+    statusClasses: {
+      isControlInput: true
+    }
   },
   defaultValue: 'test',
   hasAutoFocus: true,
@@ -35,6 +41,11 @@ var defaultProps = {
   isRequired: true,
   isSelected: true,
   label: 'test',
+  labelProps: {
+    statusClasses: {
+      isFieldLabel: true
+    }
+  },
   name: 'test',
   placeholder: 'test',
   role: 'test',
@@ -42,7 +53,13 @@ var defaultProps = {
     isTested: true
   },
   type: 'test',
-  value: 'test'
+  value: 'test',
+  wrapperProps: {
+    id: 'test',
+    statusClasses: {
+      isControlWrapper: true
+    }
+  }
 };
 test('default useField', function () {
   renderHook(function () {
@@ -59,26 +76,32 @@ test('should return props objects for field components', function () {
 
   var _result$current = result.current,
       fieldContainerProps = _result$current.fieldContainerProps,
-      fieldControlProps = _result$current.fieldControlProps,
+      fieldControlInputProps = _result$current.fieldControlInputProps,
+      fieldControlWrapperProps = _result$current.fieldControlWrapperProps,
       fieldLabelProps = _result$current.fieldLabelProps;
   expect(fieldContainerProps).toEqual({
-    className: 'field-container has-value',
+    className: 'field-container has-value is-tested is-container',
     id: defaultProps.containerProps.id,
     onBlur: expect.any(Function),
     onFocus: expect.any(Function),
     sx: expect.objectContaining({
       position: 'relative'
-    })
+    }),
+    statusClasses: {
+      isContainer: true
+    }
   });
-  expect(fieldControlProps).toEqual({
+  expect(fieldControlInputProps).toEqual({
     autoComplete: defaultProps.autoComplete,
+    autoCorrect: undefined,
     autoFocus: defaultProps.hasAutoFocus,
-    className: _concatInstanceProperty(_context = "".concat(defaultProps.className, " is-disabled is-read-only is-")).call(_context, statuses.DEFAULT, " is-tested"),
+    className: _concatInstanceProperty(_context = "".concat(defaultProps.className, " field-control-input is-disabled is-read-only is-")).call(_context, statuses.DEFAULT, " is-tested is-control-input"),
     defaultSelected: true,
     defaultValue: defaultProps.defaultValue,
     disabled: true,
     id: defaultProps.id,
     isFocused: false,
+    maxLength: undefined,
     readOnly: true,
     required: true,
     onBlur: expect.any(Function),
@@ -87,6 +110,10 @@ test('should return props objects for field components', function () {
     name: defaultProps.name,
     placeholder: defaultProps.placeholder,
     role: defaultProps.role,
+    spellCheck: undefined,
+    statusClasses: {
+      isControlInput: true
+    },
     type: defaultProps.type,
     value: defaultProps.value,
     'aria-label': undefined,
@@ -94,10 +121,22 @@ test('should return props objects for field components', function () {
   });
   expect(fieldLabelProps).toEqual({
     children: defaultProps.label,
-    className: _concatInstanceProperty(_context2 = "".concat(defaultProps.className, " is-disabled is-read-only is-")).call(_context2, statuses.DEFAULT, " is-tested"),
+    className: _concatInstanceProperty(_context2 = "".concat(defaultProps.className, " field-label is-disabled is-read-only is-")).call(_context2, statuses.DEFAULT, " is-tested is-field-label"),
+    hintText: undefined,
     id: expect.any(String),
     htmlFor: expect.any(String),
-    isRequired: true
+    isRequired: true,
+    mode: undefined,
+    statusClasses: {
+      isFieldLabel: true
+    }
+  });
+  expect(fieldControlWrapperProps).toEqual({
+    className: "".concat(defaultProps.className, " field-control-wrapper is-disabled is-read-only is-default is-tested is-control-wrapper"),
+    id: expect.any(String),
+    statusClasses: {
+      isControlWrapper: true
+    }
   });
 });
 test('should support autocomplete additionally', function () {
@@ -112,8 +151,8 @@ test('should support autocomplete additionally', function () {
   }),
       result = _renderHook2.result;
 
-  var fieldControlProps = result.current.fieldControlProps;
-  expect(fieldControlProps).toMatchObject({
+  var fieldControlInputProps = result.current.fieldControlInputProps;
+  expect(fieldControlInputProps).toMatchObject({
     autoComplete: 'new-password'
   });
 });
@@ -137,7 +176,7 @@ test('should return isFloatLabelActive class for container', function () {
   expect(result.current.fieldContainerProps.className).toContain('is-float-label-active'); // Does not have the class if the value is invalid
 
   act(function () {
-    return result.current.fieldControlProps.onChange({
+    return result.current.fieldControlInputProps.onChange({
       target: {
         value: undefined
       }
@@ -202,7 +241,7 @@ test('should return hasValue class for container when onChange updates internal
   expect(result.current.fieldContainerProps.className).not.toContain('has-value'); // 0 should be a valid value
 
   act(function () {
-    return result.current.fieldControlProps.onChange({
+    return result.current.fieldControlInputProps.onChange({
       target: {
         value: 0
       }
@@ -212,7 +251,7 @@ test('should return hasValue class for container when onChange updates internal
   numCalls += 1; // undefined is not a valid value
 
   act(function () {
-    return result.current.fieldControlProps.onChange({
+    return result.current.fieldControlInputProps.onChange({
       target: {
         value: undefined
       }
@@ -222,7 +261,7 @@ test('should return hasValue class for container when onChange updates internal
   numCalls += 1; // a non-empty string is a valid value
 
   act(function () {
-    return result.current.fieldControlProps.onChange({
+    return result.current.fieldControlInputProps.onChange({
       target: {
         value: 'a'
       }

package/lib/hooks/useModalState/useModalState.js

@@ -1,4 +1,4 @@
-import { useOverlayTriggerState } from '@react-stately/overlays';
+import { useOverlayTriggerState } from 'react-stately';
 /**
  * Returns state-related data and functions for use with a Modal component.
  * @param {Object} [props] Properties provided to the state

package/lib/hooks/useOverlayPanelState/useOverlayPanelState.js

@@ -1,4 +1,4 @@
-import { useOverlayTriggerState } from '@react-stately/overlays';
+import { useOverlayTriggerState } from 'react-stately';
 /**
  * Returns state-related data and functions for use with a Modal component.
  * @param {Object} [props] Properties provided to the state

package/lib/hooks/useOverlayPanelState/useOverlayPanelState.test.js

@@ -11,7 +11,8 @@ test('default useOverlayPanelState', function () {
       open: expect.any(Function),
       close: expect.any(Function),
       toggle: expect.any(Function),
-      isOpen: expect.any(Boolean)
+      isOpen: expect.any(Boolean),
+      setOpen: expect.any(Function)
     },
     onClose: expect.any(Function)
   };

package/lib/hooks/useSelectField/useSelectField.js

@@ -16,11 +16,9 @@ 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, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
-import { FocusScope } from '@react-aria/focus';
-import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
-import { useSelect } from '@react-aria/select';
+import { FocusScope, DismissButton, useOverlayPosition, useSelect } from 'react-aria';
+import { useSelectState } from 'react-stately';
 import { useResizeObserver } from '@react-aria/utils';
-import { useSelectState } from '@react-stately/select';
 import { useColumnStyles, useDeprecationWarning, useField } from '..';
 import ListBox from '../../components/ListBox';
 import PopoverContainer from '../../components/PopoverContainer';
@@ -121,7 +119,8 @@ var useSelectField = function useSelectField(props, ref) {
     }, props.containerProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var _useOverlayPosition = useOverlayPosition({
@@ -214,7 +213,8 @@ var useSelectField = function useSelectField(props, ref) {
   return {
     columnStyleProps: columnStyleProps,
     fieldContainerProps: fieldContainerProps,
-    fieldControlProps: fieldControlProps,
+    fieldControlInputProps: fieldControlInputProps,
+    fieldControlWrapperProps: fieldControlWrapperProps,
     fieldLabelProps: fieldLabelProps,
     isLoadingInitial: isLoadingInitial,
     listBoxRef: listBoxRef,

package/lib/index.js

@@ -15,7 +15,8 @@ export { default as ArrayField } from './components/ArrayField';
 export * from './components/ArrayField';
 export { default as Avatar } from './components/Avatar';
 export * from './components/Avatar';
-export { default as Badge } from './components/Chip/Badge';
+export { default as Badge } from './components/Badge';
+export * from './components/Badge';
 export { default as Box } from './components/Box';
 export * from './components/Box';
 export { default as Bracket } from './components/Bracket';
@@ -33,8 +34,6 @@ export { default as Checkbox } from './components/Checkbox';
 export * from './components/Checkbox';
 export { default as CheckboxField } from './components/CheckboxField';
 export * from './components/CheckboxField';
-export { default as Chip } from './components/Chip';
-export * from './components/Chip';
 export { default as CodeView } from './components/CodeView';
 export { default as ComboBoxField } from './components/ComboBoxField';
 export { default as CopyText } from './components/CopyText';
@@ -67,8 +66,6 @@ export { default as Link } from './components/Link';
 export * from './components/Link';
 export { default as LinkSelectField } from './components/LinkSelectField';
 export * from './components/LinkSelectField';
-export { default as List } from './components/List';
-export * from './components/List';
 export { default as ListItem } from './components/ListItem';
 export * from './components/ListItem';
 export { default as ListView } from './components/ListView';
@@ -157,9 +154,8 @@ export { default as TooltipTrigger } from './components/TooltipTrigger';
 export * from './components/TooltipTrigger';
 /* eslint-enable import/export */
 
-export { Item, Section } from '@react-stately/collections';
-export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
-export { useOverlayTriggerState } from '@react-stately/overlays';
+export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
+export { Item, Section, useOverlayTriggerState } from 'react-stately';
 export { default as DataTable } from './components/DataTable';
 export * from './components/DataTable';
-export { Cell as DataTableCell, Column as DataTableColumn, Row as DataTableRow, TableBody as DataTableBody, TableHeader as DataTableHeader } from '@react-stately/table';
+export { Cell as DataTableCell, Column as DataTableColumn, Row as DataTableRow, TableBody as DataTableBody, TableHeader as DataTableHeader } from 'react-stately';

package/lib/recipes/ApplicationSearchDropdown.stories.js

@@ -15,13 +15,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, { useState, useRef, useMemo } from 'react';
-import { useOverlayPosition } from '@react-aria/overlays';
-import { useLayoutEffect } from '@react-aria/utils';
-import SearchIcon from 'mdi-react/SearchIcon';
 import Email from 'mdi-react/EmailIcon';
 import Pin from 'mdi-react/PinIcon';
+import SearchIcon from 'mdi-react/SearchIcon';
+import { FocusScope, useOverlayPosition } from 'react-aria';
+import { createFocusManager } from '@react-aria/focus';
 import { useFilter } from '@react-aria/i18n';
-import { FocusScope, createFocusManager } from '@react-aria/focus';
+import { useLayoutEffect } from '@react-aria/utils';
 import { ListView, Item, IconButton, Text, PopoverContainer, Box, Icon, SearchField } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {

package/lib/recipes/AttributeMappingReadOnlyField.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import CreateIcon from 'mdi-react/CreateIcon';
 import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
 import { v4 as uuid } from 'uuid';
-import { Box, Chip, IconButton, Text, Icon, Separator, TextField, HelpHint } from '../index';
+import { Box, Badge, IconButton, Text, Icon, Separator, TextField, HelpHint } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Attribute Mapping Read Only Field'
@@ -73,7 +73,7 @@ var sx = {
 var helperTextId = uuid();
 
 var Row = function Row(props) {
-  var withChip = props.withChip,
+  var withBadge = props.withBadge,
       withTooltip = props.withTooltip,
       withError = props.withError,
       leftValue = props.leftValue,
@@ -116,7 +116,7 @@ var Row = function Row(props) {
         width: '165px'
       }
     }
-  }), withChip && ___EmotionJSX(Chip, {
+  }), withBadge && ___EmotionJSX(Badge, {
     label: "Required",
     sx: sx.chip
   }), withTooltip && ___EmotionJSX(Box, {
@@ -161,7 +161,7 @@ export var Default = function Default() {
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
   }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
-    withChip: true,
+    withBadge: true,
     leftValue: "UserId",
     rightValue: "mdorey"
   }), ___EmotionJSX(Row, {
@@ -222,7 +222,7 @@ export var WithError = function WithError() {
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
   }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
-    withChip: true,
+    withBadge: true,
     leftValue: "UserId",
     rightValue: "mdorey"
   }), ___EmotionJSX(Row, {

package/lib/recipes/CollapsiblePanel.stories.js

@@ -24,10 +24,10 @@ import CheckIcon from 'mdi-react/CheckIcon';
 import Clear from 'mdi-react/CloseIcon';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import SearchIcon from 'mdi-react/SearchIcon';
-import { Breadcrumbs, Box, CheckboxField, Chip, Icon, IconButton, Item, ListView, CollapsiblePanel, CollapsiblePanelItem, SearchField, Text } from '..';
+import { Breadcrumbs, Box, CheckboxField, Badge, Icon, IconButton, Item, ListView, CollapsiblePanel, CollapsiblePanelItem, SearchField, Text } from '..';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Recipes/Collapsible Panel with List'
+  title: 'Recipes/CollapsiblePanel with List'
 };
 var data = [{
   id: '1',
@@ -202,7 +202,7 @@ export var Default = function Default() {
     "data-id": "home"
   }, "Ed Nepomuceno"), ___EmotionJSX(Item, {
     key: "editGroups",
-    variant: "neutralText",
+    variant: "link",
     "data-id": "editGroups"
   }, "Edit Groups"))), ___EmotionJSX(Box, {
     isRow: true
@@ -257,7 +257,7 @@ export var Default = function Default() {
       variant: "listTitle",
       mb: "xs",
       mr: "xs"
-    }, item.name), ___EmotionJSX(Chip, {
+    }, item.name), ___EmotionJSX(Badge, {
       label: item.chipValue,
       bg: "accent.99",
       textColor: "text.secondary",