@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/FieldHelperText/FieldHelperText.js

@@ -8,27 +8,25 @@ import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
 import Text from '../Text';
+
 /**
  * Displays a styled message.
  *
  * **NOTE**: Specialized field components contain built-in support for helper text. It's
  * recommended to use those instead of a standalone `FieldHelperText`.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var FieldHelperText = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
-      status = props.status,
-      id = props.id,
-      others = _objectWithoutProperties(props, _excluded);
-
+    status = props.status,
+    id = props.id,
+    others = _objectWithoutProperties(props, _excluded);
   var _useStatusClasses = useStatusClasses(className, _defineProperty({}, "is-".concat(status), true)),
-      classNames = _useStatusClasses.classNames;
-
+    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Text, _extends({
     ref: ref,
     pt: "sm",
-    variant: "fieldHelperText",
+    variant: "variants.fieldHelperText.title",
     role: status === 'error' ? 'alert' : 'status',
     id: id
   }, others, {
@@ -38,7 +36,6 @@ var FieldHelperText = /*#__PURE__*/forwardRef(function (props, ref) {
 FieldHelperText.propTypes = {
   /** Determines the color of the field message. */
   status: PropTypes.oneOf(_Object$values(statuses)),
-
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string
 };

package/lib/components/FieldHelperText/FieldHelperText.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import FieldHelperText from '.';
 import statuses from '../../utils/devUtils/constants/statuses';
+import FieldHelperText from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/Base Components/FieldHelperText',

package/lib/{styles/forms/textarea.js → components/FieldHelperText/FieldHelperText.styles.js}

@@ -7,19 +7,28 @@ 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 { input } from './input'; // Styles for default input and variants go here.
-
-export var textarea = _objectSpread(_objectSpread({}, input), {}, {
-  height: 'unset',
-  '&.is-unresizable': {
-    resize: 'none'
+import { base, wordWrap } from '../Text/Text.styles';
+var title = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
+  fontSize: 'sm',
+  '&.is-default': {
+    color: 'text.secondary'
   },
-  '.is-float-label &': {
-    height: 'unset'
+  '&.is-error': {
+    color: 'critical.dark'
+  },
+  '&.is-success': {
+    color: 'success.dark'
+  },
+  '&.is-warning': {
+    color: 'warning.dark'
+  },
+  '.is-left-label > &': {
+    gridRowEnd: 3,
+    gridColumnEnd: 3
   }
-});
+});
+export default {
+  title: title
+};

package/lib/components/FieldHelperText/FieldHelperText.test.js

@@ -2,10 +2,10 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React from 'react';
+import statuses from '../../utils/devUtils/constants/statuses';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import FieldHelperText from '.';
-import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-field';
 var children = 'example text';
@@ -13,18 +13,15 @@ var defaultProps = {
   'data-testid': testId,
   children: children
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$renderFn = _ref.renderFn,
-      renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
-
+    _ref$renderFn = _ref.renderFn,
+    renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
   return renderFn(___EmotionJSX(FieldHelperText, _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('basic field message', function () {
   getComponent();
@@ -35,12 +32,9 @@ test('basic field message', function () {
 });
 test('status field message', function () {
   var _context;
-
   var _getComponent = getComponent(),
-      rerender = _getComponent.rerender;
-
+    rerender = _getComponent.rerender;
   var fieldHelperText = screen.getByText(children);
-
   _forEachInstanceProperty(_context = _Object$values(statuses)).call(_context, function (status) {
     getComponent({
       status: status

package/lib/components/FileInputField/FileInputField.js

@@ -17,75 +17,65 @@ import _URL from "@babel/runtime-corejs3/core-js-stable/url";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 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 _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, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { useVisuallyHidden } from '@react-aria/visually-hidden';
+import { mergeProps, useVisuallyHidden } from 'react-aria';
 import { useDropzone } from 'react-dropzone';
 import PropTypes from 'prop-types';
-import { mergeProps } from '@react-aria/utils';
 import { v4 as uuidv4 } from 'uuid';
-import { Box, Input, FieldHelperText, Label, Loader } from '../../';
+import { Box, FieldHelperText, Input, Label, Loader } from '../..';
+import useField from '../../hooks/useField';
+import useStatusClasses from '../../hooks/useStatusClasses';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import FileItem from './FileItem';
 import FileSelect from './FileSelect';
-import statuses from '../../utils/devUtils/constants/statuses';
-import useField from '../../hooks/useField';
-import useStatusClasses from '../../hooks/useStatusClasses';
+
 /**
  * The FileInputField component allows users to upload one or more files by
  * clicking the button or via drag and drop.
  *
  * We utilize [react-dropzone](https://react-dropzone.js.org/) for the drag and drop functionality.
  * */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var defaultButtonText = _ref.defaultButtonText,
-      defaultFileList = _ref.defaultFileList,
-      uploadedFilesImperative = _ref.fileList,
-      helperText = _ref.helperText,
-      isDisabled = _ref.isDisabled,
-      isLoading = _ref.isLoading,
-      isMultiple = _ref.isMultiple,
-      onFileSelect = _ref.onFileSelect,
-      onRemove = _ref.onRemove,
-      status = _ref.status,
-      textProps = _ref.textProps,
-      others = _objectWithoutProperties(_ref, _excluded);
-
+    defaultFileList = _ref.defaultFileList,
+    uploadedFilesImperative = _ref.fileList,
+    helperText = _ref.helperText,
+    isDisabled = _ref.isDisabled,
+    isLoading = _ref.isLoading,
+    isMultiple = _ref.isMultiple,
+    onFileSelect = _ref.onFileSelect,
+    onRemove = _ref.onRemove,
+    status = _ref.status,
+    textProps = _ref.textProps,
+    others = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(defaultFileList || []),
-      _useState2 = _slicedToArray(_useState, 2),
-      uploadedFiles = _useState2[0],
-      setUploadedFiles = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    uploadedFiles = _useState2[0],
+    setUploadedFiles = _useState2[1];
   var inputRef = useRef();
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
-
   var _getAriaAttributeProp = getAriaAttributeProps(others),
-      ariaProps = _getAriaAttributeProp.ariaProps,
-      nonAriaProps = _getAriaAttributeProp.nonAriaProps;
-
+    ariaProps = _getAriaAttributeProp.ariaProps,
+    nonAriaProps = _getAriaAttributeProp.nonAriaProps;
   var _useField = useField(_objectSpread({
-    status: status,
-    isDisabled: isDisabled
-  }, nonAriaProps)),
-      fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
-      fieldLabelProps = _useField.fieldLabelProps;
-
+      status: status,
+      isDisabled: isDisabled
+    }, nonAriaProps)),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
   var helperTextId = uuidv4();
-
   var _useVisuallyHidden = useVisuallyHidden(),
-      visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
-
+    visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
   var handleFileSelect = useCallback(function () {
     inputRef.current.value = null;
     inputRef.current.click();
@@ -94,13 +84,10 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (onFileSelect) {
       onFileSelect(event, newFiles);
     }
-
     var arrayWithNewFiles = _Array$from(newFiles);
-
     if (!isMultiple) {
       arrayWithNewFiles = _sliceInstanceProperty(arrayWithNewFiles).call(arrayWithNewFiles, 0, 1);
     }
-
     var newFilesWithIdAndLink = _mapInstanceProperty(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
       return {
         fileObj: newFile,
@@ -110,11 +97,9 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
         status: statuses.DEFAULT
       };
     });
-
     if (isMultiple) {
       setUploadedFiles(function (prevFiles) {
         var _context;
-
         return _concatInstanceProperty(_context = []).call(_context, prevFiles, newFilesWithIdAndLink);
       });
     } else {
@@ -124,16 +109,14 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onDrop = useCallback(function (acceptedFiles, fileRejections, event) {
     handleFileUpload(event, acceptedFiles);
   }, [handleFileUpload]);
-
   var _useDropzone = useDropzone({
-    onDrop: onDrop,
-    noKeyboard: true,
-    disabled: isDisabled || isLoading
-  }),
-      getRootProps = _useDropzone.getRootProps,
-      getInputProps = _useDropzone.getInputProps,
-      isDragActive = _useDropzone.isDragActive;
-
+      onDrop: onDrop,
+      noKeyboard: true,
+      disabled: isDisabled || isLoading
+    }),
+    getRootProps = _useDropzone.getRootProps,
+    getInputProps = _useDropzone.getInputProps,
+    isDragActive = _useDropzone.isDragActive;
   var handleOnChange = useCallback(function (event) {
     handleFileUpload(event, event.target.files);
   }, [handleFileUpload]);
@@ -141,7 +124,6 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (onRemove) {
       onRemove(e, fileId);
     }
-
     setUploadedFiles(function (prevFiles) {
       return _filterInstanceProperty(prevFiles).call(prevFiles, function (_ref2) {
         var id = _ref2.id;
@@ -151,11 +133,9 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [onRemove]);
   var filesListNode = useMemo(function () {
     var filesToRender = uploadedFilesImperative || uploadedFiles;
-
     if (!(filesToRender !== null && filesToRender !== void 0 && filesToRender.length)) {
       return null;
     }
-
     return _mapInstanceProperty(filesToRender).call(filesToRender, function (fileProps) {
       return ___EmotionJSX(FileItem, _extends({
         handleFileDelete: handleFileDelete,
@@ -166,32 +146,30 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }, fileProps));
     });
   }, [uploadedFilesImperative, uploadedFiles, handleFileDelete, isDisabled, isLoading, textProps]);
-
   var _useStatusClasses = useStatusClasses('fileInputFieldWrapper', _defineProperty({
-    isDragActive: isDragActive,
-    isLoading: isLoading
-  }, "is-".concat(status), true)),
-      classNames = _useStatusClasses.classNames;
-
+      isDragActive: isDragActive,
+      isLoading: isLoading
+    }, "is-".concat(status), true)),
+    classNames = _useStatusClasses.classNames;
   var shouldFileSelectRender = useCallback(function () {
     var isFileUploaded;
-
     if (uploadedFilesImperative) {
       isFileUploaded = Boolean(uploadedFilesImperative === null || uploadedFilesImperative === void 0 ? void 0 : uploadedFilesImperative.length);
     } else {
       isFileUploaded = Boolean(uploadedFiles === null || uploadedFiles === void 0 ? void 0 : uploadedFiles.length);
     }
-
     return isMultiple || !isFileUploaded;
   }, [uploadedFiles, uploadedFilesImperative, isMultiple]);
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
-    variant: "boxes.fileInputFieldWrapper"
-  }, mergeProps(fieldContainerProps, nonAriaProps), {
+  return ___EmotionJSX(Box, {
+    fieldContainerProps: fieldContainerProps
+  }, ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
+    variant: "forms.fileInputField.wrapper"
+  }, mergeProps(fieldControlWrapperProps, nonAriaProps), {
     className: classNames
   }, getRootProps(), {
     // to pass accessibility test, this removes focusable dependents
     role: "none"
-  }), ___EmotionJSX(Input, _extends({}, mergeProps(visuallyHiddenProps, fieldControlProps, getInputProps()), {
+  }), ___EmotionJSX(Input, _extends({}, mergeProps(visuallyHiddenProps, fieldControlInputProps, getInputProps()), {
     "aria-label": "File Input",
     multiple: isMultiple,
     onChange: handleOnChange,
@@ -214,28 +192,21 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, helperText));
 });
 FileInputField.displayName = 'FileInputField';
-FileInputField.propTypes = _objectSpread({
+FileInputField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
-
   /** Text rendered below the input. */
   helperText: PropTypes.node,
-
   /** Determines the component border status color indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses)),
-
   /** Default button text that will be changed on the file name once file is uploaded */
   defaultButtonText: PropTypes.string,
-
   /** Defines whether input can accept multiple files or not */
   isMultiple: PropTypes.bool,
-
   /** Determines whether the loading indicator is shown. */
   isLoading: PropTypes.bool,
-
   /** Whether the field is disabled. */
   isDisabled: PropTypes.bool,
-
   /** Array of objects for uploaded files.
    * Objects should have the following structure:
    *
@@ -261,7 +232,6 @@ FileInputField.propTypes = _objectSpread({
     downloadLink: PropTypes.string,
     status: PropTypes.oneOf(_Object$values(statuses))
   })),
-
   /** Default array of objects for uploaded files. */
   defaultFileList: PropTypes.arrayOf(PropTypes.shape({
     fileObj: PropTypes.shape({}),
@@ -270,22 +240,19 @@ FileInputField.propTypes = _objectSpread({
     downloadLink: PropTypes.string,
     status: PropTypes.oneOf(_Object$values(statuses))
   })),
-
   /** The handler that is called when the input files is uploaded.
    *
    * `(event, files) => void`
    * */
   onFileSelect: PropTypes.func,
-
   /** The handler that is called when an uploaded file got removed.
    *
    * `(fileId) => void`
    * */
   onRemove: PropTypes.func,
-
   /** These props will be spread to the field text component. */
   textProps: PropTypes.shape({})
-}, ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 FileInputField.defaultProps = {
   defaultButtonText: 'Select a file',
   status: statuses.DEFAULT

package/lib/components/FileInputField/FileInputField.stories.js

@@ -9,17 +9,15 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 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 React, { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import FileInputField from './';
-import { Box } from '../../';
-import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { Box } from '../..';
 import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
+import FileInputField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/FileInputField',
@@ -31,7 +29,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -85,7 +83,7 @@ export default {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 var fitContentWidthSx = {
   width: 'fit-content'
@@ -104,19 +102,16 @@ export var CustomButtonText = function CustomButtonText() {
 };
 export var ControlledState = function ControlledState() {
   var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      userFiles = _useState2[0],
-      setUserFiles = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    userFiles = _useState2[0],
+    setUserFiles = _useState2[1];
   var _useState3 = useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      error = _useState4[0],
-      setError = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    error = _useState4[0],
+    setError = _useState4[1];
   var handleFileSelect = function handleFileSelect(event, files) {
     // this is approximate conversion just for an example
     var uploadedFileSizeMb = files[0].size / 1e6;
-
     if (uploadedFileSizeMb > 2) {
       setError('Only files under 2 MB can be uploaded.');
     } else {
@@ -127,14 +122,13 @@ export var ControlledState = function ControlledState() {
       }]);
       setError(null);
     }
-  }; // you would want to handle this differently in case you have multiple files
-
+  };
 
+  // you would want to handle this differently in case you have multiple files
   var handleFileRemove = function handleFileRemove() {
     setUserFiles([]);
     setError(null);
   };
-
   return ___EmotionJSX(FileInputField, {
     label: "Controlled State With limit on file size upload below 2 mb",
     onFileSelect: handleFileSelect,

package/lib/components/FileInputField/FileInputField.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';
+var wrapper = {
+  display: 'flex',
+  border: '1px dashed',
+  borderColor: 'active',
+  padding: '10px 0',
+  '&.is-drag-active': {
+    backgroundColor: 'accent.95'
+  },
+  '&.is-error': {
+    borderColor: 'critical.dark'
+  },
+  '&.is-success': {
+    borderColor: 'success.dark'
+  },
+  '&.is-warning': {
+    borderColor: 'warning.dark'
+  },
+  '&.is-loading': {
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+};
+var button = {
+  background: 'none',
+  cursor: 'pointer',
+  '& span': {
+    textAlign: 'initial'
+  },
+  '&:focus-visible': {
+    outline: 'none'
+  },
+  '&.is-hovered, &.is-pressed': {
+    cursor: 'pointer',
+    '& span': {
+      textDecoration: 'underline'
+    }
+  },
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
+};
+export default {
+  wrapper: wrapper,
+  button: button
+};

package/lib/components/FileInputField/FileInputField.test.js

@@ -8,18 +8,15 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-
 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 _URL from "@babel/runtime-corejs3/core-js-stable/url";
 import React from 'react';
-import userEvent from '@testing-library/user-event';
 import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import statuses from '../../utils/devUtils/constants/statuses';
 import axeTest from '../../utils/testUtils/testAxe';
 import FileInputField from './FileInputField';
-import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var fileInputFieldTestId = 'file-input-test-id';
 var testLabel = 'file-input-test-label';
@@ -57,11 +54,9 @@ beforeAll(function () {
 afterAll(function () {
   _URL.createObjectURL = originalValue;
 });
-
 var getComponent = function getComponent(props) {
   return render(___EmotionJSX(FileInputField, _extends({}, defaultProps, props)));
 };
-
 axeTest(getComponent);
 test('should render file input field component by default', function () {
   getComponent();