@pingux/astro 1.42.0-alpha.0 → 2.0.0-alpha.1

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

@@ -0,0 +1,78 @@
+"use strict";
+
+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 _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _Buttons = require("../Button/Buttons.styles");
+
+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 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({}, _Buttons.focusWithCroppedOutline)
+};
+var _default = {
+  wrapper: wrapper,
+  button: button
+};
+exports["default"] = _default;

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

@@ -22,15 +22,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _InsertDriveFileIcon = _interopRequireDefault(require("mdi-react/InsertDriveFileIcon"));
-
-var _ErrorIcon = _interopRequireDefault(require("mdi-react/ErrorIcon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _DeleteIcon = _interopRequireDefault(require("mdi-react/DeleteIcon"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ErrorIcon = _interopRequireDefault(require("mdi-react/ErrorIcon"));
+
+var _InsertDriveFileIcon = _interopRequireDefault(require("mdi-react/InsertDriveFileIcon"));
 
-var _visuallyHidden = require("@react-aria/visually-hidden");
+var _reactAria = require("react-aria");
 
 var _index = require("../../index");
 
@@ -55,7 +55,7 @@ var FileItem = function FileItem(props) {
     return handleFileDelete(e, id);
   }, [id, handleFileDelete]);
 
-  var _useVisuallyHidden = (0, _visuallyHidden.useVisuallyHidden)(),
+  var _useVisuallyHidden = (0, _reactAria.useVisuallyHidden)(),
       visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
 
   var downloadRef = (0, _react.useRef)();
@@ -91,7 +91,7 @@ var FileItem = function FileItem(props) {
   }, getFileIconProps(), {
     isDisabled: isDisabled
   })), (0, _react2.jsx)(_index.Button, {
-    variant: "fileInputField",
+    variant: "forms.fileInputField.button",
     mx: 5,
     isDisabled: isDisabled,
     "aria-label": name,

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

@@ -63,7 +63,7 @@ var FileSelect = function FileSelect(_ref) {
     mx: 15,
     my: 5,
     onPress: handleFileSelect,
-    variant: "fileInputField"
+    variant: "forms.fileInputField.button"
   }, ariaProps), (0, _react2.jsx)(_.Text, (0, _extends2["default"])({
     color: "active"
   }, textProps), buttonText));

package/lib/cjs/components/HelpHint/HelpHint.js

@@ -63,12 +63,11 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref,
     direction: "top"
   }, others, tooltipProps), (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
-    variant: "helpHint",
+    variant: "hintButton",
     "aria-label": "label help hint",
-    "data-testid": "help-hint__button"
-  }, iconButtonProps, {
+    "data-testid": "help-hint__button",
     "aria-describedby": tooltipId
-  }), (0, _react2.jsx)(_Icon["default"], {
+  }, iconButtonProps), (0, _react2.jsx)(_Icon["default"], {
     icon: HelpIcon
   })), (0, _react2.jsx)(_TooltipTrigger.Tooltip, (0, _extends2["default"])({}, tooltipProps, {
     role: "tooltip",

package/lib/cjs/components/HelpHint/HelpHint.styles.js

@@ -0,0 +1,74 @@
+"use strict";
+
+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 _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.hintButton = exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _Buttons = require("../Button/Buttons.styles");
+
+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 hintButton = {
+  bg: 'neutral.90',
+  borderColor: 'active',
+  mt: 'auto',
+  mb: 'auto',
+  ml: '5px',
+  maxWidth: '13px',
+  maxHeight: '14px',
+  borderRadius: '5.5px',
+  'svg': {
+    'height': '100%',
+    mb: 0.75
+  },
+  'path': {
+    fill: 'neutral.20'
+  },
+  '&.is-hovered': {
+    bg: 'accent.20',
+    borderColor: 'accent.20',
+    'path': {
+      fill: 'white'
+    },
+    color: 'white',
+    boxShadow: 'standard'
+  },
+  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
+  '&.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20',
+    color: 'white'
+  },
+  ':focus': {
+    outline: 'none'
+  }
+};
+exports.hintButton = hintButton;
+var _default = {
+  hintButton: hintButton
+};
+exports["default"] = _default;

package/lib/cjs/components/IconButton/IconButton.js

@@ -38,16 +38,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _themeUi = require("theme-ui");
-
-var _button = require("@react-aria/button");
+var _reactAria = require("react-aria");
 
-var _focus = require("@react-aria/focus");
+var _themeUi = require("theme-ui");
 
 var _interactions = require("@react-aria/interactions");
 
-var _utils = require("@react-aria/utils");
-
 var _hooks = require("../../hooks");
 
 var _BadgeContext = require("../../context/BadgeContext");
@@ -56,7 +52,7 @@ var _TooltipTrigger = _interopRequireWildcard(require("../TooltipTrigger"));
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "className", "title", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "isDisabled"];
+var _excluded = ["children", "className", "title", "variant", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "isDisabled"];
 
 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); }
 
@@ -78,6 +74,7 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
       className = props.className,
       title = props.title,
+      variant = props.variant,
       onPress = props.onPress,
       onPressStart = props.onPressStart,
       onPressEnd = props.onPressEnd,
@@ -92,7 +89,7 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return buttonRef.current;
   });
 
-  var _useButton = (0, _button.useButton)(_objectSpread({}, props), buttonRef),
+  var _useButton = (0, _reactAria.useButton)(_objectSpread({}, props), buttonRef),
       buttonProps = _useButton.buttonProps,
       isPressed = _useButton.isPressed;
 
@@ -103,7 +100,7 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       hoverProps = _useHover.hoverProps,
       isHovered = _useHover.isHovered;
 
-  var _useFocusRing = (0, _focus.useFocusRing)(),
+  var _useFocusRing = (0, _reactAria.useFocusRing)(),
       isFocusVisible = _useFocusRing.isFocusVisible,
       focusProps = _useFocusRing.focusProps;
 
@@ -127,7 +124,8 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         fill: chipBg
       }
     }
-  }, (0, _utils.mergeProps)(buttonProps, others, hoverProps, focusProps), {
+  }, (0, _reactAria.mergeProps)(buttonProps, others, hoverProps, focusProps), {
+    variant: "iconButtons.".concat(variant),
     onPointerOver: hoverProps.onPointerEnter
   }), children);
 
@@ -185,7 +183,7 @@ IconButton.propTypes = {
   isDisabled: _propTypes["default"].bool
 };
 IconButton.defaultProps = {
-  variant: 'iconButton',
+  variant: 'base',
   isDisabled: false
 };
 IconButton.displayName = 'Icon Button';

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

@@ -60,9 +60,9 @@ var _default = {
     variant: {
       control: {
         type: 'select',
-        options: ['iconButton', 'inverted', 'square', 'invertedSquare']
+        options: ['base', 'inverted', 'invertedSquare', 'square']
       },
-      defaultValue: 'iconButton'
+      defaultValue: 'base'
     },
     size: {
       control: {

package/lib/cjs/components/IconButton/IconButton.styles.js

@@ -0,0 +1,194 @@
+"use strict";
+
+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 _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.square = exports["default"] = exports.base = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _Buttons = require("../Button/Buttons.styles");
+
+var _CollapsiblePanel = require("../CollapsiblePanel/CollapsiblePanel.styles");
+
+var _CopyText = require("../CopyText/CopyText.styles");
+
+var _HelpHint = require("../HelpHint/HelpHint.styles");
+
+var _Badge = require("../Badge/Badge.styles");
+
+var _Modal = require("../Modal/Modal.styles");
+
+var _Message = require("../Messages/Message.styles");
+
+var _Tooltip = require("../TooltipTrigger/Tooltip.styles");
+
+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 base = {
+  justifyContent: 'center',
+  appearance: 'none',
+  alignItems: 'center',
+  alignSelf: 'baseline',
+  display: 'inline-flex !important',
+  flexGrow: 0,
+  flexShrink: 0,
+  borderRadius: '100%',
+  cursor: 'pointer',
+  bg: 'transparent',
+  p: '3px',
+  width: 'inherit',
+  height: 'inherit',
+  path: {
+    fill: 'neutral.40'
+  },
+  outline: 'none',
+  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
+  '&.is-hovered': {
+    bg: 'accent.95'
+  },
+  '&.is-pressed': {
+    'path': {
+      fill: 'white'
+    },
+    bg: 'active'
+  }
+};
+exports.base = base;
+var bidirectional = {
+  border: '1px solid',
+  outline: 'none',
+  height: '24px',
+  width: '24px',
+  color: 'active',
+  borderRadius: '12px',
+  borderColor: 'active',
+  '&.is-hovered': {
+    color: 'accent.40',
+    borderColor: 'accent.40'
+  },
+  '&.is-pressed': {
+    color: 'accent.20',
+    borderColor: 'accent.20'
+  },
+  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus)
+};
+
+var inverted = _objectSpread(_objectSpread({}, base), {}, {
+  bg: 'active',
+  borderColor: 'active',
+  'path': {
+    fill: 'white'
+  },
+  '&.is-hovered': {
+    bg: 'accent.40',
+    borderColor: 'accent.40',
+    color: 'white',
+    boxShadow: 'standard'
+  },
+  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
+  '&.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20',
+    color: 'white'
+  }
+});
+
+var invertedSquare = _objectSpread(_objectSpread({}, inverted), {}, {
+  borderRadius: '2px'
+});
+
+var square = _objectSpread(_objectSpread({}, base), {}, {
+  borderRadius: '2px'
+});
+
+exports.square = square;
+
+var svgIconButton = _objectSpread(_objectSpread({}, base), {}, {
+  path: {
+    fill: 'default'
+  }
+});
+/**
+ * Recipe related variants below
+ */
+
+
+var applicationPortal = _objectSpread(_objectSpread({}, base), {}, {
+  background: 'transparent',
+  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
+  '&.is-hovered': {
+    'path': {
+      fill: 'active'
+    }
+  },
+  '&.is-pressed': {
+    'path': {
+      fill: 'active'
+    }
+  }
+});
+
+var applicationPortalPinned = _objectSpread(_objectSpread({}, base), {}, {
+  'path': {
+    fill: 'success.bright'
+  },
+  background: 'transparent',
+  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
+  '&.is-hovered': {
+    'path': {
+      fill: 'active'
+    }
+  },
+  '&.is-pressed': {
+    'path': {
+      fill: 'active'
+    }
+  }
+});
+
+var _default = {
+  base: base,
+  bidirectional: bidirectional,
+  badge: {
+    deleteButton: _Badge.deleteButton
+  },
+  badgeWithSlotDeleteButton: _Badge.badgeWithSlotDeleteButton,
+  copyButton: _CopyText.copyButton,
+  hintButton: _objectSpread(_objectSpread({}, base), _HelpHint.hintButton),
+  inverted: inverted,
+  messageCloseButton: _objectSpread(_objectSpread({}, base), _Message.messageCloseButton),
+  modalCloseButton: _objectSpread(_objectSpread({}, base), _Modal.modalCloseButton),
+  invertedSquare: invertedSquare,
+  square: square,
+  svgIconButton: svgIconButton,
+  toggle: _CollapsiblePanel.toggle,
+  tooltip: {
+    button: _objectSpread(_objectSpread({}, base), _Tooltip.button)
+  },
+  // Recipe related variants
+  applicationPortal: applicationPortal,
+  applicationPortalPinned: applicationPortalPinned
+};
+exports["default"] = _default;

package/lib/cjs/components/ImageUploadField/ImagePreviewButton.js

@@ -22,18 +22,16 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _ImageFilterHdrIcon = _interopRequireDefault(require("mdi-react/ImageFilterHdrIcon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _CameraAltIcon = _interopRequireDefault(require("mdi-react/CameraAltIcon"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ImageFilterHdrIcon = _interopRequireDefault(require("mdi-react/ImageFilterHdrIcon"));
 
-var _utils = require("@react-aria/utils");
+var _reactAria = require("react-aria");
 
 var _interactions = require("@react-aria/interactions");
 
-var _focus = require("@react-aria/focus");
-
 var _index = require("../../index");
 
 var _Loader = _interopRequireDefault(require("../Loader"));
@@ -64,7 +62,7 @@ var ImagePreviewButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     return buttonRef.current;
   });
 
-  var _useFocusRing = (0, _focus.useFocusRing)(),
+  var _useFocusRing = (0, _reactAria.useFocusRing)(),
       focusProps = _useFocusRing.focusProps,
       isFocusVisible = _useFocusRing.isFocusVisible;
 
@@ -121,11 +119,11 @@ var ImagePreviewButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     sx: widthHeightSx
   }, hoverProps), (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     ref: buttonRef,
-    variant: "imageUpload",
+    variant: "variants.imageUpload.button",
     sx: widthHeightSx,
     "data-testid": "image-preview-button",
     "aria-label": "Image preview"
-  }, (0, _utils.mergeProps)(focusProps, others)), previewImage && isImageType ? imagePreview : noImagePreview, isLoading && loadingPreview, (isHovered || isFocusVisible) && !isLoading && hoveredPreview));
+  }, (0, _reactAria.mergeProps)(focusProps, others)), previewImage && isImageType ? imagePreview : noImagePreview, isLoading && loadingPreview, (isHovered || isFocusVisible) && !isLoading && hoveredPreview));
 });
 ImagePreviewButton.propTypes = {
   defaultPreviewImage: _propTypes["default"].string,

package/lib/cjs/components/ImageUploadField/ImageUploadField.js

@@ -46,6 +46,8 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _ImagePreviewButton = _interopRequireDefault(require("./ImagePreviewButton"));
 
 var _ImageUploadFieldBase = _interopRequireDefault(require("./ImageUploadFieldBase"));
@@ -138,7 +140,7 @@ var ImageUploadField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     id: statusId
   }, state.isMenuOpen && 'Menu pop up expanded'));
 });
-ImageUploadField.propTypes = _objectSpread({
+ImageUploadField.propTypes = _objectSpread(_objectSpread({
   /** Image preview (controlled), used to represent the current image state. */
   previewImage: _propTypes["default"].string,
 
@@ -187,7 +189,7 @@ ImageUploadField.propTypes = _objectSpread({
 
   /** Determines the helper text styling. */
   status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
-}, _ariaAttributes.ariaAttributesBasePropTypes);
+}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
 ImageUploadField.defaultProps = {
   fileTypes: ['image'],
   loaderSize: 10,

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

@@ -46,6 +46,8 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _react2 = require("@emotion/react");
@@ -68,7 +70,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     previewImage: {
       control: {
         type: 'text'
@@ -125,7 +127,7 @@ var _default = {
       },
       defaultValue: _statuses["default"].DEFAULT
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 

package/lib/cjs/components/ImageUploadField/ImageUploadFieldBase.js

@@ -36,11 +36,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _omit = _interopRequireDefault(require("lodash/omit"));
 
-var _visuallyHidden = require("@react-aria/visually-hidden");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactAria = require("react-aria");
 
 var _index = require("../../index");
 
@@ -80,12 +80,13 @@ var ImageUploadFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props,
 
   var _useField = (0, _useField2["default"])(_objectSpread({}, (0, _omit["default"])(props, ['onRemove']))),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var labelRef = (0, _react.useRef)();
 
-  var _useVisuallyHidden = (0, _visuallyHidden.useVisuallyHidden)(),
+  var _useVisuallyHidden = (0, _reactAria.useVisuallyHidden)(),
       visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
 
   var acceptableInputTypes = (0, _react.useMemo)(function () {
@@ -100,14 +101,14 @@ var ImageUploadFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   })), (0, _react2.jsx)(_index.PopoverMenu, {
     isOpen: isMenuOpen,
     onOpenChange: handleOpenMenuChange
-  }, children), (0, _react2.jsx)(_Input["default"], (0, _extends2["default"])({}, fieldControlProps, visuallyHiddenProps, {
+  }, children), (0, _react2.jsx)(_Box["default"], fieldControlWrapperProps, (0, _react2.jsx)(_Input["default"], (0, _extends2["default"])({}, fieldControlInputProps, visuallyHiddenProps, {
     accept: acceptableInputTypes,
     "data-testid": "image-upload-input",
     onChange: handleInputChange,
     ref: inputRef,
     type: "file",
     value: ""
-  })), !isImageType && (0, _react2.jsx)(_FieldHelperText["default"], {
+  }))), !isImageType && (0, _react2.jsx)(_FieldHelperText["default"], {
     status: _statuses["default"].DEFAULT
   }, fileName), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
     status: status