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

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

@@ -21,7 +21,7 @@ import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useState } from 'react';
 import EnvironmentBreadcrumb from './EnvironmentBreadcrumb';
-import { Item, Section, Chip, Box, Text } from '../../index';
+import { Item, Section, Badge, Box, Text } from '../../index';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import EnvironmentBreadcrumbReadme from './EnvironmentBreadcrumb.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -126,9 +126,9 @@ export var Default = function Default(args) {
     key: selectedEnvironment.name
   }, ___EmotionJSX(Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
     label: "SANDBOX",
-    variant: "variants.boxes.environmentChip",
+    variant: "environmentBadge",
     bg: "neutral.40"
   }) : null);
 
@@ -155,9 +155,9 @@ export var Default = function Default(args) {
     return ___EmotionJSX(Item, {
       key: name,
       textValue: name
-    }, name, isSandbox ? ___EmotionJSX(Chip, {
+    }, name, isSandbox ? ___EmotionJSX(Badge, {
       label: "SANDBOX",
-      variant: "variants.boxes.environmentChip",
+      variant: "environmentBadge",
       bg: "neutral.40"
     }) : null);
   });
@@ -238,9 +238,9 @@ export var WithSections = function WithSections() {
     key: selectedEnvironment.name
   }, ___EmotionJSX(Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
     label: "SANDBOX",
-    variant: "variants.boxes.environmentChip",
+    variant: "environmentBadge",
     bg: "neutral.40"
   }) : null);
 
@@ -270,9 +270,9 @@ export var WithSections = function WithSections() {
         textValue: itemName
       }, ___EmotionJSX(Box, {
         isRow: true
-      }, itemName, isSandbox ? ___EmotionJSX(Chip, {
+      }, itemName, isSandbox ? ___EmotionJSX(Badge, {
         label: "SANDBOX",
-        variant: "variants.boxes.environmentChip",
+        variant: "environmentBadge",
         bg: "neutral.40"
       }) : null));
     });
@@ -297,9 +297,9 @@ export var DefaultOpen = function DefaultOpen() {
     key: selectedEnvironment.name
   }, ___EmotionJSX(Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
     label: "SANDBOX",
-    variant: "variants.boxes.environmentChip",
+    variant: "environmentBadge",
     bg: "neutral.40"
   }) : null);
 
@@ -327,9 +327,9 @@ export var DefaultOpen = function DefaultOpen() {
     return ___EmotionJSX(Item, {
       key: name,
       textValue: name
-    }, name, isSandbox ? ___EmotionJSX(Chip, {
+    }, name, isSandbox ? ___EmotionJSX(Badge, {
       label: "SANDBOX",
-      variant: "variants.boxes.environmentChip",
+      variant: "environmentBadge",
       bg: "neutral.40"
     }) : null);
   });
@@ -353,9 +353,9 @@ export var ControlledMenu = function ControlledMenu() {
     key: selectedEnvironment.name
   }, ___EmotionJSX(Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
     label: "SANDBOX",
-    variant: "variants.boxes.environmentChip",
+    variant: "environmentBadge",
     bg: "neutral.40"
   }) : null);
 
@@ -384,14 +384,14 @@ export var ControlledMenu = function ControlledMenu() {
     return ___EmotionJSX(Item, {
       key: name,
       textValue: name
-    }, name, isSandbox ? ___EmotionJSX(Chip, {
+    }, name, isSandbox ? ___EmotionJSX(Badge, {
       label: "SANDBOX",
-      variant: "variants.boxes.environmentChip",
+      variant: "environmentBadge",
       bg: "neutral.40"
     }) : null);
   });
 };
-export var RightAlignedChips = function RightAlignedChips(args) {
+export var RightAlignedBadges = function RightAlignedBadges(args) {
   var _useState13 = useState({
     name: 'Snail',
     isSandbox: true
@@ -404,9 +404,9 @@ export var RightAlignedChips = function RightAlignedChips(args) {
     isRow: true
   }, ___EmotionJSX(Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
     label: "SANDBOX",
-    variant: "variants.boxes.environmentChip",
+    variant: "environmentBadge",
     bg: "neutral.40"
   }) : null);
 
@@ -462,9 +462,9 @@ export var RightAlignedChips = function RightAlignedChips(args) {
     return ___EmotionJSX(Item, {
       key: name,
       textValue: name
-    }, name, isSandbox ? ___EmotionJSX(Chip, {
+    }, name, isSandbox ? ___EmotionJSX(Badge, {
       label: "SANDBOX",
-      variant: "variants.boxes.environmentChip",
+      variant: "environmentBadge",
       bg: "neutral.40",
       align: "right"
     }) : null);

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

@@ -17,11 +17,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import React from 'react';
-import userEvent from '@testing-library/user-event';
-import { Section } from '@react-stately/collections';
 import { axe } from 'jest-axe';
+import userEvent from '@testing-library/user-event';
 import { render, screen, within } from '../../utils/testUtils/testWrapper';
-import { EnvironmentBreadcrumb, Item, OverlayProvider } from '../../index';
+import { EnvironmentBreadcrumb, Item, OverlayProvider, Section } from '../../index';
 import { breadCrumbDataIds } from './EnvironmentBreadcrumb';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testEnvBreadcrumb = 'test-env-breadcrumb';

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

@@ -0,0 +1,49 @@
+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 { text } from '../Button/Buttons.styles';
+var button = {
+  current: _objectSpread(_objectSpread({}, 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({}, text), {}, {
+    color: 'neutral.10',
+    fontSize: 'md',
+    fontWeight: 0,
+    justifyContent: 'start'
+  })
+};
+export default {
+  button: button
+};

package/lib/components/FieldHelperText/FieldHelperText.js

@@ -28,7 +28,7 @@ var FieldHelperText = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(Text, _extends({
     ref: ref,
     pt: "sm",
-    variant: "fieldHelperText",
+    variant: "variants.fieldHelperText.title",
     role: status === 'error' ? 'alert' : 'status',
     id: id
   }, others, {

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

@@ -12,14 +12,28 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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.
+import { base, wordWrap } from '../Text/Text.styles';
 
-export var textarea = _objectSpread(_objectSpread({}, input), {}, {
-  height: 'unset',
-  '&.is-unresizable': {
-    resize: 'none'
+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/FileInputField/FileInputField.js

@@ -23,13 +23,13 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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 { useDropzone } from 'react-dropzone';
 import PropTypes from 'prop-types';
-import { mergeProps } from '@react-aria/utils';
+import { mergeProps, useVisuallyHidden } from 'react-aria';
+import { useDropzone } from 'react-dropzone';
 import { v4 as uuidv4 } from 'uuid';
 import { Box, Input, FieldHelperText, Label, Loader } from '../../';
 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';
@@ -78,7 +78,8 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isDisabled: isDisabled
   }, nonAriaProps)),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var helperTextId = uuidv4();
@@ -184,14 +185,16 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
     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,7 +217,7 @@ 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,
 
@@ -285,7 +288,7 @@ FileInputField.propTypes = _objectSpread({
 
   /** 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

@@ -19,6 +19,7 @@ import { v4 as uuidv4 } from 'uuid';
 import FileInputField from './';
 import { Box } from '../../';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -31,7 +32,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -85,7 +86,7 @@ export default {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 var fitContentWidthSx = {
   width: 'fit-content'

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

@@ -0,0 +1,58 @@
+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/FileItem.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { useCallback, useRef } from 'react';
-import InsertDriveFileIcon from 'mdi-react/InsertDriveFileIcon';
-import ErrorIcon from 'mdi-react/ErrorIcon';
-import DeleteIcon from 'mdi-react/DeleteIcon';
 import PropTypes from 'prop-types';
-import { useVisuallyHidden } from '@react-aria/visually-hidden';
+import DeleteIcon from 'mdi-react/DeleteIcon';
+import ErrorIcon from 'mdi-react/ErrorIcon';
+import InsertDriveFileIcon from 'mdi-react/InsertDriveFileIcon';
+import { useVisuallyHidden } from 'react-aria';
 import { Box, Button, IconButton, Icon, Text } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -59,7 +59,7 @@ var FileItem = function FileItem(props) {
   }, getFileIconProps(), {
     isDisabled: isDisabled
   })), ___EmotionJSX(Button, {
-    variant: "fileInputField",
+    variant: "forms.fileInputField.button",
     mx: 5,
     isDisabled: isDisabled,
     "aria-label": name,

package/lib/components/FileInputField/FileSelect.js

@@ -38,7 +38,7 @@ var FileSelect = function FileSelect(_ref) {
     mx: 15,
     my: 5,
     onPress: handleFileSelect,
-    variant: "fileInputField"
+    variant: "forms.fileInputField.button"
   }, ariaProps), ___EmotionJSX(Text, _extends({
     color: "active"
   }, textProps), buttonText));

package/lib/components/HelpHint/HelpHint.js

@@ -33,12 +33,11 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     direction: "top"
   }, others, tooltipProps), ___EmotionJSX(IconButton, _extends({
-    variant: "helpHint",
+    variant: "hintButton",
     "aria-label": "label help hint",
-    "data-testid": "help-hint__button"
-  }, iconButtonProps, {
+    "data-testid": "help-hint__button",
     "aria-describedby": tooltipId
-  }), ___EmotionJSX(Icon, {
+  }, iconButtonProps), ___EmotionJSX(Icon, {
     icon: HelpIcon
   })), ___EmotionJSX(Tooltip, _extends({}, tooltipProps, {
     role: "tooltip",

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

@@ -0,0 +1,53 @@
+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 { defaultFocus } from '../Button/Buttons.styles';
+export 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({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20',
+    color: 'white'
+  },
+  ':focus': {
+    outline: 'none'
+  }
+};
+export default {
+  hintButton: hintButton
+};

package/lib/components/IconButton/IconButton.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "title", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "isDisabled"];
+var _excluded = ["children", "className", "title", "variant", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "isDisabled"];
 
 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; }
 
@@ -17,11 +17,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useRef, useImperativeHandle, useContext } from 'react';
 import PropTypes from 'prop-types';
+import { mergeProps, useButton, useFocusRing } from 'react-aria';
 import { IconButton as ThemeUIIconButton } from 'theme-ui';
-import { useButton } from '@react-aria/button';
-import { useFocusRing } from '@react-aria/focus';
 import { Pressable, useHover } from '@react-aria/interactions';
-import { mergeProps } from '@react-aria/utils';
 import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
 import { BadgeContext } from '../../context/BadgeContext';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
@@ -39,6 +37,7 @@ var IconButton = /*#__PURE__*/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,
@@ -91,6 +90,7 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }
   }, mergeProps(buttonProps, others, hoverProps, focusProps), {
+    variant: "iconButtons.".concat(variant),
     onPointerOver: hoverProps.onPointerEnter
   }), children);
 
@@ -148,7 +148,7 @@ IconButton.propTypes = {
   isDisabled: PropTypes.bool
 };
 IconButton.defaultProps = {
-  variant: 'iconButton',
+  variant: 'base',
   isDisabled: false
 };
 IconButton.displayName = 'Icon Button';

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

@@ -39,9 +39,9 @@ export default {
     variant: {
       control: {
         type: 'select',
-        options: ['iconButton', 'inverted', 'square', 'invertedSquare']
+        options: ['base', 'inverted', 'invertedSquare', 'square']
       },
-      defaultValue: 'iconButton'
+      defaultValue: 'base'
     },
     size: {
       control: {