@igne-agency/react-web-ui 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,94 @@
+import { useRequiredContext } from "../../lib/use-required-context.js";
+import { Field } from "./field.js";
+import { c } from "react/compiler-runtime";
+import { createContext } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/field/input-parts.tsx
+/** The context a raw input's `Root` provides its shared parts. */
+var InputPartsContext = createContext(null);
+/**
+* The surrounding raw input's projected state, errors and busy phase.
+*
+* @example
+* const { state } = useInputPartsContext();
+*/
+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.
+*
+* @example
+* <TextInput.Label>Email</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;
+};
+/**
+* The spinner a raw input shows once its `Root`'s wait is worth showing.
+*
+* @example
+* <TextInput.Pending />
+*/
+var InputPending = (t0) => {
+	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;
+};
+/**
+* The errors a raw input's `Root` was given.
+*
+* @example
+* <TextInput.Error />
+*/
+var InputError = (props) => {
+	const $ = c(3);
+	const { errors } = useInputPartsContext();
+	let t0;
+	if ($[0] !== errors || $[1] !== props) {
+		t0 = /* @__PURE__ */ jsx(Field.Error, {
+			...props,
+			children: errors
+		});
+		$[0] = errors;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+};
+export { InputError, InputLabel, InputPartsContext, InputPending, useInputPartsContext };

package/dist/components/field/options-load.d.ts

@@ -0,0 +1,54 @@
+/**
+ * How far the options of a select or combobox have loaded. A failure that
+ * trying again can clear carries a `retry`.
+ */
+export type OptionsLoad = Readonly<{
+    status: "pending" | "success";
+}> | Readonly<{
+    status: "error";
+    retry?: () => void;
+}>;
+/** The copy a select's or combobox's popup shows about its options. */
+export type OptionsLoadLabels = Readonly<{
+    /** Said while the options load, such as "Loading options…". */
+    loadingLabel: string;
+    /** Said when the options failed to load and a retry can help. */
+    loadFailedLabel: string;
+    /** Said when the options failed to load and trying again won't help. */
+    loadBrokenLabel: string;
+    /** The retry button's text, such as "Try again". */
+    retryLabel: string;
+    /** Said when there are no options at all. */
+    noOptionsLabel: string;
+}>;
+/**
+ * What a popup says about a load that is pending or failed; nothing once the
+ * options are there.
+ *
+ * @example
+ * optionsLoadMessage({ status: "pending" }, labels); // labels.loadingLabel
+ */
+export declare const optionsLoadMessage: (load: OptionsLoad, labels: OptionsLoadLabels) => string | undefined;
+/**
+ * The load of options that are all there from the start.
+ *
+ * @example
+ * const load = source ?? itemsLoad ?? OPTIONS_LOADED;
+ */
+export declare const OPTIONS_LOADED: OptionsLoad;
+/** The part of a query `optionsLoad` reads, such as a TanStack Query result. */
+export type OptionsQuery = Readonly<{
+    data: unknown;
+    error: unknown;
+    isFetching: boolean;
+    refetch: () => Promise<unknown>;
+}>;
+/**
+ * The options load of a query: loaded once it holds data, pending while it
+ * fetches without any, failed otherwise. A failure offers a retry when
+ * `retryable` says trying again can help, which by default is always.
+ *
+ * @example
+ * <SelectField options={options} load={optionsLoad(query, isRetryable)} … />
+ */
+export declare const optionsLoad: (query: OptionsQuery, retryable?: (error: unknown) => boolean) => OptionsLoad;

package/dist/components/field/options-load.js

@@ -0,0 +1,38 @@
+// src/components/field/options-load.ts
+/**
+* What a popup says about a load that is pending or failed; nothing once the
+* options are there.
+*
+* @example
+* optionsLoadMessage({ status: "pending" }, labels); // labels.loadingLabel
+*/
+var optionsLoadMessage = (load, labels) => {
+	if (load.status === "pending") return labels.loadingLabel;
+	if (load.status === "error") return load.retry === void 0 ? labels.loadBrokenLabel : labels.loadFailedLabel;
+};
+/**
+* The load of options that are all there from the start.
+*
+* @example
+* const load = source ?? itemsLoad ?? OPTIONS_LOADED;
+*/
+var OPTIONS_LOADED = { status: "success" };
+/**
+* The options load of a query: loaded once it holds data, pending while it
+* fetches without any, failed otherwise. A failure offers a retry when
+* `retryable` says trying again can help, which by default is always.
+*
+* @example
+* <SelectField options={options} load={optionsLoad(query, isRetryable)} … />
+*/
+var optionsLoad = (query, retryable = () => true) => {
+	if (query.data !== void 0) return { status: "success" };
+	if (query.isFetching || query.error === null) return { status: "pending" };
+	return retryable(query.error) ? {
+		status: "error",
+		retry: () => {
+			query.refetch();
+		}
+	} : { status: "error" };
+};
+export { OPTIONS_LOADED, optionsLoad, optionsLoadMessage };

package/dist/components/field/rim-focus.d.ts

@@ -0,0 +1,10 @@
+import type { MouseEvent } from "react";
+/**
+ * Focuses a field group's control when the press lands on the group's own box —
+ * its padding, or an inlay that takes no pointer events. Presses that reach the
+ * control, an `inlay-action` or any other interactive part are left alone.
+ *
+ * @example
+ * <div className={style.group} onMouseDown={focusControlOnRim} />
+ */
+export declare const focusControlOnRim: (event: MouseEvent<HTMLElement>) => void;

package/dist/components/field/rim-focus.js

@@ -0,0 +1,23 @@
+// src/components/field/rim-focus.ts
+var CONTROL_SELECTOR = [
+	"input:not([type=\"hidden\"])",
+	"textarea",
+	"[role=\"spinbutton\"]",
+	"[contenteditable=\"true\"]"
+].join(",");
+/**
+* Focuses a field group's control when the press lands on the group's own box —
+* its padding, or an inlay that takes no pointer events. Presses that reach the
+* control, an `inlay-action` or any other interactive part are left alone.
+*
+* @example
+* <div className={style.group} onMouseDown={focusControlOnRim} />
+*/
+var focusControlOnRim = (event) => {
+	if (event.target !== event.currentTarget) return;
+	const control = event.currentTarget.querySelector(CONTROL_SELECTOR);
+	if (control === null || control.matches(":disabled")) return;
+	event.preventDefault();
+	control.focus();
+};
+export { focusControlOnRim };

package/dist/components/field/use-field-focus.d.ts

@@ -0,0 +1,37 @@
+import { type FocusEvent } from "react";
+import type { FieldState } from "./field-state.ts";
+export type FieldFocusHandlers<TEvent extends FocusEvent<HTMLElement>> = Readonly<{
+    onFocus?: (event: TEvent) => void;
+    onBlur?: (event: TEvent) => void;
+}>;
+export type FieldFocus<TEvent extends FocusEvent<HTMLElement> = FocusEvent<HTMLElement>> = Readonly<{
+    /** Focus is on this element or inside it, however it got there. */
+    focused: boolean;
+    /** That focus is the keyboard's, so it has earned a ring. */
+    focusVisible: boolean;
+    /** Spread onto the element whose focus is being tracked, after its own props. */
+    props: Readonly<{
+        onFocus: (event: TEvent) => void;
+        onBlur: (event: TEvent) => void;
+    }>;
+}>;
+/**
+ * Live focus laid over a projected field state. A caller can add focus that
+ * lands elsewhere in the field, such as a popup this element does not contain;
+ * the ring stays the element's own.
+ *
+ * @example
+ * fieldStateAttributes(withFieldFocus(state, useFieldFocus(props)));
+ */
+export declare const withFieldFocus: (state: FieldState, focus: Pick<FieldFocus, "focused" | "focusVisible">) => FieldState;
+/**
+ * Tracks focus for a control that has to publish it as `data-focused` and
+ * `data-focus-visible` rather than leave it to a selector. React's focus events
+ * bubble, so this reads focus inside a group as well as on a bare control. The
+ * handlers passed in still run, so `props` is spread last.
+ *
+ * @example
+ * const focus = useFieldFocus(props);
+ * <div {...props} {...focus.props} />
+ */
+export declare const useFieldFocus: <TEvent extends FocusEvent<HTMLElement> = FocusEvent<HTMLElement>>(handlers?: FieldFocusHandlers<TEvent>) => FieldFocus<TEvent>;

package/dist/components/field/use-field-focus.js

@@ -0,0 +1,71 @@
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+// src/components/field/use-field-focus.ts
+/**
+* Live focus laid over a projected field state. A caller can add focus that
+* lands elsewhere in the field, such as a popup this element does not contain;
+* the ring stays the element's own.
+*
+* @example
+* fieldStateAttributes(withFieldFocus(state, useFieldFocus(props)));
+*/
+var withFieldFocus = (state, focus) => ({
+	...state,
+	focused: state.focused === true || focus.focused,
+	focusVisible: focus.focusVisible
+});
+/**
+* Tracks focus for a control that has to publish it as `data-focused` and
+* `data-focus-visible` rather than leave it to a selector. React's focus events
+* bubble, so this reads focus inside a group as well as on a bare control. The
+* handlers passed in still run, so `props` is spread last.
+*
+* @example
+* const focus = useFieldFocus(props);
+* <div {...props} {...focus.props} />
+*/
+var useFieldFocus = (handlers) => {
+	const $ = c(6);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			focused: false,
+			focusVisible: false
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const [focus, setFocus] = useState(t0);
+	let t1;
+	if ($[1] !== handlers) {
+		t1 = {
+			onFocus: (event) => {
+				setFocus({
+					focused: true,
+					focusVisible: event.target.matches(":focus-visible")
+				});
+				handlers?.onFocus?.(event);
+			},
+			onBlur: (event_0) => {
+				if (!(event_0.relatedTarget instanceof Node && event_0.currentTarget.contains(event_0.relatedTarget))) setFocus({
+					focused: false,
+					focusVisible: false
+				});
+				handlers?.onBlur?.(event_0);
+			}
+		};
+		$[1] = handlers;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== focus || $[4] !== t1) {
+		t2 = {
+			...focus,
+			props: t1
+		};
+		$[3] = focus;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+export { useFieldFocus, withFieldFocus };

package/dist/components/field/use-field-state.d.ts

@@ -0,0 +1,32 @@
+import { type BusyPhase } from "../../lib/hooks/use-busy-phase.ts";
+import type { FieldProps } from "./field.tsx";
+import type { FieldState } from "./field-state.ts";
+/** What `useFieldState` reads a field's states from. */
+export type FieldStateOptions = Pick<FieldProps, "errors" | "requiredness" | "dirty" | "touched" | "pending"> & Readonly<{
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** The control holds a value. */
+    filled?: boolean;
+    /** States no option here owns, projected over the ones that do. */
+    state?: FieldState;
+}>;
+/** A field's states, read from their owners. */
+export type FieldStateProjection = Readonly<{
+    /** Every state the field projects, for `fieldStateAttributes` and its parts. */
+    state: FieldState;
+    /** The field has an error to show. */
+    invalid: boolean;
+    /** Disabled by its own prop or by a busy `Form.Root`. */
+    disabled: boolean;
+    /** How long `pending` has lasted; a `Pending` part mounts once it leaves `fresh`. */
+    phase: BusyPhase;
+}>;
+/**
+ * A field's states, each from its owner: invalid from its errors, disabled
+ * by its own prop or a busy `Form.Root`, and pending once the wait has lasted
+ * long enough to show.
+ *
+ * @example
+ * const { state, invalid, disabled, phase } = useFieldState({ errors, pending, disabled, filled: value !== "" });
+ */
+export declare const useFieldState: ({ errors, requiredness, dirty, touched, pending, disabled: ownDisabled, readOnly, filled, state, }: FieldStateOptions) => FieldStateProjection;

package/dist/components/field/use-field-state.js

@@ -0,0 +1,77 @@
+import { normalizeFieldErrors } from "../../lib/forms/errors.js";
+import { useBusyPhase } from "../../lib/hooks/use-busy-phase.js";
+import { useFormDisabled } from "../form/form-context.js";
+import { c } from "react/compiler-runtime";
+// src/components/field/use-field-state.ts
+/**
+* A field's states, each from its owner: invalid from its errors, disabled
+* by its own prop or a busy `Form.Root`, and pending once the wait has lasted
+* long enough to show.
+*
+* @example
+* const { state, invalid, disabled, phase } = useFieldState({ errors, pending, disabled, filled: value !== "" });
+*/
+var useFieldState = (t0) => {
+	const $ = c(19);
+	const { errors, requiredness, dirty, touched, pending: t1, disabled: t2, readOnly, filled, state } = t0;
+	const pending = t1 === void 0 ? false : t1;
+	const ownDisabled = t2 === void 0 ? false : t2;
+	const formDisabled = useFormDisabled();
+	let t3;
+	if ($[0] !== pending) {
+		t3 = { busy: pending };
+		$[0] = pending;
+		$[1] = t3;
+	} else t3 = $[1];
+	const phase = useBusyPhase(t3);
+	let t4;
+	if ($[2] !== errors) {
+		t4 = normalizeFieldErrors(errors);
+		$[2] = errors;
+		$[3] = t4;
+	} else t4 = $[3];
+	const invalid = t4.length > 0;
+	const disabled = ownDisabled || formDisabled;
+	const t5 = invalid ? "invalid" : void 0;
+	const t6 = phase !== "fresh";
+	let t7;
+	if ($[4] !== dirty || $[5] !== disabled || $[6] !== filled || $[7] !== readOnly || $[8] !== requiredness || $[9] !== state || $[10] !== t5 || $[11] !== t6 || $[12] !== touched) {
+		t7 = {
+			disabled,
+			readonly: readOnly,
+			requiredness,
+			validity: t5,
+			dirty,
+			touched,
+			filled,
+			pending: t6,
+			...state
+		};
+		$[4] = dirty;
+		$[5] = disabled;
+		$[6] = filled;
+		$[7] = readOnly;
+		$[8] = requiredness;
+		$[9] = state;
+		$[10] = t5;
+		$[11] = t6;
+		$[12] = touched;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== disabled || $[15] !== invalid || $[16] !== phase || $[17] !== t7) {
+		t8 = {
+			state: t7,
+			invalid,
+			disabled,
+			phase
+		};
+		$[14] = disabled;
+		$[15] = invalid;
+		$[16] = phase;
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	return t8;
+};
+export { useFieldState };

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

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

package/dist/components/field-placeholder/field-placeholder.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+/**
+ * A field-shaped placeholder, standing in for a control whose code is still on
+ * its way. Holds the label and control heights so the form does not jump when
+ * the real field arrives.
+ *
+ * @example
+ * <Suspense fallback={<FieldPlaceholder />}>{field}</Suspense>
+ */
+export declare const FieldPlaceholder: () => ReactNode;

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

@@ -0,0 +1,54 @@
+import { Skeleton } from "../skeleton/skeleton.js";
+import field_placeholder_module_default from "./field-placeholder.module.js";
+import { c } from "react/compiler-runtime";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/field-placeholder/field-placeholder.tsx
+var SHAPES = ["single", "split"];
+var shapeIndex = (seed, count) => {
+	let hash = 0;
+	for (const character of seed) hash = (hash * 31 + character.charCodeAt(0)) % 1000003;
+	return hash % count;
+};
+/**
+* A field-shaped placeholder, standing in for a control whose code is still on
+* its way. Holds the label and control heights so the form does not jump when
+* the real field arrives.
+*
+* @example
+* <Suspense fallback={<FieldPlaceholder />}>{field}</Suspense>
+*/
+var FieldPlaceholder = () => {
+	const $ = c(6);
+	const shape = SHAPES[shapeIndex(useId(), SHAPES.length)] ?? "single";
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Skeleton, { className: field_placeholder_module_default.label });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Skeleton, { className: field_placeholder_module_default.control });
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== shape) {
+		t2 = shape === "split" && /* @__PURE__ */ jsx(Skeleton, { className: field_placeholder_module_default.control });
+		$[2] = shape;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t2) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			className: field_placeholder_module_default.placeholder,
+			children: [t0, /* @__PURE__ */ jsxs("div", {
+				className: field_placeholder_module_default.controls,
+				children: [t1, t2]
+			})]
+		});
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+};
+export { FieldPlaceholder };

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

@@ -0,0 +1,12 @@
+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 field_placeholder_module_default = {
+	placeholder,
+	label,
+	controls,
+	control
+};
+export { control, controls, field_placeholder_module_default as default, label, placeholder };

package/dist/components/field-placeholder/index.d.ts

@@ -0,0 +1 @@
+export * from "./field-placeholder.tsx";

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

@@ -0,0 +1 @@
+export { FieldPlaceholder } from "./field-placeholder.js";

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

@@ -0,0 +1,101 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._dropTarget_ohenx_3 {
+    --field-fg: var(--sys-color-text);
+    --field-muted-fg: var(--sys-color-text-muted);
+    --field-placeholder-fg: var(--sys-color-text-placeholder);
+    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_ohenx_3 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._dropTarget_ohenx_3[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  @media not (prefers-reduced-motion) {
+    ._dropTarget_ohenx_3 {
+      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._dropTarget_ohenx_3:hover:not([data-disabled], [data-readonly]), ._dropTarget_ohenx_3[data-focused], ._dropTarget_ohenx_3[data-popup-open] {
+    border-color: var(--sys-color-primary);
+  }
+  ._dropTarget_ohenx_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_ohenx_3[data-pending] {
+    cursor: progress;
+    caret-color: var(--sys-color-text-muted);
+  }
+  ._dropTarget_ohenx_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_ohenx_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);
+    cursor: not-allowed;
+    background: var(--sys-color-disabled-bg);
+  }
+  ._dropTarget_ohenx_3 {
+    position: relative;
+    display: flex;
+    gap: var(--sys-unit-4);
+  }
+  ._dropTarget_ohenx_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));
+    text-align: center;
+    cursor: pointer;
+  }
+  ._dropTarget_ohenx_3[data-readonly] {
+    cursor: default;
+  }
+  ._dropTarget_ohenx_3[data-drop-target] {
+    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_ohenx_82 {
+    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);
+    overflow-wrap: normal;
+    hyphens: auto;
+  }
+  ._list_ohenx_92 {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--file-field-gap, var(--sys-unit-8));
+    min-inline-size: 0;
+  }
+}