+ );
+};
+
+const FORM_TEXT_TYPE_CHOICES = [
+ 'default',
+ 'valid',
+ 'invalid',
+ 'warning',
+ 'criteria-empty',
+ 'criteria-valid',
+ 'criteria-invalid',
+];
+
+FormText.propTypes = {
+ /** Specifies contents of the component. */
+ children: PropTypes.node.isRequired,
+ /** Specifies class name to append to the base element. */
+ className: PropTypes.string,
+ /** Specifies whether to show an icon next to the text. */
+ hasIcon: PropTypes.bool,
+ /** Specifies text type, this affects styling. */
+ type: PropTypes.oneOf(FORM_TEXT_TYPE_CHOICES),
+ /** Specifies icon to show, will only be shown if `hasIcon` prop is set to `true`. */
+ icon: PropTypes.node,
+ /** Specifies whether to show text with muted styling. */
+ muted: PropTypes.bool,
+};
+
+FormText.defaultProps = {
+ hasIcon: true,
+ type: 'default',
+ icon: undefined,
+ className: undefined,
+ muted: false,
+};
+
+export default FormText;
+export {
+ FORM_TEXT_TYPES,
+ // FORM_TEXT_ICONS,
+ // FormTextIcon,
+ resolveTextType,
+};
diff --git a/src/editors/sharedComponents/SelectableBox/README.md b/src/editors/sharedComponents/SelectableBox/README.md
new file mode 100644
index 000000000..4ab1f417d
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/README.md
@@ -0,0 +1,215 @@
+---
+title: 'SelectableBox'
+type: 'component'
+components:
+- SelectableBox
+- SelectableBoxSet
+categories:
+- Forms
+- Content
+status: 'New'
+designStatus: 'Done'
+devStatus: 'In progress'
+notes: |
+---
+
+A box that has selection states. It can be used as an alternative to a radio button or checkbox set.
+
+The ``SelectableBox`` can contain any kind of content as long as it is not clickable. In other words, there should be no clickable targets distinct from selection.
+
+## Basic Usage
+
+As ``Checkbox``
+
+```jsx live
+() => {
+ const type = 'checkbox';
+ const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
+ const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);
+
+ const handleChange = e => {
+ e.target.checked ? add(e.target.value) : remove(e.target.value);
+ };
+
+ const isInvalid = () => checkedCheeses.includes('swiss');
+ const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+ return (
+