@pingux/astro 1.42.0 → 2.0.0-alpha.1

package/lib/components/IconButton/IconButton.styles.js

@@ -0,0 +1,164 @@
+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';
+import { toggle } from '../CollapsiblePanel/CollapsiblePanel.styles';
+import { copyButton } from '../CopyText/CopyText.styles';
+import { hintButton } from '../HelpHint/HelpHint.styles';
+import { deleteButton, badgeWithSlotDeleteButton } from '../Badge/Badge.styles';
+import { modalCloseButton } from '../Modal/Modal.styles';
+import { messageCloseButton } from '../Messages/Message.styles';
+import { button } from '../TooltipTrigger/Tooltip.styles';
+export var base = {
+  justifyContent: 'center',
+  appearance: 'none',
+  alignItems: 'center',
+  alignSelf: 'baseline',
+  display: 'inline-flex !important',
+  flexGrow: 0,
+  flexShrink: 0,
+  borderRadius: '100%',
+  cursor: 'pointer',
+  bg: 'transparent',
+  p: '3px',
+  width: 'inherit',
+  height: 'inherit',
+  path: {
+    fill: 'neutral.40'
+  },
+  outline: 'none',
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    bg: 'accent.95'
+  },
+  '&.is-pressed': {
+    'path': {
+      fill: 'white'
+    },
+    bg: 'active'
+  }
+};
+var bidirectional = {
+  border: '1px solid',
+  outline: 'none',
+  height: '24px',
+  width: '24px',
+  color: 'active',
+  borderRadius: '12px',
+  borderColor: 'active',
+  '&.is-hovered': {
+    color: 'accent.40',
+    borderColor: 'accent.40'
+  },
+  '&.is-pressed': {
+    color: 'accent.20',
+    borderColor: 'accent.20'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+};
+
+var inverted = _objectSpread(_objectSpread({}, base), {}, {
+  bg: 'active',
+  borderColor: 'active',
+  'path': {
+    fill: 'white'
+  },
+  '&.is-hovered': {
+    bg: 'accent.40',
+    borderColor: 'accent.40',
+    color: 'white',
+    boxShadow: 'standard'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20',
+    color: 'white'
+  }
+});
+
+var invertedSquare = _objectSpread(_objectSpread({}, inverted), {}, {
+  borderRadius: '2px'
+});
+
+export var square = _objectSpread(_objectSpread({}, base), {}, {
+  borderRadius: '2px'
+});
+
+var svgIconButton = _objectSpread(_objectSpread({}, base), {}, {
+  path: {
+    fill: 'default'
+  }
+});
+/**
+ * Recipe related variants below
+ */
+
+
+var applicationPortal = _objectSpread(_objectSpread({}, base), {}, {
+  background: 'transparent',
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    'path': {
+      fill: 'active'
+    }
+  },
+  '&.is-pressed': {
+    'path': {
+      fill: 'active'
+    }
+  }
+});
+
+var applicationPortalPinned = _objectSpread(_objectSpread({}, base), {}, {
+  'path': {
+    fill: 'success.bright'
+  },
+  background: 'transparent',
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    'path': {
+      fill: 'active'
+    }
+  },
+  '&.is-pressed': {
+    'path': {
+      fill: 'active'
+    }
+  }
+});
+
+export default {
+  base: base,
+  bidirectional: bidirectional,
+  badge: {
+    deleteButton: deleteButton
+  },
+  badgeWithSlotDeleteButton: badgeWithSlotDeleteButton,
+  copyButton: copyButton,
+  hintButton: _objectSpread(_objectSpread({}, base), hintButton),
+  inverted: inverted,
+  messageCloseButton: _objectSpread(_objectSpread({}, base), messageCloseButton),
+  modalCloseButton: _objectSpread(_objectSpread({}, base), modalCloseButton),
+  invertedSquare: invertedSquare,
+  square: square,
+  svgIconButton: svgIconButton,
+  toggle: toggle,
+  tooltip: {
+    button: _objectSpread(_objectSpread({}, base), button)
+  },
+  // Recipe related variants
+  applicationPortal: applicationPortal,
+  applicationPortalPinned: applicationPortalPinned
+};

package/lib/components/ImageUploadField/ImagePreviewButton.js

@@ -2,12 +2,11 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["defaultPreviewImage", "defaultPreviewNode", "isImageType", "isLoading", "loaderSize", "isMenuOpen", "previewImage", "previewWidth", "widthHeightSx"];
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
-import ImageFilterHdrIcon from 'mdi-react/ImageFilterHdrIcon';
-import CameraAltIcon from 'mdi-react/CameraAltIcon';
 import PropTypes from 'prop-types';
-import { mergeProps } from '@react-aria/utils';
+import CameraAltIcon from 'mdi-react/CameraAltIcon';
+import ImageFilterHdrIcon from 'mdi-react/ImageFilterHdrIcon';
+import { mergeProps, useFocusRing } from 'react-aria';
 import { useHover } from '@react-aria/interactions';
-import { useFocusRing } from '@react-aria/focus';
 import { Box, Button, Icon, Image } from '../../index';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -91,7 +90,7 @@ var ImagePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: widthHeightSx
   }, hoverProps), ___EmotionJSX(Button, _extends({
     ref: buttonRef,
-    variant: "imageUpload",
+    variant: "variants.imageUpload.button",
     sx: widthHeightSx,
     "data-testid": "image-preview-button",
     "aria-label": "Image preview"

package/lib/components/ImageUploadField/ImageUploadField.js

@@ -20,6 +20,7 @@ import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { v4 as uuid } from 'uuid';
 import { Item, Menu } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import ImagePreviewButton from './ImagePreviewButton';
 import ImageUploadFieldBase from './ImageUploadFieldBase';
 import statuses from '../../utils/devUtils/constants/statuses';
@@ -100,7 +101,7 @@ var ImageUploadField = /*#__PURE__*/forwardRef(function (props, ref) {
     id: statusId
   }, state.isMenuOpen && 'Menu pop up expanded'));
 });
-ImageUploadField.propTypes = _objectSpread({
+ImageUploadField.propTypes = _objectSpread(_objectSpread({
   /** Image preview (controlled), used to represent the current image state. */
   previewImage: PropTypes.string,
 
@@ -149,7 +150,7 @@ ImageUploadField.propTypes = _objectSpread({
 
   /** Determines the helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses))
-}, ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 ImageUploadField.defaultProps = {
   fileTypes: ['image'],
   loaderSize: 10,

package/lib/components/ImageUploadField/ImageUploadField.stories.js

@@ -20,6 +20,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useRef, useState } from 'react';
 import { Image, ImageUploadField, 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 {
@@ -32,7 +33,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     previewImage: {
       control: {
         type: 'text'
@@ -89,7 +90,7 @@ export default {
       },
       defaultValue: statuses.DEFAULT
     }
-  }, ariaAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen

package/lib/components/ImageUploadField/ImageUploadFieldBase.js

@@ -15,9 +15,9 @@ 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, useMemo, useRef } from 'react';
-import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
-import { useVisuallyHidden } from '@react-aria/visually-hidden';
+import PropTypes from 'prop-types';
+import { useVisuallyHidden } from 'react-aria';
 import { PopoverMenu } from '../../index';
 import useField from '../../hooks/useField';
 import FieldHelperText from '../FieldHelperText';
@@ -40,7 +40,8 @@ var ImageUploadFieldBase = /*#__PURE__*/forwardRef(function (props, inputRef) {
 
   var _useField = useField(_objectSpread({}, omit(props, ['onRemove']))),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var labelRef = useRef();
@@ -60,14 +61,14 @@ var ImageUploadFieldBase = /*#__PURE__*/forwardRef(function (props, inputRef) {
   })), ___EmotionJSX(PopoverMenu, {
     isOpen: isMenuOpen,
     onOpenChange: handleOpenMenuChange
-  }, children), ___EmotionJSX(Input, _extends({}, fieldControlProps, visuallyHiddenProps, {
+  }, children), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Input, _extends({}, fieldControlInputProps, visuallyHiddenProps, {
     accept: acceptableInputTypes,
     "data-testid": "image-upload-input",
     onChange: handleInputChange,
     ref: inputRef,
     type: "file",
     value: ""
-  })), !isImageType && ___EmotionJSX(FieldHelperText, {
+  }))), !isImageType && ___EmotionJSX(FieldHelperText, {
     status: statuses.DEFAULT
   }, fileName), helperText && ___EmotionJSX(FieldHelperText, {
     status: status

package/lib/components/ImageUploadField/imageUpload.js

@@ -0,0 +1,49 @@
+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 { base, defaultFocus } from '../Button/Buttons.styles';
+var hoveredPreview = {
+  wrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute'
+  },
+  shaded: {
+    opacity: 0.3,
+    backgroundColor: '#000',
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    borderRadius: 2
+  }
+};
+
+var button = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 0,
+  backgroundColor: 'accent.99',
+  border: '2px solid',
+  borderColor: 'neutral.40',
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    borderColor: 'neutral.40'
+  })
+});
+
+export default {
+  hoveredPreview: hoveredPreview,
+  button: button
+};

package/lib/{styles/forms/input.js → components/Input/Input.styles.js}

@@ -8,15 +8,15 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 
-var _input$container;
+var _input$fieldControlWr, _objectSpread2;
 
 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 '../variants/text';
+import { text } from '../Text/Text.styles';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { defaultFocus } from '../variants/buttons'; // Styles for default input and variants go here.
+import { defaultFocus } from '../Button/Buttons.styles'; // Styles for default input and variants go here.
 
 var activeFloatLabel = {
   pt: 'md',
@@ -86,7 +86,7 @@ input.small = _objectSpread(_objectSpread({}, input), {}, {
   pl: 'sm',
   pr: 'sm'
 });
-input.wrapper = {
+input.fieldContainer = {
   position: 'relative',
   '&.is-left-label': {
     display: 'inline-grid',
@@ -97,7 +97,7 @@ input.wrapper = {
   }
 }; // Used to give a blue left border to inputs
 
-input.container = (_input$container = {
+input.fieldControlWrapper = (_input$fieldControlWr = {
   position: 'relative',
   height: 'max-content',
   '> input': {
@@ -148,25 +148,25 @@ input.container = (_input$container = {
       display: 'none'
     }
   }
-}, _defineProperty(_input$container, "&.is-".concat(statuses.ERROR, "::after"), {
+}, _defineProperty(_input$fieldControlWr, "&.is-".concat(statuses.ERROR, "::after"), {
   bg: 'critical.bright'
-}), _defineProperty(_input$container, "&.is-".concat(statuses.SUCCESS, "::after"), {
+}), _defineProperty(_input$fieldControlWr, "&.is-".concat(statuses.SUCCESS, "::after"), {
   bg: 'success.bright'
-}), _defineProperty(_input$container, "&.is-".concat(statuses.WARNING, "::after"), {
+}), _defineProperty(_input$fieldControlWr, "&.is-".concat(statuses.WARNING, "::after"), {
   bg: 'warning.bright'
-}), _input$container);
+}), _input$fieldControlWr);
 input.containedIcon = {
   position: 'absolute',
   right: 0,
   top: '50%',
   transform: 'translate(-50%, -50%)'
 };
-input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {}, {
+input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.fieldControlWrapper), {}, (_objectSpread2 = {
   bg: 'white',
   borderColor: 'neutral.80',
   borderStyle: 'solid',
   borderWidth: 1,
-  flexDirection: 'row!important',
+  flexDirection: 'row !important',
   flexWrap: 'wrap',
   left: 2,
   pt: 6,
@@ -204,7 +204,13 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
   '&.is-focused': _objectSpread({
     boxShadow: 'none'
   }, defaultFocus)
-});
+}, _defineProperty(_objectSpread2, "&.is-".concat(statuses.ERROR, "::after"), {
+  bg: 'critical.bright'
+}), _defineProperty(_objectSpread2, "&.is-".concat(statuses.SUCCESS, "::after"), {
+  bg: 'success.bright'
+}), _defineProperty(_objectSpread2, "&.is-".concat(statuses.WARNING, "::after"), {
+  bg: 'warning.bright'
+}), _objectSpread2));
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {
   pr: '28px'
 });

package/lib/{styles/forms/label.js → components/Label/Label.styles.js}

@@ -13,7 +13,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; }
 
 // Styles for default label and variants go here.
-import { text } from '../variants/text';
+import { text } from '../Text/Text.styles';
 var activeFloatLabel = {
   fontWeight: 0,
   transform: 'translate(0, -8px) scale(0.75)'

package/lib/components/Link/Link.js

@@ -3,11 +3,9 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["className", "isDisabled", "onPress"];
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
+import { mergeProps, useFocusRing, useLink } from 'react-aria';
 import { Link as ThemeUILink } from 'theme-ui';
-import { useLink } from '@react-aria/link';
-import { useFocusRing } from '@react-aria/focus';
 import { useHover, usePress } from '@react-aria/interactions';
-import { mergeProps } from '@react-aria/utils';
 import { usePropWarning, useStatusClasses } from '../../hooks';
 /**
  * Link uses the [Link - Theme-UI](https://theme-ui.com/components/link) component and

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

@@ -3,7 +3,7 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React from 'react';
 import Link from '.';
 import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
-import variants from '../../styles/variants/links';
+import variants from './Link.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Link',

package/lib/{styles/variants/links.js → components/Link/Link.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 { focusWithCroppedOutline } from './buttons';
+import { focusWithCroppedOutline } from '../Button/Buttons.styles';
 var app = {
   color: 'active',
   fontFamily: 'standard',

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -21,6 +21,7 @@ import { v4 as uuid } from 'uuid';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { Box, Button, Loader, Icon, Text } from '../../';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { usePropWarning, useSelectField } from '../../hooks';
 import SelectFieldBase from '../SelectFieldBase';
 import statuses from '../../utils/devUtils/constants/statuses';
@@ -55,19 +56,20 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   }), ref),
       selectFieldProps = _extends({}, _useSelectField);
 
-  var fieldControlProps = selectFieldProps.fieldControlProps,
+  var fieldControlInputProps = selectFieldProps.fieldControlInputProps,
       isLoadingInitial = selectFieldProps.isLoadingInitial,
       state = selectFieldProps.state,
       triggerProps = selectFieldProps.triggerProps,
       triggerRef = selectFieldProps.triggerRef;
 
   var trigger = ___EmotionJSX(Button, _extends({
-    className: fieldControlProps.className,
+    className: fieldControlInputProps.className,
     ref: triggerRef,
     variant: "link",
-    tabIndex: isDisabled ? -1 : 0,
+    tabIndex: isDisabled ? -1 : 0
+  }, triggerProps, ariaProps, {
     "aria-describedby": helperText && helperTextId
-  }, triggerProps, ariaProps), ___EmotionJSX(Text, {
+  }), ___EmotionJSX(Text, {
     variant: "label",
     color: "active"
   }, placeholder), ___EmotionJSX(Box, {
@@ -92,7 +94,7 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     trigger: trigger
   }));
 });
-LinkSelectField.propTypes = _objectSpread({
+LinkSelectField.propTypes = _objectSpread(_objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: PropTypes.oneOf(['start', 'end', 'middle']),
 
@@ -178,20 +180,8 @@ LinkSelectField.propTypes = _objectSpread({
    *
    * (key: Key) => any
    */
-  onSelectionChange: PropTypes.func,
-
-  /**
-   * Props object passed along to `useSelect` from React Aria, `useSelectState` from React Stately,
-   * and/or the visible button representation for the select input.
-   */
-  controlProps: PropTypes.shape({}),
-
-  /** Props object passed along to the root container as-is. */
-  containerProps: PropTypes.shape({}),
-
-  /** Props object passed along to the label as-is. */
-  labelProps: PropTypes.shape({})
-}, ariaAttributesBasePropTypes);
+  onSelectionChange: PropTypes.func
+}, inputFieldAttributesBasePropTypes), ariaAttributesBasePropTypes);
 LinkSelectField.defaultProps = {
   placeholder: 'Select',
   status: statuses.DEFAULT,

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

@@ -24,10 +24,11 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useState } from 'react';
-import { OverlayProvider } from '@react-aria/overlays';
-import { useAsyncList } from '@react-stately/data';
+import { OverlayProvider } from 'react-aria';
+import { useAsyncList } from 'react-stately';
 import { Box, Item, LinkSelectField, Separator } 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 {
@@ -40,7 +41,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -76,13 +77,12 @@ export default {
     isDisabled: {},
     isOpen: {},
     isRequired: {},
-    controlProps: {},
     selectedKey: {
       control: {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(LinkSelectField, _extends({}, args, {

package/lib/components/ListBox/ListBox.js

@@ -18,11 +18,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useRef, useImperativeHandle, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { useListBox } from '@react-aria/listbox';
-import { mergeProps } from '@react-aria/utils';
-import { Virtualizer, VirtualizerItem } from '@react-aria/virtualizer';
+import { mergeProps } from 'react-aria';
 import { useCollator } from '@react-aria/i18n';
+import { useListBox } from '@react-aria/listbox';
 import { ListLayout } from '@react-stately/layout';
+import { Virtualizer, VirtualizerItem } from '@react-aria/virtualizer';
 import { ListBoxContext } from './ListBoxContext';
 import { Option } from './index.js';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';

package/lib/{styles/variants/listBox.js → components/ListBox/ListBox.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 '../variants/text';
+import { text } from '../Text/Text.styles';
 var listBox = {
   outline: 'none'
 };
@@ -37,4 +37,12 @@ listBox.selectField = {
   pl: 0,
   outline: 'none'
 };
+listBox.sectionTitle = {
+  fontSize: 'sm',
+  fontWeight: '3',
+  color: 'text.secondary',
+  height: '36px',
+  ml: 'sm',
+  justifyContent: 'center'
+};
 export default listBox;

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

@@ -3,9 +3,9 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import React from 'react';
 import { axe } from 'jest-axe';
+import { Section } from 'react-stately';
 import { useListState } from '@react-stately/list';
 import { render, screen } from '@testing-library/react';
-import { Section } from '@react-stately/collections';
 import userEvent from '@testing-library/user-event';
 import ListBox from '.';
 import { Item } from '../../index';

package/lib/components/ListBox/ListBoxSection.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useRef, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { useListBoxSection } from '@react-aria/listbox';
 import { useLocale } from '@react-aria/i18n';
+import { useListBoxSection } from '@react-aria/listbox';
 import { layoutInfoToStyle, useVirtualizerItem } from '@react-aria/virtualizer';
 import { ListBoxContext } from './ListBoxContext';
 import Box from '../Box';
@@ -43,7 +43,7 @@ var ListBoxSection = function ListBoxSection(props) {
   }, groupProps), item.key !== state.collection.getFirstKey() && ___EmotionJSX(Separator, {
     mt: "0px"
   }), item.rendered && ___EmotionJSX(Box, _extends({}, headingProps, {
-    variant: "boxes.listBoxSectionTitle"
+    variant: "listBox.sectionTitle"
   }), item.rendered)), ___EmotionJSX(Box, {
     style: layoutInfoToStyle(reusableView.layoutInfo, direction)
   }, children));

package/lib/components/ListBox/Option.js

@@ -16,9 +16,9 @@ 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, useRef, useImperativeHandle, useContext } from 'react';
+import CircleSmallIcon from 'mdi-react/CircleSmallIcon';
 import PropTypes from 'prop-types';
 import { useOption } from '@react-aria/listbox';
-import CircleSmallIcon from 'mdi-react/CircleSmallIcon';
 import { useStatusClasses } from '../../hooks';
 import Box from '../Box';
 import Icon from '../Icon';