@pingux/astro 1.42.0 → 2.0.0-alpha.1

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

@@ -26,7 +26,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithSections = exports.RightAlignedChips = exports.OrgLevel = exports.DefaultOpen = exports.Default = exports.ControlledMenu = void 0;
+exports["default"] = exports.WithSections = exports.RightAlignedBadges = exports.OrgLevel = exports.DefaultOpen = exports.Default = exports.ControlledMenu = void 0;
 
 var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
 
@@ -169,9 +169,9 @@ var Default = function Default(args) {
     key: selectedEnvironment.name
   }, (0, _react2.jsx)(_index.Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
     label: "SANDBOX",
-    variant: "variants.boxes.environmentChip",
+    variant: "environmentBadge",
     bg: "neutral.40"
   }) : null);
 
@@ -198,9 +198,9 @@ var Default = function Default(args) {
     return (0, _react2.jsx)(_index.Item, {
       key: name,
       textValue: name
-    }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
+    }, name, isSandbox ? (0, _react2.jsx)(_index.Badge, {
       label: "SANDBOX",
-      variant: "variants.boxes.environmentChip",
+      variant: "environmentBadge",
       bg: "neutral.40"
     }) : null);
   });
@@ -281,9 +281,9 @@ var WithSections = function WithSections() {
     key: selectedEnvironment.name
   }, (0, _react2.jsx)(_index.Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
     label: "SANDBOX",
-    variant: "variants.boxes.environmentChip",
+    variant: "environmentBadge",
     bg: "neutral.40"
   }) : null);
   return (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], {
@@ -312,9 +312,9 @@ var WithSections = function WithSections() {
         textValue: itemName
       }, (0, _react2.jsx)(_index.Box, {
         isRow: true
-      }, itemName, isSandbox ? (0, _react2.jsx)(_index.Chip, {
+      }, itemName, isSandbox ? (0, _react2.jsx)(_index.Badge, {
         label: "SANDBOX",
-        variant: "variants.boxes.environmentChip",
+        variant: "environmentBadge",
         bg: "neutral.40"
       }) : null));
     });
@@ -345,9 +345,9 @@ var DefaultOpen = function DefaultOpen() {
     key: selectedEnvironment.name
   }, (0, _react2.jsx)(_index.Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
     label: "SANDBOX",
-    variant: "variants.boxes.environmentChip",
+    variant: "environmentBadge",
     bg: "neutral.40"
   }) : null);
 
@@ -375,9 +375,9 @@ var DefaultOpen = function DefaultOpen() {
     return (0, _react2.jsx)(_index.Item, {
       key: name,
       textValue: name
-    }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
+    }, name, isSandbox ? (0, _react2.jsx)(_index.Badge, {
       label: "SANDBOX",
-      variant: "variants.boxes.environmentChip",
+      variant: "environmentBadge",
       bg: "neutral.40"
     }) : null);
   });
@@ -404,9 +404,9 @@ var ControlledMenu = function ControlledMenu() {
     key: selectedEnvironment.name
   }, (0, _react2.jsx)(_index.Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
     label: "SANDBOX",
-    variant: "variants.boxes.environmentChip",
+    variant: "environmentBadge",
     bg: "neutral.40"
   }) : null);
 
@@ -435,9 +435,9 @@ var ControlledMenu = function ControlledMenu() {
     return (0, _react2.jsx)(_index.Item, {
       key: name,
       textValue: name
-    }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
+    }, name, isSandbox ? (0, _react2.jsx)(_index.Badge, {
       label: "SANDBOX",
-      variant: "variants.boxes.environmentChip",
+      variant: "environmentBadge",
       bg: "neutral.40"
     }) : null);
   });
@@ -445,7 +445,7 @@ var ControlledMenu = function ControlledMenu() {
 
 exports.ControlledMenu = ControlledMenu;
 
-var RightAlignedChips = function RightAlignedChips(args) {
+var RightAlignedBadges = function RightAlignedBadges(args) {
   var _useState13 = (0, _react.useState)({
     name: 'Snail',
     isSandbox: true
@@ -458,9 +458,9 @@ var RightAlignedChips = function RightAlignedChips(args) {
     isRow: true
   }, (0, _react2.jsx)(_index.Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
     label: "SANDBOX",
-    variant: "variants.boxes.environmentChip",
+    variant: "environmentBadge",
     bg: "neutral.40"
   }) : null);
 
@@ -516,13 +516,13 @@ var RightAlignedChips = function RightAlignedChips(args) {
     return (0, _react2.jsx)(_index.Item, {
       key: name,
       textValue: name
-    }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
+    }, name, isSandbox ? (0, _react2.jsx)(_index.Badge, {
       label: "SANDBOX",
-      variant: "variants.boxes.environmentChip",
+      variant: "environmentBadge",
       bg: "neutral.40",
       align: "right"
     }) : null);
   });
 };
 
-exports.RightAlignedChips = RightAlignedChips;
+exports.RightAlignedBadges = RightAlignedBadges;

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

@@ -32,12 +32,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireDefault(require("react"));
 
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-
-var _collections = require("@react-stately/collections");
-
 var _jestAxe = require("jest-axe");
 
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 
 var _index = require("../../index");
@@ -119,7 +117,7 @@ var getSectionsComponent = function getSectionsComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.EnvironmentBreadcrumb, (0, _extends2["default"])({}, defaultWithSectionsProps, props), function (section) {
     return (// eslint-disable-next-line testing-library/no-node-access
-      (0, _react2.jsx)(_collections.Section, {
+      (0, _react2.jsx)(_index.Section, {
         key: section.key,
         name: section.name,
         title: section.name,

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentalBreadcrumb.styles.js

@@ -0,0 +1,69 @@
+"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 button = {
+  current: _objectSpread(_objectSpread({}, _Buttons.text), {}, {
+    color: 'neutral.30',
+    fontSize: 'md',
+    fontWeight: 1,
+    padding: '4px',
+    '&.is-hovered': {
+      color: 'active',
+      textDecoration: 'none',
+      boxShadow: 'none'
+    },
+    '&.is-focused': {
+      outline: '1px solid',
+      outlineColor: 'focus',
+      outlineOffset: '1px'
+    },
+    '&:focus-visible': {
+      outline: 'none'
+    },
+    '&.is-pressed': {
+      color: 'accent.20',
+      textDecoration: 'none'
+    }
+  }),
+  selectItem: _objectSpread(_objectSpread({}, _Buttons.text), {}, {
+    color: 'neutral.10',
+    fontSize: 'md',
+    fontWeight: 0,
+    justifyContent: 'start'
+  })
+};
+var _default = {
+  button: button
+};
+exports["default"] = _default;

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

@@ -60,7 +60,7 @@ var FieldHelperText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   return (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
     ref: ref,
     pt: "sm",
-    variant: "fieldHelperText",
+    variant: "variants.fieldHelperText.title",
     role: status === 'error' ? 'alert' : 'status',
     id: id
   }, others, {

package/lib/cjs/{styles/variants/bidirectionalIconButton.js → components/FieldHelperText/FieldHelperText.styles.js}

@@ -26,29 +26,33 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _buttons = require("./buttons");
+var _Text = require("../Text/Text.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 bidirectionalIconButton = {
-  border: '1px solid',
-  outline: 'none',
-  height: '24px',
-  width: '24px',
-  color: 'active',
-  borderRadius: '12px',
-  borderColor: 'active',
-  '&.is-hovered': {
-    color: 'accent.40',
-    borderColor: 'accent.40'
+var title = _objectSpread(_objectSpread(_objectSpread({}, _Text.base), _Text.wordWrap), {}, {
+  fontSize: 'sm',
+  '&.is-default': {
+    color: 'text.secondary'
   },
-  '&.is-pressed': {
-    color: 'accent.20',
-    borderColor: 'accent.20'
+  '&.is-error': {
+    color: 'critical.dark'
   },
-  '&.is-focused': _objectSpread({}, _buttons.defaultFocus)
+  '&.is-success': {
+    color: 'success.dark'
+  },
+  '&.is-warning': {
+    color: 'warning.dark'
+  },
+  '.is-left-label > &': {
+    gridRowEnd: 3,
+    gridColumnEnd: 3
+  }
+});
+
+var _default = {
+  title: title
 };
-var _default = bidirectionalIconButton;
 exports["default"] = _default;

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

@@ -52,13 +52,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _visuallyHidden = require("@react-aria/visually-hidden");
-
-var _reactDropzone = require("react-dropzone");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _utils = require("@react-aria/utils");
+var _reactAria = require("react-aria");
+
+var _reactDropzone = require("react-dropzone");
 
 var _uuid = require("uuid");
 
@@ -66,6 +64,8 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _FileItem = _interopRequireDefault(require("./FileItem"));
 
 var _FileSelect = _interopRequireDefault(require("./FileSelect"));
@@ -129,12 +129,13 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     isDisabled: isDisabled
   }, nonAriaProps)),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var helperTextId = (0, _uuid.v4)();
 
-  var _useVisuallyHidden = (0, _visuallyHidden.useVisuallyHidden)(),
+  var _useVisuallyHidden = (0, _reactAria.useVisuallyHidden)(),
       visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
 
   var handleFileSelect = (0, _react.useCallback)(function () {
@@ -235,14 +236,16 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
     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,7 +268,7 @@ 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,
 
@@ -336,7 +339,7 @@ FileInputField.propTypes = _objectSpread({
 
   /** 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

@@ -44,6 +44,8 @@ var _2 = 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");
@@ -66,7 +68,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -120,7 +122,7 @@ var _default = {
         type: 'none'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 var fitContentWidthSx = {

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;