@financial-times/o3-form 0.5.1 → 0.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/cjs/CheckBox.d.ts +1 -1
  2. package/cjs/Error-summary.d.ts +1 -1
  3. package/cjs/PasswordInput.d.ts +1 -1
  4. package/cjs/PasswordInput.js +1 -1
  5. package/cjs/RadioButton.d.ts +1 -1
  6. package/cjs/TextInput.d.ts +1 -1
  7. package/cjs/fieldComponents/Feedback.d.ts +1 -1
  8. package/cjs/fieldComponents/Form.d.ts +1 -1
  9. package/cjs/fieldComponents/FormField.d.ts +1 -1
  10. package/cjs/{index-D6jDTWIC.d.ts → index-B6g8Gfrb.d.ts} +2 -2
  11. package/cjs/index.d.ts +1 -1
  12. package/css/core.css +4 -3
  13. package/css/internal.css +4 -3
  14. package/css/main.css +46 -35
  15. package/css/professional.css +4 -3
  16. package/css/sustainable-views.css +5 -4
  17. package/css/whitelabel.css +4 -3
  18. package/esm/CheckBox.d.ts +1 -1
  19. package/esm/Error-summary.d.ts +1 -1
  20. package/esm/PasswordInput.d.ts +1 -1
  21. package/esm/PasswordInput.js +1 -1
  22. package/esm/RadioButton.d.ts +1 -1
  23. package/esm/TextInput.d.ts +1 -1
  24. package/esm/fieldComponents/Feedback.d.mts +1 -1
  25. package/esm/fieldComponents/Form.d.mts +1 -1
  26. package/esm/fieldComponents/FormField.d.mts +1 -1
  27. package/esm/{index-D6jDTWIC.d.ts → index-B6g8Gfrb.d.ts} +2 -2
  28. package/esm/index.d.ts +1 -1
  29. package/package.json +2 -2
package/cjs/CheckBox.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { C as CheckBoxProps, F as FormFieldsetProps } from './index-D6jDTWIC.js';
2
+ import { C as CheckBoxProps, F as FormFieldsetProps } from './index-B6g8Gfrb.js';
3
3
 
4
4
  declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
5
5
  declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
package/cjs/Error-summary.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { E as ErrorSummaryProps } from './index-D6jDTWIC.js';
2
+ import { E as ErrorSummaryProps } from './index-B6g8Gfrb.js';
3
3
 
4
4
  declare const ErrorSummary: ({ errors, errorMessage, }: ErrorSummaryProps) => react_jsx_runtime.JSX.Element;
5
5
 
package/cjs/PasswordInput.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { P as PasswordInputProps } from './index-D6jDTWIC.js';
2
+ import { P as PasswordInputProps } from './index-B6g8Gfrb.js';
3
3
 
4
4
  declare const PasswordInput: ({ label, feedback, description, disabled, attributes, inputId, optional, }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
5
5
 
package/cjs/PasswordInput.js CHANGED
@@ -47,7 +47,7 @@ const PasswordInput = ({
47
47
  {
48
48
  attributes: { disabled },
49
49
  inputId: showPasswordId,
50
- checkboxLabel: "Show Password"
50
+ checkboxLabel: "Show password"
51
51
  }
52
52
  ),
53
53
  !disabled && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { className: "o3-typography-link", href: "", children: "Forgot password?" })
package/cjs/RadioButton.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { R as RadioButtonProps, F as FormFieldsetProps } from './index-D6jDTWIC.js';
2
+ import { R as RadioButtonProps, F as FormFieldsetProps } from './index-B6g8Gfrb.js';
3
3
 
4
4
  declare const RadioButtonItem: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
5
5
  declare const RadioButtonGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
package/cjs/TextInput.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { T as TextInputProps } from './index-D6jDTWIC.js';
2
+ import { T as TextInputProps } from './index-B6g8Gfrb.js';
3
3
 
4
4
  declare const TextInput: ({ label, feedback, description, disabled, length, attributes, inputId, optional, }: TextInputProps) => react_jsx_runtime.JSX.Element;
5
5
 
package/cjs/fieldComponents/Feedback.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { a as FeedbackProps } from '../index-D6jDTWIC.js';
2
+ import { a as FeedbackProps } from '../index-B6g8Gfrb.js';
3
3
 
4
4
  declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
5
5
 
package/cjs/fieldComponents/Form.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
 
3
3
  declare const Form: ({ children }: {
4
- children: JSX.Element | JSX.Element[];
4
+ children: React.JSX.Element | React.JSX.Element[];
5
5
  }) => react_jsx_runtime.JSX.Element;
6
6
 
7
7
  export { Form };
package/cjs/fieldComponents/FormField.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { b as FormFieldProps, F as FormFieldsetProps } from '../index-D6jDTWIC.js';
2
+ import { b as FormFieldProps, F as FormFieldsetProps } from '../index-B6g8Gfrb.js';
3
3
 
4
4
  declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
5
5
  declare const TitledFormField: ({ label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
package/cjs/{index-D6jDTWIC.d.ts → index-B6g8Gfrb.d.ts} RENAMED
@@ -27,13 +27,13 @@ interface RadioButtonProps extends BaseInputProps {
27
27
  interface FormFieldsetProps {
28
28
  label: string;
29
29
  description?: string;
30
- children: JSX.Element | JSX.Element[];
30
+ children: React.JSX.Element | React.JSX.Element[];
31
31
  feedback?: FeedbackProps;
32
32
  optional?: boolean;
33
33
  }
34
34
  interface FormFieldProps extends BaseInputProps {
35
35
  feedback?: FeedbackProps;
36
- children: JSX.Element & JSX.IntrinsicElements['input'];
36
+ children: React.JSX.Element & JSX.IntrinsicElements['input'];
37
37
  }
38
38
  type FeedbackProps = {
39
39
  errorElementIds?: string[];
package/cjs/index.d.ts CHANGED
@@ -7,4 +7,4 @@ export { ErrorSummary } from './Error-summary.js';
7
7
  export { PasswordInput } from './PasswordInput.js';
8
8
  export { TextInput } from './TextInput.js';
9
9
  import 'react/jsx-runtime';
10
- import './index-D6jDTWIC.js';
10
+ import './index-B6g8Gfrb.js';
package/css/core.css CHANGED
@@ -4,20 +4,21 @@
4
4
  /* src/css/tokens/core/o3-form/_variables.css */
5
5
  [data-o3-brand=core] .o3-form {
6
6
  --_o3-form-color-use-case-background-error: rgba(204, 0, 0, 0.06);
7
- --_o3-form-input-border-radius: 6px;
8
7
  --_o3-form-error-summary-background-color: rgba(204, 0, 0, 0.14);
8
+ --_o3-form-icon-error: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.4528 11.25C17.4528 10.9739 17.229 10.75 16.9528 10.75H7.04718C6.77104 10.75 6.54718 10.9739 6.54718 11.25V12.75C6.54718 13.0261 6.77104 13.25 7.04718 13.25H16.9528C17.229 13.25 17.4528 13.0261 17.4528 12.75V11.25Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z' fill='black'/%3E%3C/svg%3E");
9
9
  --_o3-form-color-use-case-background: var(--o3-color-palette-white);
10
10
  --_o3-form-color-use-case-background-disabled: var(--o3-color-palette-black-10);
11
11
  --_o3-form-color-use-case-border: var(--o3-color-palette-black-50);
12
12
  --_o3-form-color-use-case-border-disabled: var(--o3-color-palette-black-10);
13
13
  --_o3-form-color-use-case-selected-disabled: var(--o3-color-use-case-button-disabled);
14
- --_o3-form-input-border: 2px solid var(--o3-color-palette-black-30);
14
+ --_o3-form-input-border: 1.5px solid #b3a9a0;
15
+ --_o3-form-input-border-radius: var(--o3-border-radius-1);
15
16
  --_o3-form-color-use-case-border-hover: var(--o3-color-use-case-button-hover);
16
17
  --_o3-form-color-use-case-border-active: var(--o3-color-use-case-button-pressed);
17
18
  --_o3-form-color-use-case-selected: var(--o3-color-use-case-button-default);
18
19
  --_o3-form-color-use-case-selected-hover: var(--o3-color-use-case-button-hover);
19
20
  --_o3-form-color-use-case-selected-active: var(--o3-color-use-case-button-pressed);
20
- --_o3-form-input-border-error: 2px solid var(--o3-color-use-case-error);
21
+ --_o3-form-input-border-error: 1.5px solid #cc0000;
21
22
  }
22
23
 
23
24
  /* src/css/brands/core.css */
package/css/internal.css CHANGED
@@ -3,16 +3,17 @@
3
3
 
4
4
  /* src/css/tokens/internal/o3-form/_variables.css */
5
5
  [data-o3-brand=internal] .o3-form {
6
- --_o3-form-input-border-radius: 6px;
7
6
  --_o3-form-error-summary-background-color: rgba(204, 0, 0, 0.14);
7
+ --_o3-form-icon-error: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.4528 11.25C17.4528 10.9739 17.229 10.75 16.9528 10.75H7.04718C6.77104 10.75 6.54718 10.9739 6.54718 11.25V12.75C6.54718 13.0261 6.77104 13.25 7.04718 13.25H16.9528C17.229 13.25 17.4528 13.0261 17.4528 12.75V11.25Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z' fill='black'/%3E%3C/svg%3E");
8
8
  --_o3-form-color-use-case-background-error: rgba(204, 0, 0, 0.06);
9
- --_o3-form-input-border: 2px solid var(--o3-color-palette-black-30);
9
+ --_o3-form-input-border: 1.5px solid #b3b3b3;
10
+ --_o3-form-input-border-radius: var(--o3-border-radius-1);
10
11
  --_o3-form-color-use-case-background: var(--o3-color-palette-white);
11
12
  --_o3-form-color-use-case-background-disabled: var(--o3-color-palette-black-10);
12
13
  --_o3-form-color-use-case-border: var(--o3-color-palette-black-50);
13
14
  --_o3-form-color-use-case-border-disabled: var(--o3-color-use-case-button-disabled);
14
15
  --_o3-form-color-use-case-selected-disabled: var(--o3-color-palette-black-5);
15
- --_o3-form-input-border-error: 2px solid var(--o3-color-use-case-error);
16
+ --_o3-form-input-border-error: 1.5px solid #cc0000;
16
17
  --_o3-form-color-use-case-border-hover: var(--o3-color-use-case-button-hover);
17
18
  --_o3-form-color-use-case-border-active: var(--o3-color-use-case-button-pressed);
18
19
  --_o3-form-color-use-case-selected: var(--o3-color-use-case-button-default);
package/css/main.css CHANGED
@@ -27,9 +27,10 @@
27
27
  display: block;
28
28
  }
29
29
  .o3-form-field :is(.o3-form-field__label, .o3-form-field__title, .o3-form-field__legend) {
30
- font-size: var(--o3-font-size-metric2-negative-1);
31
- line-height: var(--o3-font-lineheight-metric2-negative-1);
32
- font-weight: var(--o3-font-weight-medium);
30
+ font-family: var(--o3-type-body-highlight-font-family);
31
+ font-size: var(--o3-type-body-highlight-font-family);
32
+ font-weight: var(--o3-type-body-highlight-font-weight);
33
+ line-height: var(--o3-type-body-highlight-line-height);
33
34
  color: var(--o3-color-use-case-body-text);
34
35
  }
35
36
  .o3-form-field :is(.o3-form-field__label, .o3-form-field__title, .o3-form-field__legend).o3-form-field--optional::after {
@@ -39,25 +40,24 @@
39
40
  font-weight: var(--o3-font-weight-regular);
40
41
  }
41
42
  .o3-form-field .o3-form-input__description {
42
- font-size: var(--o3-font-size-metric2-negative-1);
43
- line-height: var(--o3-font-lineheight-metric2-negative-1);
44
- font-weight: var(--o3-font-weight-regular);
45
- color: var(--o3-color-palette-black-60);
43
+ font-family: var(--o3-type-body-base-font-family);
44
+ font-size: var(--o3-type-body-base-font-family);
45
+ font-weight: var(--o3-type-body-base-font-weight);
46
+ line-height: var(--o3-type-body-base-line-height);
47
+ color: var(--o3-color-use-case-body-text);
46
48
  }
47
49
  .o3-form-field :is(.o3-form-field__label + .o3-form-input__description, .o3-form-field__title + .o3-form-input__description) {
48
50
  margin-top: calc(-1 * var(--o3-spacing-4xs));
49
51
  }
50
- .o3-form-field__feedback--error {
51
- color: var(--o3-color-use-case-error);
52
- font-size: var(--o3-font-size-metric2-negative-1);
53
- }
54
52
 
55
53
  /* src/css/components/feedback.css */
56
54
  .o3-form-feedback__error {
57
55
  display: flex;
58
56
  align-items: center;
59
- font-size: var(--o3-font-size-metric2-negative-1);
60
- line-height: var(--o3-font-lineheight-metric2-negative-1);
57
+ font-family: var(--o3-type-detail-font-family);
58
+ font-size: var(--o3-type-detail-font-size);
59
+ font-weight: var(--o3-type-detail-font-weight);
60
+ line-height: var(--o3-type-detail-line-height);
61
61
  color: var(--o3-color-use-case-error-text);
62
62
  }
63
63
  .o3-form-feedback__error-message {
@@ -71,8 +71,8 @@
71
71
  background-color: var(--o3-color-use-case-error);
72
72
  width: var(--o3-font-size-metric2-negative-1);
73
73
  height: var(--o3-font-size-metric2-negative-1);
74
- -webkit-mask-image: var(--o3-icons-ft-icon-error);
75
- mask-image: var(--o3-icons-ft-icon-error);
74
+ -webkit-mask-image: var(--_o3-form-icon-error);
75
+ mask-image: var(--_o3-form-icon-error);
76
76
  -webkit-mask-repeat: no-repeat;
77
77
  mask-repeat: no-repeat;
78
78
  -webkit-mask-size: contain;
@@ -82,12 +82,17 @@
82
82
  /* src/css/components/text-input.css */
83
83
  .o3-form-text-input {
84
84
  border: var(--_o3-form-input-border);
85
- padding: var(--o3-spacing-3xs) var(--o3-spacing-2xs);
85
+ padding: var(--o3-spacing-4xs) var(--o3-spacing-2xs);
86
86
  background-color: var(--_o3-form-color-use-case-background);
87
87
  box-sizing: border-box;
88
88
  border-radius: var(--_o3-form-input-border-radius);
89
+ font-family: var(--o3-type-body-lg-font-family);
90
+ font-size: var(--o3-type-body-lg-font-size);
91
+ font-weight: var(--o3-type-body-lg-font-weight);
92
+ line-height: var(--o3-type-body-lg-line-height);
89
93
  --o3-grid-columns-to-span-count: 4;
90
- max-width: var(--_o3-form-text-input-max-width, var(--o3-grid-columns-to-span-width));
94
+ max-width: var( --_o3-form-text-input-max-width, var(--o3-grid-columns-to-span-width) );
95
+ min-height: 44px;
91
96
  }
92
97
  .o3-form-text-input[class*=--short] {
93
98
  box-sizing: initial;
@@ -138,8 +143,8 @@ input[class*=o3-form-text-input][type=text]:disabled {
138
143
  width: var(--o3-spacing-s);
139
144
  height: var(--o3-spacing-s);
140
145
  background-color: var(--_o3-form-color-use-case-background);
141
- -webkit-mask-image: var(--o3-icons-ft-icon-tick);
142
- mask-image: var(--o3-icons-ft-icon-tick);
146
+ -webkit-mask-image: var(--o3-icon-tick);
147
+ mask-image: var(--o3-icon-tick);
143
148
  -webkit-mask-repeat: no-repeat;
144
149
  mask-repeat: no-repeat;
145
150
  -webkit-mask-size: contain;
@@ -188,8 +193,8 @@ input[class*=o3-form-text-input][type=text]:disabled {
188
193
  width: var(--o3-spacing-s);
189
194
  height: var(--o3-spacing-s);
190
195
  background-color: var(--_o3-form-color-use-case-background);
191
- -webkit-mask-image: var(--o3-icons-ft-icon-minus);
192
- mask-image: var(--o3-icons-ft-icon-minus);
196
+ -webkit-mask-image: var(--o3-icon-minus);
197
+ mask-image: var(--o3-icon-minus);
193
198
  -webkit-mask-repeat: no-repeat;
194
199
  mask-repeat: no-repeat;
195
200
  -webkit-mask-size: contain;
@@ -227,9 +232,10 @@ input[class*=o3-form-text-input][type=text]:disabled {
227
232
  .o3-form-input-checkbox__label {
228
233
  display: flex;
229
234
  align-items: center;
230
- font-size: var(--o3-typography-use-case-body-small-font-size);
231
- line-height: var(--o3-typography-use-case-body-small-line-height);
232
- font-weight: var(--o3-typography-use-case-body-small-font-weight);
235
+ font-family: var(--o3-type-body-base-font-family);
236
+ font-size: var(--o3-type-body-base-font-size);
237
+ font-weight: var(--o3-type-body-base-font-weight);
238
+ line-height: var(--o3-type-body-base-line-height);
233
239
  color: var(--o3-color-use-case-body-text);
234
240
  }
235
241
 
@@ -310,10 +316,10 @@ input[class*=o3-form-text-input][type=text]:disabled {
310
316
  .o3-form-input-radio-button__label {
311
317
  display: flex;
312
318
  align-items: center;
313
- font-size: var(--o3-typography-use-case-body-small-font-size);
314
- line-height: var(--o3-typography-use-case-body-small-line-height);
315
- font-weight: var(--o3-typography-use-case-body-small-font-weight);
316
- font-family: var(--o3-typography-use-case-body-small-font-family);
319
+ font-size: var(--o3-type-body-base-font-size);
320
+ font-weight: var(--o3-type-body-base-font-weight);
321
+ font-family: var(--o3-type-body-base-font-family);
322
+ line-height: var(--o3-type-body-base-line-height);
317
323
  color: var(--o3-color-use-case-body-text);
318
324
  }
319
325
 
@@ -328,10 +334,10 @@ input[class*=o3-form-text-input][type=text]:disabled {
328
334
  content: "";
329
335
  display: inline-block;
330
336
  background-color: var(--o3-color-use-case-error);
331
- width: var(--o3-typography-use-case-body-small-font-size);
332
- height: var(--o3-typography-use-case-body-small-font-size);
333
- -webkit-mask-image: var(--o3-icons-ft-icon-error);
334
- mask-image: var(--o3-icons-ft-icon-error);
337
+ width: var(--o3-type-body-small-font-size);
338
+ height: var(--o3-type-body-small-font-size);
339
+ -webkit-mask-image: var(--_o3-form-icon-error);
340
+ mask-image: var(--_o3-form-icon-error);
335
341
  -webkit-mask-repeat: no-repeat;
336
342
  mask-repeat: no-repeat;
337
343
  -webkit-mask-size: contain;
@@ -341,7 +347,10 @@ input[class*=o3-form-text-input][type=text]:disabled {
341
347
  margin-left: var(--o3-spacing-4xs);
342
348
  }
343
349
  .o3-form__error-summary .o3-form__error-summary__heading > span {
344
- font-weight: var(--o3-font-weight-medium);
350
+ font-family: var(--o3-type-body-highlight-font-family);
351
+ font-size: var(--o3-type-body-highlight-font-size);
352
+ font-weight: var(--o3-type-body-highlight-font-weight);
353
+ line-height: var(--o3-type-body-highlight-line-height);
345
354
  color: var(--o3-color-use-case-error-text);
346
355
  display: inline-block;
347
356
  margin-bottom: var(--o3-spacing-4xs);
@@ -375,8 +384,10 @@ input[class*=o3-form-text-input][type=text]:disabled {
375
384
  --o3-grid-columns-to-span-count: 4;
376
385
  max-width: var(--o3-grid-columns-to-span-width, 100%);
377
386
  margin-top: var(--o3-spacing-3xs);
378
- font-size: var(--o3-font-size-metric2-negative-1);
379
- line-height: var(--o3-font-lineheight-metric2-negative-1);
387
+ font-family: var(--o3-type-body-base-font-family);
388
+ font-size: var(--o3-type-body-base-font-size);
389
+ font-weight: var(--o3-type-body-base-font-weight);
390
+ line-height: var(--o3-type-body-base-line-height);
380
391
  }
381
392
 
382
393
  /* main.css */
package/css/professional.css CHANGED
@@ -4,8 +4,8 @@
4
4
  /* src/css/tokens/core/professional/o3-form/_variables.css */
5
5
  [data-o3-brand=professional] .o3-form {
6
6
  --_o3-form-color-use-case-background-error: rgba(204, 0, 0, 0.06);
7
- --_o3-form-input-border-radius: 6px;
8
7
  --_o3-form-error-summary-background-color: rgba(204, 0, 0, 0.14);
8
+ --_o3-form-icon-error: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.4528 11.25C17.4528 10.9739 17.229 10.75 16.9528 10.75H7.04718C6.77104 10.75 6.54718 10.9739 6.54718 11.25V12.75C6.54718 13.0261 6.77104 13.25 7.04718 13.25H16.9528C17.229 13.25 17.4528 13.0261 17.4528 12.75V11.25Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z' fill='black'/%3E%3C/svg%3E");
9
9
  --_o3-form-color-use-case-background: var(--o3-color-palette-white);
10
10
  --_o3-form-color-use-case-background-disabled: var(--o3-color-palette-black-10);
11
11
  --_o3-form-color-use-case-border: var(--o3-color-palette-black-50);
@@ -15,9 +15,10 @@
15
15
  --_o3-form-color-use-case-selected-hover: var(--o3-color-use-case-button-hover);
16
16
  --_o3-form-color-use-case-selected-active: var(--o3-color-use-case-button-pressed);
17
17
  --_o3-form-color-use-case-selected-disabled: var(--o3-color-use-case-button-disabled);
18
- --_o3-form-input-border: 2px solid var(--o3-color-palette-black-30);
18
+ --_o3-form-input-border: 1.5px solid #b3a9a0;
19
+ --_o3-form-input-border-radius: var(--o3-border-radius-1);
19
20
  --_o3-form-color-use-case-selected: var(--o3-color-use-case-button-default);
20
- --_o3-form-input-border-error: 2px solid var(--o3-color-use-case-error);
21
+ --_o3-form-input-border-error: 1.5px solid #cc0000;
21
22
  }
22
23
 
23
24
  /* src/css/brands/professional.css */
package/css/sustainable-views.css CHANGED
@@ -3,21 +3,22 @@
3
3
 
4
4
  /* src/css/tokens/sustainable-views/o3-form/_variables.css */
5
5
  [data-o3-brand=sustainable-views] .o3-form {
6
- --_o3-form-color-use-case-background-error: rgba(204, 0, 0, 0.06);
7
- --_o3-form-input-border-radius: 6px;
8
6
  --_o3-form-error-summary-background-color: rgba(204, 0, 0, 0.14);
7
+ --_o3-form-icon-error: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.4528 11.25C17.4528 10.9739 17.229 10.75 16.9528 10.75H7.04718C6.77104 10.75 6.54718 10.9739 6.54718 11.25V12.75C6.54718 13.0261 6.77104 13.25 7.04718 13.25H16.9528C17.229 13.25 17.4528 13.0261 17.4528 12.75V11.25Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z' fill='black'/%3E%3C/svg%3E");
8
+ --_o3-form-color-use-case-background-error: rgba(204, 0, 0, 0.06);
9
+ --_o3-form-input-border: 1.5px solid #b3a9a0;
10
+ --_o3-form-input-border-radius: var(--o3-border-radius-1);
9
11
  --_o3-form-color-use-case-background: var(--o3-color-palette-white);
10
12
  --_o3-form-color-use-case-background-disabled: var(--o3-color-palette-black-10);
11
13
  --_o3-form-color-use-case-border: var(--o3-color-palette-black-50);
12
14
  --_o3-form-color-use-case-border-disabled: var(--o3-color-use-case-button-disabled);
13
15
  --_o3-form-color-use-case-selected-disabled: var(--o3-color-palette-black-10);
14
- --_o3-form-input-border: 2px solid var(--o3-color-palette-black-30);
16
+ --_o3-form-input-border-error: 1.5px solid #cc0000;
15
17
  --_o3-form-color-use-case-border-hover: var(--o3-color-use-case-button-hover);
16
18
  --_o3-form-color-use-case-border-active: var(--o3-color-use-case-button-pressed);
17
19
  --_o3-form-color-use-case-selected: var(--o3-color-use-case-button-default);
18
20
  --_o3-form-color-use-case-selected-hover: var(--o3-color-use-case-button-hover);
19
21
  --_o3-form-color-use-case-selected-active: var(--o3-color-use-case-button-pressed);
20
- --_o3-form-input-border-error: 2px solid var(--o3-color-use-case-error);
21
22
  }
22
23
 
23
24
  /* src/css/brands/sustainable-views.css */
package/css/whitelabel.css CHANGED
@@ -3,14 +3,15 @@
3
3
 
4
4
  /* src/css/tokens/whitelabel/o3-form/_variables.css */
5
5
  [data-o3-brand=whitelabel] .o3-form {
6
- --_o3-form-input-border-radius: 6px;
7
6
  --_o3-form-error-summary-background-color: rgba(204, 0, 0, 0.14);
7
+ --_o3-form-icon-error: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.4528 11.25C17.4528 10.9739 17.229 10.75 16.9528 10.75H7.04718C6.77104 10.75 6.54718 10.9739 6.54718 11.25V12.75C6.54718 13.0261 6.77104 13.25 7.04718 13.25H16.9528C17.229 13.25 17.4528 13.0261 17.4528 12.75V11.25Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z' fill='black'/%3E%3C/svg%3E");
8
8
  --_o3-form-color-use-case-background-error: rgba(204, 0, 0, 0.06);
9
- --_o3-form-input-border: 2px solid var(--o3-color-palette-black-30);
9
+ --_o3-form-input-border: 1.5px solid #b3b3b3;
10
+ --_o3-form-input-border-radius: var(--o3-border-radius-1);
10
11
  --_o3-form-color-use-case-background: var(--o3-color-palette-white);
11
12
  --_o3-form-color-use-case-border: var(--o3-color-palette-black-50);
12
13
  --_o3-form-color-use-case-border-disabled: var(--o3-color-palette-black-10);
13
- --_o3-form-input-border-error: 2px solid var(--o3-color-use-case-error);
14
+ --_o3-form-input-border-error: 1.5px solid #cc0000;
14
15
  --_o3-form-color-use-case-background-disabled: var(--o3-color-use-case-button-disabled);
15
16
  --_o3-form-color-use-case-border-hover: var(--o3-color-use-case-button-hover);
16
17
  --_o3-form-color-use-case-border-active: var(--o3-color-use-case-button-pressed);
package/esm/CheckBox.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { C as CheckBoxProps, F as FormFieldsetProps } from './index-D6jDTWIC.js';
2
+ import { C as CheckBoxProps, F as FormFieldsetProps } from './index-B6g8Gfrb.js';
3
3
 
4
4
  declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
5
5
  declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
package/esm/Error-summary.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { E as ErrorSummaryProps } from './index-D6jDTWIC.js';
2
+ import { E as ErrorSummaryProps } from './index-B6g8Gfrb.js';
3
3
 
4
4
  declare const ErrorSummary: ({ errors, errorMessage, }: ErrorSummaryProps) => react_jsx_runtime.JSX.Element;
5
5
 
package/esm/PasswordInput.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { P as PasswordInputProps } from './index-D6jDTWIC.js';
2
+ import { P as PasswordInputProps } from './index-B6g8Gfrb.js';
3
3
 
4
4
  declare const PasswordInput: ({ label, feedback, description, disabled, attributes, inputId, optional, }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
5
5
 
package/esm/PasswordInput.js CHANGED
@@ -47,7 +47,7 @@ const PasswordInput = ({
47
47
  {
48
48
  attributes: { disabled },
49
49
  inputId: showPasswordId,
50
- checkboxLabel: "Show Password"
50
+ checkboxLabel: "Show password"
51
51
  }
52
52
  ),
53
53
  !disabled && /* @__PURE__ */ jsx("a", { className: "o3-typography-link", href: "", children: "Forgot password?" })
package/esm/RadioButton.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { R as RadioButtonProps, F as FormFieldsetProps } from './index-D6jDTWIC.js';
2
+ import { R as RadioButtonProps, F as FormFieldsetProps } from './index-B6g8Gfrb.js';
3
3
 
4
4
  declare const RadioButtonItem: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
5
5
  declare const RadioButtonGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
package/esm/TextInput.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { T as TextInputProps } from './index-D6jDTWIC.js';
2
+ import { T as TextInputProps } from './index-B6g8Gfrb.js';
3
3
 
4
4
  declare const TextInput: ({ label, feedback, description, disabled, length, attributes, inputId, optional, }: TextInputProps) => react_jsx_runtime.JSX.Element;
5
5
 
package/esm/fieldComponents/Feedback.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { a as FeedbackProps } from '../index-D6jDTWIC.mjs';
2
+ import { a as FeedbackProps } from '../index-B6g8Gfrb.mjs';
3
3
 
4
4
  declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
5
5
 
package/esm/fieldComponents/Form.d.mts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
 
3
3
  declare const Form: ({ children }: {
4
- children: JSX.Element | JSX.Element[];
4
+ children: React.JSX.Element | React.JSX.Element[];
5
5
  }) => react_jsx_runtime.JSX.Element;
6
6
 
7
7
  export { Form };
package/esm/fieldComponents/FormField.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { b as FormFieldProps, F as FormFieldsetProps } from '../index-D6jDTWIC.mjs';
2
+ import { b as FormFieldProps, F as FormFieldsetProps } from '../index-B6g8Gfrb.mjs';
3
3
 
4
4
  declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
5
5
  declare const TitledFormField: ({ label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
package/esm/{index-D6jDTWIC.d.ts → index-B6g8Gfrb.d.ts} RENAMED
@@ -27,13 +27,13 @@ interface RadioButtonProps extends BaseInputProps {
27
27
  interface FormFieldsetProps {
28
28
  label: string;
29
29
  description?: string;
30
- children: JSX.Element | JSX.Element[];
30
+ children: React.JSX.Element | React.JSX.Element[];
31
31
  feedback?: FeedbackProps;
32
32
  optional?: boolean;
33
33
  }
34
34
  interface FormFieldProps extends BaseInputProps {
35
35
  feedback?: FeedbackProps;
36
- children: JSX.Element & JSX.IntrinsicElements['input'];
36
+ children: React.JSX.Element & JSX.IntrinsicElements['input'];
37
37
  }
38
38
  type FeedbackProps = {
39
39
  errorElementIds?: string[];
package/esm/index.d.ts CHANGED
@@ -7,4 +7,4 @@ export { ErrorSummary } from './Error-summary.js';
7
7
  export { PasswordInput } from './PasswordInput.js';
8
8
  export { TextInput } from './TextInput.js';
9
9
  import 'react/jsx-runtime';
10
- import './index-D6jDTWIC.js';
10
+ import './index-B6g8Gfrb.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/o3-form",
3
- "version": "0.5.1",
3
+ "version": "0.5.3",
4
4
  "description": "Provides a viewport-aware tooltip for annotating or or highlighting other aspects of a product's UI",
5
5
  "keywords": [
6
6
  "form",
@@ -36,7 +36,7 @@
36
36
  "peerDependencies": {
37
37
  "@financial-times/o-utils": "^2.2.1",
38
38
  "@financial-times/o3-figma-sb-links": "^0.0.0",
39
- "@financial-times/o3-foundation": "^2.0.0"
39
+ "@financial-times/o3-foundation": "^3.0.0"
40
40
  },
41
41
  "engines": {
42
42
  "npm": ">7"