@portnet/ui 6.0.2 → 6.0.3

package/dist/esm/v2/components/Field.js

@@ -1,9 +1,3 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import * as React from "react";
 import FormControl from "@mui/material/FormControl";
 import FormLabel from "@mui/material/FormLabel";
@@ -19,7 +13,47 @@ import FieldError from "./FieldError";
  * for any form control (Input, Select, Textarea, Autocomplete, Combobox, …).
  *
  * Strict rules enforced:
- *   R-I.1 — Label is associated to the control via `htmlFor` / `id`.
+ *   R-I.1 — Label is associated to the control via `htmlFor` / `id`, plus
+ *           `labelId` for children whose visible surface is NOT labelable.
+ *
+ *           >>> THE SECOND CHANNEL WAS MISSING, AND HALF THE CONTROLS NEED IT.
+ *           >>> `htmlFor` / `id` names LABELABLE elements only — input, select,
+ *           >>> textarea, button, meter, output, progress. `Select` renders its
+ *           >>> visible surface as a `div[role="combobox"]`, which is not one,
+ *           >>> so the pair resolved to NOTHING: the control had no accessible
+ *           >>> name and a screen reader announced "combobox, collapsed"
+ *           >>> without saying which field. WCAG 4.1.2 / 1.3.1, invisible on
+ *           >>> screen, in every filter drawer and every form of every module.
+ *           >>>
+ *           >>> Found by the axe-core suite of
+ *           >>> `autorisation-admis-pour-conforme-fe` (Area 10), failing with
+ *           >>> `aria-input-field-name` on the first `Select` rendered.
+ *
+ *           WHY `labelId` AND NOT `aria-labelledby`. A first attempt passed
+ *           `aria-labelledby` to every child. It does not work and it breaks
+ *           things: MUI spreads unknown props onto its ROOT wrapper, so the
+ *           attribute landed on `div.MuiInputBase-root` — never on the inner
+ *           control. For `Select` the combobox stayed anonymous; for `Input`
+ *           the wrapper became a SECOND element carrying the label, which is
+ *           both wrong for assistive tech and enough to break any
+ *           `getByLabelText` in a host's tests. `labelId` is MUI's own channel:
+ *           `SelectInput` merges it into the combobox's `aria-labelledby`.
+ *
+ *           It is passed only to children that DECLARE they consume it, via
+ *           the `puiLabelTarget` marker (see `Select`). A blanket `labelId`
+ *           would reach `<input>` and MUI text fields, which do not know it —
+ *           React then warns about an unrecognised DOM attribute on every
+ *           render, in every host console.
+ *
+ *           KNOWN LIMITATION, stated because it is asymmetric with R-I.3: a
+ *           consumer-supplied `aria-labelledby` on a non-group child is NOT
+ *           merged into the name. `aria-describedby` is merged, here, by this
+ *           component; naming goes through MUI's `labelId`, and MUI does not
+ *           concatenate the two. Nothing is silently lost — the field is named
+ *           by its own label, which is the name a user should hear — but a host
+ *           wanting to ADD to that name must put it in `label`. Widening this
+ *           would mean interpolating a token list into `labelId`, a prop
+ *           documented as "the ID of an element".
  *   R-I.2 — Required adds the asterisk + `aria-required`.
  *   R-I.3 — Error: `aria-invalid` + `aria-describedby` linking the message.
  *           Field MERGES with the child's existing `aria-describedby` so a
@@ -39,9 +73,14 @@ import FieldError from "./FieldError";
  * Grouping controls (RadioGroup / CheckboxGroup) — pass `group`:
  *   A native `<label htmlFor>` cannot name an ARIA group (only labelable
  *   elements can be `for`-targeted), so in `group` mode the label is rendered
- *   as a <span> with an id and the child group is associated via
- *   `aria-labelledby` instead. The child must forward `aria-labelledby`
- *   (and `aria-describedby`) onto its `role="group"`/`"radiogroup"` element.
+ *   as a <span> and the child group is associated via `aria-labelledby`
+ *   instead. The child must forward `aria-labelledby` (and
+ *   `aria-describedby`) onto its `role="group"`/`"radiogroup"` element.
+ *
+ *   Since R-I.1 above, `group` keeps its own `aria-labelledby` channel: a
+ *   `role="group"` element is not labelable either, but it is the CHILD's own
+ *   root that carries the role, so the attribute reaches the right element
+ *   there — unlike a MUI control, whose root is a wrapper.
  *
  *   <Field label="Genre" group error={errors.genre}>
  *     <RadioGroup … />
@@ -96,62 +135,103 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * que jsdom ne resout pas. Un test de rendu ne peut donc pas lire la largeur
  * effective ; il peut en revanche epingler les cinq valeurs, ce qui est le
  * point sensible (elles sont une decision de design, voir la note ci-dessus).
+ *
+ * ─── Les variables CSS EXISTENT desormais ─────────────────────────
+ *
+ * La note ci-dessus affirmait que les cinq nombres etaient "exposes en
+ * variables CSS pour etre revus sans toucher au code". C'etait FAUX jusqu'a
+ * l'audit Area 4 d'addm-fe : `cssVariables` n'emettait aucun `--field-w-*`,
+ * donc seuls les REPLIS ci-dessous rendaient, et la revision annoncee
+ * n'existait pas.
+ *
+ * Les valeurs vivent maintenant dans `tokens.layout.fieldWidth` et sont
+ * emises. Les replis restent : un hote qui n'appelle jamais
+ * `injectCssVariables` doit continuer a rendre des largeurs correctes. Les
+ * deux doivent donc rester d'accord, ce qu'epingle le test de contrat.
  */
-export var FIELD_MAX_WIDTH = {
+export const FIELD_MAX_WIDTH = {
   xs: "var(--field-w-xs, 120px)",
   s: "var(--field-w-s, 200px)",
   m: "var(--field-w-m, 400px)",
   l: "var(--field-w-l, 600px)",
   xl: "100%"
 };
-function Field(_ref) {
-  var label = _ref.label,
-    _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required,
-    hint = _ref.hint,
-    error = _ref.error,
-    htmlFor = _ref.htmlFor,
-    _ref$fullWidth = _ref.fullWidth,
-    fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth,
-    disabled = _ref.disabled,
-    _ref$group = _ref.group,
-    group = _ref$group === void 0 ? false : _ref$group,
-    width = _ref.width,
-    children = _ref.children,
-    helpAdornment = _ref.helpAdornment,
-    sx = _ref.sx,
-    className = _ref.className;
+function Field({
+  label,
+  required = false,
+  hint,
+  error,
+  htmlFor,
+  fullWidth = true,
+  disabled,
+  group = false,
+  width,
+  children,
+  helpAdornment,
+  // optional <FieldHelp> element
+  sx,
+  className
+}) {
   // R-I.1 — useId provides SSR-safe, per-instance, stable IDs.
   // Replaces the previous module-scoped counter (`let __uid = 0`) which broke
   // hydration and Concurrent Mode.
-  var reactId = React.useId();
-  var auto = "pui-".concat(reactId.replace(/:/g, ""));
-  var inputId = htmlFor || auto;
-  var hintId = "".concat(inputId, "-h");
-  var errorId = "".concat(inputId, "-e");
-  var labelId = "".concat(inputId, "-l");
-  var hasError = !!error;
-  var child = React.Children.only(children);
+  const reactId = React.useId();
+  const auto = `pui-${reactId.replace(/:/g, "")}`;
+  const inputId = htmlFor || auto;
+  const hintId = `${inputId}-h`;
+  const errorId = `${inputId}-e`;
+  const labelId = `${inputId}-l`;
+  const hasError = !!error;
+  const child = React.Children.only(children);
+
+  /**
+   * Does this child consume `labelId` (R-I.1)?
+   *
+   * A component whose visible surface is a `div[role="combobox"]` cannot be
+   * named by `htmlFor`/`id`, and cannot receive `aria-labelledby` through
+   * props either — MUI spreads unknown props onto its root WRAPPER. Those
+   * components therefore declare a static marker and take MUI's own `labelId`
+   * channel instead. See the R-I.1 note at the head of this file for the
+   * attempt that did not work.
+   *
+   * A marker rather than a type check: `Field` must not import `Select` (a
+   * cycle, and it would pull the whole control into every `Field` call site),
+   * and it cannot infer from the element what its rendered DOM will be.
+   */
+  const childType = child.type;
+  const wantsLabelId = childType?.puiLabelTarget === "labelId";
   // The wrapped control is polymorphic (Input/Select/NumberInput/Combobox/…);
   // type only the props Field reads/merges, replacing React's `props: any`.
-  var childProps = child.props;
+  const childProps = child.props;
 
   // R-I.3 — MERGE the child's existing aria-describedby with our hint/error
   // ids. cloneElement replaces props, so without an explicit merge any
   // consumer-supplied describedby was silently discarded.
-  var describedBy = [childProps["aria-describedby"], hint && !hasError ? hintId : null, hasError ? errorId : null].filter(Boolean).join(" ") || undefined;
+  const describedBy = [childProps["aria-describedby"], hint && !hasError ? hintId : null, hasError ? errorId : null].filter(Boolean).join(" ") || undefined;
 
-  // CC-6 — in group mode the label names the group via aria-labelledby.
-  // Merge with any consumer-supplied labelledby so it is never lost.
-  var labelledBy = group ? [childProps["aria-labelledby"], label ? labelId : null].filter(Boolean).join(" ") || undefined : undefined;
-  var enhanced = /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({
+  /**
+   * R-I.1 — `group` mode only.
+   *
+   * The child's own root carries `role="group"`, so an `aria-labelledby`
+   * passed through props reaches the element that needs it. That is NOT true
+   * of a MUI control, whose root is a wrapper div — hence `labelId` for those.
+   * Merged with any consumer-supplied value so it is never lost.
+   */
+  const labelledBy = group ? [childProps["aria-labelledby"], label ? labelId : null].filter(Boolean).join(" ") || undefined : undefined;
+  const enhanced = /*#__PURE__*/React.cloneElement(child, {
     id: childProps.id || inputId,
     "aria-invalid": hasError ? "true" : undefined,
     "aria-required": required ? "true" : undefined,
-    "aria-describedby": describedBy
-  }, group ? {
-    "aria-labelledby": labelledBy
-  } : {}), {}, {
+    "aria-describedby": describedBy,
+    ...(group ? {
+      "aria-labelledby": labelledBy
+    } : {}),
+    /* R-I.1 — MUI's own labelling channel, for the controls that declare they
+       consume it. `SelectInput` merges this into the combobox's
+       `aria-labelledby`; nothing else in the tree is touched. */
+    ...(wantsLabelId && label ? {
+      labelId
+    } : {}),
     // `error` / `disabled` are broadcast by FormControl via context for MUI
     // inputs, but several v2 inputs (NumberInput, Combobox renderInput) are
     // not pure MUI children and read the props directly — keep them explicit.
@@ -161,17 +241,17 @@ function Field(_ref) {
     // inline filter input). Only fall back to Field's value when the child
     // hasn't expressed an opinion.
     fullWidth: childProps.fullWidth !== undefined ? childProps.fullWidth : fullWidth
-  }));
+  });
 
   // R-I.6 — RTL-safe margin reset. `marginLeft: 0` only zeroes the LTR
   // inline-start; in [dir="rtl"] the helper picks up MUI's default on
   // the (now physical-right but logical-start) side and is mis-aligned.
   // `marginInlineStart` resets the correct edge in both directions.
-  var helperResetSx = {
+  const helperResetSx = {
     marginInlineStart: 0,
     fontSize: "var(--text-xs)"
   };
-  var LABEL_SX = {
+  const LABEL_SX = {
     display: "flex",
     alignItems: "center",
     gap: "var(--s-1)",
@@ -188,7 +268,12 @@ function Field(_ref) {
   };
 
   // Shared label content (text + required marker + optional help adornment).
-  var labelContent = /*#__PURE__*/_jsxs(_Fragment, {
+  //
+  // NO wrapper span around `{label}`: an earlier attempt added one to anchor
+  // the id on the text alone, and it changed what `getByText("…")` returns —
+  // a host test expecting the `<label>` element got the inner span instead.
+  // The id stays on the label element, as it always has in `group` mode.
+  const labelContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [label, required && /*#__PURE__*/_jsx(Box, {
       component: "span",
       "aria-hidden": "true",
@@ -205,12 +290,17 @@ function Field(_ref) {
     disabled: disabled,
     fullWidth: fullWidth,
     className: className,
-    sx: _objectSpread(_objectSpread({}, width ? {
-      maxWidth: {
-        xs: "100%",
-        sm: FIELD_MAX_WIDTH[width]
-      }
-    } : {}), sx),
+    sx: {
+      /* G-H — plafond a partir de `sm` seulement : sur mobile le standard
+       * impose 100% de la largeur de grille. */
+      ...(width ? {
+        maxWidth: {
+          xs: "100%",
+          sm: FIELD_MAX_WIDTH[width]
+        }
+      } : {}),
+      ...sx
+    },
     children: [label && (group ?
     /*#__PURE__*/
     // Group mode: render as a <span> carrying an id (no <label for>),
@@ -221,16 +311,22 @@ function Field(_ref) {
       required: false,
       sx: LABEL_SX,
       children: labelContent
-    }) : /*#__PURE__*/_jsx(FormLabel, {
+    }) :
+    /*#__PURE__*/
+    // The id is present here too: a child declaring `puiLabelTarget`
+    // points MUI's `labelId` at this element.
+    _jsx(FormLabel, {
       htmlFor: inputId,
+      id: labelId,
       required: false /* we render the * ourselves */,
       sx: LABEL_SX,
       children: labelContent
     })), enhanced, hint && !hasError && /*#__PURE__*/_jsx(FormHelperText, {
       id: hintId,
-      sx: _objectSpread(_objectSpread({}, helperResetSx), {}, {
+      sx: {
+        ...helperResetSx,
         color: "var(--fg-subtle)"
-      }),
+      },
       children: hint
     }), hasError &&
     /*#__PURE__*/

package/dist/esm/v2/components/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","names":["React","FormControl","FormLabel","FormHelperText","Box","FieldError","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","FIELD_MAX_WIDTH","xs","s","m","l","xl","Field","_ref","label","_ref$required","required","hint","error","htmlFor","_ref$fullWidth","fullWidth","disabled","_ref$group","group","width","children","helpAdornment","sx","className","reactId","useId","auto","concat","replace","inputId","hintId","errorId","labelId","hasError","child","Children","only","childProps","props","describedBy","filter","Boolean","join","undefined","labelledBy","enhanced","cloneElement","_objectSpread","id","helperResetSx","marginInlineStart","fontSize","LABEL_SX","display","alignItems","gap","fontWeight","color","marginBottom","labelContent","component","maxWidth","sm","marginTop"],"sources":["../../../../src/lib/v2/components/Field.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport FormControl from \"@mui/material/FormControl\";\r\nimport FormLabel from \"@mui/material/FormLabel\";\r\nimport FormHelperText from \"@mui/material/FormHelperText\";\r\nimport Box from \"@mui/material/Box\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\nimport FieldError from \"./FieldError\";\r\n\r\n/**\r\n * Field — Portnet UI v2\r\n *\r\n * Charter §03 · Component \"Input · Field\".\r\n * Universal wrapper providing label / required marker / hint / error / a11y bindings\r\n * for any form control (Input, Select, Textarea, Autocomplete, Combobox, …).\r\n *\r\n * Strict rules enforced:\r\n *   R-I.1 — Label is associated to the control via `htmlFor` / `id`.\r\n *   R-I.2 — Required adds the asterisk + `aria-required`.\r\n *   R-I.3 — Error: `aria-invalid` + `aria-describedby` linking the message.\r\n *           Field MERGES with the child's existing `aria-describedby` so a\r\n *           consumer-supplied external help id is never lost. The message\r\n *           itself is rendered by the shared `FieldError` primitive, which\r\n *           carries the R-4.1 MUST icon (gap G-18) — previously this component\r\n *           rendered a bare red `FormHelperText` with no icon, so the canonical\r\n *           field wrapper did not satisfy a MUST and every module inherited the\r\n *           gap on every form.\r\n *   R-I.4 — Validation in `blur`, not `change` (caller's responsibility).\r\n *   R-I.6 — Hint visible above error; never both at once.\r\n *\r\n *   <Field label=\"Référence\" required hint=\"Format AAAA-IM-NNNNN\" error={errors.ref}>\r\n *     <Input value={value} onChange={onChange} />\r\n *   </Field>\r\n *\r\n * Grouping controls (RadioGroup / CheckboxGroup) — pass `group`:\r\n *   A native `<label htmlFor>` cannot name an ARIA group (only labelable\r\n *   elements can be `for`-targeted), so in `group` mode the label is rendered\r\n *   as a <span> with an id and the child group is associated via\r\n *   `aria-labelledby` instead. The child must forward `aria-labelledby`\r\n *   (and `aria-describedby`) onto its `role=\"group\"`/`\"radiogroup\"` element.\r\n *\r\n *   <Field label=\"Genre\" group error={errors.genre}>\r\n *     <RadioGroup … />\r\n *   </Field>\r\n *\r\n * ── LARGEUR SEMANTIQUE (gap G-H) ──────────────────────────────\r\n *\r\n * `width` rattache le champ a l'un des cinq gabarits imposes par la section\r\n * « Form Field Width & Layout Standards » des Platform Mandatory UX Patterns.\r\n * Le standard y interdit explicitement les « arbitrary input field widths » et\r\n * les « jagged alignment fields within forms », et impose de mapper chaque\r\n * champ a un gabarit d'apres sa contrainte de CARACTERES :\r\n *\r\n *   xs  1 a 5 caracteres    code postal, CVV, age\r\n *   s   6 a 15              telephone, montant, date, identifiant court\r\n *   m   16 a 60             nom, courriel, ville, liste simple\r\n *   l   61 a 256            adresse, recherche complexe, longue liste\r\n *   xl  257 et plus         zone de texte, description, editeur\r\n *\r\n * POURQUOI SUR `Field` ET NON SUR CHAQUE CONTROLE. Le gabarit est une\r\n * contrainte de MISE EN PAGE, pas une propriete de l'input : c'est la boite du\r\n * champ - libelle, controle, indication, erreur - qui doit etre bornee, sinon\r\n * le message d'erreur s'etale sur toute la cellule pendant que l'input est\r\n * borne. `Field` est le seul endroit qui voit cette boite entiere.\r\n *\r\n * POURQUOI UN PLAFOND ET NON UNE LARGEUR FIXE. Le standard exige aussi que les\r\n * champs soient empiles « 100% grid width » sur mobile, et que des champs\r\n * heterogenes s'alignent sur des fractions de colonnes. Un `maxWidth`\r\n * n'est donc pose qu'a partir de `sm` : la grille continue de decider des\r\n * COLONNES, le gabarit borne le champ DANS sa cellule. Les deux regles\r\n * coexistent au lieu de se contredire.\r\n *\r\n * >>> LES CINQ VALEURS SONT UNE DECISION DE DESIGN, PAS UNE LECTURE. Le\r\n * >>> standard donne des FOURCHETTES (« ~80px to 120px max »). J'ai retenu le\r\n * >>> HAUT de chaque fourchette, ces largeurs etant des plafonds : prendre le\r\n * >>> bas tronquerait des valeurs qui tiennent dans la contrainte de\r\n * >>> caracteres annoncee. A confirmer par l'equipe design ; les cinq nombres\r\n * >>> sont exposes en variables CSS pour etre revus sans toucher au code. <<<\r\n */\r\n\r\n/**\r\n * Gabarits de largeur semantique (G-H). Voir la note en tete de fichier.\r\n *\r\n * Les valeurs passent par des variables CSS pour que l'equipe design puisse\r\n * les revoir sans modification de code. Les replis sont le HAUT de chaque\r\n * fourchette du standard, ces largeurs etant des plafonds.\r\n */\r\nexport type FieldWidth = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\r\n\r\n/**\r\n * Exporte pour etre TESTABLE : le plafond ne s'applique qu'a partir de `sm`,\r\n * donc via une requete media qu'`emotion` injecte dans la feuille de style et\r\n * que jsdom ne resout pas. Un test de rendu ne peut donc pas lire la largeur\r\n * effective ; il peut en revanche epingler les cinq valeurs, ce qui est le\r\n * point sensible (elles sont une decision de design, voir la note ci-dessus).\r\n */\r\nexport const FIELD_MAX_WIDTH: Record<FieldWidth, string> = {\r\n  xs: \"var(--field-w-xs, 120px)\",\r\n  s: \"var(--field-w-s, 200px)\",\r\n  m: \"var(--field-w-m, 400px)\",\r\n  l: \"var(--field-w-l, 600px)\",\r\n  xl: \"100%\",\r\n};\r\n\r\nexport interface FieldProps {\r\n  label?: React.ReactNode | undefined;\r\n  required?: boolean | undefined;\r\n  hint?: React.ReactNode | undefined;\r\n  error?: React.ReactNode | undefined;\r\n  htmlFor?: string | undefined;\r\n  fullWidth?: boolean | undefined;\r\n  disabled?: boolean | undefined;\r\n  /**\r\n   * The wrapped child is an ARIA group (RadioGroup / CheckboxGroup) rather than\r\n   * a single labelable control. Associates the label via `aria-labelledby`\r\n   * instead of `htmlFor` / `id`.\r\n   */\r\n  group?: boolean | undefined;\r\n  /**\r\n   * Gabarit de largeur semantique (G-H) : `xs` | `s` | `m` | `l` | `xl`,\r\n   * choisi d'apres la contrainte de CARACTERES du champ. Voir la note en tete\r\n   * de fichier. Omis = aucun plafond, la cellule de grille decide seule -\r\n   * c'est le comportement d'avant G-H, donc rien ne change pour les appelants\r\n   * existants.\r\n   */\r\n  width?: FieldWidth | undefined;\r\n  /** Optional <FieldHelp> element rendered next to the label. */\r\n  helpAdornment?: React.ReactNode | undefined;\r\n  /** The single form-control element to wrap. */\r\n  children: React.ReactElement;\r\n  sx?: SxProps<Theme> | undefined;\r\n  className?: string | undefined;\r\n}\r\n\r\nfunction Field({\r\n  label,\r\n  required = false,\r\n  hint,\r\n  error,\r\n  htmlFor,\r\n  fullWidth = true,\r\n  disabled,\r\n  group = false,\r\n  width,\r\n  children,\r\n  helpAdornment, // optional <FieldHelp> element\r\n  sx,\r\n  className,\r\n}: FieldProps) {\r\n  // R-I.1 — useId provides SSR-safe, per-instance, stable IDs.\r\n  // Replaces the previous module-scoped counter (`let __uid = 0`) which broke\r\n  // hydration and Concurrent Mode.\r\n  const reactId = React.useId();\r\n  const auto = `pui-${reactId.replace(/:/g, \"\")}`;\r\n  const inputId = htmlFor || auto;\r\n  const hintId  = `${inputId}-h`;\r\n  const errorId = `${inputId}-e`;\r\n  const labelId = `${inputId}-l`;\r\n  const hasError = !!error;\r\n\r\n  const child = React.Children.only(children);\r\n  // The wrapped control is polymorphic (Input/Select/NumberInput/Combobox/…);\r\n  // type only the props Field reads/merges, replacing React's `props: any`.\r\n  const childProps = child.props as {\r\n    id?: string;\r\n    disabled?: boolean;\r\n    fullWidth?: boolean;\r\n    \"aria-describedby\"?: string;\r\n    \"aria-labelledby\"?: string;\r\n  };\r\n\r\n  // R-I.3 — MERGE the child's existing aria-describedby with our hint/error\r\n  // ids. cloneElement replaces props, so without an explicit merge any\r\n  // consumer-supplied describedby was silently discarded.\r\n  const describedBy = [\r\n    childProps[\"aria-describedby\"],\r\n    hint && !hasError ? hintId : null,\r\n    hasError ? errorId : null,\r\n  ].filter(Boolean).join(\" \") || undefined;\r\n\r\n  // CC-6 — in group mode the label names the group via aria-labelledby.\r\n  // Merge with any consumer-supplied labelledby so it is never lost.\r\n  const labelledBy = group\r\n    ? [childProps[\"aria-labelledby\"], label ? labelId : null]\r\n        .filter(Boolean)\r\n        .join(\" \") || undefined\r\n    : undefined;\r\n\r\n  const enhanced = React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\r\n    id: childProps.id || inputId,\r\n    \"aria-invalid\":   hasError ? \"true\" : undefined,\r\n    \"aria-required\":  required ? \"true\" : undefined,\r\n    \"aria-describedby\": describedBy,\r\n    // Only in group mode — a single labelable control is named by the\r\n    // htmlFor/id pair below, not by aria-labelledby.\r\n    ...(group ? { \"aria-labelledby\": labelledBy } : {}),\r\n    // `error` / `disabled` are broadcast by FormControl via context for MUI\r\n    // inputs, but several v2 inputs (NumberInput, Combobox renderInput) are\r\n    // not pure MUI children and read the props directly — keep them explicit.\r\n    error: hasError,\r\n    disabled: disabled || childProps.disabled,\r\n    // Respect the child's explicit fullWidth when defined (e.g. a narrow\r\n    // inline filter input). Only fall back to Field's value when the child\r\n    // hasn't expressed an opinion.\r\n    fullWidth: childProps.fullWidth !== undefined ? childProps.fullWidth : fullWidth,\r\n  });\r\n\r\n  // R-I.6 — RTL-safe margin reset. `marginLeft: 0` only zeroes the LTR\r\n  // inline-start; in [dir=\"rtl\"] the helper picks up MUI's default on\r\n  // the (now physical-right but logical-start) side and is mis-aligned.\r\n  // `marginInlineStart` resets the correct edge in both directions.\r\n  const helperResetSx = { marginInlineStart: 0, fontSize: \"var(--text-xs)\" };\r\n\r\n  const LABEL_SX = {\r\n    display: \"flex\",\r\n    alignItems: \"center\",\r\n    gap: \"var(--s-1)\",\r\n    fontSize: \"var(--text-xs, 12px)\",\r\n    fontWeight: \"var(--fw-semibold, 600)\",\r\n    color: \"var(--fg-muted)\",\r\n    marginBottom: \"var(--s-2)\",\r\n    \"&.Mui-focused\": { color: \"var(--fg-muted)\" },\r\n    \"&.Mui-error\":   { color: \"var(--fg-muted)\" },\r\n  } as const;\r\n\r\n  // Shared label content (text + required marker + optional help adornment).\r\n  const labelContent = (\r\n    <>\r\n      {label}\r\n      {required && (\r\n        <Box\r\n          component=\"span\"\r\n          aria-hidden=\"true\"\r\n          sx={{ color: \"var(--danger)\", fontWeight: \"var(--fw-bold, 700)\" }}\r\n        >\r\n          *\r\n        </Box>\r\n      )}\r\n      {helpAdornment}\r\n    </>\r\n  );\r\n\r\n  return (\r\n    <FormControl\r\n      error={hasError}\r\n      required={required}\r\n      disabled={disabled}\r\n      fullWidth={fullWidth}\r\n      className={className}\r\n      sx={{\r\n        /* G-H — plafond a partir de `sm` seulement : sur mobile le standard\r\n         * impose 100% de la largeur de grille. */\r\n        ...(width\r\n          ? { maxWidth: { xs: \"100%\", sm: FIELD_MAX_WIDTH[width] } }\r\n          : {}),\r\n        ...sx,\r\n      }}\r\n    >\r\n      {label &&\r\n        (group ? (\r\n          // Group mode: render as a <span> carrying an id (no <label for>),\r\n          // referenced by the group's aria-labelledby.\r\n          <FormLabel component=\"span\" id={labelId} required={false} sx={LABEL_SX}>\r\n            {labelContent}\r\n          </FormLabel>\r\n        ) : (\r\n          <FormLabel htmlFor={inputId} required={false /* we render the * ourselves */} sx={LABEL_SX}>\r\n            {labelContent}\r\n          </FormLabel>\r\n        ))}\r\n\r\n      {enhanced}\r\n\r\n      {hint && !hasError && (\r\n        <FormHelperText\r\n          id={hintId}\r\n          sx={{ ...helperResetSx, color: \"var(--fg-subtle)\" }}\r\n        >\r\n          {hint}\r\n        </FormHelperText>\r\n      )}\r\n\r\n      {hasError && (\r\n        /*\r\n         * Rendered by the shared `FieldError` (gap G-18) rather than an inline\r\n         * `FormHelperText`: R-4.1 MUST requires the icon, and a host with a\r\n         * LIST-level error (a Formik array, an upload slot) has no single\r\n         * control to wrap in a `Field` and needs the exact same renderer\r\n         * standalone. One component, both paths, no drift.\r\n         *\r\n         * `marginTop: var(--s-1)` (4px) replaces `FormHelperText`'s hard-coded\r\n         * 3px default — same optical result, on the spacing scale (R-S.1).\r\n         * Dropping FormHelperText also removed a `color: … !important` that\r\n         * only existed to beat MUI's own `Mui-error` colour.\r\n         */\r\n        <FieldError id={errorId} sx={{ marginTop: \"var(--s-1)\" }}>\r\n          {error}\r\n        </FieldError>\r\n      )}\r\n    </FormControl>\r\n  );\r\n}\r\n\r\nexport default Field;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Field.js","names":["React","FormControl","FormLabel","FormHelperText","Box","FieldError","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","FIELD_MAX_WIDTH","xs","s","m","l","xl","Field","label","required","hint","error","htmlFor","fullWidth","disabled","group","width","children","helpAdornment","sx","className","reactId","useId","auto","replace","inputId","hintId","errorId","labelId","hasError","child","Children","only","childType","type","wantsLabelId","puiLabelTarget","childProps","props","describedBy","filter","Boolean","join","undefined","labelledBy","enhanced","cloneElement","id","helperResetSx","marginInlineStart","fontSize","LABEL_SX","display","alignItems","gap","fontWeight","color","marginBottom","labelContent","component","maxWidth","sm","marginTop"],"sources":["../../../../src/lib/v2/components/Field.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport FormControl from \"@mui/material/FormControl\";\r\nimport FormLabel from \"@mui/material/FormLabel\";\r\nimport FormHelperText from \"@mui/material/FormHelperText\";\r\nimport Box from \"@mui/material/Box\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\nimport FieldError from \"./FieldError\";\r\n\r\n/**\r\n * Field — Portnet UI v2\r\n *\r\n * Charter §03 · Component \"Input · Field\".\r\n * Universal wrapper providing label / required marker / hint / error / a11y bindings\r\n * for any form control (Input, Select, Textarea, Autocomplete, Combobox, …).\r\n *\r\n * Strict rules enforced:\r\n *   R-I.1 — Label is associated to the control via `htmlFor` / `id`, plus\r\n *           `labelId` for children whose visible surface is NOT labelable.\r\n *\r\n *           >>> THE SECOND CHANNEL WAS MISSING, AND HALF THE CONTROLS NEED IT.\r\n *           >>> `htmlFor` / `id` names LABELABLE elements only — input, select,\r\n *           >>> textarea, button, meter, output, progress. `Select` renders its\r\n *           >>> visible surface as a `div[role=\"combobox\"]`, which is not one,\r\n *           >>> so the pair resolved to NOTHING: the control had no accessible\r\n *           >>> name and a screen reader announced \"combobox, collapsed\"\r\n *           >>> without saying which field. WCAG 4.1.2 / 1.3.1, invisible on\r\n *           >>> screen, in every filter drawer and every form of every module.\r\n *           >>>\r\n *           >>> Found by the axe-core suite of\r\n *           >>> `autorisation-admis-pour-conforme-fe` (Area 10), failing with\r\n *           >>> `aria-input-field-name` on the first `Select` rendered.\r\n *\r\n *           WHY `labelId` AND NOT `aria-labelledby`. A first attempt passed\r\n *           `aria-labelledby` to every child. It does not work and it breaks\r\n *           things: MUI spreads unknown props onto its ROOT wrapper, so the\r\n *           attribute landed on `div.MuiInputBase-root` — never on the inner\r\n *           control. For `Select` the combobox stayed anonymous; for `Input`\r\n *           the wrapper became a SECOND element carrying the label, which is\r\n *           both wrong for assistive tech and enough to break any\r\n *           `getByLabelText` in a host's tests. `labelId` is MUI's own channel:\r\n *           `SelectInput` merges it into the combobox's `aria-labelledby`.\r\n *\r\n *           It is passed only to children that DECLARE they consume it, via\r\n *           the `puiLabelTarget` marker (see `Select`). A blanket `labelId`\r\n *           would reach `<input>` and MUI text fields, which do not know it —\r\n *           React then warns about an unrecognised DOM attribute on every\r\n *           render, in every host console.\r\n *\r\n *           KNOWN LIMITATION, stated because it is asymmetric with R-I.3: a\r\n *           consumer-supplied `aria-labelledby` on a non-group child is NOT\r\n *           merged into the name. `aria-describedby` is merged, here, by this\r\n *           component; naming goes through MUI's `labelId`, and MUI does not\r\n *           concatenate the two. Nothing is silently lost — the field is named\r\n *           by its own label, which is the name a user should hear — but a host\r\n *           wanting to ADD to that name must put it in `label`. Widening this\r\n *           would mean interpolating a token list into `labelId`, a prop\r\n *           documented as \"the ID of an element\".\r\n *   R-I.2 — Required adds the asterisk + `aria-required`.\r\n *   R-I.3 — Error: `aria-invalid` + `aria-describedby` linking the message.\r\n *           Field MERGES with the child's existing `aria-describedby` so a\r\n *           consumer-supplied external help id is never lost. The message\r\n *           itself is rendered by the shared `FieldError` primitive, which\r\n *           carries the R-4.1 MUST icon (gap G-18) — previously this component\r\n *           rendered a bare red `FormHelperText` with no icon, so the canonical\r\n *           field wrapper did not satisfy a MUST and every module inherited the\r\n *           gap on every form.\r\n *   R-I.4 — Validation in `blur`, not `change` (caller's responsibility).\r\n *   R-I.6 — Hint visible above error; never both at once.\r\n *\r\n *   <Field label=\"Référence\" required hint=\"Format AAAA-IM-NNNNN\" error={errors.ref}>\r\n *     <Input value={value} onChange={onChange} />\r\n *   </Field>\r\n *\r\n * Grouping controls (RadioGroup / CheckboxGroup) — pass `group`:\r\n *   A native `<label htmlFor>` cannot name an ARIA group (only labelable\r\n *   elements can be `for`-targeted), so in `group` mode the label is rendered\r\n *   as a <span> and the child group is associated via `aria-labelledby`\r\n *   instead. The child must forward `aria-labelledby` (and\r\n *   `aria-describedby`) onto its `role=\"group\"`/`\"radiogroup\"` element.\r\n *\r\n *   Since R-I.1 above, `group` keeps its own `aria-labelledby` channel: a\r\n *   `role=\"group\"` element is not labelable either, but it is the CHILD's own\r\n *   root that carries the role, so the attribute reaches the right element\r\n *   there — unlike a MUI control, whose root is a wrapper.\r\n *\r\n *   <Field label=\"Genre\" group error={errors.genre}>\r\n *     <RadioGroup … />\r\n *   </Field>\r\n *\r\n * ── LARGEUR SEMANTIQUE (gap G-H) ──────────────────────────────\r\n *\r\n * `width` rattache le champ a l'un des cinq gabarits imposes par la section\r\n * « Form Field Width & Layout Standards » des Platform Mandatory UX Patterns.\r\n * Le standard y interdit explicitement les « arbitrary input field widths » et\r\n * les « jagged alignment fields within forms », et impose de mapper chaque\r\n * champ a un gabarit d'apres sa contrainte de CARACTERES :\r\n *\r\n *   xs  1 a 5 caracteres    code postal, CVV, age\r\n *   s   6 a 15              telephone, montant, date, identifiant court\r\n *   m   16 a 60             nom, courriel, ville, liste simple\r\n *   l   61 a 256            adresse, recherche complexe, longue liste\r\n *   xl  257 et plus         zone de texte, description, editeur\r\n *\r\n * POURQUOI SUR `Field` ET NON SUR CHAQUE CONTROLE. Le gabarit est une\r\n * contrainte de MISE EN PAGE, pas une propriete de l'input : c'est la boite du\r\n * champ - libelle, controle, indication, erreur - qui doit etre bornee, sinon\r\n * le message d'erreur s'etale sur toute la cellule pendant que l'input est\r\n * borne. `Field` est le seul endroit qui voit cette boite entiere.\r\n *\r\n * POURQUOI UN PLAFOND ET NON UNE LARGEUR FIXE. Le standard exige aussi que les\r\n * champs soient empiles « 100% grid width » sur mobile, et que des champs\r\n * heterogenes s'alignent sur des fractions de colonnes. Un `maxWidth`\r\n * n'est donc pose qu'a partir de `sm` : la grille continue de decider des\r\n * COLONNES, le gabarit borne le champ DANS sa cellule. Les deux regles\r\n * coexistent au lieu de se contredire.\r\n *\r\n * >>> LES CINQ VALEURS SONT UNE DECISION DE DESIGN, PAS UNE LECTURE. Le\r\n * >>> standard donne des FOURCHETTES (« ~80px to 120px max »). J'ai retenu le\r\n * >>> HAUT de chaque fourchette, ces largeurs etant des plafonds : prendre le\r\n * >>> bas tronquerait des valeurs qui tiennent dans la contrainte de\r\n * >>> caracteres annoncee. A confirmer par l'equipe design ; les cinq nombres\r\n * >>> sont exposes en variables CSS pour etre revus sans toucher au code. <<<\r\n */\r\n\r\n/**\r\n * Gabarits de largeur semantique (G-H). Voir la note en tete de fichier.\r\n *\r\n * Les valeurs passent par des variables CSS pour que l'equipe design puisse\r\n * les revoir sans modification de code. Les replis sont le HAUT de chaque\r\n * fourchette du standard, ces largeurs etant des plafonds.\r\n */\r\nexport type FieldWidth = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\r\n\r\n/**\r\n * Exporte pour etre TESTABLE : le plafond ne s'applique qu'a partir de `sm`,\r\n * donc via une requete media qu'`emotion` injecte dans la feuille de style et\r\n * que jsdom ne resout pas. Un test de rendu ne peut donc pas lire la largeur\r\n * effective ; il peut en revanche epingler les cinq valeurs, ce qui est le\r\n * point sensible (elles sont une decision de design, voir la note ci-dessus).\r\n *\r\n * ─── Les variables CSS EXISTENT desormais ─────────────────────────\r\n *\r\n * La note ci-dessus affirmait que les cinq nombres etaient \"exposes en\r\n * variables CSS pour etre revus sans toucher au code\". C'etait FAUX jusqu'a\r\n * l'audit Area 4 d'addm-fe : `cssVariables` n'emettait aucun `--field-w-*`,\r\n * donc seuls les REPLIS ci-dessous rendaient, et la revision annoncee\r\n * n'existait pas.\r\n *\r\n * Les valeurs vivent maintenant dans `tokens.layout.fieldWidth` et sont\r\n * emises. Les replis restent : un hote qui n'appelle jamais\r\n * `injectCssVariables` doit continuer a rendre des largeurs correctes. Les\r\n * deux doivent donc rester d'accord, ce qu'epingle le test de contrat.\r\n */\r\nexport const FIELD_MAX_WIDTH: Record<FieldWidth, string> = {\r\n  xs: \"var(--field-w-xs, 120px)\",\r\n  s: \"var(--field-w-s, 200px)\",\r\n  m: \"var(--field-w-m, 400px)\",\r\n  l: \"var(--field-w-l, 600px)\",\r\n  xl: \"100%\",\r\n};\r\n\r\nexport interface FieldProps {\r\n  label?: React.ReactNode | undefined;\r\n  required?: boolean | undefined;\r\n  hint?: React.ReactNode | undefined;\r\n  error?: React.ReactNode | undefined;\r\n  htmlFor?: string | undefined;\r\n  fullWidth?: boolean | undefined;\r\n  disabled?: boolean | undefined;\r\n  /**\r\n   * The wrapped child is an ARIA group (RadioGroup / CheckboxGroup) rather than\r\n   * a single labelable control. Associates the label via `aria-labelledby`\r\n   * instead of `htmlFor` / `id`.\r\n   */\r\n  group?: boolean | undefined;\r\n  /**\r\n   * Gabarit de largeur semantique (G-H) : `xs` | `s` | `m` | `l` | `xl`,\r\n   * choisi d'apres la contrainte de CARACTERES du champ. Voir la note en tete\r\n   * de fichier. Omis = aucun plafond, la cellule de grille decide seule -\r\n   * c'est le comportement d'avant G-H, donc rien ne change pour les appelants\r\n   * existants.\r\n   */\r\n  width?: FieldWidth | undefined;\r\n  /** Optional <FieldHelp> element rendered next to the label. */\r\n  helpAdornment?: React.ReactNode | undefined;\r\n  /** The single form-control element to wrap. */\r\n  children: React.ReactElement;\r\n  sx?: SxProps<Theme> | undefined;\r\n  className?: string | undefined;\r\n}\r\n\r\nfunction Field({\r\n  label,\r\n  required = false,\r\n  hint,\r\n  error,\r\n  htmlFor,\r\n  fullWidth = true,\r\n  disabled,\r\n  group = false,\r\n  width,\r\n  children,\r\n  helpAdornment, // optional <FieldHelp> element\r\n  sx,\r\n  className,\r\n}: FieldProps) {\r\n  // R-I.1 — useId provides SSR-safe, per-instance, stable IDs.\r\n  // Replaces the previous module-scoped counter (`let __uid = 0`) which broke\r\n  // hydration and Concurrent Mode.\r\n  const reactId = React.useId();\r\n  const auto = `pui-${reactId.replace(/:/g, \"\")}`;\r\n  const inputId = htmlFor || auto;\r\n  const hintId  = `${inputId}-h`;\r\n  const errorId = `${inputId}-e`;\r\n  const labelId = `${inputId}-l`;\r\n  const hasError = !!error;\r\n\r\n  const child = React.Children.only(children);\r\n\r\n  /**\r\n   * Does this child consume `labelId` (R-I.1)?\r\n   *\r\n   * A component whose visible surface is a `div[role=\"combobox\"]` cannot be\r\n   * named by `htmlFor`/`id`, and cannot receive `aria-labelledby` through\r\n   * props either — MUI spreads unknown props onto its root WRAPPER. Those\r\n   * components therefore declare a static marker and take MUI's own `labelId`\r\n   * channel instead. See the R-I.1 note at the head of this file for the\r\n   * attempt that did not work.\r\n   *\r\n   * A marker rather than a type check: `Field` must not import `Select` (a\r\n   * cycle, and it would pull the whole control into every `Field` call site),\r\n   * and it cannot infer from the element what its rendered DOM will be.\r\n   */\r\n  const childType = child.type as { puiLabelTarget?: \"labelId\" } | undefined;\r\n  const wantsLabelId = childType?.puiLabelTarget === \"labelId\";\r\n  // The wrapped control is polymorphic (Input/Select/NumberInput/Combobox/…);\r\n  // type only the props Field reads/merges, replacing React's `props: any`.\r\n  const childProps = child.props as {\r\n    id?: string;\r\n    disabled?: boolean;\r\n    fullWidth?: boolean;\r\n    \"aria-describedby\"?: string;\r\n    \"aria-labelledby\"?: string;\r\n  };\r\n\r\n  // R-I.3 — MERGE the child's existing aria-describedby with our hint/error\r\n  // ids. cloneElement replaces props, so without an explicit merge any\r\n  // consumer-supplied describedby was silently discarded.\r\n  const describedBy = [\r\n    childProps[\"aria-describedby\"],\r\n    hint && !hasError ? hintId : null,\r\n    hasError ? errorId : null,\r\n  ].filter(Boolean).join(\" \") || undefined;\r\n\r\n  /**\r\n   * R-I.1 — `group` mode only.\r\n   *\r\n   * The child's own root carries `role=\"group\"`, so an `aria-labelledby`\r\n   * passed through props reaches the element that needs it. That is NOT true\r\n   * of a MUI control, whose root is a wrapper div — hence `labelId` for those.\r\n   * Merged with any consumer-supplied value so it is never lost.\r\n   */\r\n  const labelledBy = group\r\n    ? [childProps[\"aria-labelledby\"], label ? labelId : null]\r\n        .filter(Boolean)\r\n        .join(\" \") || undefined\r\n    : undefined;\r\n\r\n  const enhanced = React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\r\n    id: childProps.id || inputId,\r\n    \"aria-invalid\":   hasError ? \"true\" : undefined,\r\n    \"aria-required\":  required ? \"true\" : undefined,\r\n    \"aria-describedby\": describedBy,\r\n    ...(group ? { \"aria-labelledby\": labelledBy } : {}),\r\n    /* R-I.1 — MUI's own labelling channel, for the controls that declare they\r\n       consume it. `SelectInput` merges this into the combobox's\r\n       `aria-labelledby`; nothing else in the tree is touched. */\r\n    ...(wantsLabelId && label ? { labelId } : {}),\r\n    // `error` / `disabled` are broadcast by FormControl via context for MUI\r\n    // inputs, but several v2 inputs (NumberInput, Combobox renderInput) are\r\n    // not pure MUI children and read the props directly — keep them explicit.\r\n    error: hasError,\r\n    disabled: disabled || childProps.disabled,\r\n    // Respect the child's explicit fullWidth when defined (e.g. a narrow\r\n    // inline filter input). Only fall back to Field's value when the child\r\n    // hasn't expressed an opinion.\r\n    fullWidth: childProps.fullWidth !== undefined ? childProps.fullWidth : fullWidth,\r\n  });\r\n\r\n  // R-I.6 — RTL-safe margin reset. `marginLeft: 0` only zeroes the LTR\r\n  // inline-start; in [dir=\"rtl\"] the helper picks up MUI's default on\r\n  // the (now physical-right but logical-start) side and is mis-aligned.\r\n  // `marginInlineStart` resets the correct edge in both directions.\r\n  const helperResetSx = { marginInlineStart: 0, fontSize: \"var(--text-xs)\" };\r\n\r\n  const LABEL_SX = {\r\n    display: \"flex\",\r\n    alignItems: \"center\",\r\n    gap: \"var(--s-1)\",\r\n    fontSize: \"var(--text-xs, 12px)\",\r\n    fontWeight: \"var(--fw-semibold, 600)\",\r\n    color: \"var(--fg-muted)\",\r\n    marginBottom: \"var(--s-2)\",\r\n    \"&.Mui-focused\": { color: \"var(--fg-muted)\" },\r\n    \"&.Mui-error\":   { color: \"var(--fg-muted)\" },\r\n  } as const;\r\n\r\n  // Shared label content (text + required marker + optional help adornment).\r\n  //\r\n  // NO wrapper span around `{label}`: an earlier attempt added one to anchor\r\n  // the id on the text alone, and it changed what `getByText(\"…\")` returns —\r\n  // a host test expecting the `<label>` element got the inner span instead.\r\n  // The id stays on the label element, as it always has in `group` mode.\r\n  const labelContent = (\r\n    <>\r\n      {label}\r\n      {required && (\r\n        <Box\r\n          component=\"span\"\r\n          aria-hidden=\"true\"\r\n          sx={{ color: \"var(--danger)\", fontWeight: \"var(--fw-bold, 700)\" }}\r\n        >\r\n          *\r\n        </Box>\r\n      )}\r\n      {helpAdornment}\r\n    </>\r\n  );\r\n\r\n  return (\r\n    <FormControl\r\n      error={hasError}\r\n      required={required}\r\n      disabled={disabled}\r\n      fullWidth={fullWidth}\r\n      className={className}\r\n      sx={{\r\n        /* G-H — plafond a partir de `sm` seulement : sur mobile le standard\r\n         * impose 100% de la largeur de grille. */\r\n        ...(width\r\n          ? { maxWidth: { xs: \"100%\", sm: FIELD_MAX_WIDTH[width] } }\r\n          : {}),\r\n        ...sx,\r\n      }}\r\n    >\r\n      {label &&\r\n        (group ? (\r\n          // Group mode: render as a <span> carrying an id (no <label for>),\r\n          // referenced by the group's aria-labelledby.\r\n          <FormLabel component=\"span\" id={labelId} required={false} sx={LABEL_SX}>\r\n            {labelContent}\r\n          </FormLabel>\r\n        ) : (\r\n          // The id is present here too: a child declaring `puiLabelTarget`\r\n          // points MUI's `labelId` at this element.\r\n          <FormLabel\r\n            htmlFor={inputId}\r\n            id={labelId}\r\n            required={false /* we render the * ourselves */}\r\n            sx={LABEL_SX}\r\n          >\r\n            {labelContent}\r\n          </FormLabel>\r\n        ))}\r\n\r\n      {enhanced}\r\n\r\n      {hint && !hasError && (\r\n        <FormHelperText\r\n          id={hintId}\r\n          sx={{ ...helperResetSx, color: \"var(--fg-subtle)\" }}\r\n        >\r\n          {hint}\r\n        </FormHelperText>\r\n      )}\r\n\r\n      {hasError && (\r\n        /*\r\n         * Rendered by the shared `FieldError` (gap G-18) rather than an inline\r\n         * `FormHelperText`: R-4.1 MUST requires the icon, and a host with a\r\n         * LIST-level error (a Formik array, an upload slot) has no single\r\n         * control to wrap in a `Field` and needs the exact same renderer\r\n         * standalone. One component, both paths, no drift.\r\n         *\r\n         * `marginTop: var(--s-1)` (4px) replaces `FormHelperText`'s hard-coded\r\n         * 3px default — same optical result, on the spacing scale (R-S.1).\r\n         * Dropping FormHelperText also removed a `color: … !important` that\r\n         * only existed to beat MUI's own `Mui-error` colour.\r\n         */\r\n        <FieldError id={errorId} sx={{ marginTop: \"var(--s-1)\" }}>\r\n          {error}\r\n        </FieldError>\r\n      )}\r\n    </FormControl>\r\n  );\r\n}\r\n\r\nexport default Field;\r\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,WAAW,MAAM,2BAA2B;AACnD,OAAOC,SAAS,MAAM,yBAAyB;AAC/C,OAAOC,cAAc,MAAM,8BAA8B;AACzD,OAAOC,GAAG,MAAM,mBAAmB;AAEnC,OAAOC,UAAU,MAAM,cAAc;;AAErC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AANA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAA2C,GAAG;EACzDC,EAAE,EAAE,0BAA0B;EAC9BC,CAAC,EAAE,yBAAyB;EAC5BC,CAAC,EAAE,yBAAyB;EAC5BC,CAAC,EAAE,yBAAyB;EAC5BC,EAAE,EAAE;AACN,CAAC;AAgCD,SAASC,KAAKA,CAAC;EACbC,KAAK;EACLC,QAAQ,GAAG,KAAK;EAChBC,IAAI;EACJC,KAAK;EACLC,OAAO;EAC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","ignoreList":[]}

package/dist/esm/v2/components/FieldError.js

@@ -1,9 +1,3 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import * as React from "react";
 import Box from "@mui/material/Box";
 import ErrorIcon from "@mui/icons-material/ErrorOutlined";
@@ -68,14 +62,15 @@ import ErrorIcon from "@mui/icons-material/ErrorOutlined";
  * `Mui-error` colour; rendering a plain Box removes the specificity fight.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function FieldError(_ref) {
-  var children = _ref.children,
-    id = _ref.id,
-    sx = _ref.sx;
+function FieldError({
+  children,
+  id,
+  sx
+}) {
   return /*#__PURE__*/_jsxs(Box, {
     role: "alert",
     id: id,
-    sx: _objectSpread({
+    sx: {
       display: "flex",
       // `flex-start`, not `center`: a message that wraps to two lines must
       // keep its icon aligned with the FIRST line, not vertically centred
@@ -90,8 +85,9 @@ function FieldError(_ref) {
       lineHeight: "var(--lh-normal)",
       // RTL-safe: resets the logical inline-start edge, so the message is
       // flush with the control in both directions.
-      marginInlineStart: 0
-    }, sx),
+      marginInlineStart: 0,
+      ...sx
+    },
     children: [/*#__PURE__*/_jsx(ErrorIcon, {
       "aria-hidden": "true"
       /* Test hook — the glyph has no role and no accessible name by design

package/dist/esm/v2/components/FieldError.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldError.js","names":["React","Box","ErrorIcon","jsx","_jsx","jsxs","_jsxs","FieldError","_ref","children","id","sx","role","_objectSpread","display","alignItems","gap","color","fontSize","fontWeight","lineHeight","marginInlineStart","flexShrink","style","marginTop","component"],"sources":["../../../../src/lib/v2/components/FieldError.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\nimport ErrorIcon from \"@mui/icons-material/ErrorOutlined\";\r\n\r\n/**\r\n * FieldError — Portnet UI v2\r\n *\r\n * Charter R-4.1 MUST: « Toute erreur de champ s'affiche SOUS le champ, en rouge,\r\n * AVEC ICÔNE, max 1 phrase, verbe d'action. »\r\n *\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n * WHY THIS BELONGS IN THE LIBRARY (capability gap G-18)\r\n *\r\n * Two defects closed at once, and they were the same defect seen from both ends.\r\n *\r\n * 1. `Field` rendered its error message as a bare `FormHelperText` — red, under\r\n *    the field, one sentence, and NO ICON. R-4.1 is a MUST and the canonical\r\n *    field wrapper of the design system did not satisfy it, so every module\r\n *    inherited the gap on every form.\r\n *\r\n * 2. A field error is not always attached to a `Field`. A LIST-level error\r\n *    (`errors.articles`, `errors.autorisationPdf` — a Formik array or an upload\r\n *    slot) has no single control to wrap, and `Field` requires exactly one\r\n *    `children` element. Hosts therefore hand-rolled the block: addpe-fe's\r\n *    `InlineFieldAlert` reimplemented the icon + `role=\"alert\"` + danger token\r\n *    recipe locally — and, ironically, was MORE charter-compliant than the\r\n *    shared component it could not use.\r\n *\r\n * Owning the renderer here means the two paths cannot drift: the error a user\r\n * sees under an `<Input>` and the one under an articles table are the same\r\n * component.\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n *\r\n * Used INSIDE `Field` (it supplies `id`, wired to the control's\r\n * `aria-describedby`), and standalone by a host:\r\n *\r\n *   {typeof errors.articles === \"string\" && (\r\n *     <FieldError sx={{ marginTop: \"var(--s-2)\" }}>{errors.articles}</FieldError>\r\n *   )}\r\n *\r\n * Accessibility\r\n *   - `role=\"alert\"`: the element MOUNTS when the error appears, which is what\r\n *     makes a screen reader announce it. Do not render it permanently with empty\r\n *     content — an always-present live region announces nothing on change.\r\n *   - The icon is `aria-hidden`: it is redundant with the message, and R-Ar.2\r\n *     forbids a decorative icon carrying an accessible name.\r\n *   - Iconography is deliberately the SAME as `Banner`'s error variant\r\n *     (`ErrorOutlined`), so \"something is wrong\" reads identically whether it\r\n *     surfaces inline or in a banner.\r\n *\r\n * Colour: the message TEXT takes `--danger-fg`, the icon takes `--danger`. That\r\n * split is not cosmetic and it is the rule `KPICard` already documents for its\r\n * delta indicator: `--danger` is the VIVID UI colour, held to WCAG 1.4.11's 3:1\r\n * non-text threshold, while `--danger-fg` is the TEXT colour, held to 1.4.3's\r\n * 4.5:1. Using `--danger` for the message would render it at a ratio calibrated\r\n * for icons and borders — which is what the module-local `InlineFieldAlert` this\r\n * component replaced did, and what `Field`'s own error text did before it\r\n * delegated here. Promoting that mistake into a shared component would have made\r\n * it fleet-wide, on every field error of every module.\r\n *\r\n * No `!important` — the previous `FormHelperText` needed one to beat MUI's own\r\n * `Mui-error` colour; rendering a plain Box removes the specificity fight.\r\n */\r\n\r\nexport interface FieldErrorProps {\r\n  /** The message. One sentence, action verb (Charter §09.3). */\r\n  children: React.ReactNode;\r\n  /**\r\n   * DOM id referenced by the control's `aria-describedby`. `Field` supplies it;\r\n   * a standalone list-level error usually has nothing to bind to and omits it.\r\n   */\r\n  id?: string | undefined;\r\n  /**\r\n   * Spacing / layout overrides. Standalone call sites typically need a\r\n   * `marginTop`; inside `Field` the vertical rhythm is already handled.\r\n   */\r\n  sx?: SxProps<Theme> | undefined;\r\n}\r\n\r\nfunction FieldError({ children, id, sx }: FieldErrorProps) {\r\n  return (\r\n    <Box\r\n      role=\"alert\"\r\n      id={id}\r\n      sx={{\r\n        display: \"flex\",\r\n        // `flex-start`, not `center`: a message that wraps to two lines must\r\n        // keep its icon aligned with the FIRST line, not vertically centred\r\n        // against the whole block.\r\n        alignItems: \"flex-start\",\r\n        gap: \"var(--s-1)\",\r\n        // WCAG 1.4.3 — message text at the 4.5:1-calibrated token, NOT `--danger`\r\n        // (see the colour note in this file's header).\r\n        color: \"var(--danger-fg)\",\r\n        fontSize: \"var(--text-xs)\",\r\n        fontWeight: \"var(--fw-medium)\",\r\n        lineHeight: \"var(--lh-normal)\",\r\n        // RTL-safe: resets the logical inline-start edge, so the message is\r\n        // flush with the control in both directions.\r\n        marginInlineStart: 0,\r\n        ...sx,\r\n      }}\r\n    >\r\n      <ErrorIcon\r\n        aria-hidden=\"true\"\r\n        /* Test hook — the glyph has no role and no accessible name by design\r\n         * (R-Ar.2), so no semantic query reaches it. Same sanctioned escape\r\n         * hatch as FileCard's filecard-icon, and it guards the same contract:\r\n         * a decorative icon must not be announced. */\r\n        data-testid=\"fielderror-icon\"\r\n        sx={{\r\n          // --text-h3 is the 16px token; matches the message's optical scale.\r\n          fontSize: \"var(--text-h3)\",\r\n          flexShrink: 0,\r\n          // WCAG 1.4.11 — the glyph stays VIVID at the 3:1 non-text threshold,\r\n          // which is the whole point of keeping two danger tokens.\r\n          color: \"var(--danger)\",\r\n        }}\r\n        // Optical alignment of the glyph with the first text line. Same\r\n        // rationale (and same 1px order of magnitude) as Banner's leading icon:\r\n        // a deliberate non-token value, not a spacing-scale concern.\r\n        style={{ marginTop: 1 }}\r\n      />\r\n      <Box component=\"span\">{children}</Box>\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default FieldError;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,GAAG,MAAM,mBAAmB;AAEnC,OAAOC,SAAS,MAAM,mCAAmC;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA1DA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA2EA,SAASC,UAAUA,CAAAC,IAAA,EAAwC;EAAA,IAArCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IAAEC,EAAE,GAAAH,IAAA,CAAFG,EAAE;EACpC,oBACEL,KAAA,CAACL,GAAG;IACFW,IAAI,EAAC,OAAO;IACZF,EAAE,EAAEA,EAAG;IACPC,EAAE,EAAAE,aAAA;MACAC,OAAO,EAAE,MAAM;MACf;MACA;MACA;MACAC,UAAU,EAAE,YAAY;MACxBC,GAAG,EAAE,YAAY;MACjB;MACA;MACAC,KAAK,EAAE,kBAAkB;MACzBC,QAAQ,EAAE,gBAAgB;MAC1BC,UAAU,EAAE,kBAAkB;MAC9BC,UAAU,EAAE,kBAAkB;MAC9B;MACA;MACAC,iBAAiB,EAAE;IAAC,GACjBV,EAAE,CACL;IAAAF,QAAA,gBAEFL,IAAA,CAACF,SAAS;MACR,eAAY;MACZ;AACR;AACA;AACA,oDAHQ;MAIA,eAAY,iBAAiB;MAC7BS,EAAE,EAAE;QACF;QACAO,QAAQ,EAAE,gBAAgB;QAC1BI,UAAU,EAAE,CAAC;QACb;QACA;QACAL,KAAK,EAAE;MACT;MACA;MACA;MACA;MAAA;MACAM,KAAK,EAAE;QAAEC,SAAS,EAAE;MAAE;IAAE,CACzB,CAAC,eACFpB,IAAA,CAACH,GAAG;MAACwB,SAAS,EAAC,MAAM;MAAAhB,QAAA,EAAEA;IAAQ,CAAM,CAAC;EAAA,CACnC,CAAC;AAEV;AAEA,eAAeF,UAAU","ignoreList":[]}
+{"version":3,"file":"FieldError.js","names":["React","Box","ErrorIcon","jsx","_jsx","jsxs","_jsxs","FieldError","children","id","sx","role","display","alignItems","gap","color","fontSize","fontWeight","lineHeight","marginInlineStart","flexShrink","style","marginTop","component"],"sources":["../../../../src/lib/v2/components/FieldError.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\nimport ErrorIcon from \"@mui/icons-material/ErrorOutlined\";\r\n\r\n/**\r\n * FieldError — Portnet UI v2\r\n *\r\n * Charter R-4.1 MUST: « Toute erreur de champ s'affiche SOUS le champ, en rouge,\r\n * AVEC ICÔNE, max 1 phrase, verbe d'action. »\r\n *\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n * WHY THIS BELONGS IN THE LIBRARY (capability gap G-18)\r\n *\r\n * Two defects closed at once, and they were the same defect seen from both ends.\r\n *\r\n * 1. `Field` rendered its error message as a bare `FormHelperText` — red, under\r\n *    the field, one sentence, and NO ICON. R-4.1 is a MUST and the canonical\r\n *    field wrapper of the design system did not satisfy it, so every module\r\n *    inherited the gap on every form.\r\n *\r\n * 2. A field error is not always attached to a `Field`. A LIST-level error\r\n *    (`errors.articles`, `errors.autorisationPdf` — a Formik array or an upload\r\n *    slot) has no single control to wrap, and `Field` requires exactly one\r\n *    `children` element. Hosts therefore hand-rolled the block: addpe-fe's\r\n *    `InlineFieldAlert` reimplemented the icon + `role=\"alert\"` + danger token\r\n *    recipe locally — and, ironically, was MORE charter-compliant than the\r\n *    shared component it could not use.\r\n *\r\n * Owning the renderer here means the two paths cannot drift: the error a user\r\n * sees under an `<Input>` and the one under an articles table are the same\r\n * component.\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n *\r\n * Used INSIDE `Field` (it supplies `id`, wired to the control's\r\n * `aria-describedby`), and standalone by a host:\r\n *\r\n *   {typeof errors.articles === \"string\" && (\r\n *     <FieldError sx={{ marginTop: \"var(--s-2)\" }}>{errors.articles}</FieldError>\r\n *   )}\r\n *\r\n * Accessibility\r\n *   - `role=\"alert\"`: the element MOUNTS when the error appears, which is what\r\n *     makes a screen reader announce it. Do not render it permanently with empty\r\n *     content — an always-present live region announces nothing on change.\r\n *   - The icon is `aria-hidden`: it is redundant with the message, and R-Ar.2\r\n *     forbids a decorative icon carrying an accessible name.\r\n *   - Iconography is deliberately the SAME as `Banner`'s error variant\r\n *     (`ErrorOutlined`), so \"something is wrong\" reads identically whether it\r\n *     surfaces inline or in a banner.\r\n *\r\n * Colour: the message TEXT takes `--danger-fg`, the icon takes `--danger`. That\r\n * split is not cosmetic and it is the rule `KPICard` already documents for its\r\n * delta indicator: `--danger` is the VIVID UI colour, held to WCAG 1.4.11's 3:1\r\n * non-text threshold, while `--danger-fg` is the TEXT colour, held to 1.4.3's\r\n * 4.5:1. Using `--danger` for the message would render it at a ratio calibrated\r\n * for icons and borders — which is what the module-local `InlineFieldAlert` this\r\n * component replaced did, and what `Field`'s own error text did before it\r\n * delegated here. Promoting that mistake into a shared component would have made\r\n * it fleet-wide, on every field error of every module.\r\n *\r\n * No `!important` — the previous `FormHelperText` needed one to beat MUI's own\r\n * `Mui-error` colour; rendering a plain Box removes the specificity fight.\r\n */\r\n\r\nexport interface FieldErrorProps {\r\n  /** The message. One sentence, action verb (Charter §09.3). */\r\n  children: React.ReactNode;\r\n  /**\r\n   * DOM id referenced by the control's `aria-describedby`. `Field` supplies it;\r\n   * a standalone list-level error usually has nothing to bind to and omits it.\r\n   */\r\n  id?: string | undefined;\r\n  /**\r\n   * Spacing / layout overrides. Standalone call sites typically need a\r\n   * `marginTop`; inside `Field` the vertical rhythm is already handled.\r\n   */\r\n  sx?: SxProps<Theme> | undefined;\r\n}\r\n\r\nfunction FieldError({ children, id, sx }: FieldErrorProps) {\r\n  return (\r\n    <Box\r\n      role=\"alert\"\r\n      id={id}\r\n      sx={{\r\n        display: \"flex\",\r\n        // `flex-start`, not `center`: a message that wraps to two lines must\r\n        // keep its icon aligned with the FIRST line, not vertically centred\r\n        // against the whole block.\r\n        alignItems: \"flex-start\",\r\n        gap: \"var(--s-1)\",\r\n        // WCAG 1.4.3 — message text at the 4.5:1-calibrated token, NOT `--danger`\r\n        // (see the colour note in this file's header).\r\n        color: \"var(--danger-fg)\",\r\n        fontSize: \"var(--text-xs)\",\r\n        fontWeight: \"var(--fw-medium)\",\r\n        lineHeight: \"var(--lh-normal)\",\r\n        // RTL-safe: resets the logical inline-start edge, so the message is\r\n        // flush with the control in both directions.\r\n        marginInlineStart: 0,\r\n        ...sx,\r\n      }}\r\n    >\r\n      <ErrorIcon\r\n        aria-hidden=\"true\"\r\n        /* Test hook — the glyph has no role and no accessible name by design\r\n         * (R-Ar.2), so no semantic query reaches it. Same sanctioned escape\r\n         * hatch as FileCard's filecard-icon, and it guards the same contract:\r\n         * a decorative icon must not be announced. */\r\n        data-testid=\"fielderror-icon\"\r\n        sx={{\r\n          // --text-h3 is the 16px token; matches the message's optical scale.\r\n          fontSize: \"var(--text-h3)\",\r\n          flexShrink: 0,\r\n          // WCAG 1.4.11 — the glyph stays VIVID at the 3:1 non-text threshold,\r\n          // which is the whole point of keeping two danger tokens.\r\n          color: \"var(--danger)\",\r\n        }}\r\n        // Optical alignment of the glyph with the first text line. Same\r\n        // rationale (and same 1px order of magnitude) as Banner's leading icon:\r\n        // a deliberate non-token value, not a spacing-scale concern.\r\n        style={{ marginTop: 1 }}\r\n      />\r\n      <Box component=\"span\">{children}</Box>\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default FieldError;\r\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,GAAG,MAAM,mBAAmB;AAEnC,OAAOC,SAAS,MAAM,mCAAmC;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA1DA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA2EA,SAASC,UAAUA,CAAC;EAAEC,QAAQ;EAAEC,EAAE;EAAEC;AAAoB,CAAC,EAAE;EACzD,oBACEJ,KAAA,CAACL,GAAG;IACFU,IAAI,EAAC,OAAO;IACZF,EAAE,EAAEA,EAAG;IACPC,EAAE,EAAE;MACFE,OAAO,EAAE,MAAM;MACf;MACA;MACA;MACAC,UAAU,EAAE,YAAY;MACxBC,GAAG,EAAE,YAAY;MACjB;MACA;MACAC,KAAK,EAAE,kBAAkB;MACzBC,QAAQ,EAAE,gBAAgB;MAC1BC,UAAU,EAAE,kBAAkB;MAC9BC,UAAU,EAAE,kBAAkB;MAC9B;MACA;MACAC,iBAAiB,EAAE,CAAC;MACpB,GAAGT;IACL,CAAE;IAAAF,QAAA,gBAEFJ,IAAA,CAACF,SAAS;MACR,eAAY;MACZ;AACR;AACA;AACA,oDAHQ;MAIA,eAAY,iBAAiB;MAC7BQ,EAAE,EAAE;QACF;QACAM,QAAQ,EAAE,gBAAgB;QAC1BI,UAAU,EAAE,CAAC;QACb;QACA;QACAL,KAAK,EAAE;MACT;MACA;MACA;MACA;MAAA;MACAM,KAAK,EAAE;QAAEC,SAAS,EAAE;MAAE;IAAE,CACzB,CAAC,eACFlB,IAAA,CAACH,GAAG;MAACsB,SAAS,EAAC,MAAM;MAAAf,QAAA,EAAEA;IAAQ,CAAM,CAAC;EAAA,CACnC,CAAC;AAEV;AAEA,eAAeD,UAAU","ignoreList":[]}