@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/styles/themes/astro-nano/astro-nano.js

@@ -7,13 +7,10 @@ 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; }
-
-import { merge } from 'theme-ui';
 import chroma from 'chroma-js';
+import { merge } from 'theme-ui';
 import astroTheme from '../../theme';
 var scaleFont = 1.2;
 var borderRadius = 4;
@@ -106,8 +103,8 @@ var modifyTheme = {
     }
   },
   variants: {
-    boxes: {
-      card: {
+    card: {
+      container: {
         borderRadius: borderRadius,
         flexGrow: [1, 0],
         maxWidth: astroTheme.breakpoints[0],
@@ -115,26 +112,26 @@ var modifyTheme = {
         alignItems: 'stretch',
         py: [0, 'xl'],
         my: 'auto',
-        boxShadow: ['none', astroTheme.variants.boxes.card.boxShadow],
+        boxShadow: ['none', astroTheme.variants.card.container.boxShadow],
         width: ['100%', '450px'],
         minHeight: 'fit-content'
-      },
-      wrapper: {
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        bg: ['white', 'accent.99'],
-        py: 'lg',
-        gap: 'lg',
-        overflow: 'auto',
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0
-      },
-      cardBody: {
-        flexGrow: [1, 0]
       }
+    },
+    wrapper: {
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      bg: ['white', 'accent.99'],
+      py: 'lg',
+      gap: 'lg',
+      overflow: 'auto',
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    },
+    cardBody: {
+      flexGrow: [1, 0]
     }
   }
 };

package/lib/styles/themes/end-user/end-user.js

@@ -7,11 +7,8 @@ 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; }
-
 var base = 10;
 var spacing = {
   xs: base * 0.5,
@@ -25,8 +22,8 @@ var spacing = {
   xl: base * 4,
   // 40
   xx: base * 6.5 // 65
-
 };
+
 var textColors = {
   secondary: '#798087',
   active: '#2996cc'
@@ -82,7 +79,6 @@ var buttonFocus = {
   outline: 'none',
   boxShadow: 'focus'
 };
-
 var buttonBase = _objectSpread(_objectSpread({}, buttonText), {}, {
   bg: 'white',
   border: '1px solid',
@@ -104,7 +100,6 @@ var buttonBase = _objectSpread(_objectSpread({}, buttonText), {}, {
   },
   '&.is-focused': _objectSpread({}, buttonFocus)
 });
-
 var card = {
   bg: 'cardBg',
   boxShadow: 'overlay',
@@ -150,7 +145,6 @@ var wordWrap = {
   wordWrap: 'break-word',
   wordBreak: 'break-word'
 };
-
 var fieldHelperText = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
   fontSize: 'sm',
   pb: 'sm',
@@ -161,7 +155,6 @@ var fieldHelperText = _objectSpread(_objectSpread(_objectSpread({}, base), wordW
     color: 'critical'
   }
 });
-
 var text = {
   base: {
     color: 'neutral.20',
@@ -199,7 +192,6 @@ var activeFloatLabel = {
   color: 'text.active',
   transition: 'all 0.05s'
 };
-
 var label = _objectSpread(_objectSpread({}, text.label), {}, {
   display: 'block',
   mb: 'xs',
@@ -215,7 +207,6 @@ var label = _objectSpread(_objectSpread({}, text.label), {}, {
   },
   '.is-float-label-active &.is-float-label': _objectSpread({}, activeFloatLabel)
 });
-
 var input = _objectSpread(_objectSpread({}, text.input), {}, {
   position: 'relative',
   background: 'white',
@@ -236,7 +227,6 @@ var input = _objectSpread(_objectSpread({}, text.input), {}, {
     display: 'none'
   }
 });
-
 export default {
   name: 'End User',
   fonts: {

package/lib/styles/variants/callout.js

@@ -7,11 +7,8 @@ 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; }
-
 var base = {
   alignItems: 'center',
   border: '1px solid',
@@ -20,19 +17,15 @@ var base = {
   p: '15px 12px 15px 0',
   width: '600px'
 };
-
 var error = _objectSpread(_objectSpread({}, base), {}, {
   borderColor: 'critical.bright'
 });
-
 var success = _objectSpread(_objectSpread({}, base), {}, {
   borderColor: 'success.bright'
 });
-
 var warning = _objectSpread(_objectSpread({}, base), {}, {
   borderColor: 'warning.bright'
 });
-
 export default {
   base: base,
   error: error,

package/lib/styles/variants/index.js

@@ -1,6 +1,22 @@
-export { default as variants } from './variants';
-export { default as buttons } from './buttons';
-export { default as bidirectionalIconButton } from './bidirectionalIconButton';
-export { default as images } from './images';
-export { default as links } from './links';
-export * from './text';
+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 defaultButtons from '../../components/Button/Buttons.styles';
+import iconButtons from '../../components/IconButton/IconButton.styles';
+export var buttons = _objectSpread(_objectSpread({}, defaultButtons), {}, {
+  iconButtons: iconButtons
+});
+export { default as badges } from '../../components/Badge/Badge.styles';
+export { default as cards } from '../../components/Card/Card.styles';
+export { default as images } from '../../components/Image/Image.styles';
+export { default as links } from '../../components/Link/Link.styles';
+export * from '../../components/Text/Text.styles';
+export { default as variants } from './variants';

package/lib/styles/variants/variants.js

@@ -7,59 +7,72 @@ 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; }
-
-import accordion from './accordion';
-import boxes from './boxes';
+import accordionGrid from '../../components/AccordionGridGroup/AccordionGrid.styles';
+import accordion from '../../components/AccordionGroup/Accordion.styles';
+import box from '../../components/Box/Box.styles';
+import bracket from '../../components/Bracket/Bracket.styles';
+import breadcrumb from '../../components/Breadcrumbs/Breadcrumb.styles';
+import codeView from '../../components/CodeView/CodeView.styles';
+import collapsiblePanel from '../../components/CollapsiblePanel/CollapsiblePanel.styles';
+import copyText from '../../components/CopyText/CopyText.styles';
+import dataTable from '../../components/DataTable/DataTable.styles';
+import environmentBreadcrumb from '../../components/EnvironmentBreadcrumb/EnvironmentalBreadcrumb.styles';
+import fieldHelperText from '../../components/FieldHelperText/FieldHelperText.styles';
+import helpHint from '../../components/HelpHint/HelpHint.styles';
+import imageUpload from '../../components/ImageUploadField/imageUpload';
+import listBox from '../../components/ListBox/ListBox.styles';
+import listItem from '../../components/ListItem/ListItem.styles';
+import listViewItem from '../../components/ListViewItem/ListViewItem.styles';
+import loader from '../../components/Loader/Loader.styles';
+import menu from '../../components/Menu/Menu.styles';
+import menuItem from '../../components/MenuItem/MenuItem.styles';
+import message from '../../components/Messages/Message.styles';
+import modal from '../../components/Modal/Modal.styles';
+import navBar from '../../components/NavBar/NavBar.styles';
+import overlayPanel from '../../components/OverlayPanel/OverlayPanel.styles';
+import popoverMenu from '../../components/PopoverMenu/PopoverMenu.styles';
+import rockerButton from '../../components/RockerButton/RockerButton.styles';
+import scrollBox from '../../components/ScrollBox/ScrollBox.styles';
+import separator from '../../components/Separator/Separator.styles';
+import stepper from '../../components/Stepper/Stepper.styles';
+import table from '../../components/Table/Table.styles';
+import * as tab from '../../components/Tabs/Tabs.style';
+import timeZone from '../../components/TimeZonePicker/TimeZone.styles';
+import tooltip from '../../components/TooltipTrigger/Tooltip.styles';
 import callout from './callout';
-import codeView from './codeView';
-import collapsiblePanel from './collapsiblePanel';
-import dataTable from './../../components/DataTable/DataTable.styles';
-import imageUpload from './imageUpload';
-import images from './images';
-import links from './links';
-import listBox from './listBox';
-import loader from './loader';
-import menu from './menu';
-import menuItem from './menuItem';
-import messages from './messages';
-import modal from './modal';
-import navBar from './navBar';
-import numberField from './numberField';
-import overlayPanel from './overlayPanel';
-import popoverMenu from './popoverMenu';
-import rockerbutton from './rockerbutton';
-import separator from './separator';
-import stepper from './stepper';
-import table from './table';
-import * as tabs from './tabs';
-import tooltip from './tooltip';
-export default _objectSpread(_objectSpread({}, tabs), {}, {
+export default _objectSpread({
   accordion: accordion,
-  boxes: boxes,
+  accordionGrid: accordionGrid,
+  box: box,
+  bracket: bracket,
+  breadcrumb: breadcrumb,
   callout: callout,
   codeView: codeView,
   collapsiblePanel: collapsiblePanel,
+  copyText: copyText,
   dataTable: dataTable,
+  environmentBreadcrumb: environmentBreadcrumb,
+  fieldHelperText: fieldHelperText,
+  helpHint: helpHint,
   imageUpload: imageUpload,
-  images: images,
-  links: links,
   listBox: listBox,
+  listItem: listItem,
+  listViewItem: listViewItem,
   loader: loader,
   menu: menu,
   menuItem: menuItem,
-  messages: messages,
+  message: message,
   modal: modal,
   navBar: navBar,
-  numberField: numberField,
   overlayPanel: overlayPanel,
   popoverMenu: popoverMenu,
-  rockerbutton: rockerbutton,
+  rockerButton: rockerButton,
+  scrollBox: scrollBox,
   separator: separator,
   stepper: stepper,
   table: table,
+  timeZone: timeZone,
   tooltip: tooltip
-});
+}, tab);

package/lib/utils/devUtils/constants/htmlElements.js

@@ -1,4 +1,5 @@
 /**
  * List of HTML elements to re use wherever needed.
  */
+
 export var htmlElements = ['a', 'abbr', 'acronym', 'address', 'applet', 'area', 'article', 'aside', 'audio', 'b', 'base', 'basefont', 'bdi', 'bdo', 'bgsound', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'frame', 'frameset', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'isindex', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'listing', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'nobr', 'noframes', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'plaintext', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr', 'xmp'];

package/lib/utils/devUtils/constants/variants.js

@@ -1,22 +1,21 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import { snakeCase, toUpper, fromPairs } from 'lodash';
-import { text } from '../../../styles/variants/text';
-import buttons from '../../../styles/variants/buttons';
+import { fromPairs, snakeCase, toUpper } from 'lodash';
+import buttons from '../../../components/Button/Buttons.styles';
+import { text } from '../../../components/Text/Text.styles';
+
 /**
  * Converts the given object to a constant mapping.
  * e.g. { aBox: '1', b: '2' } -> { A_BOX: 'a', B: 'b' }
  *
  * @param {Object} obj - An object with keys to convert
  */
-
+// eslint-disable-next-line max-len
 var toConstantObject = function toConstantObject(obj) {
   var _context;
-
   return fromPairs(_mapInstanceProperty(_context = _Object$keys(obj)).call(_context, function (i) {
     return [toUpper(snakeCase(i)), i];
   }));
 };
-
 export var textVariants = toConstantObject(text);
 export var buttonVariants = toConstantObject(buttons);

package/lib/utils/devUtils/createMockData.js

@@ -7,11 +7,8 @@ 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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
 import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
@@ -19,7 +16,6 @@ import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
 import { v4 as uuid } from 'uuid';
 import animals from './constants/animals';
 import firstNames from './constants/firstNames';
-
 function createMockData(length, objectScheme) {
   var mockDataBase = {
     animal: animals,
@@ -29,40 +25,33 @@ function createMockData(length, objectScheme) {
     animal: 0,
     firstName: 0
   };
-
   var getPropValue = function getPropValue(valueType) {
     if (valueType === 'id') {
       return uuid();
     }
-
     var valueNumber = itemsNumber[valueType];
     var propValue = mockDataBase[valueType][valueNumber];
     itemsNumber[valueType] += 1;
     return propValue;
   };
-
   var generateObject = function generateObject() {
     var entries = _Object$entries(objectScheme);
-
     var reducer = function reducer(previousValue, currentValue) {
       var fieldName = currentValue[0];
       var fieldValue = getPropValue(currentValue[1]);
       return _objectSpread(_objectSpread({}, previousValue), {}, _defineProperty({}, fieldName, fieldValue));
     };
-
     return _reduceInstanceProperty(entries).call(entries, reducer, {});
   };
-
   var generateDataArr = function generateDataArr() {
     var _context, _context2;
-
     return _mapInstanceProperty(_context = _fillInstanceProperty(_context2 = Array(length)).call(_context2, undefined)).call(_context, function () {
       return generateObject();
     });
   };
-
   return generateDataArr();
 }
+export default createMockData;
 
-export default createMockData; // usage(delete this comment as soon as we used this function in a few stories so we have examples):
+// usage(delete this comment as soon as we used this function in a few stories so we have examples):
 // const mockData = createMockData(100, { name: 'animal', id: 'id' });

package/lib/utils/devUtils/decorators/withDeprecationWarning.js

@@ -1,18 +1,14 @@
 import React from 'react';
 import Text from '../../../components/Text';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var withDeprecationWarning = function withDeprecationWarning(Story, context) {
   var text = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'This component will be deprecated';
-
   // Display warning on the Canvas page
   if (context.viewMode === 'story') {
     return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
       mb: "lg"
-    }, "WARNING: ", text), ___EmotionJSX(Story, context));
+    }, "WARNING:", text), ___EmotionJSX(Story, context));
   }
-
   return ___EmotionJSX(Story, context);
 };
-
 export default withDeprecationWarning;

package/lib/utils/devUtils/props/ariaAttributes.js

@@ -10,11 +10,8 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
 import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-
 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 _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 omit from 'lodash/omit';
 import PropTypes from 'prop-types';
 var descriptions = {
@@ -66,18 +63,14 @@ export var ariaAttributesBasePropTypes = {
 };
 export var getAriaAttributeProps = function getAriaAttributeProps(props) {
   var _context;
-
   var ariaProps = _reduceInstanceProperty(_context = _Object$entries(props)).call(_context, function (acc, _ref) {
     var _ref2 = _slicedToArray(_ref, 2),
-        key = _ref2[0],
-        val = _ref2[1];
-
+      key = _ref2[0],
+      val = _ref2[1];
     if (key.match(/^aria-.*/)) return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, val));
     return _objectSpread({}, acc);
   }, {});
-
   var nonAriaProps = _objectSpread({}, omit(props, _Object$keys(ariaProps)));
-
   return {
     ariaProps: ariaProps,
     nonAriaProps: nonAriaProps

package/lib/utils/devUtils/props/ariaAttributes.test.js

@@ -6,18 +6,14 @@ 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; }
-
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import { getAriaAttributeProps } from './ariaAttributes';
 describe('getAriaAttributeProps', function () {
   var subject = function subject(props) {
     return getAriaAttributeProps(props);
   };
-
   var propsWithNoAriaAttributes = {
     propOne: 'prop1',
     propTwo: 'prop2'
@@ -25,9 +21,8 @@ describe('getAriaAttributeProps', function () {
   describe('when there are 2 props and no aria attributes', function () {
     it('returns an object with empty ariaProps and 2 nonAriaProps', function () {
       var _subject = subject(propsWithNoAriaAttributes),
-          ariaProps = _subject.ariaProps,
-          nonAriaProps = _subject.nonAriaProps;
-
+        ariaProps = _subject.ariaProps,
+        nonAriaProps = _subject.nonAriaProps;
       expect(_Object$keys(nonAriaProps).length).toBe(2);
       expect(_Object$keys(ariaProps).length).toBe(0);
     });
@@ -38,11 +33,9 @@ describe('getAriaAttributeProps', function () {
         'aria-labelledby': 'test labelledby',
         'aria-label': 'test label'
       }, propsWithNoAriaAttributes);
-
       var _subject2 = subject(propsWithAriaAttributes),
-          ariaProps = _subject2.ariaProps,
-          nonAriaProps = _subject2.nonAriaProps;
-
+        ariaProps = _subject2.ariaProps,
+        nonAriaProps = _subject2.nonAriaProps;
       expect(_Object$keys(nonAriaProps).length).toBe(2);
       expect(_Object$keys(ariaProps).length).toBe(2);
     });

package/lib/utils/devUtils/props/{hoverProps.js → fieldAttributes.js}

@@ -7,41 +7,43 @@ 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; }
-
 import PropTypes from 'prop-types';
 var descriptions = {
-  onHoverStart: 'Handler that is called when a hover interaction starts.',
-  onHoverEnd: 'Handler that is called when a hover interaction ends.',
-  onHoverChange: 'Handler that is called when the hover state changes.'
+  containerProps: 'Props object spread into the outer-most container. Wrapper and label will be children.',
+  controlProps: ' Props object that is spread directly into the input element. Will be a child of the Wrapper.',
+  controlWrapperProps: 'Props object spread to the field control wrapper, i.e. the immediate parent element for the control, sibling of the label, and child of the field container.',
+  labelProps: 'Props object spread to the field label, i.e. the visible text which labels the control.'
 };
-export var baseDocSettings = {
+export var inputFieldAttributeBaseDocSettings = {
   type: {
-    summary: 'func'
+    summary: 'object'
   },
   control: {
-    type: null
+    type: 'string'
   },
   table: {
-    category: 'Hover Handlers'
+    category: 'Input Field Attributes'
   }
 };
-export var onHoverArgTypes = {
-  'onHoverStart': _objectSpread({
-    description: descriptions.onHoverStart
-  }, baseDocSettings),
-  'onHoverEnd': _objectSpread({
-    description: descriptions.onHoverEnd
-  }, baseDocSettings),
-  'onHoverChange': _objectSpread({
-    description: descriptions.onHoverChange
-  }, baseDocSettings)
+export var inputFieldAttributeBaseArgTypes = {
+  'containerProps': _objectSpread({
+    description: descriptions.containerProps
+  }, inputFieldAttributeBaseDocSettings),
+  'controlProps': _objectSpread({
+    description: descriptions.controlProps
+  }, inputFieldAttributeBaseDocSettings),
+  'controlWrapperProps': _objectSpread({
+    description: descriptions.controlWrapperProps
+  }, inputFieldAttributeBaseDocSettings),
+  'labelProps': _objectSpread({
+    description: descriptions.labelProps
+  }, inputFieldAttributeBaseDocSettings)
 };
-export var onHoverPropTypes = {
-  onHoverStart: PropTypes.func,
-  onHoverEnd: PropTypes.func,
-  onHoverChange: PropTypes.func
+export var inputFieldAttributesBasePropTypes = {
+  containerProps: PropTypes.shape({}),
+  controlProps: PropTypes.shape({}),
+  controlWrapperProps: PropTypes.shape({}),
+  labelProps: PropTypes.shape({})
 };