@financial-times/o3-form 0.3.3 → 0.5.0

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 */
@@ -15,21 +19,25 @@
   padding: 0;
   border: 0;
 }
+.o3-form-field:where(fieldset) legend {
+  margin-bottom: var(--o3-spacing-3xs);
+}
+.o3-form-field:where(fieldset) legend .o3-form-input__description {
+  margin-top: var(--o3-spacing-5xs);
+  display: block;
+}
 .o3-form-field :is(.o3-form-field__label, .o3-form-field__title, .o3-form-field__legend) {
   font-size: var(--o3-font-size-metric2-negative-1);
   line-height: var(--o3-font-lineheight-metric2-negative-1);
   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);
   font-weight: var(--o3-font-weight-regular);
 }
-.o3-form-field .o3-form-field__legend {
-  padding: 0 0 var(--o3-spacing-5xs) 0;
-}
 .o3-form-field .o3-form-input__description {
   font-size: var(--o3-font-size-metric2-negative-1);
   line-height: var(--o3-font-lineheight-metric2-negative-1);
@@ -50,7 +58,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,14 +81,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);
+  background-color: var(--_o3-form-color-use-case-background);
   box-sizing: border-box;
-  border-radius: var(--_o3-form-text-input-border-radius);
+  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;
 }
@@ -94,33 +105,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;
@@ -128,45 +145,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);
+  border-color: var(--_o3-form-color-use-case-selected);
 }
-.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);
+  background-color: var(--_o3-form-color-use-case-selected);
 }
-.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;
@@ -174,33 +195,188 @@
   -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__input:focus + label::before {
+  box-shadow: var(--o3-focus-use-case-ring-inner), var(--03-focus-use-case-ring-outer);
+  outline: 3px solid transparent;
+}
+@supports selector(:focus-visible) {
+  .o3-form-input-checkbox__input:focus + label::before {
+    box-shadow: unset;
+  }
+  .o3-form-input-checkbox__input:focus-visible + label::before {
+    box-shadow: var(--o3-focus-use-case-ring-inner), var(--o3-focus-use-case-ring-outer);
+    outline: 3px solid transparent;
+  }
+}
+.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);
+}
+
+/* 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:focus + label::before {
+  box-shadow: var(--o3-focus-use-case-ring-inner), var(--03-focus-use-case-ring-outer);
+  outline: 3px solid transparent;
+}
+@supports selector(:focus-visible) {
+  .o3-form-input-radio-button:focus + label::before {
+    box-shadow: unset;
+  }
+  .o3-form-input-radio-button:focus-visible + label::before {
+    box-shadow: var(--o3-focus-use-case-ring-inner), var(--o3-focus-use-case-ring-outer);
+    outline: 3px solid transparent;
+  }
+}
+.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);
 }
-.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/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/professional.css

@@ -0,0 +1,23 @@
+@import "@financial-times/o3-foundation/css/professional.css";
+@import "./main.css";
+
+/* src/css/tokens/core/professional/o3-form/_variables.css */
+[data-o3-brand=professional] .o3-form {
+  --_o3-form-error-summary-background-color: rgba(204, 0, 0, 0.14);
+  --_o3-form-input-border-radius: 6px;
+  --_o3-form-color-use-case-background-error: rgba(204, 0, 0, 0.06);
+  --_o3-form-input-border: 2px solid var(--o3-color-palette-black-30);
+  --_o3-form-color-use-case-selected-disabled: var(--o3-color-use-case-button-disabled);
+  --_o3-form-color-use-case-selected-active: var(--o3-color-use-case-button-pressed);
+  --_o3-form-color-use-case-selected-hover: var(--o3-color-use-case-button-hover);
+  --_o3-form-color-use-case-border-disabled: var(--o3-color-palette-black-10);
+  --_o3-form-color-use-case-border-active: var(--o3-color-use-case-button-pressed);
+  --_o3-form-color-use-case-border-hover: var(--o3-color-use-case-button-hover);
+  --_o3-form-color-use-case-border: var(--o3-color-palette-black-50);
+  --_o3-form-color-use-case-background-disabled: var(--o3-color-palette-black-10);
+  --_o3-form-color-use-case-background: var(--o3-color-palette-white);
+  --_o3-form-input-border-error: 2px solid var(--o3-color-use-case-error);
+  --_o3-form-color-use-case-selected: var(--o3-color-use-case-button-default);
+}
+
+/* src/css/brands/professional.css */

package/css/sustainable-views.css

@@ -0,0 +1,23 @@
+@import "@financial-times/o3-foundation/css/sustainable-views.css";
+@import "./main.css";
+
+/* src/css/tokens/sustainable-views/o3-form/_variables.css */
+[data-o3-brand=sustainable-views] .o3-form {
+  --_o3-form-error-summary-background-color: rgba(204, 0, 0, 0.14);
+  --_o3-form-input-border-radius: 6px;
+  --_o3-form-color-use-case-background-error: rgba(204, 0, 0, 0.06);
+  --_o3-form-input-border: 2px solid var(--o3-color-palette-black-30);
+  --_o3-form-color-use-case-selected-disabled: var(--o3-color-palette-black-10);
+  --_o3-form-color-use-case-border-disabled: var(--o3-color-use-case-button-disabled);
+  --_o3-form-color-use-case-border: var(--o3-color-palette-black-50);
+  --_o3-form-color-use-case-background-disabled: var(--o3-color-palette-black-10);
+  --_o3-form-color-use-case-background: var(--o3-color-palette-white);
+  --_o3-form-input-border-error: 2px solid var(--o3-color-use-case-error);
+  --_o3-form-color-use-case-selected-active: var(--o3-color-use-case-button-pressed);
+  --_o3-form-color-use-case-selected-hover: var(--o3-color-use-case-button-hover);
+  --_o3-form-color-use-case-selected: var(--o3-color-use-case-button-default);
+  --_o3-form-color-use-case-border-active: var(--o3-color-use-case-button-pressed);
+  --_o3-form-color-use-case-border-hover: var(--o3-color-use-case-button-hover);
+}
+
+/* src/css/brands/sustainable-views.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-border-disabled: var(--o3-color-palette-black-10);
+  --_o3-form-color-use-case-border: var(--o3-color-palette-black-50);
+  --_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-color-use-case-selected-disabled: var(--o3-color-use-case-button-disabled);
+  --_o3-form-color-use-case-selected-active: var(--o3-color-use-case-button-pressed);
+  --_o3-form-color-use-case-selected-hover: var(--o3-color-use-case-button-hover);
+  --_o3-form-color-use-case-selected: var(--o3-color-use-case-button-default);
+  --_o3-form-color-use-case-border-active: var(--o3-color-use-case-button-pressed);
+  --_o3-form-color-use-case-border-hover: var(--o3-color-use-case-button-hover);
+  --_o3-form-color-use-case-background-disabled: var(--o3-color-use-case-button-disabled);
+  --_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-D6jDTWIC.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

@@ -1,13 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
+import { uidBuilder } from "@financial-times/o-utils";
 import { TitledFormField, FormFieldset } from "./fieldComponents/FormField";
+const uniqueId = uidBuilder("o3-form-checkbox-input");
 const CheckBoxItem = (props) => {
   let { inputId, attributes, optional, error } = props;
-  const classNames = ["o3-form-input__checkbox-input", "o3-visually-hidden"];
+  if (!inputId) {
+    inputId = uniqueId("_");
+  }
+  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 +24,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-D6jDTWIC.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,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { P as PasswordInputProps } from './index-D6jDTWIC.js';
+
+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,59 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { uidBuilder } from "@financial-times/o-utils";
+import { LabeledFormField } from "./fieldComponents/FormField";
+import { CheckBoxItem } from "./CheckBox";
+const uniqueId = uidBuilder("o3-form-password-input");
+const PasswordInput = ({
+  label,
+  feedback,
+  description,
+  disabled,
+  attributes,
+  inputId,
+  optional
+}) => {
+  const id = inputId || uniqueId("_");
+  const showPasswordId = `${id}-showPassword`;
+  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: id,
+        optional,
+        children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...attributes,
+            id,
+            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: showPasswordId,
+          checkboxLabel: "Show Password"
+        }
+      ),
+      !disabled && /* @__PURE__ */ jsx("a", { className: "o3-typography-link", 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-D6jDTWIC.js';
+
+declare const RadioButtonItem: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
+declare const RadioButtonGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
+
+export { RadioButtonGroup, RadioButtonItem };