@igne-agency/react-web-ui 0.5.0 → 0.6.0

package/dist/components/field/input-parts.js

@@ -16,59 +16,40 @@ var useInputPartsContext = () => {
 	return useRequiredContext(InputPartsContext, "Input parts must be rendered within their input's <Root>.");
 };
 /**
-* The label above a raw input, trailing the requiredness its `Root` was given.
+* The label above a raw input. Add `Field.Requiredness` to trail the
+* requiredness its `Root` was given.
 *
 * @example
-* <TextInput.Label>Email</TextInput.Label>
+* <TextInput.Label>Email <Field.Requiredness optionalLabel="optional" /></TextInput.Label>
 */
-var InputLabel = (t0) => {
-	const $ = c(8);
-	let children;
-	let props;
-	if ($[0] !== t0) {
-		({children, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = props;
-	} else {
-		children = $[1];
-		props = $[2];
-	}
-	const { state, optionalLabel } = useInputPartsContext();
-	let t1;
-	if ($[3] !== children || $[4] !== optionalLabel || $[5] !== props || $[6] !== state.requiredness) {
-		t1 = /* @__PURE__ */ jsx(Field.Label, {
-			requiredness: state.requiredness,
-			optionalLabel,
-			...props,
-			children
-		});
-		$[3] = children;
-		$[4] = optionalLabel;
-		$[5] = props;
-		$[6] = state.requiredness;
-		$[7] = t1;
-	} else t1 = $[7];
-	return t1;
+var InputLabel = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Field.Label, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
 };
 /**
-* The spinner a raw input shows once its `Root`'s wait is worth showing.
+* The box a raw input's wait shows in, holding what it is given, such as a
+* spinner. It renders once its `Root`'s wait is worth showing.
 *
 * @example
-* <TextInput.Pending />
+* <TextInput.Pending><Spinner size={1} /></TextInput.Pending>
 */
-var InputPending = (t0) => {
+var InputPending = (props) => {
 	const $ = c(2);
-	const { className } = t0;
 	const { phase } = useInputPartsContext();
 	if (phase === "fresh") return null;
-	let t1;
-	if ($[0] !== className) {
-		t1 = /* @__PURE__ */ jsx(Field.Pending, { className });
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
-	return t1;
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Field.Pending, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
 };
 /**
 * The errors a raw input's `Root` was given.

package/dist/components/field-placeholder/field-placeholder.css

@@ -1,22 +1,22 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._placeholder_ayddm_3 {
+  ._placeholder_1jlot_3 {
     display: flex;
     flex-direction: column;
     gap: var(--field-gap, var(--sys-unit-4));
     inline-size: 100%;
   }
-  ._label_ayddm_9 {
+  ._label_1jlot_9 {
     inline-size: var(--field-placeholder-label-size, var(--sys-unit-56));
     block-size: 1lh;
   }
-  ._controls_ayddm_13 {
+  ._controls_1jlot_13 {
     display: flex;
-    gap: var(--sys-unit-4);
+    gap: var(--field-placeholder-controls-gap, var(--sys-unit-4));
     inline-size: 100%;
   }
-  ._control_ayddm_13 {
+  ._control_1jlot_13 {
     flex: 1;
-    block-size: calc(1lh + 2 * var(--sys-unit-6) + 2 * 1px);
+    block-size: var(--field-min-block-size, calc(1lh + 2 * var(--field-pad-y, var(--sys-unit-6)) + 2 * var(--field-border-width, 1px)));
   }
 }

package/dist/components/field-placeholder/field-placeholder.module.js

@@ -1,8 +1,8 @@
 import './field-placeholder.css';// src/components/field-placeholder/field-placeholder.module.scss
-var placeholder = "_placeholder_ayddm_3";
-var label = "_label_ayddm_9";
-var controls = "_controls_ayddm_13";
-var control = "_control_ayddm_13";
+var placeholder = "_placeholder_1jlot_3";
+var label = "_label_1jlot_9";
+var controls = "_controls_1jlot_13";
+var control = "_control_1jlot_13";
 var field_placeholder_module_default = {
 	placeholder,
 	label,

package/dist/components/fieldset/field-group.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import type { FieldProps } from "../field/index.ts";
+import { type FieldProps } from "../field/index.ts";
 import type { FieldsetErrorFormat, FieldsetMember } from "./fieldset-root.tsx";
 export type FieldGroupProps = Pick<FieldProps, "requiredness" | "optionalLabel"> & Readonly<{
     /** The visible name of the group, such as "Address". */

package/dist/components/fieldset/field-group.js

@@ -1,4 +1,5 @@
 import { normalizeFieldErrors } from "../../lib/forms/errors.js";
+import { Field } from "../field/field.js";
 import { Fieldset } from "./fieldset.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -17,7 +18,7 @@ import { useId } from "react";
 * </FieldGroup>
 */
 var FieldGroup = (t0) => {
-	const $ = c(27);
+	const $ = c(28);
 	const { legend, description, errors, requiredness, optionalLabel, members, formatError, className, children } = t0;
 	const id = useId();
 	const descriptionId = `${id}description`;
@@ -33,42 +34,47 @@ var FieldGroup = (t0) => {
 	} else t1 = $[4];
 	const describedBy = t1;
 	let t2;
-	if ($[5] !== legend || $[6] !== optionalLabel || $[7] !== requiredness) {
-		t2 = /* @__PURE__ */ jsx(Fieldset.Legend, {
-			requiredness,
-			optionalLabel,
-			children: legend
-		});
-		$[5] = legend;
-		$[6] = optionalLabel;
-		$[7] = requiredness;
-		$[8] = t2;
-	} else t2 = $[8];
+	if ($[5] !== optionalLabel) {
+		t2 = /* @__PURE__ */ jsx(Field.Requiredness, { optionalLabel });
+		$[5] = optionalLabel;
+		$[6] = t2;
+	} else t2 = $[6];
 	let t3;
-	if ($[9] !== description || $[10] !== descriptionId) {
-		t3 = /* @__PURE__ */ jsx(Fieldset.Description, {
+	if ($[7] !== legend || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Fieldset.Legend, { children: [
+			legend,
+			" ",
+			t2
+		] });
+		$[7] = legend;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== description || $[11] !== descriptionId) {
+		t4 = /* @__PURE__ */ jsx(Fieldset.Description, {
 			id: descriptionId,
 			children: description
 		});
-		$[9] = description;
-		$[10] = descriptionId;
-		$[11] = t3;
-	} else t3 = $[11];
-	let t4;
-	if ($[12] !== children) {
-		t4 = /* @__PURE__ */ jsx(Fieldset.Fields, { children });
-		$[12] = children;
-		$[13] = t4;
-	} else t4 = $[13];
+		$[10] = description;
+		$[11] = descriptionId;
+		$[12] = t4;
+	} else t4 = $[12];
 	let t5;
-	if ($[14] !== errorId) {
-		t5 = /* @__PURE__ */ jsx(Fieldset.Error, { id: errorId });
-		$[14] = errorId;
-		$[15] = t5;
-	} else t5 = $[15];
+	if ($[13] !== children) {
+		t5 = /* @__PURE__ */ jsx(Fieldset.Fields, { children });
+		$[13] = children;
+		$[14] = t5;
+	} else t5 = $[14];
 	let t6;
-	if ($[16] !== className || $[17] !== describedBy || $[18] !== errors || $[19] !== formatError || $[20] !== members || $[21] !== requiredness || $[22] !== t2 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5) {
-		t6 = /* @__PURE__ */ jsxs(Fieldset.Root, {
+	if ($[15] !== errorId) {
+		t6 = /* @__PURE__ */ jsx(Fieldset.Error, { id: errorId });
+		$[15] = errorId;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== className || $[18] !== describedBy || $[19] !== errors || $[20] !== formatError || $[21] !== members || $[22] !== requiredness || $[23] !== t3 || $[24] !== t4 || $[25] !== t5 || $[26] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Fieldset.Root, {
 			errors,
 			requiredness,
 			members,
@@ -76,25 +82,25 @@ var FieldGroup = (t0) => {
 			"aria-describedby": describedBy,
 			className,
 			children: [
-				t2,
 				t3,
 				t4,
-				t5
+				t5,
+				t6
 			]
 		});
-		$[16] = className;
-		$[17] = describedBy;
-		$[18] = errors;
-		$[19] = formatError;
-		$[20] = members;
-		$[21] = requiredness;
-		$[22] = t2;
+		$[17] = className;
+		$[18] = describedBy;
+		$[19] = errors;
+		$[20] = formatError;
+		$[21] = members;
+		$[22] = requiredness;
 		$[23] = t3;
 		$[24] = t4;
 		$[25] = t5;
 		$[26] = t6;
-	} else t6 = $[26];
-	return t6;
+		$[27] = t7;
+	} else t7 = $[27];
+	return t7;
 };
 function _temp(part) {
 	return part !== "";

package/dist/components/fieldset/fieldset-root.d.ts

@@ -55,6 +55,6 @@ export declare const FieldsetRoot: ({ errors, requiredness, dirty, touched, pend
  * The legend that names a {@link FieldsetRoot}.
  *
  * @example
- * <FieldsetLegend optionalLabel="optional">Kind</FieldsetLegend>
+ * <FieldsetLegend>Kind <Field.Requiredness optionalLabel="optional" /></FieldsetLegend>
  */
 export declare const FieldsetLegend: (props: FieldLabelProps) => ReactNode;

package/dist/components/fieldset/fieldset-root.js

@@ -34,7 +34,7 @@ var withoutKey = (record, key) => Object.fromEntries(Object.entries(record).filt
 * <FieldsetRoot filled={kind !== null}>…</FieldsetRoot>
 */
 var FieldsetRoot = (t0) => {
-	const $ = c(64);
+	const $ = c(65);
 	let children;
 	let dirty;
 	let disabled;
@@ -209,11 +209,12 @@ var FieldsetRoot = (t0) => {
 		$[49] = t11;
 	} else t11 = $[49];
 	let t12;
-	if ($[50] !== children || $[51] !== dirty || $[52] !== field.disabled || $[53] !== field.invalid || $[54] !== props || $[55] !== t11 || $[56] !== touched) {
+	if ($[50] !== children || $[51] !== dirty || $[52] !== field.disabled || $[53] !== field.invalid || $[54] !== props || $[55] !== requiredness || $[56] !== t11 || $[57] !== touched) {
 		t12 = /* @__PURE__ */ jsx(Field.Root, {
 			render: t8,
 			disabled: t9,
 			invalid: t10,
+			requiredness,
 			dirty,
 			touched,
 			...t11,
@@ -225,37 +226,38 @@ var FieldsetRoot = (t0) => {
 		$[52] = field.disabled;
 		$[53] = field.invalid;
 		$[54] = props;
-		$[55] = t11;
-		$[56] = touched;
-		$[57] = t12;
-	} else t12 = $[57];
+		$[55] = requiredness;
+		$[56] = t11;
+		$[57] = touched;
+		$[58] = t12;
+	} else t12 = $[58];
 	let t13;
-	if ($[58] !== group || $[59] !== t12) {
+	if ($[59] !== group || $[60] !== t12) {
 		t13 = /* @__PURE__ */ jsx(FieldGroupContext, {
 			value: group,
 			children: t12
 		});
-		$[58] = group;
-		$[59] = t12;
-		$[60] = t13;
-	} else t13 = $[60];
+		$[59] = group;
+		$[60] = t12;
+		$[61] = t13;
+	} else t13 = $[61];
 	let t14;
-	if ($[61] !== t13 || $[62] !== t7) {
+	if ($[62] !== t13 || $[63] !== t7) {
 		t14 = /* @__PURE__ */ jsx(FieldsetContext, {
 			value: t7,
 			children: t13
 		});
-		$[61] = t13;
-		$[62] = t7;
-		$[63] = t14;
-	} else t14 = $[63];
+		$[62] = t13;
+		$[63] = t7;
+		$[64] = t14;
+	} else t14 = $[64];
 	return t14;
 };
 /**
 * The legend that names a {@link FieldsetRoot}.
 *
 * @example
-* <FieldsetLegend optionalLabel="optional">Kind</FieldsetLegend>
+* <FieldsetLegend>Kind <Field.Requiredness optionalLabel="optional" /></FieldsetLegend>
 */
 var FieldsetLegend = (props) => {
 	const $ = c(3);

package/dist/components/fieldset/fieldset.d.ts

@@ -26,8 +26,8 @@ export type FieldsetParts = Readonly<{
  * `errors`. For the ordinary case, use `FieldGroup`.
  *
  * @example
- * <Fieldset.Root members={members} aria-describedby={descriptionId}>
- * 	<Fieldset.Legend optionalLabel="optional">Address</Fieldset.Legend>
+ * <Fieldset.Root members={members} requiredness="optional" aria-describedby={descriptionId}>
+ * 	<Fieldset.Legend>Address <Field.Requiredness optionalLabel="optional" /></Fieldset.Legend>
  * 	<Fieldset.Description id={descriptionId}>We send the invoice here.</Fieldset.Description>
  * 	<Fieldset.Fields>…</Fieldset.Fields>
  * 	<Fieldset.Error />

package/dist/components/fieldset/fieldset.js

@@ -104,8 +104,8 @@ var FieldsetError = (t0) => {
 * `errors`. For the ordinary case, use `FieldGroup`.
 *
 * @example
-* <Fieldset.Root members={members} aria-describedby={descriptionId}>
-* 	<Fieldset.Legend optionalLabel="optional">Address</Fieldset.Legend>
+* <Fieldset.Root members={members} requiredness="optional" aria-describedby={descriptionId}>
+* 	<Fieldset.Legend>Address <Field.Requiredness optionalLabel="optional" /></Fieldset.Legend>
 * 	<Fieldset.Description id={descriptionId}>We send the invoice here.</Fieldset.Description>
 * 	<Fieldset.Fields>…</Fieldset.Fields>
 * 	<Fieldset.Error />

package/dist/components/file-field/file-field.css

@@ -1,99 +1,165 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._dropTarget_1ap1m_3 {
-    --field-fg: var(--sys-color-text);
-    --field-muted-fg: var(--sys-color-text-muted);
-    --field-placeholder-fg: var(--sys-color-text-placeholder);
+  ._dropTarget_1rv6d_3 {
+    --_field-fg: var(--field-fg, var(--sys-color-text));
+    --_field-muted-fg: var(
+    	--field-muted-fg,
+    	var(--sys-color-text-muted)
+    );
+    --_field-placeholder-fg: var(
+    	--field-placeholder-fg,
+    	var(--sys-color-text-placeholder)
+    );
+    --_field-caret: var(--field-caret, auto);
+  }
+  ._dropTarget_1rv6d_3 {
+    --_field-fill: var(
+    	--field-bg,
+    	var(--sys-color-surface)
+    );
     align-items: center;
     box-sizing: border-box;
-    min-block-size: calc(1lh + 2 * var(--sys-unit-6) + 2 * 1px);
-    border: 1px solid var(--sys-color-border);
-    border-radius: var(--sys-radius-sm);
-    background: var(--sys-color-surface);
-    padding: var(--sys-unit-6);
-    color: var(--field-fg);
-    font: var(--sys-font-body-medium);
-  }
-  ._dropTarget_1ap1m_3 {
-    outline: 0 solid var(--sys-color-focus-ring);
-    outline-offset: var(--sys-focus-ring-offset);
-  }
-  ._dropTarget_1ap1m_3[data-focus-visible] {
-    outline-width: var(--sys-focus-ring-width);
+    min-block-size: var(--field-min-block-size, calc(1lh + 2 * var(--field-pad-y, var(--sys-unit-6)) + 2 * var(--field-border-width, 1px)));
+    border: var(--field-border-width, 1px) solid var(--field-border, var(--sys-color-border));
+    border-radius: var(--field-radius, var(--sys-radius-sm));
+    background: var(--_field-fill);
+    padding-block: var(--field-pad-y, var(--sys-unit-6));
+    padding-inline: var(--field-pad-start, var(--field-pad-x, var(--sys-unit-6))) var(--field-pad-end, var(--field-pad-x, var(--sys-unit-6)));
+    box-shadow: var(--field-shadow, none);
+    color: var(--_field-fg);
+    font: var(--field-font, var(--sys-font-body-medium));
+    caret-color: var(--_field-caret);
+    backdrop-filter: var(--field-backdrop-filter, none);
+  }
+  ._dropTarget_1rv6d_3 {
+    outline: 0 solid var(--field-ring-color, var(--sys-color-focus-ring));
+    outline-offset: var(--field-ring-offset, var(--sys-focus-ring-offset));
+  }
+  ._dropTarget_1rv6d_3[data-focus-visible] {
+    outline-width: var(--field-ring-width, var(--sys-focus-ring-width));
   }
   @media not (prefers-reduced-motion) {
-    ._dropTarget_1ap1m_3 {
-      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
+    ._dropTarget_1rv6d_3 {
+      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard), box-shadow var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._dropTarget_1ap1m_3:hover:not([data-disabled], [data-readonly]), ._dropTarget_1ap1m_3[data-focused], ._dropTarget_1ap1m_3[data-popup-open] {
-    border-color: var(--sys-color-primary);
-  }
-  ._dropTarget_1ap1m_3[data-readonly] {
-    --field-fg: var(--sys-color-text);
-    border-style: dashed;
-    border-color: var(--sys-color-outline);
-    background: var(--sys-color-surface-high);
-    color: var(--field-fg);
-  }
-  ._dropTarget_1ap1m_3[data-pending] {
+  ._dropTarget_1rv6d_3:hover:not([data-disabled],
+  [data-readonly],
+  [data-focused],
+  [data-popup-open]) {
+    border-color: var(--field-hover-border, var(--sys-color-primary));
+  }
+  ._dropTarget_1rv6d_3[data-focused], ._dropTarget_1rv6d_3[data-popup-open] {
+    border-width: var(--field-focus-border-width, var(--field-border-width, 1px));
+    border-color: var(--field-focus-border, var(--sys-color-primary));
+    box-shadow: var(--field-focus-shadow, var(--field-shadow, none));
+  }
+  ._dropTarget_1rv6d_3:has(:autofill) {
+    --_field-fill: var(
+    	--field-autofill-bg,
+    	var(--sys-color-autofill-bg)
+    );
+  }
+  ._dropTarget_1rv6d_3[data-readonly] {
+    --_field-fg: var(
+    	--field-readonly-fg,
+    	var(--sys-color-text)
+    );
+    --_field-fill: var(
+    	--field-readonly-bg,
+    	var(--sys-color-surface-high)
+    );
+    border-style: var(--field-readonly-border-style, dashed);
+    border-color: var(--field-readonly-border, var(--sys-color-outline));
+    background: var(--_field-fill);
+    color: var(--_field-fg);
+  }
+  ._dropTarget_1rv6d_3[data-pending] {
     cursor: progress;
-    caret-color: var(--sys-color-text-muted);
-  }
-  ._dropTarget_1ap1m_3[data-invalid] {
-    --field-fg: var(--sys-color-error-fg);
-    --field-muted-fg: var(--sys-color-error-fg);
-    --field-placeholder-fg: var(--sys-color-error-fg);
-    border-color: var(--sys-color-error-fg);
-    background-color: var(--sys-color-error-bg);
-    color: var(--field-fg);
-  }
-  ._dropTarget_1ap1m_3[data-disabled] {
-    --field-fg: var(--sys-color-disabled-fg);
-    --field-muted-fg: var(--sys-color-disabled-fg);
-    --field-placeholder-fg: var(--sys-color-disabled-fg);
-    color: var(--sys-color-disabled-fg);
+    caret-color: var(--field-pending-caret, var(--sys-color-text-muted));
+  }
+  ._dropTarget_1rv6d_3[data-invalid] {
+    --_field-fg: var(
+    	--field-invalid-fg,
+    	var(--sys-color-error-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-invalid-muted-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-invalid-placeholder-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-fill: var(
+    	--field-invalid-bg,
+    	var(--sys-color-error-bg)
+    );
+    border-color: var(--field-invalid-border, var(--sys-color-error-fg));
+    background-color: var(--_field-fill);
+    color: var(--_field-fg);
+    border-width: var(--field-invalid-border-width, var(--field-border-width, 1px));
+    box-shadow: var(--field-invalid-shadow, var(--field-shadow, none));
+  }
+  ._dropTarget_1rv6d_3[data-disabled] {
+    --_field-fg: var(
+    	--field-disabled-fg,
+    	var(--sys-color-disabled-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-disabled-muted-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-disabled-placeholder-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    color: var(--field-disabled-fg, var(--sys-color-disabled-fg));
     cursor: not-allowed;
-    background: var(--sys-color-disabled-bg);
+    --_field-fill: var(
+    	--field-disabled-bg,
+    	var(--sys-color-disabled-bg)
+    );
   }
-  ._dropTarget_1ap1m_3 {
+  ._dropTarget_1rv6d_3 {
     position: relative;
     display: flex;
-    gap: var(--sys-unit-4);
+    gap: var(--field-inlay-gap, var(--sys-unit-4));
   }
-  ._dropTarget_1ap1m_3 {
+  ._dropTarget_1rv6d_3 {
     flex-direction: column;
     justify-content: center;
     gap: var(--file-field-gap, var(--sys-unit-8));
     min-block-size: var(--file-field-min-block-size, var(--sys-unit-40));
-    padding: var(--file-field-padding, var(--sys-unit-12));
+    border-radius: var(--file-field-radius, var(--field-radius, var(--sys-radius-sm)));
+    padding: var(--file-field-pad-y, var(--sys-unit-12)) var(--file-field-pad-x, var(--sys-unit-12));
     text-align: center;
     cursor: pointer;
   }
-  ._dropTarget_1ap1m_3[data-readonly] {
+  ._dropTarget_1rv6d_3[data-readonly] {
     cursor: default;
   }
-  ._dropTarget_1ap1m_3[data-drop-target] {
-    border-style: dashed;
+  ._dropTarget_1rv6d_3[data-drop-target] {
+    border-style: var(--file-field-drop-border-style, dashed);
     border-color: var(--file-field-drop-border, var(--sys-color-primary));
     background: var(--file-field-drop-bg, var(--sys-color-primary-container));
     color: var(--file-field-drop-fg, var(--sys-color-on-primary-container));
   }
-  ._hint_1ap1m_82 {
+  ._hint_1rv6d_148 {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--sys-unit-2);
-    color: var(--field-muted-fg);
-    font: var(--sys-font-body-medium);
+    gap: var(--file-field-hint-gap, var(--sys-unit-2));
+    color: var(--_field-muted-fg);
+    font: var(--file-field-hint-font, var(--sys-font-body-medium));
     overflow-wrap: normal;
     hyphens: auto;
   }
-  ._hintIcon_1ap1m_92 {
+  ._hintIcon_1rv6d_158 {
     display: inline-flex;
     font-size: var(--file-field-hint-icon-size, 1.5em);
   }
-  ._list_1ap1m_96 {
+  ._list_1rv6d_162 {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;