@pingux/astro 2.97.0-alpha.1 → 2.98.0-alpha.0

package/lib/cjs/components/Radio/Radio.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { RadioProps } from '../../types/radio';
+/**
+ * Basic radio input wrapped in a label.
+ * Built on top of the [Radio from Theme-UI](https://theme-ui.com/components/radio/) and uses the
+ * available [props from Theme-UI](https://theme-ui.com/sx-prop).
+ *
+ * **Note: Requires a label. It's recommended to use `RadioGroupField` with `RadioField` for a**
+ * **solution.**
+ */
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export default Radio;

package/lib/cjs/components/Radio/Radio.js

@@ -22,7 +22,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *
  * **Note: Requires a label. It's recommended to use `RadioGroupField` with `RadioField` for a**
  * **solution.**
- */var Radio = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+ */
+var Radio = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_themeUi.Radio, (0, _extends2["default"])({
     ref: ref
   }, props));

package/lib/cjs/components/Radio/Radio.styles.d.ts

@@ -0,0 +1,53 @@
+declare const _default: {
+    base: {
+        width: number;
+        height: number;
+        color: string;
+        mr: string;
+        'input:focus ~ &': {
+            bg: string;
+            boxSizing: string;
+        };
+        'input ~ &.is-focused': {
+            boxShadow: string;
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        } | {
+            boxShadow: string;
+            border: string;
+            borderColor: string;
+            boxSizing: string;
+            transform: string;
+            transformOrigin: string;
+        };
+    };
+    outerContainer: {
+        '.is-horizontal &': {
+            mr: string;
+        };
+        '&.is-disabled': {
+            opacity: string;
+        };
+    };
+    controlWrapper: {
+        '&.is-disabled': {
+            opacity: string;
+        };
+    };
+    container: {
+        borderWidth: number;
+        borderStyle: string;
+        borderColor: string;
+        borderRadius: number;
+        padding: string;
+        mb: string;
+    };
+    checkedContent: {
+        pb: string;
+        pl: string;
+        color: string;
+        fontSize: string;
+    };
+};
+export default _default;

package/lib/cjs/components/Radio/Radio.styles.js

@@ -20,14 +20,16 @@ var base = {
     bg: 'transparent',
     boxSizing: 'border-box'
   },
-  'input ~ &.is-focused': _safariAgent.isSafari ? {
+  'input ~ &.is-focused': /* istanbul ignore next */
+  _safariAgent.isSafari ? {
     boxShadow: 'none',
     border: '1px solid',
     borderColor: 'focus',
     boxSizing: 'border-box',
     transform: 'scale(1.1)',
     transformOrigin: 'center'
-  } : _Buttons.focusWithCroppedOutline
+  }
+  /* istanbul ignore next */ : _Buttons.focusWithCroppedOutline
 };
 var outerContainer = {
   '.is-horizontal &': {

package/lib/cjs/components/Radio/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Radio';

package/lib/cjs/components/RadioField/RadioField.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { RadioGroupState } from 'react-stately';
+import { RadioFieldProps } from '../../types/radioField';
+export declare const RadioContext: React.Context<RadioGroupState>;
+/**
+ * Combines a radio, label, and helper text for a complete, form-ready solution.
+ *
+ * Utilizes [useRadio](https://react-spectrum.adobe.com/react-aria/useRadioGroup.html) from React
+ * Aria.
+ */
+declare const RadioField: React.ForwardRefExoticComponent<RadioFieldProps & React.RefAttributes<HTMLInputElement>>;
+export default RadioField;

package/lib/cjs/components/RadioField/RadioField.js

@@ -19,10 +19,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
 var _Box = _interopRequireDefault(require("../Box"));
 var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
 var _Label = _interopRequireDefault(require("../Label"));
@@ -32,7 +29,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-var RadioContext = /*#__PURE__*/(0, _react.createContext)();
+var defaultValue = {};
+var RadioContext = /*#__PURE__*/(0, _react.createContext)(defaultValue);
 
 /**
  * Combines a radio, label, and helper text for a complete, form-ready solution.
@@ -49,20 +47,17 @@ var RadioField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     radioDisabled = props.isDisabled,
     label = props.label,
     status = props.status;
-  var radioFieldRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return radioFieldRef.current;
-  });
+  var radioFieldRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var state = (0, _react.useContext)(RadioContext);
   var groupDisabled = state.isDisabled;
   var isDisabled = radioDisabled || groupDisabled;
   var _useRadio = (0, _reactAria.useRadio)(_objectSpread(_objectSpread({
       children: label,
-      autoFocus: hasAutoFocus,
+      autoFocus: hasAutoFocus
+    }, props), {}, {
       isDisabled: isDisabled
-    }, props), controlProps), state, radioFieldRef),
+    }, controlProps), state, radioFieldRef),
     inputProps = _useRadio.inputProps;
   var isChecked = inputProps.checked;
   var statusClasses = {
@@ -94,52 +89,6 @@ var RadioField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "forms.radio.checkedContent"
   }, checkedContent));
 });
-RadioField.propTypes = _objectSpread(_objectSpread({
-  /** Content to display when the radio is checked. */
-  checkedContent: _propTypes["default"].node,
-  /** The rendered label for the field. */
-  label: _propTypes["default"].node,
-  /** Whether the element should receive focus on render. */
-  hasAutoFocus: _propTypes["default"].bool,
-  /** Text rendered below the input. */
-  helperText: _propTypes["default"].node,
-  /** If present this prop will cause a help hint to render in the label of the field. */
-  hintText: _propTypes["default"].string,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: _propTypes["default"].string,
-  /**
-   * Whether the radio button is disabled or not. Shows that a selection exists, but is not
-   * available in that circumstance.
-  */
-  isDisabled: _propTypes["default"].bool,
-  /** Whether the Radio can be interacted with but cannot have its selection state changed. */
-  isReadOnly: _propTypes["default"].bool,
-  /** Whether the Radio is required. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required). */
-  isRequired: _propTypes["default"].bool,
-  /** The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). */
-  value: _propTypes["default"].string,
-  /** Handler that is called when the element receives focus. */
-  onFocus: _propTypes["default"].func,
-  /** Handler that is called when the element loses focus. */
-  onBlur: _propTypes["default"].func,
-  /** Handler that is called when the element's focus status changes. */
-  onFocusChange: _propTypes["default"].func,
-  /** Handler that is called when a key is pressed. */
-  onKeyDown: _propTypes["default"].func,
-  /** Handler that is called when a key is released. */
-  onKeyUp: _propTypes["default"].func,
-  /** Defines a string value that labels the current element. */
-  'aria-label': _propTypes["default"].string,
-  /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby': _propTypes["default"].string,
-  /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby': _propTypes["default"].string,
-  /**
-   * Identifies the element (or elements) that provide a detailed, extended description for the
-   * object.
-  */
-  'aria-details': _propTypes["default"].string
-}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes);
 RadioField.displayName = 'RadioField';
 var _default = RadioField;
 exports["default"] = _default;

package/lib/cjs/components/RadioField/RadioField.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -25,7 +25,9 @@ var defaultProps = {
   value: testValue
 };
 var defaultState = {
-  setLastFocusedValue: function setLastFocusedValue() {}
+  setLastFocusedValue: function setLastFocusedValue() {
+    return jest.fn();
+  }
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -78,11 +80,12 @@ test('radio with checked content does not display if not checked', function () {
 });
 test('radio with checked content displays if checked', function () {
   var testContent = 'test content';
+  var customState = {
+    selectedValue: testValue
+  };
   getComponent({
     checkedContent: (0, _react2.jsx)("div", null, testContent)
-  }, {
-    selectedValue: testValue
-  });
+  }, customState);
   var content = _testWrapper.screen.queryByText(testContent);
   expect(content).toBeInTheDocument();
 });

package/lib/cjs/components/RadioField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './RadioField';
+export * from './RadioField';

package/lib/cjs/components/RadioGroupField/RadioGroupField.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RadioGroupFieldProps } from '../../types/radioGroupField';
+declare const RadioGroupField: React.ForwardRefExoticComponent<RadioGroupFieldProps & React.RefAttributes<HTMLDivElement>>;
+export default RadioGroupField;

package/lib/cjs/components/RadioGroupField/RadioGroupField.js

@@ -1,40 +1,27 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
 var _RadioField = require("../RadioField");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var displayName = 'RadioGroupField';
 var RadioGroupField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
@@ -84,37 +71,5 @@ var RadioGroupField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     id: helperTextId
   }, helperText));
 });
-RadioGroupField.propTypes = _objectSpread(_objectSpread(_objectSpread({
-  /** The name of the RadioGroupField, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons). */
-  name: _propTypes["default"].string,
-  /** The current value (controlled). */
-  value: _propTypes["default"].string,
-  /** The default value (uncontrolled). */
-  defaultValue: _propTypes["default"].string,
-  /** Text to display after the radio group label. Useful for errors or other info. */
-  helperText: _propTypes["default"].node,
-  /** If present this prop will cause a help hint to render in the label of the field. */
-  hintText: _propTypes["default"].string,
-  /** Determines the arrangement of the radios. */
-  orientation: _propTypes["default"].oneOf(['horizontal', 'vertical']),
-  /**
-   * Handler that is called when the value changes.
-   *
-   * `(newValue) => void`
-   */
-  onChange: _propTypes["default"].func,
-  /** Whether the radio group is disabled. */
-  isDisabled: _propTypes["default"].bool,
-  /** Whether user input is required on the input before form submission. */
-  isRequired: _propTypes["default"].bool,
-  /**
-   * The content to display as the label. If not set, It is recommended to set an aria-label or
-   * aria-labelledby attribute for accessibility.
-  */
-  label: _propTypes["default"].node,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: _propTypes["default"].string
-}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
-RadioGroupField.displayName = displayName;
 var _default = RadioGroupField;
 exports["default"] = _default;

package/lib/cjs/components/RadioGroupField/RadioGroupField.stories.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../../types/radioGroupField").RadioGroupFieldProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+        };
+    };
+    argTypes: any;
+    args: {
+        label: string;
+        defaultValue: string;
+    };
+};
+export default _default;
+export declare const Default: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const Controlled: () => React.JSX.Element;
+export declare const Required: () => React.JSX.Element;
+export declare const CheckedContent: () => React.JSX.Element;
+export declare const HelperText: {
+    (): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const HorizontalOrientation: () => React.JSX.Element;

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

@@ -20,6 +20,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireWildcard(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _RadioGroupField = _interopRequireDefault(require("./RadioGroupField.mdx"));
@@ -85,6 +86,12 @@ var Default = function Default(args) {
   }));
 };
 exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.radioGroup["default"]
+  }
+};
 var Controlled = function Controlled() {
   var _useState = (0, _react.useState)('A'),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),

package/lib/cjs/components/RadioGroupField/RadioGroupField.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -34,16 +34,16 @@ var defaultProps = {
 var getComponent = function getComponent() {
   var groupProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var radioProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, groupProps), (0, _react2.jsx)(_RadioField["default"], (0, _extends2["default"])({
+  return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, groupProps), (0, _react2.jsx)(_RadioField["default"], {
     value: testValues[0],
     label: testValues[0]
-  }, radioProps[0])), (0, _react2.jsx)(_RadioField["default"], (0, _extends2["default"])({
+  }), (0, _react2.jsx)(_RadioField["default"], {
     value: testValues[1],
     label: testValues[1]
-  }, radioProps[1])), (0, _react2.jsx)(_RadioField["default"], (0, _extends2["default"])({
+  }), (0, _react2.jsx)(_RadioField["default"], {
     value: testValues[2],
     label: testValues[2]
-  }, radioProps[2]))));
+  })));
 };
 
 // Needs to be added to each components test file

package/lib/cjs/components/RadioGroupField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './RadioGroupField';

package/lib/cjs/types/radio.d.ts

@@ -0,0 +1,3 @@
+export interface RadioProps {
+    variant: string;
+}

package/lib/cjs/types/radio.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/radioField.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { Status } from './item';
+import { DOMAttributes } from './shared';
+export interface RadioFieldProps extends DOMAttributes {
+    /** Content to display when the radio is checked. */
+    checkedContent?: ReactNode;
+    /** props spread into the input element */
+    controlProps?: object;
+    /** The rendered label for the field. */
+    label?: ReactNode;
+    /** Whether the element should receive focus on render. */
+    hasAutoFocus?: boolean;
+    /** Text rendered below the input. */
+    helperText?: ReactNode;
+    /** If present this prop will cause a help hint to render in the label of the field. */
+    hintText?: string;
+    /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+    id?: string;
+    /**
+     * Whether the radio button is disabled or not. Shows that a selection exists, but is not
+     * available in that circumstance.
+    */
+    isDisabled?: boolean;
+    /** Whether the Radio can be interacted with but cannot have its selection state changed. */
+    isReadOnly?: boolean;
+    /** Whether the Radio is required. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required). */
+    isRequired?: boolean;
+    /** the status of the radio field */
+    status?: Status;
+    /** The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). */
+    value: string;
+    /** Handler that is called when the element receives focus. */
+    onFocus?: () => void;
+    /** Handler that is called when the element loses focus. */
+    onBlur?: () => void;
+    /** Handler that is called when the element's focus status changes. */
+    onFocusChange?: () => void;
+    /** Handler that is called when a key is pressed. */
+    onKeyDown?: () => void;
+    /** Handler that is called when a key is released. */
+    onKeyUp?: () => void;
+}

package/lib/cjs/types/radioField.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/radioGroupField.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { AriaRadioGroupProps } from 'react-aria';
+import { SharedFieldProps } from './shared/fieldProps';
+export interface RadioGroupFieldProps extends Omit<AriaRadioGroupProps, 'label'>, SharedFieldProps {
+    className?: string;
+    id?: string;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    children?: ReactNode;
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    orientation?: 'horizontal' | 'vertical';
+    onChange?: (value: string) => void;
+}

package/lib/cjs/types/radioGroupField.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/utils/designUtils/figmaLinks.d.ts

@@ -149,6 +149,9 @@ export declare const FIGMA_LINKS: {
     popoverMenu: {
         default: string;
     };
+    radioGroup: {
+        default: string;
+    };
     requirementsList: {
         default: string;
     };

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -156,6 +156,9 @@ var FIGMA_LINKS = {
   popoverMenu: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A3073&t=We3h7LaaFJQnxdSy-1'
   },
+  radioGroup: {
+    "default": 'https://embed.figma.com/design/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?m=auto&node-id=3613-12435&embed-host=share'
+  },
   requirementsList: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A4039&t=We3h7LaaFJQnxdSy-1'
   },

package/lib/components/Radio/Radio.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { forwardRef } from 'react';
 import { Radio as ThemeUIRadio } from 'theme-ui';
-
+import { jsx as ___EmotionJSX } from "@emotion/react";
 /**
  * Basic radio input wrapped in a label.
  * Built on top of the [Radio from Theme-UI](https://theme-ui.com/components/radio/) and uses the
@@ -10,7 +10,6 @@ import { Radio as ThemeUIRadio } from 'theme-ui';
  * **Note: Requires a label. It's recommended to use `RadioGroupField` with `RadioField` for a**
  * **solution.**
  */
-import { jsx as ___EmotionJSX } from "@emotion/react";
 var Radio = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(ThemeUIRadio, _extends({
     ref: ref

package/lib/components/Radio/Radio.styles.js

@@ -14,14 +14,16 @@ var base = {
     bg: 'transparent',
     boxSizing: 'border-box'
   },
-  'input ~ &.is-focused': isSafari ? {
+  'input ~ &.is-focused': /* istanbul ignore next */
+  isSafari ? {
     boxShadow: 'none',
     border: '1px solid',
     borderColor: 'focus',
     boxSizing: 'border-box',
     transform: 'scale(1.1)',
     transformOrigin: 'center'
-  } : focusWithCroppedOutline
+  }
+  /* istanbul ignore next */ : focusWithCroppedOutline
 };
 var outerContainer = {
   '.is-horizontal &': {

package/lib/components/RadioField/RadioField.js

@@ -10,18 +10,16 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 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, { createContext, forwardRef, useContext, useImperativeHandle, useRef } from 'react';
+import React, { createContext, forwardRef, useContext } from 'react';
 import { useRadio } from 'react-aria';
-import PropTypes from 'prop-types';
-import { useField, usePropWarning } from '../../hooks';
-import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
+import { useField, useLocalOrForwardRef, usePropWarning } from '../../hooks';
 import Box from '../Box';
 import FieldHelperText from '../FieldHelperText';
 import Label from '../Label';
 import Radio from '../Radio';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var RadioContext = /*#__PURE__*/createContext();
+var defaultValue = {};
+export var RadioContext = /*#__PURE__*/createContext(defaultValue);
 
 /**
  * Combines a radio, label, and helper text for a complete, form-ready solution.
@@ -37,20 +35,17 @@ var RadioField = /*#__PURE__*/forwardRef(function (props, ref) {
     radioDisabled = props.isDisabled,
     label = props.label,
     status = props.status;
-  var radioFieldRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return radioFieldRef.current;
-  });
+  var radioFieldRef = useLocalOrForwardRef(ref);
   var state = useContext(RadioContext);
   var groupDisabled = state.isDisabled;
   var isDisabled = radioDisabled || groupDisabled;
   var _useRadio = useRadio(_objectSpread(_objectSpread({
       children: label,
-      autoFocus: hasAutoFocus,
+      autoFocus: hasAutoFocus
+    }, props), {}, {
       isDisabled: isDisabled
-    }, props), controlProps), state, radioFieldRef),
+    }, controlProps), state, radioFieldRef),
     inputProps = _useRadio.inputProps;
   var isChecked = inputProps.checked;
   var statusClasses = {
@@ -82,51 +77,5 @@ var RadioField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.radio.checkedContent"
   }, checkedContent));
 });
-RadioField.propTypes = _objectSpread(_objectSpread({
-  /** Content to display when the radio is checked. */
-  checkedContent: PropTypes.node,
-  /** The rendered label for the field. */
-  label: PropTypes.node,
-  /** Whether the element should receive focus on render. */
-  hasAutoFocus: PropTypes.bool,
-  /** Text rendered below the input. */
-  helperText: PropTypes.node,
-  /** If present this prop will cause a help hint to render in the label of the field. */
-  hintText: PropTypes.string,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: PropTypes.string,
-  /**
-   * Whether the radio button is disabled or not. Shows that a selection exists, but is not
-   * available in that circumstance.
-  */
-  isDisabled: PropTypes.bool,
-  /** Whether the Radio can be interacted with but cannot have its selection state changed. */
-  isReadOnly: PropTypes.bool,
-  /** Whether the Radio is required. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required). */
-  isRequired: PropTypes.bool,
-  /** The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). */
-  value: PropTypes.string,
-  /** Handler that is called when the element receives focus. */
-  onFocus: PropTypes.func,
-  /** Handler that is called when the element loses focus. */
-  onBlur: PropTypes.func,
-  /** Handler that is called when the element's focus status changes. */
-  onFocusChange: PropTypes.func,
-  /** Handler that is called when a key is pressed. */
-  onKeyDown: PropTypes.func,
-  /** Handler that is called when a key is released. */
-  onKeyUp: PropTypes.func,
-  /** Defines a string value that labels the current element. */
-  'aria-label': PropTypes.string,
-  /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby': PropTypes.string,
-  /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby': PropTypes.string,
-  /**
-   * Identifies the element (or elements) that provide a detailed, extended description for the
-   * object.
-  */
-  'aria-details': PropTypes.string
-}, statusPropTypes), ariaAttributesBasePropTypes);
 RadioField.displayName = 'RadioField';
 export default RadioField;

package/lib/components/RadioField/RadioField.test.js

@@ -16,7 +16,9 @@ var defaultProps = {
   value: testValue
 };
 var defaultState = {
-  setLastFocusedValue: function setLastFocusedValue() {}
+  setLastFocusedValue: function setLastFocusedValue() {
+    return jest.fn();
+  }
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -69,11 +71,12 @@ test('radio with checked content does not display if not checked', function () {
 });
 test('radio with checked content displays if checked', function () {
   var testContent = 'test content';
+  var customState = {
+    selectedValue: testValue
+  };
   getComponent({
     checkedContent: ___EmotionJSX("div", null, testContent)
-  }, {
-    selectedValue: testValue
-  });
+  }, customState);
   var content = screen.queryByText(testContent);
   expect(content).toBeInTheDocument();
 });

package/lib/components/RadioGroupField/RadioGroupField.js

@@ -1,27 +1,12 @@
-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";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-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 } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
-import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Label } from '../..';
 import { usePropWarning, useStatusClasses } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
-import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import { RadioContext } from '../RadioField';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var displayName = 'RadioGroupField';
@@ -73,36 +58,4 @@ var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
     id: helperTextId
   }, helperText));
 });
-RadioGroupField.propTypes = _objectSpread(_objectSpread(_objectSpread({
-  /** The name of the RadioGroupField, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons). */
-  name: PropTypes.string,
-  /** The current value (controlled). */
-  value: PropTypes.string,
-  /** The default value (uncontrolled). */
-  defaultValue: PropTypes.string,
-  /** Text to display after the radio group label. Useful for errors or other info. */
-  helperText: PropTypes.node,
-  /** If present this prop will cause a help hint to render in the label of the field. */
-  hintText: PropTypes.string,
-  /** Determines the arrangement of the radios. */
-  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * Handler that is called when the value changes.
-   *
-   * `(newValue) => void`
-   */
-  onChange: PropTypes.func,
-  /** Whether the radio group is disabled. */
-  isDisabled: PropTypes.bool,
-  /** Whether user input is required on the input before form submission. */
-  isRequired: PropTypes.bool,
-  /**
-   * The content to display as the label. If not set, It is recommended to set an aria-label or
-   * aria-labelledby attribute for accessibility.
-  */
-  label: PropTypes.node,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: PropTypes.string
-}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
-RadioGroupField.displayName = displayName;
 export default RadioGroupField;

package/lib/components/RadioGroupField/RadioGroupField.stories.js

@@ -13,6 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useState } from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { RadioField, RadioGroupField } from '../../index';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import { statusArgTypes } from '../../utils/docUtils/statusProp';
 import RadioGroupFieldReadme from './RadioGroupField.mdx';
@@ -72,6 +73,12 @@ export var Default = function Default(args) {
     label: "C"
   }));
 };
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.radioGroup["default"]
+  }
+};
 export var Controlled = function Controlled() {
   var _useState = useState('A'),
     _useState2 = _slicedToArray(_useState, 2),

package/lib/components/RadioGroupField/RadioGroupField.test.js

@@ -30,16 +30,16 @@ var defaultProps = {
 var getComponent = function getComponent() {
   var groupProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var radioProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  return render(___EmotionJSX(RadioGroupField, _extends({}, defaultProps, groupProps), ___EmotionJSX(RadioField, _extends({
+  return render(___EmotionJSX(RadioGroupField, _extends({}, defaultProps, groupProps), ___EmotionJSX(RadioField, {
     value: testValues[0],
     label: testValues[0]
-  }, radioProps[0])), ___EmotionJSX(RadioField, _extends({
+  }), ___EmotionJSX(RadioField, {
     value: testValues[1],
     label: testValues[1]
-  }, radioProps[1])), ___EmotionJSX(RadioField, _extends({
+  }), ___EmotionJSX(RadioField, {
     value: testValues[2],
     label: testValues[2]
-  }, radioProps[2]))));
+  })));
 };
 
 // Needs to be added to each components test file

package/lib/types/radio.js

@@ -0,0 +1 @@
+export {};

package/lib/types/radioField.js

@@ -0,0 +1 @@
+export {};

package/lib/types/radioGroupField.js

@@ -0,0 +1 @@
+export {};

package/lib/utils/designUtils/figmaLinks.js

@@ -149,6 +149,9 @@ export var FIGMA_LINKS = {
   popoverMenu: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A3073&t=We3h7LaaFJQnxdSy-1'
   },
+  radioGroup: {
+    "default": 'https://embed.figma.com/design/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?m=auto&node-id=3613-12435&embed-host=share'
+  },
   requirementsList: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A4039&t=We3h7LaaFJQnxdSy-1'
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.97.0-alpha.1",
+  "version": "2.98.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",