@pingux/astro 1.42.2 → 2.0.0-alpha.4

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

@@ -1,61 +1,43 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
-
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
-
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
-
 var _testWrapper = require("../../utils/testUtils/testWrapper");
-
 var _ = _interopRequireDefault(require("."));
-
-var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-
 var _react2 = require("@emotion/react");
-
 var testId = 'test-field';
 var children = 'example text';
 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 ? _testWrapper.render : _ref$renderFn;
-
+    _ref$renderFn = _ref.renderFn,
+    renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
   return renderFn((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, 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.
 (0, _testAxe["default"])(getComponent);
 test('basic field message', function () {
   getComponent();
-
   var fieldHelperText = _testWrapper.screen.getByText(children);
-
   expect(fieldHelperText).toHaveAttribute('data-testid', testId);
   expect(fieldHelperText).toHaveClass("is-".concat(_statuses["default"].DEFAULT));
   expect(fieldHelperText).toBeInTheDocument();
 });
 test('status field message', function () {
   var _context;
-
   var _getComponent = getComponent(),
-      rerender = _getComponent.rerender;
-
+    rerender = _getComponent.rerender;
   var fieldHelperText = _testWrapper.screen.getByText(children);
-
   (0, _forEach["default"])(_context = (0, _values["default"])(_statuses["default"])).call(_context, function (status) {
     getComponent({
       status: status

package/lib/cjs/components/FieldHelperText/index.js

@@ -1,18 +1,14 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _FieldHelperText["default"];
   }
 });
-
 var _FieldHelperText = _interopRequireDefault(require("./FieldHelperText"));

package/lib/cjs/components/FileInputField/FileInputField.js

@@ -1,142 +1,93 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-
 var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-
 var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-
 var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-
 var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = void 0;
-
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
-
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
-
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
 var _url = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/url"));
-
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _visuallyHidden = require("@react-aria/visually-hidden");
-
+var _reactAria = require("react-aria");
 var _reactDropzone = require("react-dropzone");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _utils = require("@react-aria/utils");
-
 var _uuid = require("uuid");
-
-var _ = require("../../");
-
+var _ = require("../..");
+var _useField2 = _interopRequireDefault(require("../../hooks/useField"));
+var _useStatusClasses3 = _interopRequireDefault(require("../../hooks/useStatusClasses"));
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
-
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
 var _FileItem = _interopRequireDefault(require("./FileItem"));
-
 var _FileSelect = _interopRequireDefault(require("./FileSelect"));
-
-var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-
-var _useField2 = _interopRequireDefault(require("../../hooks/useField"));
-
-var _useStatusClasses3 = _interopRequireDefault(require("../../hooks/useStatusClasses"));
-
 var _react2 = require("@emotion/react");
-
 var _excluded = ["defaultButtonText", "defaultFileList", "fileList", "helperText", "isDisabled", "isLoading", "isMultiple", "onFileSelect", "onRemove", "status", "textProps"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(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) { (0, _defineProperty2["default"])(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; }
-
 /**
  * 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.
  * */
+
 var FileInputField = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(_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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var _useState = (0, _react.useState)(defaultFileList || []),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      uploadedFiles = _useState2[0],
-      setUploadedFiles = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    uploadedFiles = _useState2[0],
+    setUploadedFiles = _useState2[1];
   var inputRef = (0, _react.useRef)();
   /* istanbul ignore next */
-
   (0, _react.useImperativeHandle)(ref, function () {
     return inputRef.current;
   });
-
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
-      ariaProps = _getAriaAttributeProp.ariaProps,
-      nonAriaProps = _getAriaAttributeProp.nonAriaProps;
-
+    ariaProps = _getAriaAttributeProp.ariaProps,
+    nonAriaProps = _getAriaAttributeProp.nonAriaProps;
   var _useField = (0, _useField2["default"])(_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 = (0, _uuid.v4)();
-
-  var _useVisuallyHidden = (0, _visuallyHidden.useVisuallyHidden)(),
-      visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
-
+  var _useVisuallyHidden = (0, _reactAria.useVisuallyHidden)(),
+    visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
   var handleFileSelect = (0, _react.useCallback)(function () {
     inputRef.current.value = null;
     inputRef.current.click();
@@ -145,13 +96,10 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (onFileSelect) {
       onFileSelect(event, newFiles);
     }
-
     var arrayWithNewFiles = (0, _from["default"])(newFiles);
-
     if (!isMultiple) {
       arrayWithNewFiles = (0, _slice["default"])(arrayWithNewFiles).call(arrayWithNewFiles, 0, 1);
     }
-
     var newFilesWithIdAndLink = (0, _map["default"])(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
       return {
         fileObj: newFile,
@@ -161,11 +109,9 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         status: _statuses["default"].DEFAULT
       };
     });
-
     if (isMultiple) {
       setUploadedFiles(function (prevFiles) {
         var _context;
-
         return (0, _concat["default"])(_context = []).call(_context, prevFiles, newFilesWithIdAndLink);
       });
     } else {
@@ -175,16 +121,14 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var onDrop = (0, _react.useCallback)(function (acceptedFiles, fileRejections, event) {
     handleFileUpload(event, acceptedFiles);
   }, [handleFileUpload]);
-
   var _useDropzone = (0, _reactDropzone.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 = (0, _react.useCallback)(function (event) {
     handleFileUpload(event, event.target.files);
   }, [handleFileUpload]);
@@ -192,7 +136,6 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (onRemove) {
       onRemove(e, fileId);
     }
-
     setUploadedFiles(function (prevFiles) {
       return (0, _filter["default"])(prevFiles).call(prevFiles, function (_ref2) {
         var id = _ref2.id;
@@ -202,11 +145,9 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, [onRemove]);
   var filesListNode = (0, _react.useMemo)(function () {
     var filesToRender = uploadedFilesImperative || uploadedFiles;
-
     if (!(filesToRender !== null && filesToRender !== void 0 && filesToRender.length)) {
       return null;
     }
-
     return (0, _map["default"])(filesToRender).call(filesToRender, function (fileProps) {
       return (0, _react2.jsx)(_FileItem["default"], (0, _extends2["default"])({
         handleFileDelete: handleFileDelete,
@@ -217,32 +158,30 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       }, fileProps));
     });
   }, [uploadedFilesImperative, uploadedFiles, handleFileDelete, isDisabled, isLoading, textProps]);
-
   var _useStatusClasses = (0, _useStatusClasses3["default"])('fileInputFieldWrapper', (0, _defineProperty2["default"])({
-    isDragActive: isDragActive,
-    isLoading: isLoading
-  }, "is-".concat(status), true)),
-      classNames = _useStatusClasses.classNames;
-
+      isDragActive: isDragActive,
+      isLoading: isLoading
+    }, "is-".concat(status), true)),
+    classNames = _useStatusClasses.classNames;
   var shouldFileSelectRender = (0, _react.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 (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    variant: "boxes.fileInputFieldWrapper"
-  }, (0, _utils.mergeProps)(fieldContainerProps, nonAriaProps), {
+  return (0, _react2.jsx)(_.Box, {
+    fieldContainerProps: fieldContainerProps
+  }, (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    variant: "forms.fileInputField.wrapper"
+  }, (0, _reactAria.mergeProps)(fieldControlWrapperProps, nonAriaProps), {
     className: classNames
   }, getRootProps(), {
     // to pass accessibility test, this removes focusable dependents
     role: "none"
-  }), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({}, (0, _utils.mergeProps)(visuallyHiddenProps, fieldControlProps, getInputProps()), {
+  }), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(visuallyHiddenProps, fieldControlInputProps, getInputProps()), {
     "aria-label": "File Input",
     multiple: isMultiple,
     onChange: handleOnChange,
@@ -265,28 +204,21 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, helperText));
 });
 FileInputField.displayName = 'FileInputField';
-FileInputField.propTypes = _objectSpread({
+FileInputField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: _propTypes["default"].node,
-
   /** Text rendered below the input. */
   helperText: _propTypes["default"].node,
-
   /** Determines the component border status color indicator and helper text styling. */
   status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
-
   /** Default button text that will be changed on the file name once file is uploaded */
   defaultButtonText: _propTypes["default"].string,
-
   /** Defines whether input can accept multiple files or not */
   isMultiple: _propTypes["default"].bool,
-
   /** Determines whether the loading indicator is shown. */
   isLoading: _propTypes["default"].bool,
-
   /** Whether the field is disabled. */
   isDisabled: _propTypes["default"].bool,
-
   /** Array of objects for uploaded files.
    * Objects should have the following structure:
    *
@@ -312,7 +244,6 @@ FileInputField.propTypes = _objectSpread({
     downloadLink: _propTypes["default"].string,
     status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
   })),
-
   /** Default array of objects for uploaded files. */
   defaultFileList: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     fileObj: _propTypes["default"].shape({}),
@@ -321,22 +252,19 @@ FileInputField.propTypes = _objectSpread({
     downloadLink: _propTypes["default"].string,
     status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
   })),
-
   /** The handler that is called when the input files is uploaded.
    *
    * `(event, files) => void`
    * */
   onFileSelect: _propTypes["default"].func,
-
   /** The handler that is called when an uploaded file got removed.
    *
    * `(fileId) => void`
    * */
   onRemove: _propTypes["default"].func,
-
   /** These props will be spread to the field text component. */
   textProps: _propTypes["default"].shape({})
-}, _ariaAttributes.ariaAttributesBasePropTypes);
+}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
 FileInputField.defaultProps = {
   defaultButtonText: 'Select a file',
   status: _statuses["default"].DEFAULT

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

@@ -1,64 +1,38 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-
 var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-
 var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-
 var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-
 var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.WithCustomWidth = exports.ErrorWithMultipleFiles = exports.ErrorStatusSingleFile = exports.DefaultFileListUncontrolled = exports.Default = exports.CustomButtonText = exports.ControlledState = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _uuid = require("uuid");
-
-var _ = _interopRequireDefault(require("./"));
-
-var _2 = require("../../");
-
-var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
-
+var _ = require("../..");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+var _2 = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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) { (0, _defineProperty2["default"])(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; }
-
 var _default = {
   title: 'Form/FileInputField',
-  component: _["default"],
+  component: _2["default"],
   parameters: {
     docs: {
       source: {
@@ -66,7 +40,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -120,46 +94,38 @@ var _default = {
         type: 'none'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 var fitContentWidthSx = {
   width: 'fit-content'
 };
-
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_2["default"], (0, _extends2["default"])({
     sx: fitContentWidthSx
   }, args));
 };
-
 exports.Default = Default;
-
 var CustomButtonText = function CustomButtonText() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_2["default"], {
     defaultButtonText: "Original Button Name",
     label: "Custom Button Text",
     sx: fitContentWidthSx
   });
 };
-
 exports.CustomButtonText = CustomButtonText;
-
 var ControlledState = function ControlledState() {
   var _useState = (0, _react.useState)([]),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      userFiles = _useState2[0],
-      setUserFiles = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    userFiles = _useState2[0],
+    setUserFiles = _useState2[1];
   var _useState3 = (0, _react.useState)(),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      error = _useState4[0],
-      setError = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_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 {
@@ -170,15 +136,14 @@ 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 (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_2["default"], {
     label: "Controlled State With limit on file size upload below 2 mb",
     onFileSelect: handleFileSelect,
     onRemove: handleFileRemove,
@@ -188,11 +153,9 @@ var ControlledState = function ControlledState() {
     helperText: error
   });
 };
-
 exports.ControlledState = ControlledState;
-
 var DefaultFileListUncontrolled = function DefaultFileListUncontrolled() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_2["default"], {
     defaultFileList: [{
       id: 'test-id1',
       name: 'PingId Mobile (Android)',
@@ -211,11 +174,9 @@ var DefaultFileListUncontrolled = function DefaultFileListUncontrolled() {
     sx: fitContentWidthSx
   });
 };
-
 exports.DefaultFileListUncontrolled = DefaultFileListUncontrolled;
-
 var ErrorStatusSingleFile = function ErrorStatusSingleFile() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_2["default"], {
     defaultFileList: [{
       id: 'test-id3',
       name: 'PingId Desktop (Windows)',
@@ -228,11 +189,9 @@ var ErrorStatusSingleFile = function ErrorStatusSingleFile() {
     status: _statuses["default"].ERROR
   });
 };
-
 exports.ErrorStatusSingleFile = ErrorStatusSingleFile;
-
 var ErrorWithMultipleFiles = function ErrorWithMultipleFiles() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_2["default"], {
     defaultFileList: [{
       id: 'test-id3',
       name: 'PingId Desktop (Windows)',
@@ -249,18 +208,16 @@ var ErrorWithMultipleFiles = function ErrorWithMultipleFiles() {
     isMultiple: true
   });
 };
-
 exports.ErrorWithMultipleFiles = ErrorWithMultipleFiles;
-
 var WithCustomWidth = function WithCustomWidth() {
   var textSx = {
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     whiteSpace: 'nowrap'
   };
-  return (0, _react2.jsx)(_2.Box, {
+  return (0, _react2.jsx)(_.Box, {
     width: 200
-  }, (0, _react2.jsx)(_["default"], {
+  }, (0, _react2.jsx)(_2["default"], {
     defaultButtonText: "Long Long Button Text With A Lot of Words In It",
     defaultFileList: [{
       id: 'test-id1',
@@ -274,5 +231,4 @@ var WithCustomWidth = function WithCustomWidth() {
     isMultiple: true
   }));
 };
-
 exports.WithCustomWidth = WithCustomWidth;