@automattic/vip-design-system 2.8.2 → 2.10.0

package/build/system/Form/RadioBoxGroup.js

@@ -39,6 +39,7 @@ const RadioOption = ( {
 				cursor: 'pointer',
 				borderRadius: 2,
 				minWidth: 220,
+				flexGrow: 1,
 				textAlign: 'left',
 				border: '1px solid',
 				borderColor: 'input.radio-box.border.default',
@@ -94,16 +95,6 @@ const RadioOption = ( {
 	);
 };
 
-RadioOption.propTypes = {
-	defaultValue: PropTypes.string,
-	option: PropTypes.object,
-	name: PropTypes.string,
-	onChangeHandler: PropTypes.func,
-	checked: PropTypes.bool,
-	disabled: PropTypes.bool,
-	width: PropTypes.string,
-};
-
 const RadioBoxGroup = React.forwardRef(
 	(
 		{
@@ -148,11 +139,11 @@ const RadioBoxGroup = React.forwardRef(
 				<fieldset
 					sx={ {
 						border: 0,
-						p: hasError ? 2 : 0,
 						display: 'inline-block',
 						mb: 2,
+						p: 0,
 						...( hasError
-							? { border: '1px solid', borderColor: 'input.border.error', borderRadius: 2 }
+							? { border: '1px solid', borderColor: 'input.border.error', borderRadius: 2, p: 2 }
 							: {} ),
 					} }
 					ref={ forwardRef }
@@ -171,6 +162,7 @@ const RadioBoxGroup = React.forwardRef(
 					<div
 						sx={ {
 							display: 'flex',
+							flexWrap: 'wrap',
 							gap: 2,
 						} }
 					>

package/build/system/Form/RadioBoxGroup.stories.d.ts

@@ -1,6 +1,13 @@
 declare namespace _default {
     export let title: string;
     export { RadioBoxGroup as component };
+    export namespace parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+    }
 }
 export default _default;
 export function Default(): import("react").JSX.Element;

package/build/system/Form/RadioBoxGroup.stories.jsx

@@ -11,6 +11,31 @@ import { RadioBoxGroup } from '..';
 export default {
 	title: 'RadioBoxGroup',
 	component: RadioBoxGroup,
+	parameters: {
+		docs: {
+			description: {
+				component: `
+A radio-box-group is a group of radio buttons that are styled as boxes. This component is used
+to allow users to select one option from a list of options.
+
+## Guidance
+
+### When to use the component
+
+- <strong>Select an option in a form.</strong> Use a radio-box-group when you want users to select
+a single option from a list of options.
+- <strong>Use as a toggle-group.</strong> Use a radio-box-group with the chip variant when you want
+to allow users to toggle between different options.
+
+-------
+
+This documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/tooltip/#package). We use USWDS as trusted source of truth for accessibility and usability best practices.
+
+## Component Properties
+`,
+			},
+		},
+	},
 };
 
 const options = [
@@ -38,7 +63,7 @@ export const Default = () => {
 			defaultValue={ value }
 			onChange={ e => setValue( e.target.value ) }
 			options={ options }
-			optionWidth="350px"
+			optionWidth="300px"
 		/>
 	);
 };

package/build/system/Form/RadioBoxGroup.test.d.ts

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

package/build/system/Form/RadioBoxGroup.test.jsx

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { RadioBoxGroup } from './RadioBoxGroup';
+
+const defaultProps = {
+	options: [
+		{
+			label: 'One',
+			value: 'one',
+			description: 'This is desc 1',
+		},
+		{
+			label: 'Two',
+			value: 'two',
+			description: 'This is desc 2',
+		},
+		{
+			label: 'Three',
+			value: 'three',
+			description: 'This is desc 3',
+		},
+	],
+	onChange: jest.fn(),
+};
+
+describe( '<RadioBoxGroup />', () => {
+	it( 'renders the component', async () => {
+		const { container } = render( <RadioBoxGroup { ...defaultProps } /> );
+
+		const dom = await screen.findAllByRole( 'radio' );
+
+		expect( dom ).toHaveLength( 3 );
+		expect( dom[ 0 ] ).toHaveAttribute( 'value', 'one' );
+		expect( dom[ 1 ] ).toHaveAttribute( 'value', 'two' );
+		expect( dom[ 2 ] ).toHaveAttribute( 'value', 'three' );
+
+		// Check for accessibility issues
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/build/system/Form/RadioGroupChip.d.ts

@@ -0,0 +1,25 @@
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
+import React from 'react';
+type Option = {
+    id?: string;
+    value: string;
+    label: React.ReactNode | string;
+};
+type RadioGroupChipProps = {
+    optionWidth?: string;
+    name?: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>, option?: Option) => void;
+    groupLabel?: string;
+    defaultValue?: string;
+    options: Option[];
+    disabled?: boolean;
+    errorMessage?: string;
+    hasError?: boolean;
+    required?: boolean;
+    size?: 'small' | 'medium';
+};
+declare const RadioGroupChip: React.ForwardRefExoticComponent<RadioGroupChipProps & React.RefAttributes<unknown>>;
+export { RadioGroupChip };

package/build/system/Form/RadioGroupChip.js

@@ -0,0 +1,169 @@
+"use strict";
+
+exports.__esModule = true;
+exports.RadioGroupChip = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _RequiredLabel = require("./RequiredLabel");
+var _Validation = require("./Validation");
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _excluded = ["name", "onChange", "groupLabel", "defaultValue", "options", "disabled", "errorMessage", "hasError", "required", "size"];
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
+/**
+ * Internal dependencies
+ */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var ChipOption = function ChipOption(_ref) {
+  var defaultValue = _ref.defaultValue,
+    _ref$option = _ref.option,
+    id = _ref$option.id,
+    value = _ref$option.value,
+    label = _ref$option.label,
+    name = _ref.name,
+    disabled = _ref.disabled,
+    onChangeHandler = _ref.onChangeHandler,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size;
+  var checked = "" + defaultValue === "" + value;
+  var forLabel = id || value;
+  var ref = _react["default"].useRef(null);
+  var describedById = "input-radio-box-" + forLabel + "-description";
+  return (0, _jsxRuntime.jsxs)("div", {
+    id: "o" + forLabel,
+    onClick: function onClick() {
+      if (ref.current) {
+        ref.current.click();
+      }
+    },
+    sx: {
+      display: 'inline-flex',
+      position: 'relative',
+      background: checked ? 'layer.4' : undefined,
+      color: 'text',
+      minHeight: size === 'small' ? '22px' : '32px',
+      boxShadow: checked ? 'low' : undefined,
+      '&:hover': {
+        background: checked ? 'layer.4' : 'layer.1'
+      },
+      borderRadius: 1
+    },
+    children: [(0, _jsxRuntime.jsx)("input", {
+      ref: ref,
+      type: "radio",
+      id: forLabel,
+      disabled: disabled,
+      name: name,
+      checked: checked,
+      "aria-checked": checked,
+      value: value,
+      onChange: onChangeHandler,
+      "aria-labelledby": describedById,
+      sx: {
+        opacity: 0,
+        height: 0,
+        width: 0,
+        position: 'absolute',
+        '&:focus-visible + label': function focusVisibleLabel(theme) {
+          return theme.outline;
+        }
+      }
+    }), (0, _jsxRuntime.jsx)("label", {
+      id: describedById,
+      htmlFor: forLabel,
+      sx: {
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        width: '100%',
+        px: size === 'small' ? 1 : 3,
+        fontWeight: 400,
+        fontSize: size === 'small' ? 1 : 2,
+        cursor: 'pointer',
+        borderRadius: 1
+      },
+      children: label
+    })]
+  });
+};
+var RadioGroupChip = exports.RadioGroupChip = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRef) {
+  var _ref2$name = _ref2.name,
+    name = _ref2$name === void 0 ? '' : _ref2$name,
+    onChange = _ref2.onChange,
+    groupLabel = _ref2.groupLabel,
+    defaultValue = _ref2.defaultValue,
+    options = _ref2.options,
+    disabled = _ref2.disabled,
+    errorMessage = _ref2.errorMessage,
+    hasError = _ref2.hasError,
+    required = _ref2.required,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  var onChangeHandler = (0, _react.useCallback)(function (e) {
+    var optionTriggered = options.find(function (option) {
+      return "" + option.value === "" + e.target.value;
+    });
+    onChange(e, optionTriggered);
+  }, [onChange]);
+  var renderedOptions = options.map(function (option) {
+    return (0, _jsxRuntime.jsx)(ChipOption, {
+      defaultValue: defaultValue,
+      disabled: disabled,
+      name: name,
+      option: option,
+      onChangeHandler: onChangeHandler,
+      size: size
+    }, (option == null ? void 0 : option.id) || (option == null ? void 0 : option.value));
+  });
+  return (0, _jsxRuntime.jsxs)("div", {
+    children: [(0, _jsxRuntime.jsxs)("fieldset", _extends({
+      sx: _extends({
+        border: 0,
+        background: 'layer.3',
+        p: size === 'small' ? '2px' : 1,
+        display: 'inline-flex',
+        gap: 1,
+        borderRadius: 1
+      }, hasError ? {
+        border: '1px solid',
+        borderColor: 'input.border.error',
+        borderRadius: 2,
+        p: 2
+      } : {})
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      ,
+      ref: forwardRef,
+      "aria-required": required,
+      role: "radiogroup"
+    }, props, {
+      children: [groupLabel ? (0, _jsxRuntime.jsxs)("legend", {
+        sx: {
+          mb: 2
+        },
+        children: [groupLabel, required ? (0, _jsxRuntime.jsx)(_RequiredLabel.RequiredLabel, {}) : null]
+      }) : (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+        children: "Choose an option"
+      }), (0, _jsxRuntime.jsx)("div", {
+        sx: {
+          display: 'flex',
+          gap: 1
+        },
+        children: renderedOptions
+      })]
+    })), hasError && errorMessage && (0, _jsxRuntime.jsx)(_Validation.Validation, {
+      isValid: false,
+      describedId: groupLabel,
+      children: errorMessage
+    })]
+  });
+});
+RadioGroupChip.displayName = 'RadioGroupChip';

package/build/system/Form/RadioGroupChip.stories.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        optionWidth?: string | undefined;
+        name?: string | undefined;
+        onChange: (e: import("react").ChangeEvent<HTMLInputElement>, option?: {
+            id?: string | undefined;
+            value: string;
+            label: import("react").ReactNode;
+        } | undefined) => void;
+        groupLabel?: string | undefined;
+        defaultValue?: string | undefined;
+        options: {
+            id?: string | undefined;
+            value: string;
+            label: import("react").ReactNode;
+        }[];
+        disabled?: boolean | undefined;
+        errorMessage?: string | undefined;
+        hasError?: boolean | undefined;
+        required?: boolean | undefined;
+        size?: "small" | "medium" | undefined;
+    } & import("react").RefAttributes<unknown>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const MediumSize: () => import("react").JSX.Element;
+export declare const SmallSize: () => import("react").JSX.Element;

package/build/system/Form/RadioGroupChip.stories.js

@@ -0,0 +1,61 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.SmallSize = exports.MediumSize = void 0;
+var _react = require("react");
+var _RadioGroupChip = require("./RadioGroupChip");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+/**
+ * External dependencies
+ */
+/**
+ * Internal dependencies
+ */
+var _default = exports["default"] = {
+  title: 'RadioGroupChip',
+  component: _RadioGroupChip.RadioGroupChip,
+  parameters: {
+    docs: {
+      description: {
+        component: "\nA radio-group-chip is a group of radio buttons that are styled as boxes. This component is used\nto allow users to toggle between different options\n\n-------\n\nThis documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/tooltip/#package). We use USWDS as trusted source of truth for accessibility and usability best practices.\n\n## Component Properties\n"
+      }
+    }
+  }
+};
+var MediumSize = exports.MediumSize = function MediumSize() {
+  var _useState = (0, _react.useState)('table'),
+    value = _useState[0],
+    setValue = _useState[1];
+  return (0, _jsxRuntime.jsx)(_RadioGroupChip.RadioGroupChip, {
+    defaultValue: value,
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    },
+    options: [{
+      label: 'Table',
+      value: 'table'
+    }, {
+      label: 'Grid',
+      value: 'grid'
+    }]
+  });
+};
+var SmallSize = exports.SmallSize = function SmallSize() {
+  var _useState2 = (0, _react.useState)('table'),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return (0, _jsxRuntime.jsx)(_RadioGroupChip.RadioGroupChip, {
+    defaultValue: value,
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    },
+    options: [{
+      label: 'Table',
+      value: 'table'
+    }, {
+      label: 'Grid',
+      value: 'grid'
+    }],
+    size: "small"
+  });
+};

package/build/system/Form/RadioGroupChip.test.d.ts

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

package/build/system/Form/RadioGroupChip.test.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _RadioGroupChip = require("./RadioGroupChip");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } /**
+ * External dependencies
+ */ /**
+ * Internal dependencies
+ */
+var defaultProps = {
+  options: [{
+    label: 'One',
+    value: 'one'
+  }, {
+    label: 'Two',
+    value: 'two'
+  }, {
+    label: 'Three',
+    value: 'three'
+  }],
+  onChange: jest.fn()
+};
+describe('<RadioGroupChip />', function () {
+  it('renders the default variant', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _render, container, dom;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react.render)((0, _jsxRuntime.jsx)(_RadioGroupChip.RadioGroupChip, _extends({}, defaultProps))), container = _render.container;
+          _context.next = 3;
+          return _react.screen.findAllByRole('radio');
+        case 3:
+          dom = _context.sent;
+          expect(dom).toHaveLength(3);
+          expect(dom[0]).toHaveAttribute('value', 'one');
+          expect(dom[1]).toHaveAttribute('value', 'two');
+          expect(dom[2]).toHaveAttribute('value', 'three');
+
+          // Check for accessibility issues
+          _context.t0 = expect;
+          _context.next = 11;
+          return (0, _jestAxe.axe)(container);
+        case 11:
+          _context.t1 = _context.sent;
+          (0, _context.t0)(_context.t1).toHaveNoViolations();
+        case 13:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+});

package/build/system/Tooltip/Tooltip.stories.js

@@ -13,7 +13,7 @@ var _default = exports["default"] = {
   parameters: {
     docs: {
       description: {
-        component: "\nA tooltip is a short descriptive message that appears when a user hovers or focuses on an\nelement. Our tooltip aims to be 100% CSS-only. It uses a global css approach to inject the\ntooltip styles.\n\n## Kwown issues\n\n- Storybook uses iframes to render the components. This means that the tooltip box will overlap in the demos, but you can click on each demo page to see the correct render.\n- The current implementation of this component is <strong>NOT</strong> protected from viewport\nclipping (collision). For now, you can pick another <code>vip-tooltip-position</code> if\npossible.\n\n## Guidance\n\n### When to use the tooltip component\n\n- <strong>Helpful, non-critical information.</strong> Use tooltips to strengthen an existing\nmessage.\n- <strong>Enhance confidence.</strong> Use tooltips to increase certainty about an\ninteraction.\n- <strong>Brief descriptions.</strong> Tooltips perform best with succinct helper text.\n- <strong>Lack of space.</strong> Tooltips are useful as a last resort for space-constrained\nUI. Explore other options for keeping content visible without a tooltip.\n\n### When to consider something else\n\n- <strong>Critical information.</strong> Don&apos;t hide information necessary for completing\na task behind an tooltip interaction.\n- <strong>Lengthy descriptions.</strong> Tooltips are microcopy, and should be brief.\nDon&apos;t use a tooltip if you need a lot of text.\n- <strong>Redundant content.</strong> Don&apos;t use a tooltip when its content is repetitive\nor if usability is obvious.\n- <strong>Sufficient space.</strong> If content can fit outside a tooltip, don&apos;t use a\ntooltip.\n\n## Using the component\n\n- <strong>Use affordances.</strong> A hidden tooltip is unusable. Use tooltips only on\nelements that appear interactive, like buttons or links.\n- <strong>Avoid collisions.</strong> Be careful not introduce conflicting hover or focus\nevents.\n- <strong>Use consistently.</strong> If using tooltips in one context, use in all similar\ncontexts.\n- <strong>Don&apos;t block content.</strong> Use the <code>vip-tooltip-position</code> attribute to\nprevent the tooltip from covering other page elements.\n\n-------\n\nThis documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/tooltip/#package). We use USWDS as trusted source of truth for accessibility and usability best practices.\n\n## Component Properties\n"
+        component: "\nA tooltip is a short descriptive message that appears when a user hovers or focuses on an\nelement. Our tooltip aims to be 100% CSS-only. It uses a global css approach to inject the\ntooltip styles.\n\n## Known issues\n\n- Storybook uses iframes to render the components. This means that the tooltip box will overlap in the demos, but you can click on each demo page to see the correct render.\n- The current implementation of this component is <strong>NOT</strong> protected from viewport\nclipping (collision). For now, you can pick another <code>vip-tooltip-position</code> if\npossible.\n\n## Guidance\n\n### When to use the tooltip component\n\n- <strong>Helpful, non-critical information.</strong> Use tooltips to strengthen an existing\nmessage.\n- <strong>Enhance confidence.</strong> Use tooltips to increase certainty about an\ninteraction.\n- <strong>Brief descriptions.</strong> Tooltips perform best with succinct helper text.\n- <strong>Lack of space.</strong> Tooltips are useful as a last resort for space-constrained\nUI. Explore other options for keeping content visible without a tooltip.\n\n### When to consider something else\n\n- <strong>Critical information.</strong> Don&apos;t hide information necessary for completing\na task behind an tooltip interaction.\n- <strong>Lengthy descriptions.</strong> Tooltips are microcopy, and should be brief.\nDon&apos;t use a tooltip if you need a lot of text.\n- <strong>Redundant content.</strong> Don&apos;t use a tooltip when its content is repetitive\nor if usability is obvious.\n- <strong>Sufficient space.</strong> If content can fit outside a tooltip, don&apos;t use a\ntooltip.\n\n## Using the component\n\n- <strong>Use affordances.</strong> A hidden tooltip is unusable. Use tooltips only on\nelements that appear interactive, like buttons or links.\n- <strong>Avoid collisions.</strong> Be careful not introduce conflicting hover or focus\nevents.\n- <strong>Use consistently.</strong> If using tooltips in one context, use in all similar\ncontexts.\n- <strong>Don&apos;t block content.</strong> Use the <code>vip-tooltip-position</code> attribute to\nprevent the tooltip from covering other page elements.\n\n-------\n\nThis documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/tooltip/#package). We use USWDS as trusted source of truth for accessibility and usability best practices.\n\n## Component Properties\n"
       }
     }
   }

package/build/system/index.d.ts

@@ -34,6 +34,7 @@ import { Heading } from './Heading';
 import { Hr } from './Hr/Hr';
 import { Input } from './Form';
 import { Label } from './Form';
+import { ScreenReaderText } from './ScreenReaderText';
 import { Spinner } from './Spinner';
 import { Table } from './Table';
 import { TableRow } from './Table';
@@ -59,4 +60,4 @@ import { Validation } from './Form';
 import { Wizard } from './Wizard';
 import { WizardStep } from './Wizard';
 import theme from './theme';
-export { Accordion, Avatar, Badge, Box, Breadcrumbs, Button, ButtonSubmit, ButtonVariant, Card, Checkbox, Code, Dialog, NewDialog, Form, Drawer, Dropdown, DialogButton, DialogMenu, DialogMenuItem, DialogDivider, DialogContent, DialogTrigger, ConfirmationDialog, MobileMenu, MobileMenuTrigger, MobileMenuWrapper, NewConfirmationDialog, Grid, FilterDropdown, Flex, Notice, OptionRow, Heading, Hr, Input, Label, Spinner, Table, TableRow, TableCell, Tooltip, Link, LinkExternal, Radio, RadioBoxGroup, Textarea, Progress, Text, Tabs, Nav, NavItem, TabsTrigger, TabsContent, TabsList, Toggle, ToggleRow, Toolbar, Validation, Wizard, WizardStep, theme };
+export { Accordion, Avatar, Badge, Box, Breadcrumbs, Button, ButtonSubmit, ButtonVariant, Card, Checkbox, Code, Dialog, NewDialog, Form, Drawer, Dropdown, DialogButton, DialogMenu, DialogMenuItem, DialogDivider, DialogContent, DialogTrigger, ConfirmationDialog, MobileMenu, MobileMenuTrigger, MobileMenuWrapper, NewConfirmationDialog, Grid, FilterDropdown, Flex, Notice, OptionRow, Heading, Hr, Input, Label, ScreenReaderText, Spinner, Table, TableRow, TableCell, Tooltip, Link, LinkExternal, Radio, RadioBoxGroup, Textarea, Progress, Text, Tabs, Nav, NavItem, TabsTrigger, TabsContent, TabsList, Toggle, ToggleRow, Toolbar, Validation, Wizard, WizardStep, theme };

package/build/system/index.js

@@ -48,6 +48,7 @@ import * as Form from './NewForm';
 import { Notice } from './Notice';
 import { OptionRow } from './OptionRow';
 import { Progress } from './Progress';
+import { ScreenReaderText } from './ScreenReaderText';
 import { Spinner } from './Spinner';
 import { Table, TableRow, TableCell } from './Table';
 import { Tabs, TabsList, TabsContent, TabsTrigger } from './Tabs';
@@ -94,6 +95,7 @@ export {
 	Hr,
 	Input,
 	Label,
+	ScreenReaderText,
 	Spinner,
 	Table,
 	TableRow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.8.2",
+  "version": "2.10.0",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",

package/src/system/Form/RadioBoxGroup.js

@@ -39,6 +39,7 @@ const RadioOption = ( {
 				cursor: 'pointer',
 				borderRadius: 2,
 				minWidth: 220,
+				flexGrow: 1,
 				textAlign: 'left',
 				border: '1px solid',
 				borderColor: 'input.radio-box.border.default',
@@ -94,16 +95,6 @@ const RadioOption = ( {
 	);
 };
 
-RadioOption.propTypes = {
-	defaultValue: PropTypes.string,
-	option: PropTypes.object,
-	name: PropTypes.string,
-	onChangeHandler: PropTypes.func,
-	checked: PropTypes.bool,
-	disabled: PropTypes.bool,
-	width: PropTypes.string,
-};
-
 const RadioBoxGroup = React.forwardRef(
 	(
 		{
@@ -148,11 +139,11 @@ const RadioBoxGroup = React.forwardRef(
 				<fieldset
 					sx={ {
 						border: 0,
-						p: hasError ? 2 : 0,
 						display: 'inline-block',
 						mb: 2,
+						p: 0,
 						...( hasError
-							? { border: '1px solid', borderColor: 'input.border.error', borderRadius: 2 }
+							? { border: '1px solid', borderColor: 'input.border.error', borderRadius: 2, p: 2 }
 							: {} ),
 					} }
 					ref={ forwardRef }
@@ -171,6 +162,7 @@ const RadioBoxGroup = React.forwardRef(
 					<div
 						sx={ {
 							display: 'flex',
+							flexWrap: 'wrap',
 							gap: 2,
 						} }
 					>

package/src/system/Form/RadioBoxGroup.stories.jsx

@@ -11,6 +11,31 @@ import { RadioBoxGroup } from '..';
 export default {
 	title: 'RadioBoxGroup',
 	component: RadioBoxGroup,
+	parameters: {
+		docs: {
+			description: {
+				component: `
+A radio-box-group is a group of radio buttons that are styled as boxes. This component is used
+to allow users to select one option from a list of options.
+
+## Guidance
+
+### When to use the component
+
+- <strong>Select an option in a form.</strong> Use a radio-box-group when you want users to select
+a single option from a list of options.
+- <strong>Use as a toggle-group.</strong> Use a radio-box-group with the chip variant when you want
+to allow users to toggle between different options.
+
+-------
+
+This documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/tooltip/#package). We use USWDS as trusted source of truth for accessibility and usability best practices.
+
+## Component Properties
+`,
+			},
+		},
+	},
 };
 
 const options = [
@@ -38,7 +63,7 @@ export const Default = () => {
 			defaultValue={ value }
 			onChange={ e => setValue( e.target.value ) }
 			options={ options }
-			optionWidth="350px"
+			optionWidth="300px"
 		/>
 	);
 };

package/src/system/Form/RadioBoxGroup.test.jsx

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { RadioBoxGroup } from './RadioBoxGroup';
+
+const defaultProps = {
+	options: [
+		{
+			label: 'One',
+			value: 'one',
+			description: 'This is desc 1',
+		},
+		{
+			label: 'Two',
+			value: 'two',
+			description: 'This is desc 2',
+		},
+		{
+			label: 'Three',
+			value: 'three',
+			description: 'This is desc 3',
+		},
+	],
+	onChange: jest.fn(),
+};
+
+describe( '<RadioBoxGroup />', () => {
+	it( 'renders the component', async () => {
+		const { container } = render( <RadioBoxGroup { ...defaultProps } /> );
+
+		const dom = await screen.findAllByRole( 'radio' );
+
+		expect( dom ).toHaveLength( 3 );
+		expect( dom[ 0 ] ).toHaveAttribute( 'value', 'one' );
+		expect( dom[ 1 ] ).toHaveAttribute( 'value', 'two' );
+		expect( dom[ 2 ] ).toHaveAttribute( 'value', 'three' );
+
+		// Check for accessibility issues
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Form/RadioGroupChip.stories.tsx

@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import { useState } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { RadioGroupChip } from './RadioGroupChip';
+
+export default {
+	title: 'RadioGroupChip',
+	component: RadioGroupChip,
+	parameters: {
+		docs: {
+			description: {
+				component: `
+A radio-group-chip is a group of radio buttons that are styled as boxes. This component is used
+to allow users to toggle between different options
+
+-------
+
+This documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/tooltip/#package). We use USWDS as trusted source of truth for accessibility and usability best practices.
+
+## Component Properties
+`,
+			},
+		},
+	},
+};
+
+export const MediumSize = () => {
+	const [ value, setValue ] = useState( 'table' );
+
+	return (
+		<RadioGroupChip
+			defaultValue={ value }
+			onChange={ e => setValue( e.target.value ) }
+			options={ [
+				{
+					label: 'Table',
+					value: 'table',
+				},
+				{
+					label: 'Grid',
+					value: 'grid',
+				},
+			] }
+		/>
+	);
+};
+
+export const SmallSize = () => {
+	const [ value, setValue ] = useState( 'table' );
+
+	return (
+		<RadioGroupChip
+			defaultValue={ value }
+			onChange={ e => setValue( e.target.value ) }
+			options={ [
+				{
+					label: 'Table',
+					value: 'table',
+				},
+				{
+					label: 'Grid',
+					value: 'grid',
+				},
+			] }
+			size="small"
+		/>
+	);
+};

package/src/system/Form/RadioGroupChip.test.tsx

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { RadioGroupChip } from './RadioGroupChip';
+
+const defaultProps = {
+	options: [
+		{
+			label: 'One',
+			value: 'one',
+		},
+		{
+			label: 'Two',
+			value: 'two',
+		},
+		{
+			label: 'Three',
+			value: 'three',
+		},
+	],
+	onChange: jest.fn(),
+};
+
+describe( '<RadioGroupChip />', () => {
+	it( 'renders the default variant', async () => {
+		const { container } = render( <RadioGroupChip { ...defaultProps } /> );
+
+		const dom = await screen.findAllByRole( 'radio' );
+
+		expect( dom ).toHaveLength( 3 );
+		expect( dom[ 0 ] ).toHaveAttribute( 'value', 'one' );
+		expect( dom[ 1 ] ).toHaveAttribute( 'value', 'two' );
+		expect( dom[ 2 ] ).toHaveAttribute( 'value', 'three' );
+
+		// Check for accessibility issues
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Form/RadioGroupChip.tsx

@@ -0,0 +1,216 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React, { useCallback } from 'react';
+import { Theme } from 'theme-ui';
+
+import { RequiredLabel } from './RequiredLabel';
+import { Validation } from './Validation';
+import ScreenReaderText from '../ScreenReaderText';
+
+/**
+ * Internal dependencies
+ */
+
+interface InputTheme extends Theme {
+	outline?: Record< string, string >;
+}
+
+type Option = {
+	id?: string;
+	value: string;
+	label: React.ReactNode | string;
+};
+
+type ChipOptionProps = {
+	defaultValue?: string;
+	option: Option;
+	name: string;
+	disabled?: boolean;
+	onChangeHandler: ( e: React.ChangeEvent< HTMLInputElement > ) => void;
+	size: 'small' | 'medium';
+};
+
+const ChipOption = ( {
+	defaultValue,
+	option: { id, value, label },
+	name,
+	disabled,
+	onChangeHandler,
+	size = 'medium',
+}: ChipOptionProps ) => {
+	const checked = `${ defaultValue }` === `${ value }`;
+	const forLabel = id || value;
+	const ref = React.useRef( null );
+	const describedById = `input-radio-box-${ forLabel }-description`;
+
+	return (
+		<div
+			id={ `o${ forLabel }` }
+			onClick={ () => {
+				if ( ref.current ) {
+					( ref.current as HTMLInputElement ).click();
+				}
+			} }
+			sx={ {
+				display: 'inline-flex',
+				position: 'relative',
+				background: checked ? 'layer.4' : undefined,
+				color: 'text',
+				minHeight: size === 'small' ? '22px' : '32px',
+				boxShadow: checked ? 'low' : undefined,
+				'&:hover': {
+					background: checked ? 'layer.4' : 'layer.1',
+				},
+				borderRadius: 1,
+			} }
+		>
+			<input
+				ref={ ref }
+				type="radio"
+				id={ forLabel }
+				disabled={ disabled }
+				name={ name }
+				checked={ checked }
+				aria-checked={ checked }
+				value={ value }
+				onChange={ onChangeHandler }
+				aria-labelledby={ describedById }
+				sx={ {
+					opacity: 0,
+					height: 0,
+					width: 0,
+					position: 'absolute',
+					'&:focus-visible + label': ( theme: InputTheme ) => theme.outline,
+				} }
+			/>
+
+			<label
+				id={ describedById }
+				htmlFor={ forLabel }
+				sx={ {
+					height: '100%',
+					display: 'flex',
+					flexDirection: 'column',
+					justifyContent: 'center',
+					width: '100%',
+					px: size === 'small' ? 1 : 3,
+					fontWeight: 400,
+					fontSize: size === 'small' ? 1 : 2,
+					cursor: 'pointer',
+					borderRadius: 1,
+				} }
+			>
+				{ label }
+			</label>
+		</div>
+	);
+};
+
+type RadioGroupChipProps = {
+	optionWidth?: string;
+	name?: string;
+	onChange: ( e: React.ChangeEvent< HTMLInputElement >, option?: Option ) => void;
+	groupLabel?: string;
+	defaultValue?: string;
+	options: Option[];
+	disabled?: boolean;
+	errorMessage?: string;
+	hasError?: boolean;
+	required?: boolean;
+	size?: 'small' | 'medium';
+};
+
+const RadioGroupChip = React.forwardRef(
+	(
+		{
+			name = '',
+			onChange,
+			groupLabel,
+			defaultValue,
+			options,
+			disabled,
+			errorMessage,
+			hasError,
+			required,
+			size = 'medium',
+			...props
+		}: RadioGroupChipProps,
+		forwardRef
+	) => {
+		const onChangeHandler = useCallback(
+			( e: React.ChangeEvent< HTMLInputElement > ) => {
+				const optionTriggered = options.find(
+					option => `${ option.value }` === `${ e.target.value }`
+				);
+				onChange( e, optionTriggered );
+			},
+			[ onChange ]
+		);
+
+		const renderedOptions = options.map( option => (
+			<ChipOption
+				defaultValue={ defaultValue }
+				disabled={ disabled }
+				key={ option?.id || option?.value }
+				name={ name }
+				option={ option }
+				onChangeHandler={ onChangeHandler }
+				size={ size }
+			/>
+		) );
+
+		return (
+			<div>
+				<fieldset
+					sx={ {
+						border: 0,
+						background: 'layer.3',
+						p: size === 'small' ? '2px' : 1,
+						display: 'inline-flex',
+						gap: 1,
+						borderRadius: 1,
+						...( hasError
+							? { border: '1px solid', borderColor: 'input.border.error', borderRadius: 2, p: 2 }
+							: {} ),
+					} }
+					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+					// @ts-expect-error
+					ref={ forwardRef }
+					aria-required={ required }
+					role="radiogroup"
+					{ ...props }
+				>
+					{ groupLabel ? (
+						<legend sx={ { mb: 2 } }>
+							{ groupLabel }
+							{ required ? <RequiredLabel /> : null }
+						</legend>
+					) : (
+						<ScreenReaderText>Choose an option</ScreenReaderText>
+					) }
+					<div
+						sx={ {
+							display: 'flex',
+							gap: 1,
+						} }
+					>
+						{ renderedOptions }
+					</div>
+				</fieldset>
+
+				{ hasError && errorMessage && (
+					<Validation isValid={ false } describedId={ groupLabel }>
+						{ errorMessage }
+					</Validation>
+				) }
+			</div>
+		);
+	}
+);
+
+RadioGroupChip.displayName = 'RadioGroupChip';
+
+export { RadioGroupChip };

package/src/system/Tooltip/Tooltip.stories.tsx

@@ -14,7 +14,7 @@ A tooltip is a short descriptive message that appears when a user hovers or focu
 element. Our tooltip aims to be 100% CSS-only. It uses a global css approach to inject the
 tooltip styles.
 
-## Kwown issues
+## Known issues
 
 - Storybook uses iframes to render the components. This means that the tooltip box will overlap in the demos, but you can click on each demo page to see the correct render.
 - The current implementation of this component is <strong>NOT</strong> protected from viewport

package/src/system/index.js

@@ -48,6 +48,7 @@ import * as Form from './NewForm';
 import { Notice } from './Notice';
 import { OptionRow } from './OptionRow';
 import { Progress } from './Progress';
+import { ScreenReaderText } from './ScreenReaderText';
 import { Spinner } from './Spinner';
 import { Table, TableRow, TableCell } from './Table';
 import { Tabs, TabsList, TabsContent, TabsTrigger } from './Tabs';
@@ -94,6 +95,7 @@ export {
 	Hr,
 	Input,
 	Label,
+	ScreenReaderText,
 	Spinner,
 	Table,
 	TableRow,