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

package/lib/components/Button/Button.js

@@ -10,71 +10,62 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "variant", "tabIndex"];
-
 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, useRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useButton, useFocusRing } from 'react-aria';
+import { Pressable, useHover } from '@react-aria/interactions';
+import PropTypes from 'prop-types';
 import { Button as ThemeUIButton } from 'theme-ui';
-import { useHover } from '@react-aria/interactions';
-import { useStatusClasses, usePropWarning, useAriaLabelWarning } from '../../hooks';
+import { useAriaLabelWarning, usePropWarning, useStatusClasses } from '../../hooks';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
-      isDisabled = props.isDisabled,
-      isLoading = props.isLoading,
-      onHoverStart = props.onHoverStart,
-      onHoverChange = props.onHoverChange,
-      onHoverEnd = props.onHoverEnd,
-      onPress = props.onPress,
-      onPressStart = props.onPressStart,
-      onPressEnd = props.onPressEnd,
-      onPressChange = props.onPressChange,
-      onPressUp = props.onPressUp,
-      children = props.children,
-      variant = props.variant,
-      tabIndex = props.tabIndex,
-      others = _objectWithoutProperties(props, _excluded);
-
+    isDisabled = props.isDisabled,
+    isLoading = props.isLoading,
+    onHoverStart = props.onHoverStart,
+    onHoverChange = props.onHoverChange,
+    onHoverEnd = props.onHoverEnd,
+    onPress = props.onPress,
+    onPressStart = props.onPressStart,
+    onPressEnd = props.onPressEnd,
+    onPressChange = props.onPressChange,
+    onPressUp = props.onPressUp,
+    children = props.children,
+    variant = props.variant,
+    tabIndex = props.tabIndex,
+    others = _objectWithoutProperties(props, _excluded);
   var buttonRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return buttonRef.current;
   });
-
   var _useFocusRing = useFocusRing(),
-      isFocusVisible = _useFocusRing.isFocusVisible,
-      focusProps = _useFocusRing.focusProps;
-
+    isFocusVisible = _useFocusRing.isFocusVisible,
+    focusProps = _useFocusRing.focusProps;
   var _useButton = useButton(_objectSpread({
-    elementType: 'button'
-  }, props), buttonRef),
-      buttonProps = _useButton.buttonProps,
-      isPressed = _useButton.isPressed;
-
+      elementType: 'button'
+    }, props), buttonRef),
+    buttonProps = _useButton.buttonProps,
+    isPressed = _useButton.isPressed;
   var _useHover = useHover(props),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
   var _useStatusClasses = useStatusClasses(className, {
-    isHovered: isHovered,
-    isPressed: isPressed,
-    isFocused: isFocusVisible,
-    isDisabled: isDisabled
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isHovered: isHovered,
+      isPressed: isPressed,
+      isFocused: isFocusVisible,
+      isDisabled: isDisabled
+    }),
+    classNames = _useStatusClasses.classNames;
   var ariaLabel = props['aria-label'];
   useAriaLabelWarning('Button', ariaLabel, variant === 'filter');
-  return ___EmotionJSX(ThemeUIButton, _extends({
+  return ___EmotionJSX(Pressable, {
+    ref: buttonRef
+  }, ___EmotionJSX(ThemeUIButton, _extends({
     "aria-label": ariaLabel,
-    ref: buttonRef,
     className: classNames,
     role: "button",
     tx: "buttons",
@@ -95,71 +86,59 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: {
       position: 'absolute'
     }
-  }));
+  })));
 });
 Button.propTypes = {
   /** Defines a string value that labels the current element. */
   'aria-label': PropTypes.string,
-
   /** Whether the button is disabled. */
   isDisabled: PropTypes.bool,
-
   /** Shows loader instead of children */
   isLoading: PropTypes.bool,
-
   /**
    * Handler that is called when a hover interaction starts.
    * (e: HoverEvent) => void
    */
   onHoverStart: PropTypes.func,
-
   /**
    * Handler that is called when a hover interaction ends.
    * (e: HoverEvent) => void
    */
   onHoverEnd: PropTypes.func,
-
   /**
    * Handler that is called when the hover state changes.
    * (isHovering: boolean) => void
    */
   onHoverChange: PropTypes.func,
-
   /**
    * Handler that is called when the press is released over the target.
    * (e: PressEvent) => void
    */
   onPress: PropTypes.func,
-
   /**
    * Handler that is called when a press interaction starts.
    * (e: PressEvent) => void
    */
   onPressStart: PropTypes.func,
-
   /**
    * Handler that is called when a press interaction ends, either over the target or when the
    * pointer leaves the target.
    * (e: PressEvent) => void
    */
   onPressEnd: PropTypes.func,
-
   /**
    * Handler that is called when the press state changes.
    * (isPressed: boolean) => void
    */
   onPressChange: PropTypes.func,
-
   /**
    * Handler that is called when a press is released over the target, regardless of whether it
    * started on the target or not.
    * (e: PressEvent) => void
    */
   onPressUp: PropTypes.func,
-
   /** The styling variation of the button. */
   variant: PropTypes.string,
-
   /** The focus variation of the button. */
   tabIndex: PropTypes.number
 };

package/lib/components/Button/Button.stories.js

@@ -5,17 +5,19 @@ import React from 'react';
 import AddCircleIcon from 'mdi-react/AddCircleIcon';
 import CreateIcon from 'mdi-react/CreateIcon';
 import FilterIcon from 'mdi-react/FilterIcon';
-import { buttonVariants } from '../../utils/devUtils/constants/variants';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Button, Icon, SearchField, Text } from '../../index';
-import ButtonReadme from './Button.mdx'; // removing the iconButton variants from this story.
+import { buttonVariants } from '../../utils/devUtils/constants/variants';
+import ButtonReadme from './Button.mdx';
 
+// removing the iconButton variants from this story.
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var variants = buttonVariants;
 delete variants.ICON;
 delete variants.ICON_BUTTON;
-delete variants.INVERTED; // add designer approved variants for devs to use here
+delete variants.INVERTED;
 
+// add designer approved variants for devs to use here
 var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success'];
 export default {
   title: 'Components/Button',
@@ -87,8 +89,7 @@ export var InlineButton = function InlineButton() {
 export var ColorBlockButton = function ColorBlockButton(args) {
   // Change `isConfigured` property in storybook controls
   var isConfigured = args.isConfigured,
-      props = _objectWithoutProperties(args, _excluded);
-
+    props = _objectWithoutProperties(args, _excluded);
   return ___EmotionJSX(Button, _extends({}, props, {
     variant: "colorBlock",
     className: isConfigured ? 'is-configured' : ''

package/lib/components/Button/Button.test.js

@@ -10,13 +10,12 @@ var defaultProps = {
   'data-testid': testId,
   'aria-label': 'Test button'
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Button, _extends({}, defaultProps, props)));
-}; // 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 button', function () {
   getComponent();
@@ -41,11 +40,13 @@ test('icon button press', function () {
   });
   var button = screen.getByRole('button');
   expect(button).not.toHaveClass('is-pressed');
-  expect(onPress).not.toHaveBeenCalled(); // Hold down the button to see pressed styles
+  expect(onPress).not.toHaveBeenCalled();
 
+  // Hold down the button to see pressed styles
   fireEvent.mouseDown(button);
-  expect(button).toHaveClass('is-pressed'); // Finish the click to fire the event handler
+  expect(button).toHaveClass('is-pressed');
 
+  // Finish the click to fire the event handler
   fireEvent.mouseUp(button);
   expect(button).not.toHaveClass('is-pressed');
   expect(onPress).toHaveBeenCalledTimes(1);

package/lib/components/Button/Buttons.styles.js

@@ -7,11 +7,8 @@ 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 { text as textVariants } from '../Text/Text.styles';
 export var base = _objectSpread({
   cursor: 'pointer',
@@ -55,7 +52,6 @@ export var focusWithCroppedOutline = {
   outlineColor: 'focus',
   outlineOffset: '1px'
 };
-
 var primary = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
   bg: 'active',
@@ -77,7 +73,6 @@ var primary = _objectSpread(_objectSpread({}, base), {}, {
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
-
 var success = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
   bg: 'success.bright',
@@ -86,7 +81,6 @@ var success = _objectSpread(_objectSpread({}, base), {}, {
   color: 'white',
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
-
 var critical = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
   bg: 'critical.bright',
@@ -95,7 +89,6 @@ var critical = _objectSpread(_objectSpread({}, base), {}, {
   color: 'white',
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
-
 var inline = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
   bg: 'white',
@@ -112,7 +105,6 @@ var inline = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-pressed': _objectSpread({}, defaultActive),
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
-
 var inlinePrimary = _objectSpread(_objectSpread(_objectSpread({}, inline), defaultActive), {}, {
   '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
     backgroundColor: 'accent.40',
@@ -124,7 +116,6 @@ var inlinePrimary = _objectSpread(_objectSpread(_objectSpread({}, inline), defau
     borderColor: 'accent.20'
   })
 });
-
 export var text = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
   bg: 'transparent',
@@ -155,7 +146,6 @@ export var link = _objectSpread(_objectSpread({}, text), {}, {
   },
   '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
-
 var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'white',
   border: '1px solid',
@@ -164,7 +154,6 @@ var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-pressed': _objectSpread({}, defaultActive),
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
-
 var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
   px: 'sm',
   borderColor: 'neutral.80',
@@ -172,7 +161,6 @@ var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
   color: 'active',
   display: 'flex'
 });
-
 var colorBlock = {
   bg: 'neutral.95',
   border: '1px solid',

package/lib/components/Callout/Callout.js

@@ -2,9 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["children", "status"];
-
 var _calloutProps;
-
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -31,6 +29,7 @@ var defaultIconProps = {
   ml: 'md',
   size: 'md'
 };
+
 /**
  Please note, Callout is a static component, the [Messages](./?path=/docs/components-messages)
  component is recommended if you need to interrupt and notify users of successful/failed actions
@@ -39,9 +38,8 @@ var defaultIconProps = {
 
 var Callout = function Callout(_ref) {
   var children = _ref.children,
-      status = _ref.status,
-      others = _objectWithoutProperties(_ref, _excluded);
-
+    status = _ref.status,
+    others = _objectWithoutProperties(_ref, _excluded);
   return ___EmotionJSX(Box, _extends({
     "data-testid": CALLOUT_TEST_ID,
     isRow: true,
@@ -53,7 +51,6 @@ var Callout = function Callout(_ref) {
     "aria-label": "".concat(status, "-icon")
   }, defaultIconProps)), children);
 };
-
 Callout.propTypes = {
   /** Determines the icon and color  */
   status: PropTypes.oneOf(_Object$values(statuses))

package/lib/components/Callout/Callout.stories.js

@@ -1,8 +1,8 @@
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React from 'react';
-import { Link, Text, Callout } from '../..';
-import statuses from '../../utils/devUtils/constants/statuses';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Callout, Link, Text } from '../..';
+import statuses from '../../utils/devUtils/constants/statuses';
 import CalloutReadme from './Callout.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -26,8 +26,9 @@ export default {
       }
     }
   }
-}; // main
+};
 
+// main
 export var Default = function Default(args) {
   return ___EmotionJSX(Callout, args, ___EmotionJSX(Text, null, "You should be aware of this. It might be good or bad, I don\u2019t know. You may already be aware of it, but I want to be sure", ___EmotionJSX(Link, {
     href: "https://pingidentity.com",
@@ -45,8 +46,9 @@ export var ErrorStatus = function ErrorStatus() {
     "aria-label": "".concat(statuses.ERROR, "-callout"),
     variant: "app"
   }, ' ', "Read More")));
-}; // Avoiding using Error as the function name due to it being a JS built-in method
+};
 
+// Avoiding using Error as the function name due to it being a JS built-in method
 ErrorStatus.storyName = 'Error';
 export var Success = function Success() {
   return ___EmotionJSX(Callout, {

package/lib/components/Callout/Callout.test.js

@@ -1,7 +1,5 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 var _testColors;
-
 import React from 'react';
 import { screen } from '@testing-library/react';
 import statuses from '../../utils/devUtils/constants/statuses';
@@ -11,12 +9,10 @@ import Callout, { CALLOUT_TEST_ID } from './Callout';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TEST_TEXT = 'test text';
 var testColors = (_testColors = {}, _defineProperty(_testColors, statuses.DEFAULT, 'var(--theme-ui-colors-text-secondary)'), _defineProperty(_testColors, statuses.ERROR, 'var(--theme-ui-colors-critical-bright)'), _defineProperty(_testColors, statuses.SUCCESS, 'var(--theme-ui-colors-success-bright)'), _defineProperty(_testColors, statuses.WARNING, 'var(--theme-ui-colors-warning-bright)'), _testColors);
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Callout, props, TEST_TEXT));
 };
-
 describe('Callout', function () {
   test('renders', function () {
     getComponent();

package/lib/components/Card/Card.js

@@ -2,57 +2,51 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp"];
 import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { mergeProps } from '@react-aria/utils';
-import { useHover, usePress } from '@react-aria/interactions';
 import { useFocusRing } from '@react-aria/focus';
-import Box from '../Box';
+import { useHover, usePress } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
+import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
+import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Card = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
-      onHoverStart = props.onHoverStart,
-      onHoverChange = props.onHoverChange,
-      onHoverEnd = props.onHoverEnd,
-      onPress = props.onPress,
-      onPressStart = props.onPressStart,
-      onPressEnd = props.onPressEnd,
-      onPressChange = props.onPressChange,
-      onPressUp = props.onPressUp,
-      others = _objectWithoutProperties(props, _excluded);
-
+    onHoverStart = props.onHoverStart,
+    onHoverChange = props.onHoverChange,
+    onHoverEnd = props.onHoverEnd,
+    onPress = props.onPress,
+    onPressStart = props.onPressStart,
+    onPressEnd = props.onPressEnd,
+    onPressChange = props.onPressChange,
+    onPressUp = props.onPressUp,
+    others = _objectWithoutProperties(props, _excluded);
   var _useHover = useHover(props),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
   var _useFocusRing = useFocusRing(),
-      focusProps = _useFocusRing.focusProps,
-      isFocusVisible = _useFocusRing.isFocusVisible;
-
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
   var _usePress = usePress({
-    ref: ref,
-    onPress: onPress,
-    onPressStart: onPressStart,
-    onPressEnd: onPressEnd,
-    onPressChange: onPressChange,
-    onPressUp: onPressUp
-  }),
-      pressProps = _usePress.pressProps,
-      isPressed = _usePress.isPressed;
-
+      ref: ref,
+      onPress: onPress,
+      onPressStart: onPressStart,
+      onPressEnd: onPressEnd,
+      onPressChange: onPressChange,
+      onPressUp: onPressUp
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
   var _useFocusRing2 = useFocusRing({
-    within: true
-  }),
-      focusWithinProps = _useFocusRing2.focusProps,
-      isFocusedWithin = _useFocusRing2.isFocusVisible;
-
+      within: true
+    }),
+    focusWithinProps = _useFocusRing2.focusProps,
+    isFocusedWithin = _useFocusRing2.isFocusVisible;
   var _useStatusClasses = useStatusClasses(className, {
-    isHovered: isHovered,
-    isPressed: isPressed,
-    isFocused: isFocusVisible || isFocusedWithin
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isHovered: isHovered,
+      isPressed: isPressed,
+      isFocused: isFocusVisible || isFocusedWithin
+    }),
+    classNames = _useStatusClasses.classNames;
   var ariaLabel = props['aria-label'];
   return ___EmotionJSX(Box, _extends({
     "aria-label": ariaLabel,
@@ -65,50 +59,42 @@ var Card = /*#__PURE__*/forwardRef(function (props, ref) {
 Card.propTypes = {
   /** Defines a string value that labels the current element. */
   'aria-label': PropTypes.string,
-
   /**
    * Handler that is called when a hover interaction starts.
    * (e: HoverEvent) => void
    */
   onHoverStart: PropTypes.func,
-
   /**
   * Handler that is called when a hover interaction ends.
   * (e: HoverEvent) => void
   */
   onHoverEnd: PropTypes.func,
-
   /**
   * Handler that is called when the hover state changes.
   * (isHovering: boolean) => void
   */
   onHoverChange: PropTypes.func,
-
   /**
   * Handler that is called when the press is released over the target.
   * (e: PressEvent) => void
   */
   onPress: PropTypes.func,
-
   /**
   * Handler that is called when a press interaction starts.
   * (e: PressEvent) => void
   */
   onPressStart: PropTypes.func,
-
   /**
   * Handler that is called when a press interaction ends, either over the target or when the
   * pointer leaves the target.
   * (e: PressEvent) => void
   */
   onPressEnd: PropTypes.func,
-
   /**
   * Handler that is called when the press state changes.
   * (isPressed: boolean) => void
   */
   onPressChange: PropTypes.func,
-
   /**
   * Handler that is called when a press is released over the target, regardless of whether it
   * started on the target or not.

package/lib/components/Card/Card.stories.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import { Box, Button, Card } from '../../index';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Box, Button, Card } from '../../index';
 import CardReadme from './Card.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {

package/lib/components/Card/Card.test.js

@@ -2,22 +2,21 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import Card from './Card';
-import Button from '../Button';
 import axeTest from '../../utils/testUtils/testAxe';
+import Button from '../Button';
+import Card from './Card';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-separator';
 var defaultProps = {
   'data-testid': testId,
   label: 'Test Label'
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Card, _extends({}, defaultProps, props)));
-}; // 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('renders Card component', function () {
   getComponent();
@@ -26,7 +25,6 @@ test('renders Card component', function () {
 });
 test('renders children within Card component', function () {
   var children = ___EmotionJSX(Button, null);
-
   getComponent({
     children: children
   });
@@ -35,7 +33,6 @@ test('renders children within Card component', function () {
 });
 test('card allows hover, focus, and press events', function () {
   var children = ___EmotionJSX(Button, null);
-
   var onPress = jest.fn();
   getComponent({
     children: children,
@@ -54,7 +51,6 @@ test('card allows hover, focus, and press events', function () {
 });
 test('allows focus within card', function () {
   var children = ___EmotionJSX(Button, null);
-
   getComponent({
     children: children,
     tabIndex: 0

package/lib/components/Checkbox/Checkbox.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { forwardRef } from 'react';
 import CheckboxBase from './CheckboxBase';
+
 /**
  * Basic checkbox input.
  * Built on top of the [Checkbox from Theme-UI](https://theme-ui.com/components/checkbox/).
  *
  * **Note: Requires a label. It's recommended to use `CheckboxField` for a complete solution.**
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(CheckboxBase, _extends({

package/lib/components/Checkbox/Checkbox.styles.js

@@ -1,4 +1,5 @@
 // Styles for default checkbox and variants go here.
+
 // Default checkbox
 export var checkbox = {
   color: 'active',