@pingux/astro 2.0.0-alpha.1 → 2.0.0-alpha.5

package/lib/components/PopoverContainer/PopoverContainer.test.js

@@ -1,23 +1,21 @@
 import React from 'react';
+import { Box, OverlayPanel } from '../../index';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import { Box, OverlayPanel } from '../../index';
 import PopoverContainer from './PopoverContainer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(React.Fragment, null, ___EmotionJSX(PopoverContainer, props, ___EmotionJSX(Box, null, "I am in a popover"))));
+  return render(___EmotionJSX(PopoverContainer, props, ___EmotionJSX(Box, null, "I am in a popover")));
 };
-
 var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(OverlayPanel, {
     isOpen: true
   }, ___EmotionJSX(PopoverContainer, props, ___EmotionJSX(Box, null, "I am in a popover"))));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('should render a popover with an arrow by default', function () {
   getComponent({

package/lib/components/PopoverMenu/PopoverMenu.js

@@ -10,76 +10,66 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-
 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 _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, { forwardRef, useImperativeHandle, useRef } from 'react';
-import PropTypes from 'prop-types';
 import { DismissButton, FocusScope, useMenuTrigger, useOverlayPosition } from 'react-aria';
 import { useMenuTriggerState } from 'react-stately';
 import { PressResponder } from '@react-aria/interactions';
-import PopoverContainer from '../PopoverContainer';
+import PropTypes from 'prop-types';
 import { MenuContext } from '../../context/MenuContext';
+import PopoverContainer from '../PopoverContainer';
+
 /**
  * The PopoverMenu serves as a wrapper around a Menu and its associated trigger, linking the Menu's
  * open state with the trigger's press state and providing necessary overlay context.
  *
  * Primarily utilizes [useMenuTrigger](https://react-spectrum.adobe.com/react-aria/useMenuTrigger.html) from React Aria and [useMenuTriggerState](https://react-spectrum.adobe.com/react-stately/useMenuTriggerState.html) from React Stately.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
-
   var menuPopoverRef = useRef();
   var triggerRef = useRef();
   var menuRef = useRef();
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return menuPopoverRef.current;
   });
   var children = props.children,
-      align = props.align,
-      direction = props.direction,
-      isDefaultOpen = props.isDefaultOpen,
-      isNotFlippable = props.isNotFlippable,
-      isNotClosedOnSelect = props.isNotClosedOnSelect,
-      hasNoArrow = props.hasNoArrow,
-      isContainFocus = props.isContainFocus;
-
+    align = props.align,
+    direction = props.direction,
+    isDefaultOpen = props.isDefaultOpen,
+    isNotFlippable = props.isNotFlippable,
+    isNotClosedOnSelect = props.isNotClosedOnSelect,
+    hasNoArrow = props.hasNoArrow,
+    isContainFocus = props.isContainFocus;
   var _React$Children$toArr = React.Children.toArray(children),
-      _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
-      menuTrigger = _React$Children$toArr2[0],
-      menu = _React$Children$toArr2[1];
-
+    _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
+    menuTrigger = _React$Children$toArr2[0],
+    menu = _React$Children$toArr2[1];
   var state = useMenuTriggerState(_objectSpread(_objectSpread({}, props), {}, {
     defaultOpen: isDefaultOpen,
     closeOnSelect: !isNotClosedOnSelect,
     shouldFlip: !isNotFlippable
   }));
-
   var _useMenuTrigger = useMenuTrigger({}, state, triggerRef),
-      menuTriggerProps = _useMenuTrigger.menuTriggerProps,
-      menuProps = _useMenuTrigger.menuProps;
-
+    menuTriggerProps = _useMenuTrigger.menuTriggerProps,
+    menuProps = _useMenuTrigger.menuProps;
   var _useOverlayPosition = useOverlayPosition({
-    targetRef: triggerRef,
-    overlayRef: menuPopoverRef,
-    scrollRef: menuRef,
-    offset: 15,
-    placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
-    // Our API preference is for default false so we invert this since it should be default true
-    shouldFlip: !isNotFlippable,
-    isOpen: state.isOpen,
-    onClose: state.close,
-    shouldUpdatePosition: true
-  }),
-      positionProps = _useOverlayPosition.overlayProps,
-      placement = _useOverlayPosition.placement;
-
+      targetRef: triggerRef,
+      overlayRef: menuPopoverRef,
+      scrollRef: menuRef,
+      offset: 15,
+      placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
+      // Our API preference is for default false so we invert this since it should be default true
+      shouldFlip: !isNotFlippable,
+      isOpen: state.isOpen,
+      onClose: state.close,
+      shouldUpdatePosition: true
+    }),
+    positionProps = _useOverlayPosition.overlayProps,
+    placement = _useOverlayPosition.placement;
   var menuContext = _objectSpread(_objectSpread({}, menuProps), {}, {
     ref: menuRef,
     onClose: state.close,
@@ -87,7 +77,6 @@ var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
     closeOnSelect: !isNotClosedOnSelect,
     autoFocus: state.focusStrategy || true
   });
-
   var contents = ___EmotionJSX(FocusScope, {
     restoreFocus: true,
     contain: isContainFocus
@@ -96,7 +85,6 @@ var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
   }), menu, ___EmotionJSX(DismissButton, {
     onDismiss: state.close
   }));
-
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(PressResponder, _extends({}, menuTriggerProps, {
     ref: triggerRef,
     isPressed: state.isOpen
@@ -115,31 +103,23 @@ var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
 PopoverMenu.propTypes = {
   /** Alignment of the popover menu relative to the trigger. */
   align: PropTypes.oneOf(['start', 'end', 'middle']),
-
   /** Where the popover menu opens relative to its trigger. */
   direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-
   /** Whether the overlay is open by default (controlled). */
   isOpen: PropTypes.bool,
-
   /** Whether the overlay is open by default (uncontrolled). */
   isDefaultOpen: PropTypes.bool,
-
   /** Whether the popover is prevented from closing when a selection is made. */
   isNotClosedOnSelect: PropTypes.bool,
-
   /**
    * Whether the popover is prevented from flipping directions when insufficient space is
    * available for the given `direction` placement.
    */
   isNotFlippable: PropTypes.bool,
-
   /** Whether the PopoverMenu hides the arrow. */
   hasNoArrow: PropTypes.bool,
-
   /** Whether the PopoverMenu contains focus inside the scope. */
   isContainFocus: PropTypes.bool,
-
   /**
    * Handler that is called when the overlay's open state changes.
    *

package/lib/components/PopoverMenu/PopoverMenu.stories.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { OverlayProvider, PopoverMenu, Button, Menu, Item, Text } from '../../index';
+import { Button, Item, Menu, OverlayProvider, PopoverMenu, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/PopoverMenu',
@@ -30,7 +30,8 @@ export default {
   }
 };
 export var Default = function Default(args) {
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, args, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
       onAction: action('onAction')
@@ -47,7 +48,8 @@ export var Default = function Default(args) {
   );
 };
 export var DefaultOpen = function DefaultOpen() {
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
       isDefaultOpen: true
@@ -67,11 +69,11 @@ export var DefaultOpen = function DefaultOpen() {
 };
 export var Controlled = function Controlled() {
   var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
       isOpen: isOpen,
@@ -91,7 +93,8 @@ export var Controlled = function Controlled() {
   );
 };
 export var Placement = function Placement() {
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
       direction: "left"
@@ -110,7 +113,8 @@ export var Placement = function Placement() {
   );
 };
 export var NotFlippable = function NotFlippable() {
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
       direction: "left",
@@ -130,7 +134,8 @@ export var NotFlippable = function NotFlippable() {
   );
 };
 export var NotClosedOnSelect = function NotClosedOnSelect() {
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
       isNotClosedOnSelect: true
@@ -149,7 +154,8 @@ export var NotClosedOnSelect = function NotClosedOnSelect() {
   );
 };
 export var DisabledItem = function DisabledItem() {
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
       onAction: action('onAction'),
@@ -167,7 +173,8 @@ export var DisabledItem = function DisabledItem() {
   );
 };
 export var isPressed = function isPressed() {
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
       onAction: action('onAction'),

package/lib/components/PopoverMenu/PopoverMenu.test.js

@@ -1,21 +1,20 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React from 'react';
 import userEvent from '@testing-library/user-event';
+import { Button, Item, Menu, PopoverMenu } from '../../index';
 import axeTest from '../../utils/testUtils/testAxe';
-import { render, screen, fireEvent } from '../../utils/testUtils/testWrapper';
-import { Button, PopoverMenu, Menu, Item } from '../../index';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(React.Fragment, null, ___EmotionJSX(PopoverMenu, props, ___EmotionJSX(Button, null, "Mock Button"), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
+  return render(___EmotionJSX(PopoverMenu, props, ___EmotionJSX(Button, null, "Mock Button"), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
     key: "a"
   }, "A"), ___EmotionJSX(Item, {
     key: "b"
-  }, "B")))));
-}; // Need to be added to each test file to test accessibility using axe.
-
+  }, "B"))));
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('renders a popover menu when trigger is clicked', function () {
   getComponent();
@@ -27,8 +26,8 @@ test('renders a popover menu when trigger is clicked', function () {
   expect(screen.queryByRole('presentation')).toBeVisible();
   expect(screen.queryByRole('presentation')).toHaveStyle({
     top: '15px'
-  }); // Should have two accessible dismiss buttons applied (in addition to the trigger button)
-
+  });
+  // Should have two accessible dismiss buttons applied (in addition to the trigger button)
   expect(screen.queryAllByRole('button')).toHaveLength(3);
   expect(screen.queryByRole('menu')).toBeInTheDocument();
   userEvent.click(button);
@@ -70,8 +69,9 @@ test('should close when a menu item is selected', function () {
   var button = screen.getByRole('button');
   userEvent.click(button);
   expect(screen.queryByRole('presentation')).toBeInTheDocument();
-  var menuItem = screen.getAllByRole('menuitem')[0]; // Click the item and ensure the popover closes
+  var menuItem = screen.getAllByRole('menuitem')[0];
 
+  // Click the item and ensure the popover closes
   userEvent.click(menuItem);
   expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
 });
@@ -82,8 +82,9 @@ test('should not close when a menu item is selected when isNotClosedOnSelect is
   var button = screen.getByRole('button');
   userEvent.click(button);
   expect(screen.queryByRole('presentation')).toBeInTheDocument();
-  var menuItem = screen.getAllByRole('menuitem')[0]; // Click the item and ensure the popover does not close
+  var menuItem = screen.getAllByRole('menuitem')[0];
 
+  // Click the item and ensure the popover does not close
   userEvent.click(menuItem);
   expect(screen.queryByRole('presentation')).toBeInTheDocument();
 });
@@ -131,12 +132,10 @@ test('two menus can not be open at the same time', function () {
   }, "E")))));
   expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
   expect(screen.queryByRole('menu')).not.toBeInTheDocument();
-
   var _screen$getAllByRole = screen.getAllByRole('button'),
-      _screen$getAllByRole2 = _slicedToArray(_screen$getAllByRole, 2),
-      button1 = _screen$getAllByRole2[0],
-      button2 = _screen$getAllByRole2[1];
-
+    _screen$getAllByRole2 = _slicedToArray(_screen$getAllByRole, 2),
+    button1 = _screen$getAllByRole2[0],
+    button2 = _screen$getAllByRole2[1];
   userEvent.click(button1);
   expect(screen.queryByRole('presentation')).toBeInTheDocument();
   expect(screen.queryByRole('menu')).toBeInTheDocument();

package/lib/components/Radio/Radio.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { forwardRef } from 'react';
 import { Radio as ThemeUIRadio } from 'theme-ui';
+
 /**
  * Basic radio input wrapped in a label.
  * Built on top of the [Radio from Theme-UI](https://theme-ui.com/components/radio/) and uses the
@@ -9,7 +10,6 @@ import { Radio as ThemeUIRadio } from 'theme-ui';
  * **Note: Requires a label. It's recommended to use `RadioGroupField` with `RadioField` for a**
  * **solution.**
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Radio = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(ThemeUIRadio, _extends({

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

@@ -7,14 +7,12 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 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.
 
-import { focusWithCroppedOutline } from '../Button/Buttons.styles'; // Styles for default radio and variants go here.
 // Default radio
-
 var base = {
   width: 20,
   height: 20,
@@ -30,8 +28,9 @@ var outerContainer = {
   '.is-horizontal &': {
     mr: '15px'
   }
-}; // Used to give a border to radio elements
+};
 
+// Used to give a border to radio elements
 var container = {
   borderWidth: 1,
   borderStyle: 'solid',
@@ -39,8 +38,9 @@ var container = {
   borderRadius: 3,
   padding: 'md',
   mb: 'md'
-}; // Used to add spacing for content shown when a radio is checked
+};
 
+// Used to add spacing for content shown when a radio is checked
 var checkedContent = {
   pb: 'sm',
   pl: 'lg',

package/lib/components/RadioField/RadioField.js

@@ -9,72 +9,64 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-
 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 React, { forwardRef, createContext, useContext, useRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
+import React, { createContext, forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import { useRadio } from 'react-aria';
+import PropTypes from 'prop-types';
 import { useField, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import Box from '../Box';
-import Radio from '../Radio';
-import Label from '../Label';
 import FieldHelperText from '../FieldHelperText';
-import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import Label from '../Label';
+import Radio from '../Radio';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var RadioContext = /*#__PURE__*/createContext();
+
 /**
  * Combines a radio, label, and helper text for a complete, form-ready solution.
  *
  * Utilizes [useRadio](https://react-spectrum.adobe.com/react-aria/useRadioGroup.html) from React
  * Aria.
  */
-
 var RadioField = /*#__PURE__*/forwardRef(function (props, ref) {
   var checkedContent = props.checkedContent,
-      controlProps = props.controlProps,
-      hasAutoFocus = props.hasAutoFocus,
-      helperText = props.helperText,
-      radioDisabled = props.isDisabled,
-      label = props.label,
-      status = props.status;
+    controlProps = props.controlProps,
+    hasAutoFocus = props.hasAutoFocus,
+    helperText = props.helperText,
+    radioDisabled = props.isDisabled,
+    label = props.label,
+    status = props.status;
   var radioFieldRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return radioFieldRef.current;
   });
   var state = useContext(RadioContext);
   var groupDisabled = state.isDisabled;
   var isDisabled = radioDisabled || groupDisabled;
-
   var _useRadio = useRadio(_objectSpread(_objectSpread({
-    children: label,
-    autoFocus: hasAutoFocus,
-    isDisabled: isDisabled
-  }, props), controlProps), state, radioFieldRef),
-      inputProps = _useRadio.inputProps;
-
+      children: label,
+      autoFocus: hasAutoFocus,
+      isDisabled: isDisabled
+    }, props), controlProps), state, radioFieldRef),
+    inputProps = _useRadio.inputProps;
   var isChecked = inputProps.checked;
   var statusClasses = {
     isDisabled: isDisabled,
     isChecked: isChecked
   };
-
   var _useField = useField(_objectSpread(_objectSpread({
-    statusClasses: statusClasses
-  }, props), {}, {
-    controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
-  })),
-      fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
-      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
-      fieldLabelProps = _useField.fieldLabelProps;
-
+      statusClasses: statusClasses
+    }, props), {}, {
+      controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
+    })),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
   return ___EmotionJSX(Box, _extends({
     variant: "forms.radio.outerContainer"
   }, fieldContainerProps), ___EmotionJSX(Label, _extends({
@@ -92,64 +84,45 @@ var RadioField = /*#__PURE__*/forwardRef(function (props, ref) {
 RadioField.propTypes = _objectSpread({
   /** Content to display when the radio is checked. */
   checkedContent: PropTypes.node,
-
   /** The rendered label for the field. */
   label: PropTypes.node,
-
   /** Whether the element should receive focus on render. */
   hasAutoFocus: PropTypes.bool,
-
   /** Text rendered below the input. */
   helperText: PropTypes.node,
-
   /** If present this prop will cause a help hint to render in the label of the field. */
   hintText: PropTypes.string,
-
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string,
-
   /**
    * Whether the radio button is disabled or not. Shows that a selection exists, but is not
    * available in that circumstance.
   */
   isDisabled: PropTypes.bool,
-
   /** Whether the Radio can be interacted with but cannot have its selection state changed. */
   isReadOnly: PropTypes.bool,
-
   /** Whether the Radio is required. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required). */
   isRequired: PropTypes.bool,
-
   /** Determines the textarea status indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses)),
-
   /** The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). */
   value: PropTypes.string,
-
   /** Handler that is called when the element receives focus. */
   onFocus: PropTypes.func,
-
   /** Handler that is called when the element loses focus. */
   onBlur: PropTypes.func,
-
   /** Handler that is called when the element's focus status changes. */
   onFocusChange: PropTypes.func,
-
   /** Handler that is called when a key is pressed. */
   onKeyDown: PropTypes.func,
-
   /** Handler that is called when a key is released. */
   onKeyUp: PropTypes.func,
-
   /** Defines a string value that labels the current element. */
   'aria-label': PropTypes.string,
-
   /** Identifies the element (or elements) that labels the current element. */
   'aria-labelledby': PropTypes.string,
-
   /** Identifies the element (or elements) that describes the object. */
   'aria-describedby': PropTypes.string,
-
   /**
    * Identifies the element (or elements) that provide a detailed, extended description for the
    * object.

package/lib/components/RadioField/RadioField.test.js

@@ -18,7 +18,6 @@ var defaultProps = {
 var defaultState = {
   setLastFocusedValue: function setLastFocusedValue() {}
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultState;
@@ -26,11 +25,11 @@ var getComponent = function getComponent() {
     value: state
   }, ___EmotionJSX(RadioField, _extends({}, defaultProps, props))));
 };
-
 afterEach(function () {
   jest.restoreAllMocks();
-}); // Need to be added to each test file to test accessibility using axe.
+});
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('default radio', function () {
   getComponent();