@pingux/astro 1.42.0 → 2.0.0-alpha.1

package/lib/components/PasswordField/PasswordField.stories.js

@@ -18,6 +18,7 @@ import React, { useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import PasswordField 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({
     status: {
       control: {
         type: 'select',
@@ -43,7 +44,7 @@ export default {
         type: 'text'
       }
     }
-  }, ariaAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(PasswordField, _extends({

package/lib/components/PopoverContainer/PopoverContainer.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 _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "placement", "arrowProps", "arrowCrossOffset", "onClose", "isNotClosedOnBlur", "hasNoArrow", "isKeyboardDismissDisabled", "isNonModal", "isDismissable", "width", "direction"],
+var _excluded = ["children"],
     _excluded2 = ["children", "className", "placement", "arrowProps", "arrowCrossOffset", "isOpen", "hasNoArrow", "isNotClosedOnBlur", "isKeyboardDismissDisabled", "isNonModal", "isDismissable", "width", "direction", "sx"],
     _excluded3 = ["arrowCrossOffset", "sx", "direction"];
 
@@ -19,8 +19,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { useModal, useOverlay, OverlayContainer } from '@react-aria/overlays';
-import { mergeProps } from '@react-aria/utils';
+import { mergeProps, OverlayContainer, useModal, useOverlay } from 'react-aria';
 import { useStatusClasses } from '../../hooks';
 import Box from '../Box';
 /**
@@ -30,32 +29,10 @@ import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var PopoverContainer = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
-      placement = props.placement,
-      arrowProps = props.arrowProps,
-      arrowCrossOffset = props.arrowCrossOffset,
-      onClose = props.onClose,
-      isNotClosedOnBlur = props.isNotClosedOnBlur,
-      hasNoArrow = props.hasNoArrow,
-      isKeyboardDismissDisabled = props.isKeyboardDismissDisabled,
-      isNonModal = props.isNonModal,
-      isDismissable = props.isDismissable,
-      width = props.width,
-      direction = props.direction,
       others = _objectWithoutProperties(props, _excluded);
 
   return ___EmotionJSX(OverlayContainer, null, ___EmotionJSX(PopoverWrapper, _extends({
-    ref: ref,
-    placement: placement,
-    arrowProps: arrowProps,
-    onClose: onClose,
-    isNotClosedOnBlur: isNotClosedOnBlur,
-    isKeyboardDismissDisabled: isKeyboardDismissDisabled,
-    hasNoArrow: hasNoArrow,
-    isNonModal: isNonModal,
-    isDismissable: isDismissable,
-    arrowCrossOffset: arrowCrossOffset,
-    width: width,
-    direction: direction
+    ref: ref
   }, others), children));
 });
 PopoverContainer.propTypes = {

package/lib/components/PopoverMenu/PopoverMenu.js

@@ -17,11 +17,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
-import { FocusScope } from '@react-aria/focus';
+import { DismissButton, FocusScope, useMenuTrigger, useOverlayPosition } from 'react-aria';
+import { useMenuTriggerState } from 'react-stately';
 import { PressResponder } from '@react-aria/interactions';
-import { useMenuTrigger } from '@react-aria/menu';
-import { useMenuTriggerState } from '@react-stately/menu';
 import PopoverContainer from '../PopoverContainer';
 import { MenuContext } from '../../context/MenuContext';
 /**

package/lib/components/Radio/Radio.styles.js

@@ -0,0 +1,55 @@
+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 { focusWithCroppedOutline } from '../Button/Buttons.styles'; // Styles for default radio and variants go here.
+// Default radio
+
+var base = {
+  width: 20,
+  height: 20,
+  color: 'active',
+  mr: 'xs',
+  // override the default focus styling
+  'input:focus ~ &': {
+    bg: 'transparent'
+  },
+  'input ~ &.is-focused': _objectSpread({}, focusWithCroppedOutline)
+};
+var outerContainer = {
+  '.is-horizontal &': {
+    mr: '15px'
+  }
+}; // Used to give a border to radio elements
+
+var container = {
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderColor: 'active',
+  borderRadius: 3,
+  padding: 'md',
+  mb: 'md'
+}; // Used to add spacing for content shown when a radio is checked
+
+var checkedContent = {
+  pb: 'sm',
+  pl: 'lg',
+  color: 'text.secondary',
+  fontSize: 'md'
+};
+export default {
+  base: base,
+  outerContainer: outerContainer,
+  container: container,
+  checkedContent: checkedContent
+};

package/lib/components/RadioField/RadioField.js

@@ -16,13 +16,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, createContext, useContext, useRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
-import { useRadio } from '@react-aria/radio';
+import { useRadio } from 'react-aria';
 import { useField, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
 import Box from '../Box';
 import Radio from '../Radio';
 import Label from '../Label';
 import FieldHelperText from '../FieldHelperText';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var RadioContext = /*#__PURE__*/createContext();
 /**
@@ -70,22 +71,25 @@ var RadioField = /*#__PURE__*/forwardRef(function (props, ref) {
     controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   return ___EmotionJSX(Box, _extends({
-    variant: "forms.radioField"
+    variant: "forms.radio.outerContainer"
   }, fieldContainerProps), ___EmotionJSX(Label, _extends({
     variant: "forms.label.radio"
-  }, fieldLabelProps), ___EmotionJSX(Radio, _extends({
+  }, fieldLabelProps), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Radio, _extends({
     ref: radioFieldRef
-  }, fieldControlProps)), label), helperText && ___EmotionJSX(FieldHelperText, {
+  }, fieldControlInputProps, {
+    variant: "forms.radio.base"
+  }))), label), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText), isChecked && checkedContent && ___EmotionJSX(Box, {
-    variant: "boxes.radioCheckedContent"
+    variant: "forms.radio.checkedContent"
   }, checkedContent));
 });
-RadioField.propTypes = {
+RadioField.propTypes = _objectSpread({
   /** Content to display when the radio is checked. */
   checkedContent: PropTypes.node,
 
@@ -150,16 +154,7 @@ RadioField.propTypes = {
    * Identifies the element (or elements) that provide a detailed, extended description for the
    * object.
   */
-  'aria-details': PropTypes.string,
-
-  /** Props object that is spread directly into the root (top-level) element. */
-  containerProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the input element. */
-  controlProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the label element. */
-  labelProps: PropTypes.shape({})
-};
+  'aria-details': PropTypes.string
+}, ariaAttributesBasePropTypes);
 RadioField.displayName = 'RadioField';
 export default RadioField;

package/lib/components/RadioGroupField/RadioGroupField.js

@@ -14,13 +14,14 @@ 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 } from 'react';
-import { useRadioGroup } from '@react-aria/radio';
-import { useRadioGroupState } from '@react-stately/radio';
+import React, { forwardRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { useRadioGroup } from 'react-aria';
+import { useRadioGroupState } from 'react-stately';
 import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Label } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { useStatusClasses, usePropWarning } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import { RadioContext } from '../RadioField';
@@ -60,7 +61,9 @@ var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
   var unhandledAriaProps = {
     'aria-controls': props['aria-controls']
   };
-  var helperTextId = uuid();
+  var helperTextId = useMemo(function () {
+    return uuid();
+  }, []);
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     className: classNames
@@ -86,7 +89,7 @@ var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
     id: helperTextId
   }, helperText));
 });
-RadioGroupField.propTypes = _objectSpread({
+RadioGroupField.propTypes = _objectSpread(_objectSpread({
   /** The name of the RadioGroupField, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons). */
   name: PropTypes.string,
 
@@ -129,6 +132,6 @@ RadioGroupField.propTypes = _objectSpread({
 
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string
-}, ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 RadioGroupField.displayName = 'RadioGroupField';
 export default RadioGroupField;

package/lib/components/RockerButton/RockerButton.js

@@ -15,8 +15,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { Item } from '@react-stately/collections';
-import { FocusRing } from '@react-aria/focus';
+import { FocusRing } from 'react-aria';
+import { Item } from 'react-stately';
 import { useRockerButton, useStatusClasses, usePropWarning } from '../../hooks';
 import { Box } from '../../index';
 import { RockerContext } from '../RockerButtonGroup';
@@ -57,7 +57,7 @@ export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref
   }, ___EmotionJSX(Box, _extends({
     as: "button",
     className: classNames,
-    variant: "buttons.rocker"
+    variant: "variants.rockerButton.thumbSwitch"
   }, rockerButtonProps, {
     ref: rockerButtonRef
   }, itemProps, {

package/lib/components/RockerButton/RockerButton.styles.js

@@ -0,0 +1,52 @@
+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 container = {
+  alignItems: 'flex-start'
+};
+var innerContainer = {
+  bg: 'accent.95',
+  border: '1px solid',
+  borderColor: 'accent.90',
+  boxShadow: 'standard',
+  borderRadius: '15px',
+  padding: '2px'
+};
+
+var thumbSwitch = _objectSpread(_objectSpread({}, base), {}, {
+  border: '0',
+  display: 'inline-flex',
+  height: '26px',
+  lineHeight: '26px',
+  fontSize: '14px',
+  borderRadius: '15px',
+  alignSelf: 'center',
+  paddingTop: '0px',
+  paddingBottom: '0px',
+  textTransform: 'uppercase',
+  bg: 'accent.95',
+  '&.is-selected': {
+    bg: 'active',
+    color: 'white',
+    zIndex: '1'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+export default {
+  container: container,
+  innerContainer: innerContainer,
+  thumbSwitch: thumbSwitch
+};

package/lib/components/RockerButtonGroup/RockerButtonGroup.js

@@ -19,8 +19,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { useTabList } from '@react-aria/tabs';
-import { useTabListState } from '@react-stately/tabs';
+import { useTabList } from 'react-aria';
+import { useTabListState } from 'react-stately';
 import { usePropWarning } from '../../hooks';
 import Box from '../Box';
 import { CollectionRockerButton } from '../RockerButton';
@@ -59,9 +59,9 @@ var RockerButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(RockerContext.Provider, {
     value: state
   }, ___EmotionJSX(Box, _extends({
-    variant: "rockerbutton.rockerContainer"
+    variant: "rockerButton.container"
   }, others), ___EmotionJSX(Box, _extends({
-    variant: "rockerbutton.rockerContainerInner",
+    variant: "rockerButton.innerContainer",
     isRow: true
   }, tabListProps, raTabListProps, {
     ref: buttonGroupRef,

package/lib/components/ScrollBox/ScrollBox.js

@@ -84,7 +84,7 @@ var ScrollBox = /*#__PURE__*/forwardRef(function (props, ref) {
       classNames = _useStatusClasses.classNames;
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
-    variant: "boxes.topShadowScrollbox",
+    variant: "scrollBox.topShadowBox",
     className: classNames,
     role: "separator"
   }), ___EmotionJSX(Box, _extends({
@@ -94,9 +94,9 @@ var ScrollBox = /*#__PURE__*/forwardRef(function (props, ref) {
       overflowY: 'auto'
     }, sx),
     onScroll: onScroll,
-    variant: "boxes.scrollbox"
+    variant: "scrollBox.container"
   }, others), children), ___EmotionJSX(Box, {
-    variant: "boxes.bottomShadowScrollbox",
+    variant: "scrollBox.bottomShadowBox",
     className: classNames,
     role: "separator"
   }));

package/lib/components/ScrollBox/ScrollBox.styles.js

@@ -0,0 +1,43 @@
+var topShadowBox = {
+  '&.has-shadows.is-top-shadow-showing': {
+    position: 'relative',
+    zIndex: '10000',
+    boxShadow: '0px 4px 2px 1px rgb(37, 55, 70, 0.15)',
+    height: '4px',
+    marginBottom: '-4px',
+    backgroundColor: '#FFFFFF'
+  }
+};
+var bottomShadowBox = {
+  '&.has-shadows.is-bottom-shadow-showing': {
+    position: 'relative',
+    zIndex: '10000',
+    boxShadow: '0px -4px 2px 1px rgb(37, 55, 70, 0.15)',
+    height: '4px',
+    marginTop: '-2px',
+    backgroundColor: '#FFFFFF'
+  }
+};
+var container = {
+  '&::-webkit-scrollbar': {
+    display: 'none',
+    width: '0px !important'
+  },
+  '&::-webkit-scrollbar-track': {
+    width: '0px',
+    display: 'none'
+  },
+  '&::-webkit-scrollbar-thumb': {
+    borderRadius: '0px',
+    display: 'none'
+  },
+  position: 'relative',
+  '& > *': {
+    overflow: 'hidden auto'
+  }
+};
+export default {
+  container: container,
+  topShadowBox: topShadowBox,
+  bottomShadowBox: bottomShadowBox
+};

package/lib/{styles/forms/search.js → components/SearchField/Search.styles.js}

@@ -1,7 +1,7 @@
 export var clearButtonIcon = {
   color: 'neutral.40'
 };
-export var container = {
+export var wrapper = {
   position: 'relative',
   justifyContent: 'center',
   '> input::-webkit-search-cancel-button, > input::-webkit-search-decoration': {
@@ -15,6 +15,6 @@ export var icon = {
 };
 export default {
   clearButtonIcon: clearButtonIcon,
-  container: container,
+  wrapper: wrapper,
   icon: icon
 };

package/lib/components/SearchField/SearchField.js

@@ -14,13 +14,14 @@ 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, useImperativeHandle, useRef } from 'react';
-import { useSearchField } from '@react-aria/searchfield';
-import { useSearchFieldState } from '@react-stately/searchfield';
 import CloseIcon from 'mdi-react/CloseIcon';
 import SearchIcon from 'mdi-react/SearchIcon';
 import PropTypes from 'prop-types';
+import { useSearchField } from 'react-aria';
+import { useSearchFieldState } from 'react-stately';
 import { Box, Icon, IconButton, Input, Label } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { useField, usePropWarning } from '../../hooks';
 /**
  * Renders a search field with associated controls including visual elements and keyboard
@@ -66,7 +67,8 @@ var SearchField = /*#__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 handleKeyDownEvent = function handleKeyDownEvent(e) {
@@ -77,15 +79,13 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   };
 
-  return ___EmotionJSX(Box, fieldContainerProps, label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, {
-    variant: "forms.search.container"
-  }, ___EmotionJSX(Input, _extends({
+  return ___EmotionJSX(Box, fieldContainerProps, label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
+    variant: "forms.search.wrapper"
+  }, fieldControlWrapperProps), ___EmotionJSX(Input, _extends({
     ref: searchRef,
     pl: 40,
     pr: 40
-  }, fieldControlProps, {
-    variant: "forms.input.search"
-  })), icon && ___EmotionJSX(Icon, _extends({
+  }, fieldControlInputProps)), icon && ___EmotionJSX(Icon, _extends({
     icon: icon,
     variant: "forms.search.icon",
     size: 22
@@ -104,7 +104,7 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
     icon: CloseIcon
   }))));
 });
-SearchField.propTypes = _objectSpread({
+SearchField.propTypes = _objectSpread(_objectSpread({
   /**
    * @ignore
    * Identifies the currently active element when DOM focus is on a composite widget, textbox,
@@ -203,16 +203,9 @@ SearchField.propTypes = _objectSpread({
    * (value: string) => void
    */
   onChange: PropTypes.func,
-  containerProps: PropTypes.shape({}),
-
-  /** Props object that is spread into the input element. */
-  controlProps: PropTypes.shape({}),
 
   /** Props object that is spread into the icon element. */
   iconProps: PropTypes.shape({}),
-
-  /** Props object that is spread into the label element. */
-  labelProps: PropTypes.shape({}),
   // NOTE: unsurfaced useSearchField / useSearchFieldState props listed below
 
   /** @ignore Whether the input can be selected but not changed by the user. */
@@ -310,7 +303,7 @@ SearchField.propTypes = _objectSpread({
    * Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).
    */
   onInput: PropTypes.func
-}, ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 SearchField.defaultProps = {
   hasNoClearButton: false,
   icon: SearchIcon

package/lib/components/SearchField/SearchField.stories.js

@@ -19,6 +19,7 @@ import Users from 'mdi-react/AccountGroupIcon';
 import SearchIcon from 'mdi-react/SearchIcon';
 import { Box, SearchField, Text } from '../../';
 import { ariaAttributeBaseArgTypes, ariaAttributeBaseDocSettings } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { useDebounce } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -31,7 +32,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -50,10 +51,7 @@ export default {
     hasAutoFocus: {},
     hasNoClearButton: {},
     autoComplete: {},
-    containerProps: {},
     iconProps: {},
-    controlProps: {},
-    labelProps: {},
     name: {},
     id: {},
     'aria-autocomplete': {
@@ -64,7 +62,7 @@ export default {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(SearchField, _extends({}, args, {

package/lib/{styles/forms/select.js → components/SelectField/Select.styles.js}

@@ -13,9 +13,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; }
 
 // Styles for default select and variants go here.
-import { input } from './input';
-import { text } from '../variants';
-import { defaultFocus } from '../variants/buttons';
+import { input } from '../Input/Input.styles';
+import { text } from '../../styles/variants';
+import { defaultFocus } from '../Button/Buttons.styles';
 var activeFloatLabel = {
   pt: 'md',
   pb: 'xs'

package/lib/components/SelectField/SelectField.js

@@ -20,6 +20,7 @@ import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttr
 import { useSelectField, usePropWarning } from '../../hooks';
 import SelectFieldBase from '../SelectFieldBase';
 import statuses from '../../utils/devUtils/constants/statuses';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 /**
  * Select field (dropdown) that does not rely on native browser or mobile implementations.
  *
@@ -40,7 +41,7 @@ var SelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-invalid": status === 'error' && true
   }));
 });
-SelectField.propTypes = _objectSpread({
+SelectField.propTypes = _objectSpread(_objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: PropTypes.oneOf(['start', 'end', 'middle']),
 
@@ -132,20 +133,14 @@ SelectField.propTypes = _objectSpread({
    *
    * (key: Key) => any
    */
-  onSelectionChange: PropTypes.func,
-
+  onSelectionChange: PropTypes.func
+}, inputFieldAttributesBasePropTypes), {}, {
   /**
    * 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({}),
-
   /** Props object that is spread directly into the ScrollBox element. */
   // /** Props object that is spread directly into the ScrollBox element. */