@leabankab/component-library 7.3.0 → 8.1.0

package/dist/react-hook-form/form-field.d.ts

@@ -0,0 +1,76 @@
+import { ReactNode } from 'react';
+import { ControllerFieldState, FieldPath, FieldPathValue, FieldValues, RefCallBack, UseControllerProps, UseFormStateReturn } from 'react-hook-form';
+/** What every bound control gets, whatever kind of value it holds. */
+type FormFieldSharedProps = {
+    /** The field's name in the form. */
+    name: string;
+    /** Marks the field as touched, and validates it if the form's `mode` says so. */
+    onBlur: () => void;
+    /** Lets the form move focus to the control when it is the first invalid one. */
+    ref: RefCallBack;
+    /** Whether the field currently fails validation. */
+    error: boolean;
+    /**
+     * The validation message. Only present while there is one, so a
+     * `helperText` written before `{...field}` shows the rest of the time.
+     */
+    helperText?: string;
+    /** Only present when the field or the whole form is disabled through the form. */
+    disabled?: boolean;
+};
+/** Props for a control that holds a value: spread them last. */
+export type FormFieldControlProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldSharedProps & {
+    /** The field's current value. */
+    value: FieldPathValue<TFieldValues, TName>;
+    /**
+     * Writes a new value to the form. Loosely typed, like react-hook-form's own
+     * `onChange`: a control reports the type it works in (a `Select` reports
+     * `string`), which is often wider than the field's type (`"no" | "se"`).
+     */
+    onValueChange: (value: any) => void;
+};
+/** Props for a control that is on or off (`Checkbox`): spread them last. */
+export type FormFieldCheckedProps = FormFieldSharedProps & {
+    /** Whether the field's value is truthy. */
+    checked: boolean;
+    /** Writes `true` or `false` to the form. */
+    onCheckedChange: (checked: boolean) => void;
+};
+export type FormFieldRenderProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    /** For controls with a value: `<Input {...field} />`. */
+    field: FormFieldControlProps<TFieldValues, TName>;
+    /** For controls that are on or off: `<Checkbox {...checkedField} />`. */
+    checkedField: FormFieldCheckedProps;
+    /** react-hook-form's state for this field (`error`, `isTouched`, `isDirty`, …). */
+    fieldState: ControllerFieldState;
+    /** react-hook-form's state for the whole form (`isSubmitting`, `errors`, …). */
+    formState: UseFormStateReturn<TFieldValues>;
+};
+export type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformedValues = TFieldValues> = UseControllerProps<TFieldValues, TName, TTransformedValues> & {
+    /** Renders the control. Spread `field` (or `checkedField`) onto it, last. */
+    render: (props: FormFieldRenderProps<TFieldValues, TName>) => ReactNode;
+};
+/**
+ * Binds one form control to react-hook-form.
+ *
+ * Every form control in the library takes the same props for its value, its
+ * error state and its ref, so one binding fits them all: `FormField` reads
+ * the field from the form and hands you those props to spread onto the
+ * control. Everything else on the control (`label`, `options`, `placeholder`,
+ * …) you write as usual.
+ *
+ * Takes `control` as a prop, or reads it from a surrounding `FormProvider`.
+ * `name`, `rules`, `defaultValue`, `disabled` and `shouldUnregister` are
+ * passed to react-hook-form's `useController` unchanged.
+ *
+ * ```tsx
+ * <FormField
+ *   control={control}
+ *   name="email"
+ *   rules={{ required: "Skriv inn e-postadressen din." }}
+ *   render={({ field }) => <Input label="E-post" type="email" {...field} />}
+ * />
+ * ```
+ */
+export declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformedValues = TFieldValues>({ render, ...controller }: FormFieldProps<TFieldValues, TName, TTransformedValues>): ReactNode;
+export {};

package/dist/react-hook-form/index.d.ts

@@ -0,0 +1 @@
+export { FormField, type FormFieldCheckedProps, type FormFieldControlProps, type FormFieldProps, type FormFieldRenderProps, } from './form-field';

package/dist/react-hook-form.cjs

@@ -0,0 +1,2 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react-hook-form");function t({render:t,...n}){let r=(0,e.useFormContext)();if(!n.control&&!r)throw Error(`<FormField name="${n.name}"> needs a \`control\` prop or a surrounding <FormProvider>.`);let{field:i,fieldState:a,formState:o}=(0,e.useController)(n),s=a.error?.message,c={name:i.name,onBlur:i.onBlur,ref:i.ref,error:a.invalid,...s?{helperText:s}:{},...i.disabled===void 0?{}:{disabled:i.disabled}};return t({field:{...c,value:i.value,onValueChange:i.onChange},checkedField:{...c,checked:!!i.value,onCheckedChange:i.onChange},fieldState:a,formState:o})}exports.FormField=t;
+//# sourceMappingURL=react-hook-form.cjs.map

package/dist/react-hook-form.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-hook-form.cjs","names":[],"sources":["../src/react-hook-form/form-field.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport {\n  useController,\n  useFormContext,\n  type ControllerFieldState,\n  type FieldPath,\n  type FieldPathValue,\n  type FieldValues,\n  type RefCallBack,\n  type UseControllerProps,\n  type UseFormStateReturn,\n} from \"react-hook-form\";\n\n/** What every bound control gets, whatever kind of value it holds. */\ntype FormFieldSharedProps = {\n  /** The field's name in the form. */\n  name: string;\n  /** Marks the field as touched, and validates it if the form's `mode` says so. */\n  onBlur: () => void;\n  /** Lets the form move focus to the control when it is the first invalid one. */\n  ref: RefCallBack;\n  /** Whether the field currently fails validation. */\n  error: boolean;\n  /**\n   * The validation message. Only present while there is one, so a\n   * `helperText` written before `{...field}` shows the rest of the time.\n   */\n  helperText?: string;\n  /** Only present when the field or the whole form is disabled through the form. */\n  disabled?: boolean;\n};\n\n/** Props for a control that holds a value: spread them last. */\nexport type FormFieldControlProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = FormFieldSharedProps & {\n  /** The field's current value. */\n  value: FieldPathValue<TFieldValues, TName>;\n  /**\n   * Writes a new value to the form. Loosely typed, like react-hook-form's own\n   * `onChange`: a control reports the type it works in (a `Select` reports\n   * `string`), which is often wider than the field's type (`\"no\" | \"se\"`).\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onValueChange: (value: any) => void;\n};\n\n/** Props for a control that is on or off (`Checkbox`): spread them last. */\nexport type FormFieldCheckedProps = FormFieldSharedProps & {\n  /** Whether the field's value is truthy. */\n  checked: boolean;\n  /** Writes `true` or `false` to the form. */\n  onCheckedChange: (checked: boolean) => void;\n};\n\nexport type FormFieldRenderProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  /** For controls with a value: `<Input {...field} />`. */\n  field: FormFieldControlProps<TFieldValues, TName>;\n  /** For controls that are on or off: `<Checkbox {...checkedField} />`. */\n  checkedField: FormFieldCheckedProps;\n  /** react-hook-form's state for this field (`error`, `isTouched`, `isDirty`, …). */\n  fieldState: ControllerFieldState;\n  /** react-hook-form's state for the whole form (`isSubmitting`, `errors`, …). */\n  formState: UseFormStateReturn<TFieldValues>;\n};\n\nexport type FormFieldProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n  TTransformedValues = TFieldValues,\n> = UseControllerProps<TFieldValues, TName, TTransformedValues> & {\n  /** Renders the control. Spread `field` (or `checkedField`) onto it, last. */\n  render: (props: FormFieldRenderProps<TFieldValues, TName>) => ReactNode;\n};\n\n/**\n * Binds one form control to react-hook-form.\n *\n * Every form control in the library takes the same props for its value, its\n * error state and its ref, so one binding fits them all: `FormField` reads\n * the field from the form and hands you those props to spread onto the\n * control. Everything else on the control (`label`, `options`, `placeholder`,\n * …) you write as usual.\n *\n * Takes `control` as a prop, or reads it from a surrounding `FormProvider`.\n * `name`, `rules`, `defaultValue`, `disabled` and `shouldUnregister` are\n * passed to react-hook-form's `useController` unchanged.\n *\n * ```tsx\n * <FormField\n *   control={control}\n *   name=\"email\"\n *   rules={{ required: \"Skriv inn e-postadressen din.\" }}\n *   render={({ field }) => <Input label=\"E-post\" type=\"email\" {...field} />}\n * />\n * ```\n */\nexport function FormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n  TTransformedValues = TFieldValues,\n>({\n  render,\n  ...controller\n}: FormFieldProps<TFieldValues, TName, TTransformedValues>) {\n  const form = useFormContext<TFieldValues, unknown, TTransformedValues>();\n  if (!controller.control && !form) {\n    throw new Error(\n      `<FormField name=\"${controller.name}\"> needs a \\`control\\` prop or a surrounding <FormProvider>.`,\n    );\n  }\n\n  const { field, fieldState, formState } = useController(controller);\n  const message = fieldState.error?.message;\n\n  const shared: FormFieldSharedProps = {\n    name: field.name,\n    onBlur: field.onBlur,\n    ref: field.ref,\n    error: fieldState.invalid,\n    ...(message ? { helperText: message } : {}),\n    ...(field.disabled !== undefined ? { disabled: field.disabled } : {}),\n  };\n\n  return render({\n    field: { ...shared, value: field.value, onValueChange: field.onChange },\n    checkedField: {\n      ...shared,\n      checked: Boolean(field.value),\n      onCheckedChange: field.onChange,\n    },\n    fieldState,\n    formState,\n  });\n}\n"],"mappings":"iHAuGA,SAAgB,EAId,CACA,SACA,GAAG,GACuD,CAC1D,IAAM,GAAA,EAAO,EAAA,eAAA,CAA0D,EACvE,GAAI,CAAC,EAAW,SAAW,CAAC,EAC1B,MAAU,MACR,oBAAoB,EAAW,KAAK,6DACtC,EAGF,GAAM,CAAE,QAAO,aAAY,cAAA,EAAc,EAAA,cAAA,CAAc,CAAU,EAC3D,EAAU,EAAW,OAAO,QAE5B,EAA+B,CACnC,KAAM,EAAM,KACZ,OAAQ,EAAM,OACd,IAAK,EAAM,IACX,MAAO,EAAW,QAClB,GAAI,EAAU,CAAE,WAAY,CAAQ,EAAI,CAAC,EACzC,GAAI,EAAM,WAAa,IAAA,GAA2C,CAAC,EAAhC,CAAE,SAAU,EAAM,QAAS,CAChE,EAEA,OAAO,EAAO,CACZ,MAAO,CAAE,GAAG,EAAQ,MAAO,EAAM,MAAO,cAAe,EAAM,QAAS,EACtE,aAAc,CACZ,GAAG,EACH,QAAS,EAAQ,EAAM,MACvB,gBAAiB,EAAM,QACzB,EACA,aACA,WACF,CAAC,CACH"}

package/dist/react-hook-form.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { useController as e, useFormContext as t } from "react-hook-form";
+//#region src/react-hook-form/form-field.tsx
+function n({ render: n, ...r }) {
+	let i = t();
+	if (!r.control && !i) throw Error(`<FormField name="${r.name}"> needs a \`control\` prop or a surrounding <FormProvider>.`);
+	let { field: a, fieldState: o, formState: s } = e(r), c = o.error?.message, l = {
+		name: a.name,
+		onBlur: a.onBlur,
+		ref: a.ref,
+		error: o.invalid,
+		...c ? { helperText: c } : {},
+		...a.disabled === void 0 ? {} : { disabled: a.disabled }
+	};
+	return n({
+		field: {
+			...l,
+			value: a.value,
+			onValueChange: a.onChange
+		},
+		checkedField: {
+			...l,
+			checked: !!a.value,
+			onCheckedChange: a.onChange
+		},
+		fieldState: o,
+		formState: s
+	});
+}
+//#endregion
+export { n as FormField };
+
+//# sourceMappingURL=react-hook-form.mjs.map

package/dist/react-hook-form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-hook-form.mjs","names":[],"sources":["../src/react-hook-form/form-field.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport {\n  useController,\n  useFormContext,\n  type ControllerFieldState,\n  type FieldPath,\n  type FieldPathValue,\n  type FieldValues,\n  type RefCallBack,\n  type UseControllerProps,\n  type UseFormStateReturn,\n} from \"react-hook-form\";\n\n/** What every bound control gets, whatever kind of value it holds. */\ntype FormFieldSharedProps = {\n  /** The field's name in the form. */\n  name: string;\n  /** Marks the field as touched, and validates it if the form's `mode` says so. */\n  onBlur: () => void;\n  /** Lets the form move focus to the control when it is the first invalid one. */\n  ref: RefCallBack;\n  /** Whether the field currently fails validation. */\n  error: boolean;\n  /**\n   * The validation message. Only present while there is one, so a\n   * `helperText` written before `{...field}` shows the rest of the time.\n   */\n  helperText?: string;\n  /** Only present when the field or the whole form is disabled through the form. */\n  disabled?: boolean;\n};\n\n/** Props for a control that holds a value: spread them last. */\nexport type FormFieldControlProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = FormFieldSharedProps & {\n  /** The field's current value. */\n  value: FieldPathValue<TFieldValues, TName>;\n  /**\n   * Writes a new value to the form. Loosely typed, like react-hook-form's own\n   * `onChange`: a control reports the type it works in (a `Select` reports\n   * `string`), which is often wider than the field's type (`\"no\" | \"se\"`).\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onValueChange: (value: any) => void;\n};\n\n/** Props for a control that is on or off (`Checkbox`): spread them last. */\nexport type FormFieldCheckedProps = FormFieldSharedProps & {\n  /** Whether the field's value is truthy. */\n  checked: boolean;\n  /** Writes `true` or `false` to the form. */\n  onCheckedChange: (checked: boolean) => void;\n};\n\nexport type FormFieldRenderProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  /** For controls with a value: `<Input {...field} />`. */\n  field: FormFieldControlProps<TFieldValues, TName>;\n  /** For controls that are on or off: `<Checkbox {...checkedField} />`. */\n  checkedField: FormFieldCheckedProps;\n  /** react-hook-form's state for this field (`error`, `isTouched`, `isDirty`, …). */\n  fieldState: ControllerFieldState;\n  /** react-hook-form's state for the whole form (`isSubmitting`, `errors`, …). */\n  formState: UseFormStateReturn<TFieldValues>;\n};\n\nexport type FormFieldProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n  TTransformedValues = TFieldValues,\n> = UseControllerProps<TFieldValues, TName, TTransformedValues> & {\n  /** Renders the control. Spread `field` (or `checkedField`) onto it, last. */\n  render: (props: FormFieldRenderProps<TFieldValues, TName>) => ReactNode;\n};\n\n/**\n * Binds one form control to react-hook-form.\n *\n * Every form control in the library takes the same props for its value, its\n * error state and its ref, so one binding fits them all: `FormField` reads\n * the field from the form and hands you those props to spread onto the\n * control. Everything else on the control (`label`, `options`, `placeholder`,\n * …) you write as usual.\n *\n * Takes `control` as a prop, or reads it from a surrounding `FormProvider`.\n * `name`, `rules`, `defaultValue`, `disabled` and `shouldUnregister` are\n * passed to react-hook-form's `useController` unchanged.\n *\n * ```tsx\n * <FormField\n *   control={control}\n *   name=\"email\"\n *   rules={{ required: \"Skriv inn e-postadressen din.\" }}\n *   render={({ field }) => <Input label=\"E-post\" type=\"email\" {...field} />}\n * />\n * ```\n */\nexport function FormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n  TTransformedValues = TFieldValues,\n>({\n  render,\n  ...controller\n}: FormFieldProps<TFieldValues, TName, TTransformedValues>) {\n  const form = useFormContext<TFieldValues, unknown, TTransformedValues>();\n  if (!controller.control && !form) {\n    throw new Error(\n      `<FormField name=\"${controller.name}\"> needs a \\`control\\` prop or a surrounding <FormProvider>.`,\n    );\n  }\n\n  const { field, fieldState, formState } = useController(controller);\n  const message = fieldState.error?.message;\n\n  const shared: FormFieldSharedProps = {\n    name: field.name,\n    onBlur: field.onBlur,\n    ref: field.ref,\n    error: fieldState.invalid,\n    ...(message ? { helperText: message } : {}),\n    ...(field.disabled !== undefined ? { disabled: field.disabled } : {}),\n  };\n\n  return render({\n    field: { ...shared, value: field.value, onValueChange: field.onChange },\n    checkedField: {\n      ...shared,\n      checked: Boolean(field.value),\n      onCheckedChange: field.onChange,\n    },\n    fieldState,\n    formState,\n  });\n}\n"],"mappings":";;;AAuGA,SAAgB,EAId,EACA,WACA,GAAG,KACuD;CAC1D,IAAM,IAAO,EAA0D;CACvE,IAAI,CAAC,EAAW,WAAW,CAAC,GAC1B,MAAU,MACR,oBAAoB,EAAW,KAAK,6DACtC;CAGF,IAAM,EAAE,UAAO,eAAY,iBAAc,EAAc,CAAU,GAC3D,IAAU,EAAW,OAAO,SAE5B,IAA+B;EACnC,MAAM,EAAM;EACZ,QAAQ,EAAM;EACd,KAAK,EAAM;EACX,OAAO,EAAW;EAClB,GAAI,IAAU,EAAE,YAAY,EAAQ,IAAI,CAAC;EACzC,GAAI,EAAM,aAAa,KAAA,IAA2C,CAAC,IAAhC,EAAE,UAAU,EAAM,SAAS;CAChE;CAEA,OAAO,EAAO;EACZ,OAAO;GAAE,GAAG;GAAQ,OAAO,EAAM;GAAO,eAAe,EAAM;EAAS;EACtE,cAAc;GACZ,GAAG;GACH,SAAS,EAAQ,EAAM;GACvB,iBAAiB,EAAM;EACzB;EACA;EACA;CACF,CAAC;AACH"}

package/dist/tailwind.css

@@ -19,6 +19,7 @@
   --color-bg-muted: var(--lea-palette-bg-muted);
   --color-bg-contrast: var(--lea-palette-bg-contrast);
   --color-bg-accent: var(--lea-palette-bg-accent);
+  --color-bg-overlay: var(--lea-palette-bg-overlay);
   --color-text-base: var(--lea-palette-text-base);
   --color-text-subtle: var(--lea-palette-text-subtle);
   --color-text-muted: var(--lea-palette-text-muted);
@@ -29,22 +30,18 @@
   --color-border-strong: var(--lea-palette-border-strong);
   --color-border-accent: var(--lea-palette-border-accent);
   --color-border-contrast: var(--lea-palette-border-contrast);
-  --color-primary-main: var(--lea-palette-primary-main);
-  --color-primary-dark: var(--lea-palette-primary-dark);
-  --color-primary-light: var(--lea-palette-primary-light);
-  --color-primary-contrastText: var(--lea-palette-primary-contrastText);
-  --color-purple-base: var(--lea-palette-purple-base);
-  --color-purple-hover: var(--lea-palette-purple-hover);
-  --color-purple-subtle: var(--lea-palette-purple-subtle);
-  --color-purple-contrast: var(--lea-palette-purple-contrast);
-  --color-teal-base: var(--lea-palette-teal-base);
-  --color-teal-hover: var(--lea-palette-teal-hover);
-  --color-teal-subtle: var(--lea-palette-teal-subtle);
-  --color-teal-contrast: var(--lea-palette-teal-contrast);
-  --color-secondary-main: var(--lea-palette-secondary-main);
-  --color-secondary-dark: var(--lea-palette-secondary-dark);
-  --color-secondary-light: var(--lea-palette-secondary-light);
-  --color-secondary-contrastText: var(--lea-palette-secondary-contrastText);
+  --color-primary-base: var(--lea-palette-primary-base);
+  --color-primary-hover: var(--lea-palette-primary-hover);
+  --color-primary-subtle: var(--lea-palette-primary-subtle);
+  --color-primary-contrast: var(--lea-palette-primary-contrast);
+  --color-secondary-base: var(--lea-palette-secondary-base);
+  --color-secondary-hover: var(--lea-palette-secondary-hover);
+  --color-secondary-subtle: var(--lea-palette-secondary-subtle);
+  --color-secondary-contrast: var(--lea-palette-secondary-contrast);
+  --color-tertiary-base: var(--lea-palette-tertiary-base);
+  --color-tertiary-hover: var(--lea-palette-tertiary-hover);
+  --color-tertiary-subtle: var(--lea-palette-tertiary-subtle);
+  --color-tertiary-contrast: var(--lea-palette-tertiary-contrast);
   --color-status-error-base: var(--lea-palette-status-error-base);
   --color-status-error-subtle: var(--lea-palette-status-error-subtle);
   --color-status-warning-base: var(--lea-palette-status-warning-base);
@@ -97,6 +94,17 @@
   --color-orange-800: var(--lea-color-orange-800);
   --color-orange-900: var(--lea-color-orange-900);
   --color-orange-950: var(--lea-color-orange-950);
+  --color-amber-50: var(--lea-color-amber-50);
+  --color-amber-100: var(--lea-color-amber-100);
+  --color-amber-200: var(--lea-color-amber-200);
+  --color-amber-300: var(--lea-color-amber-300);
+  --color-amber-400: var(--lea-color-amber-400);
+  --color-amber-500: var(--lea-color-amber-500);
+  --color-amber-600: var(--lea-color-amber-600);
+  --color-amber-700: var(--lea-color-amber-700);
+  --color-amber-800: var(--lea-color-amber-800);
+  --color-amber-900: var(--lea-color-amber-900);
+  --color-amber-950: var(--lea-color-amber-950);
   --color-red-50: var(--lea-color-red-50);
   --color-red-100: var(--lea-color-red-100);
   --color-red-200: var(--lea-color-red-200);
@@ -163,7 +171,10 @@
   --shadow-2xl: var(--lea-shadow-2xl);
   --shadow-inner: var(--lea-shadow-inner);
 
-  /* Font sizes (`text-md`, `text-2xl`) */
+  /* Font family: `font-sans`, which is also what Tailwind's preflight puts on the page */
+  --font-sans: var(--lea-font-family);
+
+  /* Font sizes (`text-md`, `text-2xl`). Deprecated: use the text styles below. */
   --text-*: initial;
   --text-xs: var(--lea-font-size-xs);
   --text-sm: var(--lea-font-size-sm);
@@ -176,6 +187,64 @@
   --text-5xl: var(--lea-font-size-5xl);
   --text-6xl: var(--lea-font-size-6xl);
 
+  /* Text styles (`text-heading-lg`, `text-body-sm`): one utility sets size, line height, letter spacing and weight */
+  --text-display-sm: var(--lea-text-display-sm-font-size);
+  --text-display-sm--line-height: var(--lea-text-display-sm-line-height);
+  --text-display-sm--letter-spacing: var(--lea-text-display-sm-letter-spacing);
+  --text-display-sm--font-weight: var(--lea-text-display-sm-font-weight);
+  --text-display-md: var(--lea-text-display-md-font-size);
+  --text-display-md--line-height: var(--lea-text-display-md-line-height);
+  --text-display-md--letter-spacing: var(--lea-text-display-md-letter-spacing);
+  --text-display-md--font-weight: var(--lea-text-display-md-font-weight);
+  --text-heading-xs: var(--lea-text-heading-xs-font-size);
+  --text-heading-xs--line-height: var(--lea-text-heading-xs-line-height);
+  --text-heading-xs--letter-spacing: var(--lea-text-heading-xs-letter-spacing);
+  --text-heading-xs--font-weight: var(--lea-text-heading-xs-font-weight);
+  --text-heading-sm: var(--lea-text-heading-sm-font-size);
+  --text-heading-sm--line-height: var(--lea-text-heading-sm-line-height);
+  --text-heading-sm--letter-spacing: var(--lea-text-heading-sm-letter-spacing);
+  --text-heading-sm--font-weight: var(--lea-text-heading-sm-font-weight);
+  --text-heading-md: var(--lea-text-heading-md-font-size);
+  --text-heading-md--line-height: var(--lea-text-heading-md-line-height);
+  --text-heading-md--letter-spacing: var(--lea-text-heading-md-letter-spacing);
+  --text-heading-md--font-weight: var(--lea-text-heading-md-font-weight);
+  --text-heading-lg: var(--lea-text-heading-lg-font-size);
+  --text-heading-lg--line-height: var(--lea-text-heading-lg-line-height);
+  --text-heading-lg--letter-spacing: var(--lea-text-heading-lg-letter-spacing);
+  --text-heading-lg--font-weight: var(--lea-text-heading-lg-font-weight);
+  --text-heading-xl: var(--lea-text-heading-xl-font-size);
+  --text-heading-xl--line-height: var(--lea-text-heading-xl-line-height);
+  --text-heading-xl--letter-spacing: var(--lea-text-heading-xl-letter-spacing);
+  --text-heading-xl--font-weight: var(--lea-text-heading-xl-font-weight);
+  --text-body-xs: var(--lea-text-body-xs-font-size);
+  --text-body-xs--line-height: var(--lea-text-body-xs-line-height);
+  --text-body-xs--letter-spacing: var(--lea-text-body-xs-letter-spacing);
+  --text-body-xs--font-weight: var(--lea-text-body-xs-font-weight);
+  --text-body-sm: var(--lea-text-body-sm-font-size);
+  --text-body-sm--line-height: var(--lea-text-body-sm-line-height);
+  --text-body-sm--letter-spacing: var(--lea-text-body-sm-letter-spacing);
+  --text-body-sm--font-weight: var(--lea-text-body-sm-font-weight);
+  --text-body-md: var(--lea-text-body-md-font-size);
+  --text-body-md--line-height: var(--lea-text-body-md-line-height);
+  --text-body-md--letter-spacing: var(--lea-text-body-md-letter-spacing);
+  --text-body-md--font-weight: var(--lea-text-body-md-font-weight);
+  --text-body-lg: var(--lea-text-body-lg-font-size);
+  --text-body-lg--line-height: var(--lea-text-body-lg-line-height);
+  --text-body-lg--letter-spacing: var(--lea-text-body-lg-letter-spacing);
+  --text-body-lg--font-weight: var(--lea-text-body-lg-font-weight);
+  --text-label-sm: var(--lea-text-label-sm-font-size);
+  --text-label-sm--line-height: var(--lea-text-label-sm-line-height);
+  --text-label-sm--letter-spacing: var(--lea-text-label-sm-letter-spacing);
+  --text-label-sm--font-weight: var(--lea-text-label-sm-font-weight);
+  --text-label-md: var(--lea-text-label-md-font-size);
+  --text-label-md--line-height: var(--lea-text-label-md-line-height);
+  --text-label-md--letter-spacing: var(--lea-text-label-md-letter-spacing);
+  --text-label-md--font-weight: var(--lea-text-label-md-font-weight);
+  --text-label-lg: var(--lea-text-label-lg-font-size);
+  --text-label-lg--line-height: var(--lea-text-label-lg-line-height);
+  --text-label-lg--letter-spacing: var(--lea-text-label-lg-letter-spacing);
+  --text-label-lg--font-weight: var(--lea-text-label-lg-font-weight);
+
   /* Font weights */
   --font-weight-*: initial;
   --font-weight-thin: var(--lea-font-weight-thin);
@@ -186,6 +255,23 @@
   --font-weight-bold: var(--lea-font-weight-bold);
   --font-weight-black: var(--lea-font-weight-black);
 
+  /* Line heights (`leading-tight`, `leading-normal`) */
+  --leading-*: initial;
+  --leading-none: var(--lea-line-height-none);
+  --leading-tight: var(--lea-line-height-tight);
+  --leading-snug: var(--lea-line-height-snug);
+  --leading-normal: var(--lea-line-height-normal);
+
+  /* State opacities, for `opacity-hover` and as a colour modifier: `bg-primary-base/hover`. Tailwind wants a percentage here. */
+  --opacity-hover: calc(var(--lea-opacity-hover) * 100%);
+  --opacity-pressed: calc(var(--lea-opacity-pressed) * 100%);
+  --opacity-highlight: calc(var(--lea-opacity-highlight) * 100%);
+
+  /* Durations (`duration-fast`, `duration-normal`) */
+  --transition-duration-fast: var(--lea-duration-fast);
+  --transition-duration-normal: var(--lea-duration-normal);
+  --transition-duration-emphasis: var(--lea-duration-emphasis);
+
   /* Easings (`ease-standard`, `ease-spring`) */
   --ease-*: initial;
   --ease-standard: var(--lea-easing-standard);

package/dist/theme/index.d.ts

@@ -1,7 +1,3 @@
-import { Theme } from '@mui/material';
-import "./mui-augmentation";
-declare const theme: Theme;
 export { breakpoints, type Breakpoint } from './tokens/breakpoints';
 export * from './token-types';
 export * from './types';
-export { theme };

package/dist/theme/token-types.d.ts

@@ -1,10 +1,22 @@
 export type ColorToken = "base" | "subtle" | "muted" | "contrast" | "accent";
-export type BgColorToken = ColorToken;
+export type BgColorToken = ColorToken | "overlay";
 export type TextColorToken = ColorToken;
 export type BorderColorToken = ColorToken;
-export type BrandColorToken = ColorToken;
+export type BrandColorToken = "base" | "hover" | "subtle" | "contrast";
 export type StatusColorToken = "base" | "subtle";
-export type ColorPath = `bg.${BgColorToken}` | `text.${TextColorToken}` | `border.${BorderColorToken}` | `primary.${BrandColorToken}` | `secondary.${BrandColorToken}` | `status.error.${StatusColorToken}` | `status.warning.${StatusColorToken}` | `status.info.${StatusColorToken}` | `status.success.${StatusColorToken}`;
+export type ColorPath = `bg.${BgColorToken}` | `text.${TextColorToken}` | `border.${BorderColorToken}` | `primary.${BrandColorToken}` | `secondary.${BrandColorToken}` | `tertiary.${BrandColorToken}` | `status.error.${StatusColorToken}` | `status.warning.${StatusColorToken}` | `status.info.${StatusColorToken}` | `status.success.${StatusColorToken}`;
+/**
+ * The values a component's `color` prop can take. Each names a group of colour
+ * tokens (a brand colour, a status, the neutrals), never a hue, so a rebrand
+ * changes the tokens and no call site. A component accepts the subset it has a
+ * design for: `ButtonColor`, `ChipColor`, `LinkColor` and so on.
+ *
+ * - `primary`, `secondary`, `tertiary`: the brand colours of the palette.
+ * - `neutral`: the greys, for something that should carry no meaning.
+ * - `success`, `info`, `warning`, `error`: the statuses.
+ * - `contrast`: for use on a dark surface.
+ */
+export type ColorRole = "primary" | "secondary" | "tertiary" | "neutral" | "success" | "info" | "warning" | "error" | "contrast";
 /** Allowed values for MUI `Typography` `color` prop (semantic text tokens). */
 export type TypographyColorToken = `text.${TextColorToken}`;
 /** Common spacing scale factors (8px base via `theme.spacing` / `theme.space`). */

package/dist/theme/tokens/colors.d.ts

@@ -51,6 +51,19 @@ export declare const colors: {
         readonly 900: "#611E0F";
         readonly 950: "#401408";
     };
+    readonly amber: {
+        readonly 50: "#FFF9EB";
+        readonly 100: "#FFEFC7";
+        readonly 200: "#FFE299";
+        readonly 300: "#FFCF5C";
+        readonly 400: "#F7A800";
+        readonly 500: "#D98F00";
+        readonly 600: "#B37400";
+        readonly 700: "#8C5A00";
+        readonly 800: "#6B4500";
+        readonly 900: "#4A3000";
+        readonly 950: "#2E1D00";
+    };
     readonly red: {
         readonly 50: "#FEF2F2";
         readonly 100: "#FCDCDC";

package/dist/theme/tokens/font-family.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The font stack, emitted as `--lea-font-family`.
+ *
+ * `ClashGrotesk` is the variable font declared in `theme/fonts.css`.
+ * `ClashGrotesk Fallback` is declared there too: Arial resized to Clash
+ * Grotesk's average letter width, so text keeps its place while the font file
+ * loads.
+ */
+export declare const fontFamily = "\"ClashGrotesk\", \"ClashGrotesk Fallback\", sans-serif";

package/dist/theme/tokens/font-sizes.d.ts

@@ -1,3 +1,11 @@
+/**
+ * The first font-size scale, from before the text styles.
+ *
+ * @deprecated Use a text style (`textStyles`, `--lea-text-{role}-{size}-*`,
+ * `text-heading-lg`) or, for a size on its own, a step on the type scale
+ * (`fontStep`, `--lea-font-step-{n}`). Kept for the components that still use
+ * it, and removed in a later major.
+ */
 export declare const fontSizes: {
     readonly xs: "0.75rem";
     readonly sm: "0.875rem";

package/dist/theme/tokens/index.d.ts

@@ -1,11 +1,14 @@
 export * from './breakpoints';
 export * from './colors';
+export * from './font-family';
 export * from './font-sizes';
 export * from './font-weights';
+export * from './line-heights';
 export * from './opacity';
 export * from './palette';
 export * from './shadows';
 export * from './shape';
 export * from './spacing';
+export * from './text-styles';
 export * from './transitions';
-export * from './typography';
+export * from './type-scale';

package/dist/theme/tokens/line-heights.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Unitless, so a line height follows whichever font size it lands on. `none`
+ * is for a display headline, `tight` for large headings and control labels,
+ * `snug` for small headings and `normal` for running text.
+ */
+export declare const lineHeights: {
+    readonly none: 1;
+    readonly tight: 1.25;
+    readonly snug: 1.4;
+    readonly normal: 1.5;
+};

package/dist/theme/tokens/spacing.d.ts

@@ -1 +1,7 @@
 export declare const spacing: (factor: number) => string;
+/**
+ * The steps emitted as `--lea-spacing-{step}`, the point of a half step written
+ * as a hyphen: `--lea-spacing-1-5` is `spacing(1.5)`. Half steps stop at 2.5
+ * and the gaps widen from there, so neighbouring steps stay visibly distinct.
+ */
+export declare const spacingSteps: readonly [0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8];

package/dist/theme/tokens/text-styles.d.ts

@@ -0,0 +1,61 @@
+import { fontWeights } from './font-weights';
+import { lineHeights } from './line-heights';
+import { FontStep } from './type-scale';
+type TextStyleDefinition = {
+    /** The step on the type scale, see type-scale.ts. */
+    step: FontStep;
+    fontWeight: keyof typeof fontWeights;
+    lineHeight: keyof typeof lineHeights;
+    letterSpacing: string;
+};
+/**
+ * Text styles, named `{role}-{size}` after what the text does, not after the
+ * element it sits in: `heading-lg` is an `h1` on one page and an `h3` on the
+ * next. Take the element from the page hierarchy and the style from the design.
+ *
+ * A style holds no values of its own. It points at a step on the type scale, a
+ * font weight and a line height, so a size is retuned in one place. `body` and
+ * `label` move one step at a time; `heading` and `display` move two, because
+ * neighbouring steps are too close to tell two headings apart.
+ *
+ * The Figma text styles `heading/lg` and so on mirror this file.
+ */
+export declare const textStyles: {
+    display: {
+        sm: TextStyleDefinition;
+        md: TextStyleDefinition;
+    };
+    heading: {
+        xs: TextStyleDefinition;
+        sm: TextStyleDefinition;
+        md: TextStyleDefinition;
+        lg: TextStyleDefinition;
+        xl: TextStyleDefinition;
+    };
+    body: {
+        xs: TextStyleDefinition;
+        sm: TextStyleDefinition;
+        md: TextStyleDefinition;
+        lg: TextStyleDefinition;
+    };
+    label: {
+        sm: TextStyleDefinition;
+        md: TextStyleDefinition;
+        lg: TextStyleDefinition;
+    };
+};
+type TextStyles = typeof textStyles;
+/** `"heading-lg"`, `"body-sm"` and so on. */
+export type TextStyleToken = {
+    [Role in keyof TextStyles]: `${Role & string}-${keyof TextStyles[Role] & string}`;
+}[keyof TextStyles];
+/** Every style as `[name, definition]`, in the order above. */
+export declare const textStyleEntries: (readonly [TextStyleToken, TextStyleDefinition])[];
+/** The CSS values of a text style, for `sx` and theme files. */
+export declare const resolveTextStyle: (name: TextStyleToken) => {
+    fontSize: string;
+    fontWeight: 200 | 300 | 400 | 500 | 600 | 700 | 800;
+    lineHeight: 1 | 1.25 | 1.5 | 1.4;
+    letterSpacing: string;
+};
+export {};

package/dist/theme/tokens/type-scale.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The modular type scale behind the text styles: a font size is
+ * `base × ratio^step`. Step 0 is body text and the ratio is a major second.
+ */
+export declare const typeScale: {
+    readonly base: 16;
+    readonly ratio: 1.125;
+};
+/**
+ * A step in pixels, rounded to a whole pixel. Figma variables can't calculate,
+ * so rounding here is what lets `fontStep/6` in Figma and `--lea-font-step-6`
+ * in CSS hold the same number.
+ */
+export declare const fontStepPx: (step: number) => number;
+export declare const fontStep: (step: number) => string;
+/**
+ * The steps emitted as `--lea-font-step-{step}`. A step below body text spells
+ * out the minus sign: `--lea-font-step-minus-1` is `fontStep(-1)`.
+ */
+export declare const fontSteps: readonly [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+export type FontStep = (typeof fontSteps)[number];

package/dist/theme/types.d.ts

@@ -1,6 +1,12 @@
-import { SxProps } from '@mui/material/styles';
 export type ColorScaleTokens = typeof import('./tokens/colors').colors;
 export type ColorScaleStep = keyof ColorScaleTokens["purple"];
+/** The four steps every brand colour (`primary`, `secondary`, `tertiary`) has. */
+export type BrandColor = {
+    base: string;
+    hover: string;
+    subtle: string;
+    contrast: string;
+};
 export type Palette = {
     bg: {
         base: string;
@@ -8,6 +14,8 @@ export type Palette = {
         muted: string;
         contrast: string;
         accent: string;
+        /** The see-through layer behind a dialog or drawer. */
+        overlay: string;
     };
     text: {
         base: string;
@@ -23,30 +31,12 @@ export type Palette = {
         accent: string;
         contrast: string;
     };
-    purple: {
-        base: string;
-        hover: string;
-        subtle: string;
-        contrast: string;
-    };
-    primary: {
-        main: string;
-        dark: string;
-        light: string;
-        contrastText: string;
-    };
-    teal: {
-        base: string;
-        hover: string;
-        subtle: string;
-        contrast: string;
-    };
-    secondary: {
-        main: string;
-        dark: string;
-        light: string;
-        contrastText: string;
-    };
+    /** Brand purple: the main action colour. */
+    primary: BrandColor;
+    /** Near-black: the second action colour. */
+    secondary: BrandColor;
+    /** Brand teal: progress and completion. */
+    tertiary: BrandColor;
     status: {
         error: {
             base: string;
@@ -67,14 +57,13 @@ export type Palette = {
     };
 };
 export type PaletteTokens = typeof import('./tokens/palette').palette;
-/** MUI `Theme` after this library's module augmentation (use with `useTheme`, `SxProps`, etc.). */
-export type LeaBankTheme = import('@mui/material/styles').Theme;
-/** Typed `SxProps` bound to the Lea Bank theme. */
-export type LeaSxProps = SxProps<LeaBankTheme>;
+/** @deprecated Use `TextStyleToken`. See `fontSizes`. */
 export type FontSizeToken = keyof typeof import('./tokens/font-sizes').fontSizes;
 export type ShapeToken = keyof typeof import('./tokens/shape').shape;
 export type ShadowToken = keyof typeof import('./tokens/shadows').shadows;
 export type FontWeightToken = keyof typeof import('./tokens/font-weights').fontWeights;
 export type EasingToken = keyof typeof import('./tokens/transitions').easings;
 export type DurationToken = keyof typeof import('./tokens/transitions').durations;
-export type { BgColorToken, BorderColorToken, BrandColorToken, ColorPath, ColorToken, SpacingFactor, StatusColorToken, TextColorToken, TypographyColorToken, } from './token-types';
+export type LineHeightToken = keyof typeof import('./tokens/line-heights').lineHeights;
+export type { TextStyleToken } from './tokens/text-styles';
+export type { BgColorToken, BorderColorToken, BrandColorToken, ColorPath, ColorRole, ColorToken, SpacingFactor, StatusColorToken, TextColorToken, TypographyColorToken, } from './token-types';

package/dist/validation/email.d.ts

@@ -22,3 +22,21 @@ export declare function isValidEmail(value: string): boolean;
  * getEmailDomainSuggestions("alice@gm") // → ["alice@gmail.com"]
  */
 export declare function getEmailDomainSuggestions(value: string, domains?: readonly string[]): string[];
+/**
+ * Whether two email addresses are the same, ignoring case and surrounding
+ * spaces, as for "the co-applicant must not be the main applicant". An empty
+ * address never matches.
+ */
+export declare function isSameEmail(a: string | null | undefined, b: string | null | undefined): boolean;
+/**
+ * Suggests a correction for a mistyped email domain, or `undefined` when there
+ * is nothing to suggest. It never changes a domain it knows, nor a domain that
+ * is merely uncommon (`anna@firma.se` stays).
+ *
+ * @example
+ * suggestEmailCorrection("anna@gnail.con") // → "anna@gmail.com"
+ * suggestEmailCorrection("anna@hotmial.com") // → "anna@hotmail.com"
+ * suggestEmailCorrection("anna@firma.con") // → "anna@firma.com"
+ * suggestEmailCorrection("anna@firma.se") // → undefined
+ */
+export declare function suggestEmailCorrection(value: string, domains?: readonly string[]): string | undefined;

package/dist/validation/mobile-patterns.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The national number of a mobile phone, per country. A number is a mobile
+ * when the whole national number matches.
+ */
+export declare const MOBILE_PATTERNS: {
+    readonly SE: "7[023689]\\d{7}";
+    readonly FI: "4946\\d{2,6}|(?:4[0-8]|50)\\d{4,8}";
+    readonly NO: "(?:4[015-9]|9\\d)\\d{6}";
+    readonly ES: "96906(?:09|10)\\d\\d|(?:590(?:10[0-2]|600)|97390\\d)\\d{3}|(?:6\\d|7[1-48])\\d{7}";
+};