@financial-times/o3-form 0.3.2 → 0.4.0

package/cjs/CheckBox.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CheckBoxProps, b as FormFieldsetProps } from './index-BZth9mTZ.js';
+import { C as CheckBoxProps, F as FormFieldsetProps } from './index-CHdbHHZ0.js';
 
 declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
 declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;

package/cjs/CheckBox.js

@@ -3,11 +3,11 @@ var _react = require('react');
 var _FormField = require('./fieldComponents/FormField');
 const CheckBoxItem = (props) => {
   let { inputId, attributes, optional, error } = props;
-  const classNames = ["o3-form-input__checkbox-input", "o3-visually-hidden"];
+  const classNames = ["o3-form-input-checkbox__input", "o3-visually-hidden"];
   if (error) {
     classNames.push("o3-form-input-error");
   }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "o3-form-input__checkbox", children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "o3-form-input-checkbox", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "input",
       {
@@ -19,7 +19,7 @@ const CheckBoxItem = (props) => {
         "aria-required": !optional
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: inputId, className: "o3-form-input__checkbox-label", children: props.checkboxLabel })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: inputId, className: "o3-form-input-checkbox__label", children: props.checkboxLabel })
   ] });
 };
 const CheckBox = (props) => {

package/cjs/Error-summary.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { E as ErrorSummaryProps } from './index-CHdbHHZ0.js';
+
+declare const ErrorSummary: ({ errors, errorMessage, }: ErrorSummaryProps) => react_jsx_runtime.JSX.Element;
+
+export { ErrorSummary };

package/cjs/Error-summary.js

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+const ErrorSummary = ({
+  errors,
+  errorMessage = "Please correct these errors and try again."
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "o3-form__error-summary", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "o3-form__error-summary-icon" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: "o3-form__error-summary__heading",
+        role: "alert",
+        "aria-labelledby": "error-summary-title",
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { id: "error-summary-title", className: "o3-typography-heading5", children: errorMessage }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: "o3-forms__error-summary__list o3-typography-body-small", children: errors.map(({ id, fieldName, message }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { className: "o3-typography-link", href: `#${id}`, children: fieldName }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+              ": ",
+              message
+            ] })
+          ] }, id)) })
+        ]
+      }
+    )
+  ] });
+};
+
+
+exports.ErrorSummary = ErrorSummary;

package/cjs/PasswordInput.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { a as FormFieldProps } from './index-CHdbHHZ0.js';
+
+interface PasswordInputProps extends FormFieldProps {
+    disabled?: boolean;
+}
+declare const PasswordInput: ({ label, feedback, description, disabled, attributes, inputId, optional, }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
+
+export { PasswordInput };

package/cjs/PasswordInput.js

@@ -0,0 +1,55 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _FormField = require('./fieldComponents/FormField');
+var _CheckBox = require('./CheckBox');
+const PasswordInput = ({
+  label,
+  feedback,
+  description,
+  disabled,
+  attributes,
+  inputId,
+  optional
+}) => {
+  const inputClasses = ["o3-form", "o3-form-text-input"];
+  if (feedback && feedback.type === "error") {
+    inputClasses.push("o3-form-text-input--error");
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _FormField.LabeledFormField,
+      {
+        label,
+        feedback,
+        description,
+        inputId,
+        optional,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "input",
+          {
+            ...attributes,
+            id: inputId,
+            disabled,
+            className: inputClasses.join(" "),
+            required: !optional,
+            "aria-required": !optional,
+            type: "password"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "o3-password-input__controls", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _CheckBox.CheckBoxItem,
+        {
+          attributes: { disabled },
+          inputId: "showPassword",
+          checkboxLabel: "Show Password"
+        }
+      ),
+      !disabled && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { href: "", children: "Forgot password?" })
+    ] })
+  ] });
+};
+
+
+exports.PasswordInput = PasswordInput;

package/cjs/RadioButton.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { R as RadioButtonProps, F as FormFieldsetProps } from './index-CHdbHHZ0.js';
+
+declare const RadioButtonItem: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
+declare const RadioButtonGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
+
+export { RadioButtonGroup, RadioButtonItem };

package/cjs/RadioButton.js

@@ -0,0 +1,52 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');
+var _react = require('react');
+var _FormField = require('./fieldComponents/FormField');
+const RadioButtonItem = (props) => {
+  let { inputId, attributes, optional, error } = props;
+  const classNames = [
+    "o3-form-input-radio-button",
+    "o3-visually-hidden"
+  ];
+  if (error) {
+    classNames.push("o3-form-input-error");
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "input",
+      {
+        ...attributes,
+        type: "radio",
+        id: inputId,
+        className: classNames.join(" "),
+        required: !optional,
+        "aria-required": !optional
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: inputId, className: "o3-form-input-radio-button__label", children: props.radioButtonLabel })
+  ] });
+};
+const RadioButtonGroup = (props) => {
+  const { children, ...restProps } = props;
+  const radioGroupName = Math.random().toString(36).substring(7);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FormField.FormFieldset, { ...restProps, children: children.map((child) => {
+    const hasError = _optionalChain([props, 'access', _ => _.feedback, 'optionalAccess', _2 => _2.errorElementIds, 'optionalAccess', _3 => _3.includes, 'call', _4 => _4(
+      child.props.inputId
+    )]);
+    return /* @__PURE__ */ _react.createElement.call(void 0, 
+      RadioButtonItem,
+      {
+        ...child.props,
+        error: hasError,
+        key: child.props.inputId,
+        attributes: {
+          ...child.props.attributes,
+          name: radioGroupName
+        }
+      }
+    );
+  }) });
+};
+
+
+
+exports.RadioButtonGroup = RadioButtonGroup; exports.RadioButtonItem = RadioButtonItem;

package/cjs/TextInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { T as TextInputProps } from './index-BZth9mTZ.js';
+import { T as TextInputProps } from './index-CHdbHHZ0.js';
 
 declare const TextInput: ({ label, feedback, description, disabled, length, attributes, inputId, optional, }: TextInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/TextInput.js

@@ -1,5 +1,4 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
-require('../../main.css');
 var _FormField = require('./fieldComponents/FormField');
 const TextInput = ({
   label,
@@ -25,6 +24,7 @@ const TextInput = ({
       feedback,
       description,
       inputId,
+      optional,
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "input",
         {
@@ -32,8 +32,8 @@ const TextInput = ({
           id: inputId,
           disabled,
           className: inputClasses.join(" "),
-          required: optional,
-          "aria-required": optional,
+          required: !optional,
+          "aria-required": !optional,
           maxLength: length,
           type: "text"
         }

package/cjs/fieldComponents/Feedback.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { b as FeedbackProps } from '../index-CHdbHHZ0.js';
+
+declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
+
+export { Feedback };

package/cjs/fieldComponents/Feedback.js

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+const Feedback = ({ message, type }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: `o3-form-feedback o3-form-feedback__${type}`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `o3-form-feedback__${type}-message`, children: message }) });
+};
+
+
+exports.Feedback = Feedback;

package/cjs/fieldComponents/Form.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const Form: ({ children }: {
+    children: JSX.Element | JSX.Element[];
+}) => react_jsx_runtime.JSX.Element;
+
+export { Form };

package/cjs/fieldComponents/Form.js

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+const Form = ({ children }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "form", { className: "o3-form", children });
+};
+
+
+exports.Form = Form;

package/cjs/fieldComponents/FormField.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { a as FormFieldProps, F as FormFieldsetProps } from '../index-CHdbHHZ0.js';
+
+declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional }: FormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const TitledFormField: ({ label, description, feedback, children, optional }: FormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const FormFieldset: ({ label, description, feedback, children, optional }: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
+
+export { FormFieldset, LabeledFormField, TitledFormField };

package/cjs/fieldComponents/FormField.js

@@ -0,0 +1,69 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _outils = require('@financial-times/o-utils');
+var _Feedback = require('./Feedback');
+const uniqueId = _outils.uidBuilder.call(void 0, "o3-form");
+const LabeledFormField = ({
+  inputId,
+  label,
+  description,
+  feedback,
+  children,
+  optional
+}) => {
+  const id = inputId || uniqueId("input_");
+  const descriptionId = description ? uniqueId("description_") : void 0;
+  const labelClasses = ["o3-form-field__label"];
+  if (optional) {
+    labelClasses.push("o3-form-field--optional");
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "o3-form-field", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: labelClasses.join(" "), htmlFor: id, children: label }),
+    description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "o3-form-input__description", id: descriptionId, children: description }),
+    children,
+    feedback && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Feedback.Feedback, { ...feedback })
+  ] });
+};
+const TitledFormField = ({
+  label,
+  description,
+  feedback,
+  children,
+  optional
+}) => {
+  const descriptionId = description ? uniqueId("description_") : void 0;
+  const labelId = uniqueId("label_");
+  const labelClasses = ["o3-form-field__title"];
+  if (optional) {
+    labelClasses.push("o3-form-field--optional");
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "o3-form-field", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: labelClasses.join(" "), id: labelId, children: label }),
+    description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "o3-form-input__description", id: descriptionId, children: description }),
+    children,
+    feedback && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Feedback.Feedback, { ...feedback })
+  ] });
+};
+const FormFieldset = ({
+  label,
+  description,
+  feedback,
+  children,
+  optional
+}) => {
+  const descriptionId = uniqueId("checkbox_");
+  const labelClasses = ["o3-form-field__legend"];
+  if (optional) {
+    labelClasses.push("o3-form-field--optional");
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "fieldset", { className: "o3-form-field", "aria-describedby": `${descriptionId}`, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "legend", { className: labelClasses.join(" "), children: label }),
+    description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "o3-form-input__description", id: descriptionId, children: description }),
+    children,
+    feedback && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Feedback.Feedback, { ...feedback })
+  ] });
+};
+
+
+
+
+exports.FormFieldset = FormFieldset; exports.LabeledFormField = LabeledFormField; exports.TitledFormField = TitledFormField;

package/cjs/{index-BZth9mTZ.d.ts → index-CHdbHHZ0.d.ts}

@@ -6,7 +6,7 @@ type BaseInputProps = {
     error?: boolean;
     attributes?: JSX.IntrinsicElements['input'];
 };
-interface TextInputProps extends FormFieldProps {
+interface TextInputProps extends BaseInputProps {
     disabled?: boolean;
     length?: 2 | 3 | 4 | 5;
     feedback?: FeedbackProps;
@@ -16,11 +16,16 @@ interface CheckBoxProps extends BaseInputProps {
     checkboxLabel: string;
     feedback?: FeedbackProps;
 }
+interface RadioButtonProps extends BaseInputProps {
+    inputId: string;
+    radioButtonLabel: string;
+}
 interface FormFieldsetProps {
     label: string;
     description?: string;
     children: JSX.Element | JSX.Element[];
     feedback?: FeedbackProps;
+    optional?: boolean;
 }
 interface FormFieldProps extends BaseInputProps {
     feedback?: FeedbackProps;
@@ -31,5 +36,13 @@ type FeedbackProps = {
     message: string;
     type: 'error';
 };
+type ErrorSummaryProps = {
+    errorMessage?: string;
+    errors: {
+        id: string;
+        fieldName: string;
+        message: string;
+    }[];
+};
 
-export type { CheckBoxProps as C, FeedbackProps as F, TextInputProps as T, FormFieldProps as a, FormFieldsetProps as b };
+export type { CheckBoxProps as C, ErrorSummaryProps as E, FormFieldsetProps as F, RadioButtonProps as R, TextInputProps as T, FormFieldProps as a, FeedbackProps as b };

package/cjs/index.d.ts

@@ -1,15 +1,10 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { F as FeedbackProps, a as FormFieldProps, b as FormFieldsetProps } from './index-BZth9mTZ.js';
+export { Feedback } from './fieldComponents/Feedback.js';
+export { FormFieldset, LabeledFormField, TitledFormField } from './fieldComponents/FormField.js';
+export { Form } from './fieldComponents/Form.js';
 export { CheckBox, CheckBoxGroup, CheckBoxItem } from './CheckBox.js';
-
-declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
-
-declare const LabeledFormField: ({ inputId, label, description, feedback, children, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
-declare const TitledFormField: ({ label, description, feedback, children, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
-declare const FormFieldset: ({ label, description, feedback, children, }: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
-
-declare const Form: ({ children }: {
-    children: JSX.Element | JSX.Element[];
-}) => react_jsx_runtime.JSX.Element;
-
-export { Feedback, Form, FormFieldset, LabeledFormField, TitledFormField };
+export { RadioButtonGroup, RadioButtonItem } from './RadioButton.js';
+export { ErrorSummary } from './Error-summary.js';
+export { PasswordInput } from './PasswordInput.js';
+export { TextInput } from './TextInput.js';
+import 'react/jsx-runtime';
+import './index-CHdbHHZ0.js';

package/cjs/index.js

@@ -2,3 +2,7 @@
 var _FormField = require('./fieldComponents/FormField'); _createStarExport(_FormField);
 var _Form = require('./fieldComponents/Form'); _createStarExport(_Form);
 var _CheckBox = require('./CheckBox'); _createStarExport(_CheckBox);
+var _RadioButton = require('./RadioButton'); _createStarExport(_RadioButton);
+var _Errorsummary = require('./Error-summary'); _createStarExport(_Errorsummary);
+var _PasswordInput = require('./PasswordInput'); _createStarExport(_PasswordInput);
+var _TextInput = require('./TextInput'); _createStarExport(_TextInput);

package/css/main.css

@@ -1,6 +1,10 @@
 /* src/css/components/form.css */
 .o3-form {
   font-family: var(--o3-font-family-metric);
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  gap: var(--o3-spacing-s);
 }
 
 /* src/css/components/form-field.css */
@@ -21,7 +25,7 @@
   font-weight: var(--o3-font-weight-medium);
   color: var(--o3-color-use-case-body-text);
 }
-.o3-form-field :is(.o3-form-field__label, .o3-form-field__title, .o3-form-field__legend):has(~ .o3-form-input__checkbox > input:not(:required))::after {
+.o3-form-field :is(.o3-form-field__label, .o3-form-field__title, .o3-form-field__legend).o3-form-field--optional::after {
   content: "(optional)";
   margin-left: var(--o3-spacing-3xs);
   color: var(--o3-color-use-case-muted-text);
@@ -50,7 +54,7 @@
   align-items: center;
   font-size: var(--o3-font-size-metric2-negative-1);
   line-height: var(--o3-font-lineheight-metric2-negative-1);
-  color: var(--o3-color-palette-crimson);
+  color: var(--o3-color-use-case-error-text);
 }
 .o3-form-feedback__error-message {
   display: flex;
@@ -73,13 +77,17 @@
 
 /* src/css/components/text-input.css */
 .o3-form-text-input {
-  border: var(--_o3-form-text-input-border);
+  border: var(--_o3-form-input-border);
   padding: var(--o3-spacing-3xs) var(--o3-spacing-2xs);
-  background-color: var(--_o3-form-text-input-background-color);
-  border-radius: var(--_o3-form-text-input-border-radius);
+  background-color: var(--o3-form-color-use-case-background);
+  box-sizing: border-box;
+  border-radius: var(--_o3-form-input-border-radius);
   --o3-grid-columns-to-span-count: 4;
   max-width: var(--_o3-form-text-input-max-width, var(--o3-grid-columns-to-span-width));
 }
+.o3-form-text-input[class*=--short] {
+  box-sizing: initial;
+}
 .o3-form-text-input--short-2 {
   --_o3-form-text-input-max-width: 1.5em;
 }
@@ -93,33 +101,39 @@
   --_o3-form-text-input-max-width: 4.5em;
 }
 .o3-form-text-input--error {
-  border: var(--_o3-form-text-input-border-error);
-  background-color: var(--_o3-form-text-input-background-color-error);
+  border: var(--_o3-form-input-border-error);
+  background-color: var(--o3-form-color-use-case-background-error);
+}
+input[class*=o3-form-text-input][type=password]:disabled,
+input[class*=o3-form-text-input][type=text]:disabled {
+  color: var(--o3-color-use-case-muted-text);
+  background-color: var(--o3-form-color-use-case-background-disabled);
+  border-color: var(--o3-form-color-use-case-border-disabled);
 }
 
 /* src/css/components/checkbox.css */
-.o3-form-input__checkbox-input + label::before {
+.o3-form-input-checkbox__input + label::before {
   content: "";
   display: inline-block;
   width: var(--o3-spacing-s);
   height: var(--o3-spacing-s);
   margin-right: var(--o3-spacing-3xs);
-  border: 2px solid var(--o3-color-palette-black-50);
-  border-radius: var(--o3-spacing-5xs);
+  border: var(--_o3-form-input-border);
+  border-radius: var(--_o3-form-input-border-radius);
   box-sizing: border-box;
 }
-.o3-form-input__checkbox-input:hover + label::before {
-  border-color: var(--o3-color-palette-black-40);
+.o3-form-input-checkbox__input:hover + label::before {
+  border-color: var(--o3-form-color-use-case-selected-hover);
 }
-.o3-form-input__checkbox-input:active + label::before {
-  border-color: var(--o3-color-palette-black-30);
+.o3-form-input-checkbox__input:active + label::before {
+  border-color: var(--o3-form-color-use-case-selected-active);
 }
-.o3-form-input__checkbox-input:checked + label::after {
+.o3-form-input-checkbox__input:checked + label::after {
   position: absolute;
   content: "";
   width: var(--o3-spacing-s);
   height: var(--o3-spacing-s);
-  background-color: var(--o3-color-palette-white);
+  background-color: var(--o3-form-color-use-case-background);
   -webkit-mask-image: var(--o3-icons-ft-icon-tick);
   mask-image: var(--o3-icons-ft-icon-tick);
   -webkit-mask-repeat: no-repeat;
@@ -127,45 +141,49 @@
   -webkit-mask-size: contain;
   mask-size: contain;
 }
-.o3-form-input__checkbox-input:checked + label::before {
-  background-color: var(--o3-color-palette-black-50);
+.o3-form-input-checkbox__input:checked + label::before {
+  background-color: var(--o3-form-color-use-case-selected-active);
+  border-color: var(--o3-form-color-use-case-selected-active);
 }
-.o3-form-input__checkbox-input:checked:hover + label::before {
-  background-color: var(--o3-color-palette-black-40);
+.o3-form-input-checkbox__input:checked:hover + label::before {
+  background-color: var(--o3-form-color-use-case-selected-hover);
+  border-color: var(--o3-form-color-use-case-selected-hover);
 }
-.o3-form-input__checkbox-input:checked:active + label::before {
-  background-color: var(--o3-color-palette-black-30);
+.o3-form-input-checkbox__input:checked:active + label::before {
+  background-color: var(--o3-form-color-use-case-selected-active);
+  border-color: var(--o3-form-color-use-case-selected-active);
 }
-.o3-form-input__checkbox-input:disabled + label::before {
-  border-color: var(--o3-color-palette-black-30);
+.o3-form-input-checkbox__input:disabled + label::before {
+  border-color: var(--o3-form-color-use-case-border-disabled);
 }
-.o3-form-input__checkbox-input:disabled + label {
-  color: var(--o3-color-palette-black-30);
+.o3-form-input-checkbox__input:disabled + label {
+  color: var(--o3-form-color-use-case-border-disabled);
 }
-.o3-form-input__checkbox-input:checked:disabled + label::before {
-  background-color: var(--o3-color-palette-black-30);
+.o3-form-input-checkbox__input:checked:disabled + label::before {
+  background-color: var(--o3-form-color-use-case-selected-disabled);
+  border-color: var(--o3-form-color-use-case-selected-disabled);
 }
-.o3-form-input__checkbox-input.o3-form-input-error + label::before {
+.o3-form-input-checkbox__input.o3-form-input-error + label::before {
   border-color: var(--o3-color-use-case-error);
   background-color: var(--o3-color-use-case-error-background);
 }
-.o3-form-input__checkbox-input.o3-form-input-error:checked + label::before {
+.o3-form-input-checkbox__input.o3-form-input-error:checked + label::before {
   border-color: var(--o3-color-use-case-error);
   background-color: var(--o3-color-use-case-error-background);
 }
-.o3-form-input__checkbox-input.o3-form-input-error:checked + label::after {
+.o3-form-input-checkbox__input.o3-form-input-error:checked + label::after {
   background-color: var(--o3-color-use-case-error);
 }
-.o3-form-input__checkbox-input:indeterminate + label::before {
-  border-color: var(--o3-color-palette-black-50);
-  background-color: var(--o3-color-palette-black-50);
+.o3-form-input-checkbox__input:indeterminate + label::before {
+  border-color: var(--o3-form-color-use-case-selected-active);
+  background-color: var(--o3-form-color-use-case-selected-active);
 }
-.o3-form-input__checkbox-input:indeterminate + label::after {
+.o3-form-input-checkbox__input:indeterminate + label::after {
   position: absolute;
   content: "";
   width: var(--o3-spacing-s);
   height: var(--o3-spacing-s);
-  background-color: var(--o3-color-palette-white);
+  background-color: var(--o3-form-color-use-case-background);
   -webkit-mask-image: var(--o3-icons-ft-icon-minus);
   mask-image: var(--o3-icons-ft-icon-minus);
   -webkit-mask-repeat: no-repeat;
@@ -173,33 +191,166 @@
   -webkit-mask-size: contain;
   mask-size: contain;
 }
-.o3-form-input__checkbox-input:indeterminate:hover + label::before {
-  border-color: var(--o3-color-palette-black-40);
-  background-color: var(--o3-color-palette-black-40);
+.o3-form-input-checkbox__input:indeterminate:hover + label::before {
+  border-color: var(--o3-form-color-use-case-selected-hover);
+  background-color: var(--o3-form-color-use-case-selected-hover);
 }
-.o3-form-input__checkbox-input:indeterminate:active + label::before,
-.o3-form-input__checkbox-input:indeterminate:disabled + label::before {
-  border-color: var(--o3-color-palette-black-30);
-  background-color: var(--o3-color-palette-black-30);
+.o3-form-input-checkbox__input:indeterminate:active + label::before,
+.o3-form-input-checkbox__input:indeterminate:disabled + label::before {
+  border-color: var(--o3-form-color-use-case-selected-hover);
+  background-color: var(--o3-form-color-use-case-selected-hover);
 }
-.o3-form-input__checkbox-input.o3-form-input-error:indeterminate + label::before {
+.o3-form-input-checkbox__input.o3-form-input-error:indeterminate + label::before {
   border-color: var(--o3-color-use-case-error);
   background-color: var(--o3-color-use-case-error-background);
 }
-.o3-form-input__checkbox-input.o3-form-input-error:indeterminate + label::after {
+.o3-form-input-checkbox__input.o3-form-input-error:indeterminate + label::after {
   background-color: var(--o3-color-use-case-error);
 }
-.o3-form-input__checkbox-label {
+.o3-form-input-checkbox__label {
   display: flex;
   align-items: center;
-  font-size: var(--o3-font-size-metric2-negative-1);
-  line-height: var(--o3-font-lineheight-metric2-negative-1);
-  font-weight: var(--o3-font-weight-regular);
+  font-size: var(--o3-typography-use-case-body-small-font-size);
+  line-height: var(--o3-typography-use-case-body-small-line-height);
+  font-weight: var(--o3-typography-use-case-body-small-font-weight);
   color: var(--o3-color-use-case-body-text);
 }
-.o3-form-input__checkbox-label:focus-visible {
+.o3-form-input-checkbox__label:focus-visible {
   padding: var(--o3-spacing-5xs);
   margin: calc(-1 * var(--o3-spacing-5xs)) 0 calc(-1 * var(--o3-spacing-5xs)) calc(-1 * var(--o3-spacing-5xs));
 }
 
+/* src/css/components/radio-button.css */
+.o3-form-input-radio-button + label::before {
+  content: "";
+  display: inline-block;
+  width: var(--o3-spacing-s);
+  height: var(--o3-spacing-s);
+  margin-right: var(--o3-spacing-3xs);
+  border: var(--_o3-form-input-border);
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+.o3-form-input-radio-button:hover + label::before {
+  border-color: var(--o3-form-color-use-case-border-hover);
+}
+.o3-form-input-radio-button:active + label::before {
+  border-color: var(--o3-form-color-use-case-border-active);
+}
+.o3-form-input-radio-button:checked + label::before {
+  border-color: var(--o3-form-color-use-case-selected);
+}
+.o3-form-input-radio-button:checked + label::after {
+  position: absolute;
+  content: "";
+  width: var(--o3-spacing-3xs);
+  height: var(--o3-spacing-3xs);
+  background-color: var(--o3-form-color-use-case-selected);
+  margin: 6px;
+  border-radius: 50%;
+}
+.o3-form-input-radio-button:checked:hover + label::before {
+  border-color: var(--o3-form-color-use-case-selected-hover);
+}
+.o3-form-input-radio-button:checked:hover + label::after {
+  background-color: var(--o3-form-color-use-case-selected-hover);
+}
+.o3-form-input-radio-button:checked:active + label::before {
+  border-color: var(--o3-form-color-use-case-selected-active);
+}
+.o3-form-input-radio-button:checked:active + label::after {
+  background-color: var(--o3-form-color-use-case-selected-active);
+}
+.o3-form-input-radio-button:disabled + label::before {
+  border-color: var(--o3-form-color-use-case-border-disabled);
+}
+.o3-form-input-radio-button:disabled:checked + label::after {
+  background-color: var(--o3-form-color-use-case-border-disabled);
+}
+.o3-form-input-radio-button:disabled + label {
+  color: var(--o3-form-color-use-case-border-disabled);
+}
+.o3-form-input-radio-button.o3-form-input-error + label::before {
+  border-color: var(--o3-color-use-case-error);
+  background-color: var(--o3-form-color-use-case-background-error);
+}
+.o3-form-input-radio-button.o3-form-input-error:checked + label::before {
+  border-color: var(--o3-color-use-case-error);
+  background-color: var(--o3-form-color-use-case-background-error);
+}
+.o3-form-input-radio-button.o3-form-input-error:checked + label::after {
+  background-color: var(--o3-color-use-case-error);
+}
+.o3-form-input-radio-button__label {
+  display: flex;
+  align-items: center;
+  font-size: var(--o3-typography-use-case-body-small-font-size);
+  line-height: var(--o3-typography-use-case-body-small-line-height);
+  font-weight: var(--o3-typography-use-case-body-small-font-weight);
+  font-family: var(--o3-typography-use-case-body-small-font-family);
+  color: var(--o3-color-use-case-body-text);
+}
+
+/* src/css/components/error-summary.css */
+.o3-form__error-summary {
+  display: flex;
+  padding: var(--o3-spacing-xs);
+  background-color: var(--_o3-form-error-summary-background-color);
+  border-radius: var(--_o3-form-input-border-radius);
+}
+.o3-form__error-summary .o3-form__error-summary-icon::before {
+  content: "";
+  display: inline-block;
+  background-color: var(--o3-color-use-case-error);
+  width: var(--o3-typography-use-case-body-small-font-size);
+  height: var(--o3-typography-use-case-body-small-font-size);
+  -webkit-mask-image: var(--o3-icons-ft-icon-error);
+  mask-image: var(--o3-icons-ft-icon-error);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+.o3-form__error-summary .o3-form__error-summary__heading {
+  margin-left: var(--o3-spacing-4xs);
+}
+.o3-form__error-summary .o3-form__error-summary__heading > span {
+  font-weight: var(--o3-font-weight-medium);
+  color: var(--o3-color-use-case-error-text);
+  display: inline-block;
+  margin-bottom: var(--o3-spacing-4xs);
+}
+.o3-form__error-summary .o3-forms__error-summary__list {
+  list-style-type: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.o3-form__error-summary .o3-forms__error-summary__list li {
+  margin-bottom: var(--o3-spacing-4xs);
+}
+.o3-form__error-summary .o3-forms__error-summary__list li:last-child {
+  margin-bottom: 0;
+}
+.o3-form__error-summary .o3-forms__error-summary__list li a {
+  color: var(--o3-color-use-case-body-text);
+  text-decoration-color: var(--o3-color-use-case-body-text);
+}
+@media screen and (max-width: 489px) {
+  .o3-form__error-summary {
+    padding: var(--o3-spacing-3xs);
+  }
+}
+
+/* src/css/components/password-input.css */
+.o3-password-input__controls {
+  display: flex;
+  justify-content: space-between;
+  --o3-grid-columns-to-span-count: 4;
+  max-width: var(--o3-grid-columns-to-span-width, 100%);
+  margin-top: var(--o3-spacing-3xs);
+  font-size: var(--o3-font-size-metric2-negative-1);
+  line-height: var(--o3-font-lineheight-metric2-negative-1);
+}
+
 /* main.css */

package/css/whitelabel.css

@@ -3,11 +3,21 @@
 
 /* src/css/tokens/whitelabel/o3-form/_variables.css */
 [data-o3-brand=whitelabel] .o3-form {
-  --_o3-form-text-input-border-radius: 6px;
-  --_o3-form-text-input-background-color-error: rgba(204, 0, 0, 0.06);
-  --_o3-form-text-input-background-color: var(--o3-color-palette-white);
-  --_o3-form-text-input-border: 2px solid var(--o3-color-palette-black-30);
-  --_o3-form-text-input-border-error: 2px solid var(--o3-color-use-case-alert-text);
+  --o3-form-color-use-case-background-error: rgba(204, 0, 0, 0.06);
+  --_o3-form-error-summary-background-color: rgba(204, 0, 0, 0.14);
+  --_o3-form-input-border-radius: 6px;
+  --o3-form-color-use-case-selected-disabled: var(--o3-color-palette-black-30);
+  --o3-form-color-use-case-selected-active: var(--o3-color-palette-black-40);
+  --o3-form-color-use-case-selected-hover: var(--o3-color-palette-black-30);
+  --o3-form-color-use-case-selected: var(--o3-color-palette-black-50);
+  --o3-form-color-use-case-border-disabled: var(--o3-color-palette-black-30);
+  --o3-form-color-use-case-border-active: var(--o3-color-palette-black-40);
+  --o3-form-color-use-case-border-hover: var(--o3-color-palette-black-20);
+  --o3-form-color-use-case-border: var(--o3-color-palette-black-30);
+  --o3-form-color-use-case-background-disabled: var(--o3-color-palette-black-5);
+  --o3-form-color-use-case-background: var(--o3-color-palette-white);
+  --_o3-form-input-border: 2px solid var(--o3-color-palette-black-30);
+  --_o3-form-input-border-error: 2px solid var(--o3-color-use-case-error);
 }
 
 /* src/css/brands/whitelabel.css */

package/esm/CheckBox.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CheckBoxProps, b as FormFieldsetProps } from './index-BZth9mTZ.js';
+import { C as CheckBoxProps, F as FormFieldsetProps } from './index-CHdbHHZ0.js';
 
 declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
 declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;

package/esm/CheckBox.js

@@ -3,11 +3,11 @@ import { createElement } from "react";
 import { TitledFormField, FormFieldset } from "./fieldComponents/FormField";
 const CheckBoxItem = (props) => {
   let { inputId, attributes, optional, error } = props;
-  const classNames = ["o3-form-input__checkbox-input", "o3-visually-hidden"];
+  const classNames = ["o3-form-input-checkbox__input", "o3-visually-hidden"];
   if (error) {
     classNames.push("o3-form-input-error");
   }
-  return /* @__PURE__ */ jsxs("div", { className: "o3-form-input__checkbox", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "o3-form-input-checkbox", children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -19,7 +19,7 @@ const CheckBoxItem = (props) => {
         "aria-required": !optional
       }
     ),
-    /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "o3-form-input__checkbox-label", children: props.checkboxLabel })
+    /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "o3-form-input-checkbox__label", children: props.checkboxLabel })
   ] });
 };
 const CheckBox = (props) => {

package/esm/Error-summary.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { E as ErrorSummaryProps } from './index-CHdbHHZ0.js';
+
+declare const ErrorSummary: ({ errors, errorMessage, }: ErrorSummaryProps) => react_jsx_runtime.JSX.Element;
+
+export { ErrorSummary };

package/esm/Error-summary.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const ErrorSummary = ({
+  errors,
+  errorMessage = "Please correct these errors and try again."
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "o3-form__error-summary", children: [
+    /* @__PURE__ */ jsx("span", { className: "o3-form__error-summary-icon" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "o3-form__error-summary__heading",
+        role: "alert",
+        "aria-labelledby": "error-summary-title",
+        children: [
+          /* @__PURE__ */ jsx("span", { id: "error-summary-title", className: "o3-typography-heading5", children: errorMessage }),
+          /* @__PURE__ */ jsx("ul", { className: "o3-forms__error-summary__list o3-typography-body-small", children: errors.map(({ id, fieldName, message }) => /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx("a", { className: "o3-typography-link", href: `#${id}`, children: fieldName }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              ": ",
+              message
+            ] })
+          ] }, id)) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  ErrorSummary
+};

package/esm/PasswordInput.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { a as FormFieldProps } from './index-CHdbHHZ0.js';
+
+interface PasswordInputProps extends FormFieldProps {
+    disabled?: boolean;
+}
+declare const PasswordInput: ({ label, feedback, description, disabled, attributes, inputId, optional, }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
+
+export { PasswordInput };

package/esm/PasswordInput.js

@@ -0,0 +1,55 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { LabeledFormField } from "./fieldComponents/FormField";
+import { CheckBoxItem } from "./CheckBox";
+const PasswordInput = ({
+  label,
+  feedback,
+  description,
+  disabled,
+  attributes,
+  inputId,
+  optional
+}) => {
+  const inputClasses = ["o3-form", "o3-form-text-input"];
+  if (feedback && feedback.type === "error") {
+    inputClasses.push("o3-form-text-input--error");
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      LabeledFormField,
+      {
+        label,
+        feedback,
+        description,
+        inputId,
+        optional,
+        children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...attributes,
+            id: inputId,
+            disabled,
+            className: inputClasses.join(" "),
+            required: !optional,
+            "aria-required": !optional,
+            type: "password"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "o3-password-input__controls", children: [
+      /* @__PURE__ */ jsx(
+        CheckBoxItem,
+        {
+          attributes: { disabled },
+          inputId: "showPassword",
+          checkboxLabel: "Show Password"
+        }
+      ),
+      !disabled && /* @__PURE__ */ jsx("a", { href: "", children: "Forgot password?" })
+    ] })
+  ] });
+};
+export {
+  PasswordInput
+};

package/esm/RadioButton.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { R as RadioButtonProps, F as FormFieldsetProps } from './index-CHdbHHZ0.js';
+
+declare const RadioButtonItem: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
+declare const RadioButtonGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
+
+export { RadioButtonGroup, RadioButtonItem };

package/esm/RadioButton.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import { FormFieldset } from "./fieldComponents/FormField";
+const RadioButtonItem = (props) => {
+  let { inputId, attributes, optional, error } = props;
+  const classNames = [
+    "o3-form-input-radio-button",
+    "o3-visually-hidden"
+  ];
+  if (error) {
+    classNames.push("o3-form-input-error");
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...attributes,
+        type: "radio",
+        id: inputId,
+        className: classNames.join(" "),
+        required: !optional,
+        "aria-required": !optional
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "o3-form-input-radio-button__label", children: props.radioButtonLabel })
+  ] });
+};
+const RadioButtonGroup = (props) => {
+  const { children, ...restProps } = props;
+  const radioGroupName = Math.random().toString(36).substring(7);
+  return /* @__PURE__ */ jsx(FormFieldset, { ...restProps, children: children.map((child) => {
+    const hasError = props.feedback?.errorElementIds?.includes(
+      child.props.inputId
+    );
+    return /* @__PURE__ */ createElement(
+      RadioButtonItem,
+      {
+        ...child.props,
+        error: hasError,
+        key: child.props.inputId,
+        attributes: {
+          ...child.props.attributes,
+          name: radioGroupName
+        }
+      }
+    );
+  }) });
+};
+export {
+  RadioButtonGroup,
+  RadioButtonItem
+};

package/esm/TextInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { T as TextInputProps } from './index-BZth9mTZ.js';
+import { T as TextInputProps } from './index-CHdbHHZ0.js';
 
 declare const TextInput: ({ label, feedback, description, disabled, length, attributes, inputId, optional, }: TextInputProps) => react_jsx_runtime.JSX.Element;
 

package/esm/TextInput.js

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-import "../../main.css";
 import { LabeledFormField } from "./fieldComponents/FormField";
 const TextInput = ({
   label,
@@ -25,6 +24,7 @@ const TextInput = ({
       feedback,
       description,
       inputId,
+      optional,
       children: /* @__PURE__ */ jsx(
         "input",
         {
@@ -32,8 +32,8 @@ const TextInput = ({
           id: inputId,
           disabled,
           className: inputClasses.join(" "),
-          required: optional,
-          "aria-required": optional,
+          required: !optional,
+          "aria-required": !optional,
           maxLength: length,
           type: "text"
         }

package/esm/fieldComponents/Feedback.d.mts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { b as FeedbackProps } from '../index-CHdbHHZ0.mjs';
+
+declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
+
+export { Feedback };

package/esm/fieldComponents/Feedback.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+const Feedback = ({ message, type }) => {
+  return /* @__PURE__ */ jsx("div", { className: `o3-form-feedback o3-form-feedback__${type}`, children: /* @__PURE__ */ jsx("span", { className: `o3-form-feedback__${type}-message`, children: message }) });
+};
+export {
+  Feedback
+};

package/esm/fieldComponents/Form.d.mts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const Form: ({ children }: {
+    children: JSX.Element | JSX.Element[];
+}) => react_jsx_runtime.JSX.Element;
+
+export { Form };

package/esm/fieldComponents/Form.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+const Form = ({ children }) => {
+  return /* @__PURE__ */ jsx("form", { className: "o3-form", children });
+};
+export {
+  Form
+};

package/esm/fieldComponents/FormField.d.mts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { a as FormFieldProps, F as FormFieldsetProps } from '../index-CHdbHHZ0.mjs';
+
+declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional }: FormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const TitledFormField: ({ label, description, feedback, children, optional }: FormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const FormFieldset: ({ label, description, feedback, children, optional }: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
+
+export { FormFieldset, LabeledFormField, TitledFormField };

package/esm/fieldComponents/FormField.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { uidBuilder } from "@financial-times/o-utils";
+import { Feedback } from "./Feedback";
+const uniqueId = uidBuilder("o3-form");
+const LabeledFormField = ({
+  inputId,
+  label,
+  description,
+  feedback,
+  children,
+  optional
+}) => {
+  const id = inputId || uniqueId("input_");
+  const descriptionId = description ? uniqueId("description_") : void 0;
+  const labelClasses = ["o3-form-field__label"];
+  if (optional) {
+    labelClasses.push("o3-form-field--optional");
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "o3-form-field", children: [
+    /* @__PURE__ */ jsx("label", { className: labelClasses.join(" "), htmlFor: id, children: label }),
+    description && /* @__PURE__ */ jsx("span", { className: "o3-form-input__description", id: descriptionId, children: description }),
+    children,
+    feedback && /* @__PURE__ */ jsx(Feedback, { ...feedback })
+  ] });
+};
+const TitledFormField = ({
+  label,
+  description,
+  feedback,
+  children,
+  optional
+}) => {
+  const descriptionId = description ? uniqueId("description_") : void 0;
+  const labelId = uniqueId("label_");
+  const labelClasses = ["o3-form-field__title"];
+  if (optional) {
+    labelClasses.push("o3-form-field--optional");
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "o3-form-field", children: [
+    /* @__PURE__ */ jsx("span", { className: labelClasses.join(" "), id: labelId, children: label }),
+    description && /* @__PURE__ */ jsx("span", { className: "o3-form-input__description", id: descriptionId, children: description }),
+    children,
+    feedback && /* @__PURE__ */ jsx(Feedback, { ...feedback })
+  ] });
+};
+const FormFieldset = ({
+  label,
+  description,
+  feedback,
+  children,
+  optional
+}) => {
+  const descriptionId = uniqueId("checkbox_");
+  const labelClasses = ["o3-form-field__legend"];
+  if (optional) {
+    labelClasses.push("o3-form-field--optional");
+  }
+  return /* @__PURE__ */ jsxs("fieldset", { className: "o3-form-field", "aria-describedby": `${descriptionId}`, children: [
+    /* @__PURE__ */ jsx("legend", { className: labelClasses.join(" "), children: label }),
+    description && /* @__PURE__ */ jsx("span", { className: "o3-form-input__description", id: descriptionId, children: description }),
+    children,
+    feedback && /* @__PURE__ */ jsx(Feedback, { ...feedback })
+  ] });
+};
+export {
+  FormFieldset,
+  LabeledFormField,
+  TitledFormField
+};

package/esm/{index-BZth9mTZ.d.ts → index-CHdbHHZ0.d.ts}

@@ -6,7 +6,7 @@ type BaseInputProps = {
     error?: boolean;
     attributes?: JSX.IntrinsicElements['input'];
 };
-interface TextInputProps extends FormFieldProps {
+interface TextInputProps extends BaseInputProps {
     disabled?: boolean;
     length?: 2 | 3 | 4 | 5;
     feedback?: FeedbackProps;
@@ -16,11 +16,16 @@ interface CheckBoxProps extends BaseInputProps {
     checkboxLabel: string;
     feedback?: FeedbackProps;
 }
+interface RadioButtonProps extends BaseInputProps {
+    inputId: string;
+    radioButtonLabel: string;
+}
 interface FormFieldsetProps {
     label: string;
     description?: string;
     children: JSX.Element | JSX.Element[];
     feedback?: FeedbackProps;
+    optional?: boolean;
 }
 interface FormFieldProps extends BaseInputProps {
     feedback?: FeedbackProps;
@@ -31,5 +36,13 @@ type FeedbackProps = {
     message: string;
     type: 'error';
 };
+type ErrorSummaryProps = {
+    errorMessage?: string;
+    errors: {
+        id: string;
+        fieldName: string;
+        message: string;
+    }[];
+};
 
-export type { CheckBoxProps as C, FeedbackProps as F, TextInputProps as T, FormFieldProps as a, FormFieldsetProps as b };
+export type { CheckBoxProps as C, ErrorSummaryProps as E, FormFieldsetProps as F, RadioButtonProps as R, TextInputProps as T, FormFieldProps as a, FeedbackProps as b };

package/esm/index.d.ts

@@ -1,15 +1,10 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { F as FeedbackProps, a as FormFieldProps, b as FormFieldsetProps } from './index-BZth9mTZ.js';
+export { Feedback } from './fieldComponents/Feedback.js';
+export { FormFieldset, LabeledFormField, TitledFormField } from './fieldComponents/FormField.js';
+export { Form } from './fieldComponents/Form.js';
 export { CheckBox, CheckBoxGroup, CheckBoxItem } from './CheckBox.js';
-
-declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
-
-declare const LabeledFormField: ({ inputId, label, description, feedback, children, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
-declare const TitledFormField: ({ label, description, feedback, children, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
-declare const FormFieldset: ({ label, description, feedback, children, }: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
-
-declare const Form: ({ children }: {
-    children: JSX.Element | JSX.Element[];
-}) => react_jsx_runtime.JSX.Element;
-
-export { Feedback, Form, FormFieldset, LabeledFormField, TitledFormField };
+export { RadioButtonGroup, RadioButtonItem } from './RadioButton.js';
+export { ErrorSummary } from './Error-summary.js';
+export { PasswordInput } from './PasswordInput.js';
+export { TextInput } from './TextInput.js';
+import 'react/jsx-runtime';
+import './index-CHdbHHZ0.js';

package/esm/index.js

@@ -2,3 +2,7 @@ export * from "./fieldComponents/Feedback";
 export * from "./fieldComponents/FormField";
 export * from "./fieldComponents/Form";
 export * from "./CheckBox";
+export * from "./RadioButton";
+export * from "./Error-summary";
+export * from "./PasswordInput";
+export * from "./TextInput";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@financial-times/o3-form",
-	"version": "0.3.2",
+	"version": "0.4.0",
 	"description": "Provides a viewport-aware tooltip for annotating or or highlighting other aspects of a product's UI",
 	"keywords": [
 		"form",