@financial-times/o3-form 0.3.3 → 0.5.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-D6jDTWIC.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

@@ -1,13 +1,18 @@
 "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 _outils = require('@financial-times/o-utils');
 var _FormField = require('./fieldComponents/FormField');
+const uniqueId = _outils.uidBuilder.call(void 0, "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__ */ _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 +24,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-D6jDTWIC.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,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/cjs/PasswordInput.js

@@ -0,0 +1,59 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _outils = require('@financial-times/o-utils');
+var _FormField = require('./fieldComponents/FormField');
+var _CheckBox = require('./CheckBox');
+const uniqueId = _outils.uidBuilder.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _FormField.LabeledFormField,
+      {
+        label,
+        feedback,
+        description,
+        inputId: id,
+        optional,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "input",
+          {
+            ...attributes,
+            id,
+            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: showPasswordId,
+          checkboxLabel: "Show Password"
+        }
+      ),
+      !disabled && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { className: "o3-typography-link", 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-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 };

package/cjs/RadioButton.js

@@ -0,0 +1,54 @@
+"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 _outils = require('@financial-times/o-utils');
+var _FormField = require('./fieldComponents/FormField');
+const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-radio-button-input");
+const RadioButtonItem = (props) => {
+  let { inputId, attributes, optional, error } = props;
+  if (!inputId) {
+    inputId = uniqueId("_");
+  }
+  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-D6jDTWIC.js';
 
 declare const TextInput: ({ label, feedback, description, disabled, length, attributes, inputId, optional, }: TextInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/TextInput.js

@@ -1,6 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
-require('../../main.css');
+var _outils = require('@financial-times/o-utils');
 var _FormField = require('./fieldComponents/FormField');
+const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-text-input");
 const TextInput = ({
   label,
   feedback,
@@ -11,6 +12,7 @@ const TextInput = ({
   inputId,
   optional
 }) => {
+  const id = inputId || uniqueId("_");
   const inputClasses = ["o3-form", "o3-form-text-input"];
   if (feedback && feedback.type === "error") {
     inputClasses.push("o3-form-text-input--error");
@@ -24,16 +26,17 @@ const TextInput = ({
       label,
       feedback,
       description,
-      inputId,
+      inputId: id,
+      optional,
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "input",
         {
           ...attributes,
-          id: inputId,
+          id,
           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 { a as FeedbackProps } from '../index-D6jDTWIC.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 { b as FormFieldProps, F as FormFieldsetProps } from '../index-D6jDTWIC.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,72 @@
+"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.jsxs.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-D6jDTWIC.d.ts}

@@ -6,21 +6,30 @@ 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;
 }
+interface PasswordInputProps extends BaseInputProps {
+    disabled?: boolean;
+    feedback?: FeedbackProps;
+}
 interface CheckBoxProps extends BaseInputProps {
     inputId: string;
     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 +40,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, PasswordInputProps as P, RadioButtonProps as R, TextInputProps as T, FeedbackProps as a, FormFieldProps 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-D6jDTWIC.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/core.css

@@ -0,0 +1,23 @@
+@import "@financial-times/o3-foundation/css/core.css";
+@import "./main.css";
+
+/* src/css/tokens/core/o3-form/_variables.css */
+[data-o3-brand=core] .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-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-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/core.css */

package/css/internal.css

@@ -0,0 +1,23 @@
+@import "@financial-times/o3-foundation/css/internal.css";
+@import "./main.css";
+
+/* src/css/tokens/internal/o3-form/_variables.css */
+[data-o3-brand=internal] .o3-form {
+  --_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-5);
+  --_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: 2px solid var(--o3-color-palette-black-30);
+  --_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-input-border-error: 2px solid var(--o3-color-use-case-error);
+}
+
+/* src/css/brands/internal.css */