@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/PopoverContainer/PopoverContainer.js

@@ -9,53 +9,26 @@ 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"],
-    _excluded2 = ["children", "className", "placement", "arrowProps", "arrowCrossOffset", "isOpen", "hasNoArrow", "isNotClosedOnBlur", "isKeyboardDismissDisabled", "isNonModal", "isDismissable", "width", "direction", "sx"],
-    _excluded3 = ["arrowCrossOffset", "sx", "direction"];
-
+var _excluded = ["children"],
+  _excluded2 = ["children", "className", "placement", "arrowProps", "arrowCrossOffset", "isOpen", "hasNoArrow", "isNotClosedOnBlur", "isKeyboardDismissDisabled", "isNonModal", "isDismissable", "width", "direction", "sx"],
+  _excluded3 = ["arrowCrossOffset", "sx", "direction"];
 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, useImperativeHandle, useRef } from 'react';
+import { mergeProps, OverlayContainer, useModal, useOverlay } from 'react-aria';
 import PropTypes from 'prop-types';
-import { useModal, useOverlay, OverlayContainer } from '@react-aria/overlays';
-import { mergeProps } from '@react-aria/utils';
 import { useStatusClasses } from '../../hooks';
 import Box from '../Box';
+
 /**
  * PopoverContainer component used for popover on SelectField, ComboBox & PopoverMenu.
 */
-
 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);
-
+    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 = {
@@ -73,44 +46,38 @@ PopoverContainer.propTypes = {
 };
 export var PopoverWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
-      className = props.className,
-      placement = props.placement,
-      arrowProps = props.arrowProps,
-      arrowCrossOffset = props.arrowCrossOffset,
-      isOpen = props.isOpen,
-      hasNoArrow = props.hasNoArrow,
-      isNotClosedOnBlur = props.isNotClosedOnBlur,
-      isKeyboardDismissDisabled = props.isKeyboardDismissDisabled,
-      isNonModal = props.isNonModal,
-      isDismissable = props.isDismissable,
-      width = props.width,
-      direction = props.direction,
-      sx = props.sx,
-      others = _objectWithoutProperties(props, _excluded2);
-
+    className = props.className,
+    placement = props.placement,
+    arrowProps = props.arrowProps,
+    arrowCrossOffset = props.arrowCrossOffset,
+    isOpen = props.isOpen,
+    hasNoArrow = props.hasNoArrow,
+    isNotClosedOnBlur = props.isNotClosedOnBlur,
+    isKeyboardDismissDisabled = props.isKeyboardDismissDisabled,
+    isNonModal = props.isNonModal,
+    isDismissable = props.isDismissable,
+    width = props.width,
+    direction = props.direction,
+    sx = props.sx,
+    others = _objectWithoutProperties(props, _excluded2);
   var popoverRef = useRef();
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return popoverRef.current;
   });
-
   var _useOverlay = useOverlay(_objectSpread(_objectSpread({}, props), {}, {
-    shouldCloseOnBlur: !isNotClosedOnBlur
-  }), popoverRef),
-      overlayProps = _useOverlay.overlayProps;
-
+      shouldCloseOnBlur: !isNotClosedOnBlur
+    }), popoverRef),
+    overlayProps = _useOverlay.overlayProps;
   var _useModal = useModal({
-    isDisabled: isNonModal
-  }),
-      modalProps = _useModal.modalProps;
-
+      isDisabled: isNonModal
+    }),
+    modalProps = _useModal.modalProps;
   var _useStatusClasses = useStatusClasses(className, {
-    isOpen: isOpen
-  }),
-      classNames = _useStatusClasses.classNames;
-
-  return ___EmotionJSX(React.Fragment, null, isOpen && ___EmotionJSX(Box, _extends({}, mergeProps(others, overlayProps, modalProps), {
+      isOpen: isOpen
+    }),
+    classNames = _useStatusClasses.classNames;
+  return isOpen && ___EmotionJSX(Box, _extends({}, mergeProps(others, overlayProps, modalProps), {
     variant: "popoverMenu.container",
     ref: popoverRef,
     className: classNames,
@@ -123,7 +90,7 @@ export var PopoverWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
   }), children, hasNoArrow ? null : ___EmotionJSX(PopoverArrow, _extends({}, arrowProps, {
     arrowCrossOffset: arrowCrossOffset,
     direction: direction
-  }))));
+  })));
 });
 PopoverWrapper.propTypes = {
   placement: PropTypes.string,
@@ -144,12 +111,11 @@ PopoverWrapper.defaultProps = {
 };
 export var PopoverArrow = function PopoverArrow(props) {
   var arrowCrossOffset = props.arrowCrossOffset,
-      sx = props.sx,
-      direction = props.direction,
-      others = _objectWithoutProperties(props, _excluded3);
-  /* istanbul ignore next */
-
+    sx = props.sx,
+    direction = props.direction,
+    others = _objectWithoutProperties(props, _excluded3);
 
+  /* istanbul ignore next */
   var calculateOffset = function calculateOffset() {
     switch (true) {
       case direction === 'top':
@@ -159,7 +125,6 @@ export var PopoverArrow = function PopoverArrow(props) {
             left: "calc(50% - ".concat(arrowCrossOffset, ") !important")
           }
         };
-
       case direction === 'left':
       case direction === 'right':
         return {
@@ -167,12 +132,10 @@ export var PopoverArrow = function PopoverArrow(props) {
             top: "calc(50% - ".concat(arrowCrossOffset, ") !important")
           }
         };
-
       default:
         return {};
     }
   };
-
   return ___EmotionJSX(Box, _extends({
     variant: "popoverMenu.arrow",
     "data-popover-arrow": "arrow",

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,78 +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, 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 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,
@@ -89,7 +77,6 @@ var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
     closeOnSelect: !isNotClosedOnSelect,
     autoFocus: state.focusStrategy || true
   });
-
   var contents = ___EmotionJSX(FocusScope, {
     restoreFocus: true,
     contain: isContainFocus
@@ -98,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
@@ -117,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/{styles/forms/radio.js → components/Radio/Radio.styles.js}

@@ -7,15 +7,13 @@ 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 '../variants/buttons'; // Default radio
 
-export var radio = {
+// Default radio
+var base = {
   width: 20,
   height: 20,
   color: 'active',
@@ -26,8 +24,32 @@ export var radio = {
   },
   'input ~ &.is-focused': _objectSpread({}, focusWithCroppedOutline)
 };
-export var radioField = {
+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
 };