@pingux/astro 1.28.2-alpha.2 → 1.29.0-alpha.0

package/lib/components/SwitchField/SwitchField.stories.js

@@ -1,14 +1,29 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+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 React, { useState } from 'react';
 import { Pressable } from '@react-aria/interactions';
 import SwitchField from '.';
-import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { Tooltip, TooltipTrigger } from '../../index';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/SwitchField',
   component: SwitchField,
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -46,32 +61,12 @@ export default {
     labelProps: {},
     controlProps: {},
     id: {},
-    'aria-label': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-labelledby': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-describedby': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-details': {
-      control: {
-        type: 'text'
-      }
-    },
     isSelected: {
       control: {
         type: 'none'
       }
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(SwitchField, args);

package/lib/components/TextAreaField/TextAreaField.js

@@ -17,12 +17,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
+import { Box, FieldHelperText, Label, TextArea } from '../../';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { useColumnStyles, useField, useLabelHeight, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
-import Box from '../Box';
-import FieldHelperText from '../FieldHelperText';
-import Label from '../Label';
-import TextArea from '../TextArea';
 /**
  * Combines a textarea, label, and helper text for a complete, form-ready solution.
  */
@@ -45,12 +43,12 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
-  var textAreaRef = useRef();
-  var labelRef = useRef();
-  var labelWrapperRef = useRef();
   var containerRef = useRef();
   var inputContainerRef = useRef();
+  var labelRef = useRef();
+  var labelWrapperRef = useRef();
   var slotContainer = useRef();
+  var textAreaRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
 
@@ -144,7 +142,7 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
     status: status
   }, helperText));
 });
-TextAreaField.propTypes = {
+TextAreaField.propTypes = _objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
 
@@ -245,7 +243,7 @@ TextAreaField.propTypes = {
     /** The given node will be inserted into the field container. */
     inContainer: PropTypes.node
   })
-};
+}, ariaAttributesBasePropTypes);
 TextAreaField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,

package/lib/components/TextAreaField/TextAreaField.stories.js

@@ -1,18 +1,32 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+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 React, { useState } from 'react';
 import SearchIcon from 'mdi-react/SearchIcon';
 import TextAreaField from '.';
-import Box from '../Box';
-import Icon from '../Icon';
-import statuses from '../../utils/devUtils/constants/statuses';
+import { Box, Icon } from '../../';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { modes as labelModes } from '../Label/constants';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/TextAreaField',
   component: TextAreaField,
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -63,7 +77,7 @@ export default {
         type: 'none'
       }
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 
 var IconSlot = ___EmotionJSX(Box, {

package/lib/components/TextField/TextField.js

@@ -16,12 +16,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
+import { Box, FieldHelperText, Input, Label } from '../../';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { useField, useLabelHeight, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
-import Box from '../Box';
-import FieldHelperText from '../FieldHelperText';
-import Input from '../Input';
-import Label from '../Label';
 import useColumnStyles from '../../hooks/useColumnStyles';
 /**
  * Combines a text input, label, and helper text for a complete, form-ready solution.
@@ -75,7 +73,7 @@ var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
     status: status
   }, helperText));
 });
-TextField.propTypes = {
+TextField.propTypes = _objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
 
@@ -174,7 +172,7 @@ TextField.propTypes = {
 
   /** Props object that is spread directly into the input wrapper element. */
   wrapperProps: PropTypes.shape({})
-};
+}, ariaAttributesBasePropTypes);
 TextField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,

package/lib/components/TextField/TextField.stories.js

@@ -1,21 +1,36 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["variant"];
+
+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, { useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import TextField from '.';
+import { Box } from '../../';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { modes as labelModes } from '../Label/constants';
+import CopyButton from '../CopyText/CopyButton';
 import statuses from '../../utils/devUtils/constants/statuses.js';
-import Box from '../Box';
 import useCopyToClipboard from '../../hooks/useCopyToClipboard';
-import CopyButton from '../CopyText/CopyButton';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/TextField',
   component: TextField,
-  argTypes: {
+  argTypes: _objectSpread({
     labelMode: {
       control: {
         type: 'select',
@@ -35,7 +50,7 @@ export default {
       },
       defaultValue: statuses.DEFAULT
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(_ref) {
   var variant = _ref.variant,

package/lib/hooks/useField/useField.js

@@ -6,8 +6,6 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
-import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
@@ -15,7 +13,7 @@ var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "cla
 
 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; }
+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 { useEffect, useState } from 'react';
 import omit from 'lodash/omit';
@@ -24,6 +22,7 @@ import { useLabel } from '@react-aria/label';
 import { useFocusWithin } from '@react-aria/interactions';
 import { useFocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
+import { getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { useStatusClasses } from '../../hooks';
 import { modes as labelModes } from '../../components/Label/constants';
@@ -34,8 +33,6 @@ import { modes as labelModes } from '../../components/Label/constants';
  */
 
 var useField = function useField() {
-  var _context;
-
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
   var autocomplete = props.autocomplete,
@@ -142,14 +139,9 @@ var useField = function useField() {
   }, "is-".concat(status), true), statusClasses)),
       classNames = _useStatusClasses.classNames;
 
-  var ariaProps = _reduceInstanceProperty(_context = _Object$entries(others)).call(_context, function (acc, _ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-        key = _ref2[0],
-        val = _ref2[1];
-
-    if (key.match(/^aria-.*/)) return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, val));
-    return _objectSpread({}, acc);
-  }, {}); // Handle focus within and value state for the container. These are needed for float labels.
+  var _getAriaAttributeProp = getAriaAttributeProps(others),
+      ariaProps = _getAriaAttributeProp.ariaProps,
+      nonAriaProps = _getAriaAttributeProp.nonAriaProps; // Handle focus within and value state for the container. These are needed for float labels.
 
 
   var _useFocusWithin = useFocusWithin({
@@ -172,9 +164,7 @@ var useField = function useField() {
   }),
       containerClasses = _useStatusClasses2.classNames;
 
-  var nonAriaOthers = _objectSpread({}, omit(others, _Object$keys(ariaProps)));
-
-  var fieldContainerProps = _objectSpread(_objectSpread(_objectSpread({}, nonAriaOthers), mergeProps(containerProps, focusWithinProps)), {}, {
+  var fieldContainerProps = _objectSpread(_objectSpread(_objectSpread({}, nonAriaProps), mergeProps(containerProps, focusWithinProps)), {}, {
     className: containerClasses,
     sx: _objectSpread({
       position: 'relative'

package/lib/recipes/LogoTabs.stories.js

@@ -82,42 +82,52 @@ var GoogleLogo = function GoogleLogo(props) {
   })));
 };
 
-var logoTabsStyling = {
-  display: 'inline-flex !important',
-  '& > div': {
-    borderStyle: 'none',
-    borderBottomWidth: '0px !important',
-    justifyContent: 'space-between'
-  }
-};
-
-var tabStyling = _objectSpread(_objectSpread({}, tab), {}, {
-  alignSelf: 'center',
-  '& > svg': {
-    borderWidth: 1,
-    borderStyle: 'dashed',
-    borderColor: 'neutral.70',
-    borderRadius: 4,
-    bg: 'white',
-    outline: '5px solid white'
+var sx = {
+  container: {
+    display: 'inline-flex !important',
+    position: 'relative',
+    width: '500px'
   },
-  '&.is-selected > svg': {
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: 'active',
-    borderRadius: 4,
-    bg: 'white',
-    outline: '5px solid white'
+  separator: {
+    position: 'absolute',
+    top: '25%',
+    backgroundColor: 'accent.70'
   },
-  // we only want the change the color of icon svgs to active not company logos
-  '&.is-selected > .mdi-icon > path': {
-    fill: 'active'
+  logoTabsStyling: {
+    display: 'inline-flex !important',
+    '& > div': {
+      borderStyle: 'none',
+      borderBottomWidth: '0px !important',
+      justifyContent: 'space-between'
+    }
   },
-  '& > [role="presentation"]': {
-    height: '0px'
-  }
-});
-
+  tabStyling: _objectSpread(_objectSpread({}, tab), {}, {
+    alignSelf: 'center',
+    '& > svg': {
+      borderWidth: 1,
+      borderStyle: 'dashed',
+      borderColor: 'neutral.70',
+      borderRadius: 4,
+      bg: 'white',
+      outline: '5px solid white'
+    },
+    '&.is-selected > svg': {
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'active',
+      borderRadius: 4,
+      bg: 'white',
+      outline: '5px solid white'
+    },
+    // we only want the change the color of icon svgs to active not company logos
+    '&.is-selected > .mdi-icon > path': {
+      fill: 'active'
+    },
+    '& > [role="presentation"]': {
+      height: '0px'
+    }
+  })
+};
 export var LogoTabs = function LogoTabs() {
   var _useState = useState('tab1'),
       _useState2 = _slicedToArray(_useState, 2),
@@ -130,19 +140,11 @@ export var LogoTabs = function LogoTabs() {
       setShowMiddleTabs = _useState4[1];
 
   return ___EmotionJSX(Box, {
-    sx: {
-      display: 'inline-flex !important',
-      position: 'relative',
-      width: '500px'
-    }
+    sx: sx.container
   }, ___EmotionJSX(Separator, {
-    sx: {
-      position: 'absolute',
-      top: '25%'
-    },
-    bg: "accent.70"
+    sx: sx.separator
   }), ___EmotionJSX(Tabs, {
-    sx: logoTabsStyling,
+    sx: sx.logoTabsStyling,
     selectedKey: currentTab,
     onSelectionChange: setCurrentTab,
     onClick: setShowMiddleTabs
@@ -158,7 +160,7 @@ export var LogoTabs = function LogoTabs() {
       color: "#eb4c15",
       p: "sm"
     }),
-    sx: tabStyling
+    sx: sx.tabStyling
   }, ___EmotionJSX(Text, null, "This is content for the source tab")), (showMiddleTabs || currentTab !== 'tab1') && ___EmotionJSX(Tab, {
     key: "tab2",
     title: ___EmotionJSX(Text, {
@@ -171,7 +173,7 @@ export var LogoTabs = function LogoTabs() {
       color: "accent.20",
       p: "xs"
     }),
-    sx: tabStyling
+    sx: sx.tabStyling
   }, ___EmotionJSX(Text, null, "This is content for the custom filter tab")), (showMiddleTabs || currentTab !== 'tab1') && ___EmotionJSX(Tab, {
     key: "tab3",
     title: ___EmotionJSX(Text, {
@@ -184,7 +186,7 @@ export var LogoTabs = function LogoTabs() {
       color: "accent.20",
       p: "xs"
     }),
-    sx: tabStyling
+    sx: sx.tabStyling
   }, ___EmotionJSX(Text, null, "This is content for attribute mapping tab")), ___EmotionJSX(Tab, {
     key: "tab4",
     title: ___EmotionJSX(Text, {
@@ -196,6 +198,6 @@ export var LogoTabs = function LogoTabs() {
       size: 65,
       p: "sm"
     }),
-    sx: tabStyling
+    sx: sx.tabStyling
   }, ___EmotionJSX(Text, null, "This is content for the target tab"))));
 };

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

@@ -0,0 +1,85 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
+import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
+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 _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 = {
+  ariaControls: 'Identifies the element (or elements) whose contents or presence are controlled by the current element.',
+  ariaDescribedby: 'Identifies the element (or elements) that describes the object.',
+  ariaDetails: 'Identifies the element (or elements) that provide a detailed, extended description for the object.',
+  ariaErrormessage: 'Identifies the element that provides an error message for the object.',
+  ariaLabel: 'Defines a string value that labels the current element.',
+  ariaLabelledby: 'Identifies the element (or elements) that labels the current element.'
+};
+export var ariaAttributeBaseDocSettings = {
+  type: {
+    summary: 'string'
+  },
+  control: {
+    type: 'text'
+  },
+  table: {
+    category: 'Aria Attributes'
+  }
+};
+export var ariaAttributeBaseArgTypes = {
+  'aria-controls': _objectSpread({
+    description: descriptions.ariaControls
+  }, ariaAttributeBaseDocSettings),
+  'aria-describedby': _objectSpread({
+    description: descriptions.ariaDescribedby
+  }, ariaAttributeBaseDocSettings),
+  'aria-details': _objectSpread({
+    description: descriptions.ariaDetails
+  }, ariaAttributeBaseDocSettings),
+  'aria-errormessage': _objectSpread({
+    description: descriptions.ariaErrormessage
+  }, ariaAttributeBaseDocSettings),
+  'aria-label': _objectSpread({
+    description: descriptions.ariaLabel
+  }, ariaAttributeBaseDocSettings),
+  'aria-labelledby': _objectSpread({
+    description: descriptions.ariaLabelledby
+  }, ariaAttributeBaseDocSettings)
+};
+export var ariaAttributesBasePropTypes = {
+  'aria-controls': PropTypes.string,
+  'aria-describedby': PropTypes.string,
+  'aria-details': PropTypes.string,
+  'aria-errormessage': PropTypes.string,
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string
+};
+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];
+
+    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

@@ -0,0 +1,50 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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 _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 { getAriaAttributeProps } from './ariaAttributes';
+describe('getAriaAttributeProps', function () {
+  var subject = function subject(props) {
+    return getAriaAttributeProps(props);
+  };
+
+  var propsWithNoAriaAttributes = {
+    propOne: 'prop1',
+    propTwo: 'prop2'
+  };
+  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;
+
+      expect(_Object$keys(nonAriaProps).length).toBe(2);
+      expect(_Object$keys(ariaProps).length).toBe(0);
+    });
+  });
+  describe('when there is an aria-label and an aria-labelledby in the props', function () {
+    it('returns an object with ariaProps containing aria-label and aria-labelledby', function () {
+      var propsWithAriaAttributes = _objectSpread({
+        'aria-labelledby': 'test labelledby',
+        'aria-label': 'test label'
+      }, propsWithNoAriaAttributes);
+
+      var _subject2 = subject(propsWithAriaAttributes),
+          ariaProps = _subject2.ariaProps,
+          nonAriaProps = _subject2.nonAriaProps;
+
+      expect(_Object$keys(nonAriaProps).length).toBe(2);
+      expect(_Object$keys(ariaProps).length).toBe(2);
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.28.2-alpha.2",
+  "version": "1.29.0-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",