@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/ImageUploadField/ImageUploadFieldBase.js

@@ -9,45 +9,35 @@ 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 _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { forwardRef, useMemo, useRef } from 'react';
-import PropTypes from 'prop-types';
+import { useVisuallyHidden } from 'react-aria';
 import omit from 'lodash/omit';
-import { useVisuallyHidden } from '@react-aria/visually-hidden';
-import { PopoverMenu } from '../../index';
+import PropTypes from 'prop-types';
+import { Box, FieldHelperText, Input, Label, PopoverMenu } from '../..';
 import useField from '../../hooks/useField';
-import FieldHelperText from '../FieldHelperText';
-import Input from '../Input';
-import Box from '../Box';
-import Label from '../Label';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ImageUploadFieldBase = /*#__PURE__*/forwardRef(function (props, inputRef) {
   var children = props.children,
-      fileName = props.fileName,
-      fileTypes = props.fileTypes,
-      handleInputChange = props.handleInputChange,
-      handleLabelClick = props.handleLabelClick,
-      handleOpenMenuChange = props.handleOpenMenuChange,
-      helperText = props.helperText,
-      isImageType = props.isImageType,
-      isMenuOpen = props.isMenuOpen,
-      status = props.status;
-
+    fileName = props.fileName,
+    fileTypes = props.fileTypes,
+    handleInputChange = props.handleInputChange,
+    handleLabelClick = props.handleLabelClick,
+    handleOpenMenuChange = props.handleOpenMenuChange,
+    helperText = props.helperText,
+    isImageType = props.isImageType,
+    isMenuOpen = props.isMenuOpen,
+    status = props.status;
   var _useField = useField(_objectSpread({}, omit(props, ['onRemove']))),
-      fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
-      fieldLabelProps = _useField.fieldLabelProps;
-
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
   var labelRef = useRef();
-
   var _useVisuallyHidden = useVisuallyHidden(),
-      visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
-
+    visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
   var acceptableInputTypes = useMemo(function () {
     return "".concat(fileTypes === null || fileTypes === void 0 ? void 0 : fileTypes.join('/*, '), "/*");
   }, [fileTypes]);
@@ -60,14 +50,14 @@ var ImageUploadFieldBase = /*#__PURE__*/forwardRef(function (props, inputRef) {
   })), ___EmotionJSX(PopoverMenu, {
     isOpen: isMenuOpen,
     onOpenChange: handleOpenMenuChange
-  }, children), ___EmotionJSX(Input, _extends({}, fieldControlProps, visuallyHiddenProps, {
+  }, children), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Input, _extends({}, fieldControlInputProps, visuallyHiddenProps, {
     accept: acceptableInputTypes,
     "data-testid": "image-upload-input",
     onChange: handleInputChange,
     ref: inputRef,
     type: "file",
     value: ""
-  })), !isImageType && ___EmotionJSX(FieldHelperText, {
+  }))), !isImageType && ___EmotionJSX(FieldHelperText, {
     status: statuses.DEFAULT
   }, fileName), helperText && ___EmotionJSX(FieldHelperText, {
     status: status

package/lib/components/ImageUploadField/imageUpload.js

@@ -0,0 +1,44 @@
+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 { base, defaultFocus } from '../Button/Buttons.styles';
+var hoveredPreview = {
+  wrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute'
+  },
+  shaded: {
+    opacity: 0.3,
+    backgroundColor: '#000',
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    borderRadius: 2
+  }
+};
+var button = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 0,
+  backgroundColor: 'accent.99',
+  border: '2px solid',
+  borderColor: 'neutral.40',
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    borderColor: 'neutral.40'
+  })
+});
+export default {
+  hoveredPreview: hoveredPreview,
+  button: button
+};

package/lib/components/Input/Input.js

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["name", "placeholder", "maxLength"];
 import _Number$isInteger from "@babel/runtime-corejs3/core-js-stable/number/is-integer";
 import React, { forwardRef } from 'react';
-import { Input as ThemeUIInput } from 'theme-ui';
 import PropTypes from 'prop-types';
+import { Input as ThemeUIInput } from 'theme-ui';
 import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
 /**
  * Base input component.
@@ -14,14 +14,12 @@ import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
  *
  * **Note**: It's recommended to use a more specific field component when possible.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Input = /*#__PURE__*/forwardRef(function (props, ref) {
   var name = props.name,
-      placeholder = props.placeholder,
-      maxLength = props.maxLength,
-      others = _objectWithoutProperties(props, _excluded);
-
+    placeholder = props.placeholder,
+    maxLength = props.maxLength,
+    others = _objectWithoutProperties(props, _excluded);
   return ___EmotionJSX(ThemeUIInput, _extends({
     ref: ref,
     name: name,
@@ -33,19 +31,14 @@ Input.displayName = 'Input';
 Input.propTypes = {
   /** Defines a string value that labels the current element. */
   'aria-label': PropTypes.string,
-
   /** Id of input. */
   id: PropTypes.string,
-
   /** Name of input. */
   name: PropTypes.string,
-
   /** Max length of input value */
   maxLength: isValidPositiveInt,
-
   /** Type of input. Accepts most [HTML input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types) */
   type: PropTypes.string,
-
   /** Placeholder for the input */
   placeholder: PropTypes.string
 };

package/lib/{styles/forms/input.js → components/Input/Input.styles.js}

@@ -7,22 +7,21 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
-var _input$container;
-
+var _input$fieldControlWr, _objectSpread2;
 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 '../variants/text';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { defaultFocus } from '../variants/buttons'; // Styles for default input and variants go here.
+import { defaultFocus } from '../Button/Buttons.styles';
+import { text } from '../Text/Text.styles';
+
+// Styles for default input and variants go here.
 
 var activeFloatLabel = {
   pt: 'md',
   pb: 'xs'
-}; // Default input styling
+};
 
+// Default input styling
 export var input = _objectSpread(_objectSpread({}, text.inputValue), {}, {
   appearance: 'none',
   boxSizing: 'border-box',
@@ -67,8 +66,9 @@ export var input = _objectSpread(_objectSpread({}, text.inputValue), {}, {
   '&.is-error': {
     borderColor: 'critical.bright'
   }
-}); // Example variant input
+});
 
+// Example variant input
 input.large = _objectSpread(_objectSpread({}, input), {}, {
   lineHeight: '2em',
   height: '4em'
@@ -86,7 +86,7 @@ input.small = _objectSpread(_objectSpread({}, input), {}, {
   pl: 'sm',
   pr: 'sm'
 });
-input.wrapper = {
+input.fieldContainer = {
   position: 'relative',
   '&.is-left-label': {
     display: 'inline-grid',
@@ -95,9 +95,10 @@ input.wrapper = {
   '> .is-default': {
     width: '100%'
   }
-}; // Used to give a blue left border to inputs
+};
 
-input.container = (_input$container = {
+// Used to give a blue left border to inputs
+input.fieldControlWrapper = (_input$fieldControlWr = {
   position: 'relative',
   height: 'max-content',
   '> input': {
@@ -148,25 +149,25 @@ input.container = (_input$container = {
       display: 'none'
     }
   }
-}, _defineProperty(_input$container, "&.is-".concat(statuses.ERROR, "::after"), {
+}, _defineProperty(_input$fieldControlWr, "&.is-".concat(statuses.ERROR, "::after"), {
   bg: 'critical.bright'
-}), _defineProperty(_input$container, "&.is-".concat(statuses.SUCCESS, "::after"), {
+}), _defineProperty(_input$fieldControlWr, "&.is-".concat(statuses.SUCCESS, "::after"), {
   bg: 'success.bright'
-}), _defineProperty(_input$container, "&.is-".concat(statuses.WARNING, "::after"), {
+}), _defineProperty(_input$fieldControlWr, "&.is-".concat(statuses.WARNING, "::after"), {
   bg: 'warning.bright'
-}), _input$container);
+}), _input$fieldControlWr);
 input.containedIcon = {
   position: 'absolute',
   right: 0,
   top: '50%',
   transform: 'translate(-50%, -50%)'
 };
-input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {}, {
+input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.fieldControlWrapper), {}, (_objectSpread2 = {
   bg: 'white',
   borderColor: 'neutral.80',
   borderStyle: 'solid',
   borderWidth: 1,
-  flexDirection: 'row!important',
+  flexDirection: 'row !important',
   flexWrap: 'wrap',
   left: 2,
   pt: 6,
@@ -204,7 +205,13 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
   '&.is-focused': _objectSpread({
     boxShadow: 'none'
   }, defaultFocus)
-});
+}, _defineProperty(_objectSpread2, "&.is-".concat(statuses.ERROR, "::after"), {
+  bg: 'critical.bright'
+}), _defineProperty(_objectSpread2, "&.is-".concat(statuses.SUCCESS, "::after"), {
+  bg: 'success.bright'
+}), _defineProperty(_objectSpread2, "&.is-".concat(statuses.WARNING, "::after"), {
+  bg: 'warning.bright'
+}), _objectSpread2));
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {
   pr: '28px'
 });

package/lib/components/Input/Input.test.js

@@ -2,21 +2,20 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import Input from '.';
 import axeTest from '../../utils/testUtils/testAxe';
+import Input from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-input';
 var defaultProps = {
   'data-testid': testId,
   'aria-label': 'My Input'
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Input, _extends({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('default input', function () {
   getComponent();

package/lib/components/Label/Label.js

@@ -3,26 +3,25 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 import _styled from "@emotion/styled/base";
 var _excluded = ["children", "className", "isDisabled", "isRequired", "mode", "requiredIndicator", "hintText", "helpHintProps"];
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-import { flexbox, layout } from 'styled-system';
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
+import { flexbox, layout } from 'styled-system';
 import { Label as ThemeUILabel } from 'theme-ui';
 import { usePropWarning, useStatusClasses } from '../../hooks';
-import { modes } from './constants';
 import Box from '../Box';
 import HelpHint from '../HelpHint';
+import { modes } from './constants';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var ExtendedLabel = /*#__PURE__*/_styled(ThemeUILabel, process.env.NODE_ENV === "production" ? {
   target: "e172msu10"
 } : {
   target: "e172msu10",
   label: "ExtendedLabel"
-})(layout, flexbox, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xhYmVsL0xhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVVzQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9MYWJlbC9MYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGZsZXhib3gsIGxheW91dCB9IGZyb20gJ3N0eWxlZC1zeXN0ZW0nO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgTGFiZWwgYXMgVGhlbWVVSUxhYmVsIH0gZnJvbSAndGhlbWUtdWknO1xuaW1wb3J0IHsgdXNlUHJvcFdhcm5pbmcsIHVzZVN0YXR1c0NsYXNzZXMgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5pbXBvcnQgeyBtb2RlcyB9IGZyb20gJy4vY29uc3RhbnRzJztcbmltcG9ydCBCb3ggZnJvbSAnLi4vQm94JztcbmltcG9ydCBIZWxwSGludCBmcm9tICcuLi9IZWxwSGludCc7XG5cbmNvbnN0IEV4dGVuZGVkTGFiZWwgPSBzdHlsZWQoVGhlbWVVSUxhYmVsKShsYXlvdXQsIGZsZXhib3gpO1xuXG5jb25zdCBkZWZhdWx0SW5kaWNhdG9yID0gKFxuICA8Qm94IHZhcmlhbnQ9XCJmb3Jtcy5sYWJlbC5pbmRpY2F0b3JcIj5cbiAgICAqXG4gIDwvQm94PlxuKTtcblxuLyoqXG4gKiBCYXNlIGxhYmVsIGZvciBhbiBpbnB1dC5cbiAqXG4gKiBBY2NlcHRzIG1vc3Qgb2YgdGhlIHN0eWxpbmcgcHJvcHMgZnJvbSBbc3R5bGVkLXN5c3RlbV0oaHR0cHM6Ly9zdHlsZWQtc3lzdGVtLmNvbS90YWJsZSkuXG4gKiBCdWlsdCBvbiB0b3Agb2YgdGhlIFtMYWJlbCBmcm9tIFRoZW1lLVVJXShodHRwczovL3RoZW1lLXVpLmNvbS9jb21wb25lbnRzL2xhYmVsKS5cbiAqXG4gKiAqKk5PVEUqKjogU3BlY2lhbGl6ZWQgZmllbGQgY29tcG9uZW50cyBjb250YWluIGJ1aWx0LWluIHN1cHBvcnQgZm9yIGxhYmVscy4gSXQnc1xuICogcmVjb21tZW5kZWQgdG8gdXNlIHRob3NlIGluc3RlYWQgb2YgYSBzdGFuZGFsb25lIGBMYWJlbGAuXG4gKi9cblxuY29uc3QgTGFiZWwgPSBmb3J3YXJkUmVmKChwcm9wcywgcmVmKSA9PiB7XG4gIGNvbnN0IHtcbiAgICBjaGlsZHJlbixcbiAgICBjbGFzc05hbWUsXG4gICAgaXNEaXNhYmxlZCxcbiAgICBpc1JlcXVpcmVkLFxuICAgIG1vZGUsXG4gICAgcmVxdWlyZWRJbmRpY2F0b3IsXG4gICAgaGludFRleHQsXG4gICAgaGVscEhpbnRQcm9wcyxcbiAgICAuLi5vdGhlcnNcbiAgfSA9IHByb3BzO1xuXG4gIHVzZVByb3BXYXJuaW5nKHByb3BzLCAnZGlzYWJsZWQnLCAnaXNEaXNhYmxlZCcpO1xuXG4gIGNvbnN0IHsgY2xhc3NOYW1lcyB9ID0gdXNlU3RhdHVzQ2xhc3NlcyhjbGFzc05hbWUsIHtcbiAgICBpc0Rpc2FibGVkLFxuICAgIGlzUmVxdWlyZWQsXG4gICAgaXNGbG9hdExhYmVsOiBtb2RlID09PSBtb2Rlcy5GTE9BVCxcbiAgICBpc0xlZnRMYWJlbDogbW9kZSA9PT0gbW9kZXMuTEVGVCxcbiAgfSk7XG5cbiAgcmV0dXJuIChcbiAgICA8RXh0ZW5kZWRMYWJlbFxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXN9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIHtcbiAgICAgICAgaXNSZXF1aXJlZFxuICAgICAgICAmJiAocmVxdWlyZWRJbmRpY2F0b3IgfHwgZGVmYXVsdEluZGljYXRvcilcbiAgICAgIH1cbiAgICAgIHtcbiAgICAgICAgaGludFRleHRcbiAgICAgICAgJiYgPEhlbHBIaW50IHsuLi5oZWxwSGludFByb3BzfT57aGludFRleHR9PC9IZWxwSGludD5cbiAgICAgIH1cbiAgICA8L0V4dGVuZGVkTGFiZWw+XG4gICk7XG59KTtcblxuTGFiZWwucHJvcFR5cGVzID0ge1xuICAvKiogV2hldGhlciB0aGUgbGFiZWwgaGFzIGRpc2FibGVkIHN0eWxpbmcgYXBwbGllZC4gKi9cbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLmJvb2wsXG4gIC8qKiBXaGV0aGVyIHRoZSBsYWJlbCBoYXMgcmVxdWlyZWQgaW5kaWNhdG9yIHN0eWxpbmcgYXBwbGllZC4gKi9cbiAgaXNSZXF1aXJlZDogUHJvcFR5cGVzLmJvb2wsXG4gIC8qKiBEZXRlcm1pbmVzIHRoZSBiZWhhdmlvciBwYXR0ZXJuIGZvciB0aGUgbGFiZWwuICovXG4gIG1vZGU6IFByb3BUeXBlcy5vbmVPZihPYmplY3QudmFsdWVzKG1vZGVzKSksXG4gIC8qKiBUaGUgdmlzdWFsIGNvbXBvbmVudCB1c2VkIHRvIG1hcmsgYW4gaW5wdXQgYXMgcmVxdWlyZWQgd2l0aGluIHRoZSBsYWJlbC4gKi9cbiAgcmVxdWlyZWRJbmRpY2F0b3I6IFByb3BUeXBlcy5ub2RlLFxuICAvKiogSWYgcHJlc2VudCB0aGlzIHByb3Agd2lsbCBjYXVzZSBhIGhlbHAgaGludCB0byByZW5kZXIgaW4gdGhlIGxhYmVsLiAqL1xuICBoaW50VGV4dDogUHJvcFR5cGVzLnN0cmluZyxcbiAgLyoqIFByb3BzIG9iamVjdCB0aGF0IGlzIHNwcmVhZCBkaXJlY3RseSBpbnRvIHRoZSBoZWxwaGludCBlbGVtZW50LiAqL1xuICBoZWxwSGludFByb3BzOiBQcm9wVHlwZXMuc2hhcGUoe30pLFxufTtcblxuTGFiZWwuZGVmYXVsdFByb3BzID0ge1xuICBtb2RlOiBtb2Rlcy5ERUZBVUxULFxufTtcblxuTGFiZWwuZGlzcGxheU5hbWUgPSAnTGFiZWwnO1xuZXhwb3J0IGRlZmF1bHQgTGFiZWw7XG4iXX0= */");
-
+})(layout, flexbox, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xhYmVsL0xhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlzQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9MYWJlbC9MYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGZsZXhib3gsIGxheW91dCB9IGZyb20gJ3N0eWxlZC1zeXN0ZW0nO1xuaW1wb3J0IHsgTGFiZWwgYXMgVGhlbWVVSUxhYmVsIH0gZnJvbSAndGhlbWUtdWknO1xuXG5pbXBvcnQgeyB1c2VQcm9wV2FybmluZywgdXNlU3RhdHVzQ2xhc3NlcyB9IGZyb20gJy4uLy4uL2hvb2tzJztcbmltcG9ydCBCb3ggZnJvbSAnLi4vQm94JztcbmltcG9ydCBIZWxwSGludCBmcm9tICcuLi9IZWxwSGludCc7XG5cbmltcG9ydCB7IG1vZGVzIH0gZnJvbSAnLi9jb25zdGFudHMnO1xuXG5jb25zdCBFeHRlbmRlZExhYmVsID0gc3R5bGVkKFRoZW1lVUlMYWJlbCkobGF5b3V0LCBmbGV4Ym94KTtcblxuY29uc3QgZGVmYXVsdEluZGljYXRvciA9IChcbiAgPEJveCB2YXJpYW50PVwiZm9ybXMubGFiZWwuaW5kaWNhdG9yXCI+XG4gICAgKlxuICA8L0JveD5cbik7XG5cbi8qKlxuICogQmFzZSBsYWJlbCBmb3IgYW4gaW5wdXQuXG4gKlxuICogQWNjZXB0cyBtb3N0IG9mIHRoZSBzdHlsaW5nIHByb3BzIGZyb20gW3N0eWxlZC1zeXN0ZW1dKGh0dHBzOi8vc3R5bGVkLXN5c3RlbS5jb20vdGFibGUpLlxuICogQnVpbHQgb24gdG9wIG9mIHRoZSBbTGFiZWwgZnJvbSBUaGVtZS1VSV0oaHR0cHM6Ly90aGVtZS11aS5jb20vY29tcG9uZW50cy9sYWJlbCkuXG4gKlxuICogKipOT1RFKio6IFNwZWNpYWxpemVkIGZpZWxkIGNvbXBvbmVudHMgY29udGFpbiBidWlsdC1pbiBzdXBwb3J0IGZvciBsYWJlbHMuIEl0J3NcbiAqIHJlY29tbWVuZGVkIHRvIHVzZSB0aG9zZSBpbnN0ZWFkIG9mIGEgc3RhbmRhbG9uZSBgTGFiZWxgLlxuICovXG5cbmNvbnN0IExhYmVsID0gZm9yd2FyZFJlZigocHJvcHMsIHJlZikgPT4ge1xuICBjb25zdCB7XG4gICAgY2hpbGRyZW4sXG4gICAgY2xhc3NOYW1lLFxuICAgIGlzRGlzYWJsZWQsXG4gICAgaXNSZXF1aXJlZCxcbiAgICBtb2RlLFxuICAgIHJlcXVpcmVkSW5kaWNhdG9yLFxuICAgIGhpbnRUZXh0LFxuICAgIGhlbHBIaW50UHJvcHMsXG4gICAgLi4ub3RoZXJzXG4gIH0gPSBwcm9wcztcblxuICB1c2VQcm9wV2FybmluZyhwcm9wcywgJ2Rpc2FibGVkJywgJ2lzRGlzYWJsZWQnKTtcblxuICBjb25zdCB7IGNsYXNzTmFtZXMgfSA9IHVzZVN0YXR1c0NsYXNzZXMoY2xhc3NOYW1lLCB7XG4gICAgaXNEaXNhYmxlZCxcbiAgICBpc1JlcXVpcmVkLFxuICAgIGlzRmxvYXRMYWJlbDogbW9kZSA9PT0gbW9kZXMuRkxPQVQsXG4gICAgaXNMZWZ0TGFiZWw6IG1vZGUgPT09IG1vZGVzLkxFRlQsXG4gIH0pO1xuXG4gIHJldHVybiAoXG4gICAgPEV4dGVuZGVkTGFiZWxcbiAgICAgIHJlZj17cmVmfVxuICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzfVxuICAgICAgey4uLm90aGVyc31cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgICB7XG4gICAgICAgIGlzUmVxdWlyZWRcbiAgICAgICAgJiYgKHJlcXVpcmVkSW5kaWNhdG9yIHx8IGRlZmF1bHRJbmRpY2F0b3IpXG4gICAgICB9XG4gICAgICB7XG4gICAgICAgIGhpbnRUZXh0XG4gICAgICAgICYmIDxIZWxwSGludCB7Li4uaGVscEhpbnRQcm9wc30+e2hpbnRUZXh0fTwvSGVscEhpbnQ+XG4gICAgICB9XG4gICAgPC9FeHRlbmRlZExhYmVsPlxuICApO1xufSk7XG5cbkxhYmVsLnByb3BUeXBlcyA9IHtcbiAgLyoqIFdoZXRoZXIgdGhlIGxhYmVsIGhhcyBkaXNhYmxlZCBzdHlsaW5nIGFwcGxpZWQuICovXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICAvKiogV2hldGhlciB0aGUgbGFiZWwgaGFzIHJlcXVpcmVkIGluZGljYXRvciBzdHlsaW5nIGFwcGxpZWQuICovXG4gIGlzUmVxdWlyZWQ6IFByb3BUeXBlcy5ib29sLFxuICAvKiogRGV0ZXJtaW5lcyB0aGUgYmVoYXZpb3IgcGF0dGVybiBmb3IgdGhlIGxhYmVsLiAqL1xuICBtb2RlOiBQcm9wVHlwZXMub25lT2YoT2JqZWN0LnZhbHVlcyhtb2RlcykpLFxuICAvKiogVGhlIHZpc3VhbCBjb21wb25lbnQgdXNlZCB0byBtYXJrIGFuIGlucHV0IGFzIHJlcXVpcmVkIHdpdGhpbiB0aGUgbGFiZWwuICovXG4gIHJlcXVpcmVkSW5kaWNhdG9yOiBQcm9wVHlwZXMubm9kZSxcbiAgLyoqIElmIHByZXNlbnQgdGhpcyBwcm9wIHdpbGwgY2F1c2UgYSBoZWxwIGhpbnQgdG8gcmVuZGVyIGluIHRoZSBsYWJlbC4gKi9cbiAgaGludFRleHQ6IFByb3BUeXBlcy5zdHJpbmcsXG4gIC8qKiBQcm9wcyBvYmplY3QgdGhhdCBpcyBzcHJlYWQgZGlyZWN0bHkgaW50byB0aGUgaGVscGhpbnQgZWxlbWVudC4gKi9cbiAgaGVscEhpbnRQcm9wczogUHJvcFR5cGVzLnNoYXBlKHt9KSxcbn07XG5cbkxhYmVsLmRlZmF1bHRQcm9wcyA9IHtcbiAgbW9kZTogbW9kZXMuREVGQVVMVCxcbn07XG5cbkxhYmVsLmRpc3BsYXlOYW1lID0gJ0xhYmVsJztcbmV4cG9ydCBkZWZhdWx0IExhYmVsO1xuIl19 */");
 var defaultIndicator = ___EmotionJSX(Box, {
   variant: "forms.label.indicator"
 }, "*");
+
 /**
  * Base label for an input.
  *
@@ -33,28 +32,24 @@ var defaultIndicator = ___EmotionJSX(Box, {
  * recommended to use those instead of a standalone `Label`.
  */
 
-
 var Label = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
-      className = props.className,
-      isDisabled = props.isDisabled,
-      isRequired = props.isRequired,
-      mode = props.mode,
-      requiredIndicator = props.requiredIndicator,
-      hintText = props.hintText,
-      helpHintProps = props.helpHintProps,
-      others = _objectWithoutProperties(props, _excluded);
-
+    className = props.className,
+    isDisabled = props.isDisabled,
+    isRequired = props.isRequired,
+    mode = props.mode,
+    requiredIndicator = props.requiredIndicator,
+    hintText = props.hintText,
+    helpHintProps = props.helpHintProps,
+    others = _objectWithoutProperties(props, _excluded);
   usePropWarning(props, 'disabled', 'isDisabled');
-
   var _useStatusClasses = useStatusClasses(className, {
-    isDisabled: isDisabled,
-    isRequired: isRequired,
-    isFloatLabel: mode === modes.FLOAT,
-    isLeftLabel: mode === modes.LEFT
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isDisabled: isDisabled,
+      isRequired: isRequired,
+      isFloatLabel: mode === modes.FLOAT,
+      isLeftLabel: mode === modes.LEFT
+    }),
+    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(ExtendedLabel, _extends({
     ref: ref,
     display: "flex",
@@ -64,19 +59,14 @@ var Label = /*#__PURE__*/forwardRef(function (props, ref) {
 Label.propTypes = {
   /** Whether the label has disabled styling applied. */
   isDisabled: PropTypes.bool,
-
   /** Whether the label has required indicator styling applied. */
   isRequired: PropTypes.bool,
-
   /** Determines the behavior pattern for the label. */
   mode: PropTypes.oneOf(_Object$values(modes)),
-
   /** The visual component used to mark an input as required within the label. */
   requiredIndicator: PropTypes.node,
-
   /** If present this prop will cause a help hint to render in the label. */
   hintText: PropTypes.string,
-
   /** Props object that is spread directly into the helphint element. */
   helpHintProps: PropTypes.shape({})
 };

package/lib/components/Label/Label.stories.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import Label from '.';
 import { modes } from './constants';
+import Label from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/Base Components/Label',

package/lib/{styles/forms/label.js → components/Label/Label.styles.js}

@@ -7,18 +7,16 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 // Styles for default label and variants go here.
-import { text } from '../variants/text';
+import { text } from '../Text/Text.styles';
 var activeFloatLabel = {
   fontWeight: 0,
   transform: 'translate(0, -8px) scale(0.75)'
-}; // Default label
+};
 
+// Default label
 export var label = _objectSpread(_objectSpread({}, text.label), {}, {
   display: 'block',
   mb: 'xs',
@@ -40,8 +38,8 @@ export var label = _objectSpread(_objectSpread({}, text.label), {}, {
     pointerEvents: 'none',
     paddingRight: '25px',
     paddingLeft: '1px' // Otherwise, certain characters get cut off on the left from the overflow
-
   },
+
   '.is-float-label-active &.is-float-label': _objectSpread({}, activeFloatLabel),
   '&.is-left-label': {
     width: 'auto',
@@ -49,7 +47,9 @@ export var label = _objectSpread(_objectSpread({}, text.label), {}, {
     mb: 0,
     alignSelf: 'center'
   }
-}); // Variants below
+});
+
+// Variants below
 
 label.indicator = {
   color: 'critical.bright',
@@ -59,8 +59,9 @@ label.radio = _objectSpread(_objectSpread({}, text.base), {}, {
   cursor: 'pointer',
   alignItems: 'center',
   mb: 'xs'
-}); // NOTE: ThemeUI label adds 'flex' after other styles, so we have to use !important to override it
+});
 
+// NOTE: ThemeUI label adds 'flex' after other styles, so we have to use !important to override it
 label.checkbox = _objectSpread(_objectSpread({}, text.base), {}, {
   display: 'inline-flex !important',
   div: {

package/lib/components/Label/Label.test.js

@@ -1,21 +1,20 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import Label from '.';
-import Input from '../Input';
 import axeTest from '../../utils/testUtils/testAxe';
+import Input from '../Input';
+import Label from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-label';
 var defaultProps = {
   'data-testid': testId
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Label, _extends({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('default label', function () {
   getComponent();
@@ -43,11 +42,9 @@ test('required label with custom indicator', function () {
 test('label with an input', function () {
   var labelText = 'This is a label';
   var inputId = 'blah';
-
   var children = ___EmotionJSX(React.Fragment, null, labelText, ___EmotionJSX(Input, {
     id: inputId
   }));
-
   getComponent({
     children: children,
     htmlFor: inputId

package/lib/components/Link/Link.js

@@ -1,60 +1,50 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "isDisabled", "onPress"];
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { mergeProps, useFocusRing, useLink } from 'react-aria';
+import { useHover, usePress } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { Link as ThemeUILink } from 'theme-ui';
-import { useLink } from '@react-aria/link';
-import { useFocusRing } from '@react-aria/focus';
-import { useHover, usePress } from '@react-aria/interactions';
-import { mergeProps } from '@react-aria/utils';
 import { usePropWarning, useStatusClasses } from '../../hooks';
+
 /**
  * Link uses the [Link - Theme-UI](https://theme-ui.com/components/link) component and
  * React Aria's [useLink](https://react-spectrum.adobe.com/react-aria/useLink.html) hook.
  *
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Link = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
-      isDisabled = props.isDisabled,
-      onPress = props.onPress,
-      others = _objectWithoutProperties(props, _excluded);
-
+    isDisabled = props.isDisabled,
+    onPress = props.onPress,
+    others = _objectWithoutProperties(props, _excluded);
   var linkRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return linkRef.current;
   });
-
   var _useFocusRing = useFocusRing(),
-      isFocusVisible = _useFocusRing.isFocusVisible,
-      focusProps = _useFocusRing.focusProps;
-
+    isFocusVisible = _useFocusRing.isFocusVisible,
+    focusProps = _useFocusRing.focusProps;
   var _useLink = useLink(props, linkRef),
-      linkProps = _useLink.linkProps;
-
+    linkProps = _useLink.linkProps;
   var _useHover = useHover(props),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
   var _usePress = usePress({
-    ref: linkRef
-  }),
-      pressProps = _usePress.pressProps,
-      isPressed = _usePress.isPressed;
-
+      ref: linkRef
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
   var _useStatusClasses = useStatusClasses(className, {
-    isDisabled: isDisabled,
-    isFocused: isFocusVisible,
-    isHovered: isHovered,
-    isPressed: isPressed
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isDisabled: isDisabled,
+      isFocused: isFocusVisible,
+      isHovered: isHovered,
+      isPressed: isPressed
+    }),
+    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(ThemeUILink, _extends({
     className: classNames,
     ref: linkRef,
@@ -64,19 +54,14 @@ var Link = /*#__PURE__*/forwardRef(function (props, ref) {
 Link.propTypes = {
   /** Whether the link is disabled. */
   isDisabled: PropTypes.bool,
-
   /**  The HTML element used to render the link, e.g. 'a', or 'span'. */
   as: PropTypes.string,
-
   /**  Handler that is called when the press is released over the target. */
   onPress: PropTypes.func,
-
   /**  Specifies the location of the URL */
   href: PropTypes.string,
-
   /**  Specifies the window where the linked page is loaded */
   target: PropTypes.string,
-
   /** The styling variation of the link. */
   variant: PropTypes.string
 };

package/lib/components/Link/Link.stories.js

@@ -1,9 +1,10 @@
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React from 'react';
-import Link from '.';
 import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
-import variants from '../../styles/variants/links';
+import variants from './Link.styles';
+import Link from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Link',
@@ -38,7 +39,6 @@ export default {
   }
 };
 export var Default = function Default(_ref) {
-  var args = _extends({}, _ref);
-
-  return ___EmotionJSX("div", null, ___EmotionJSX(Link, args, "A link"), " to your favorite website.");
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return ___EmotionJSX("div", null, ___EmotionJSX(Link, args, "A link"), ' ', "to your favorite website.");
 };