@12-apps/ui 6.73.0 → 6.74.0

package/src/components/form/Input/text-field-slim.factory.tsx

@@ -0,0 +1,248 @@
+'use client';
+
+/**
+ * `TextFieldSlim`'s body, with the input implementation left to the caller
+ * (FUT-1054). Why the field exists at all, and what it transcribes from MUI's
+ * `TextField`, is in `text-field-slim.tsx`.
+ */
+import FormControl from '@mui/material/FormControl/index.js';
+import FormHelperText from '@mui/material/FormHelperText/index.js';
+import InputLabel from '@mui/material/InputLabel/index.js';
+import { styled } from '@mui/material/styles/index.js';
+import type { FilledInputProps } from '@mui/material/FilledInput/index.js';
+import type { FormControlProps } from '@mui/material/FormControl/index.js';
+import type { FormHelperTextProps } from '@mui/material/FormHelperText/index.js';
+import type { InputProps as MuiInputProps } from '@mui/material/Input/index.js';
+import type { InputBaseComponentProps } from '@mui/material/InputBase/index.js';
+import type { InputLabelProps } from '@mui/material/InputLabel/index.js';
+import type { OutlinedInputProps } from '@mui/material/OutlinedInput/index.js';
+import React from 'react';
+
+import { withDefaults } from '../../../utils/withDefaults';
+
+/** MUI's three input variants, by the name `TextField` gives them. */
+export type MuiFieldVariant = 'standard' | 'filled' | 'outlined';
+
+/**
+ * Which input renders a variant. The generic `TextFieldSlim` maps all three;
+ * a pinned field maps the one it renders, so the other two are never imported
+ * (FUT-1054).
+ */
+export type InputForVariant = (variant: MuiFieldVariant) => React.ElementType;
+
+/** What `createTextFieldSlim` returns, and what `createInput` composes. */
+export type TextFieldSlimComponent = React.ForwardRefExoticComponent<
+  TextFieldSlimProps & React.RefAttributes<HTMLDivElement>
+>;
+
+/**
+ * `MuiTextField-root`, by hand.
+ *
+ * `@mui/material` does not re-export `textFieldClasses` from its root barrel,
+ * and the deep path that does would import `TextField` — the whole thing this
+ * file exists to avoid. So the class name is written out, and the parity test
+ * asserts it against a REAL `TextField`'s root rather than against itself.
+ *
+ * It has to be there at all because it is part of MUI's public surface: two of
+ * this package's own suites reach for `.closest('.MuiTextField-root')`, and a
+ * consumer's stylesheet may too.
+ */
+const TEXT_FIELD_ROOT_CLASS = 'MuiTextField-root';
+
+/**
+ * Named `MuiTextField` so a theme's `components.MuiTextField.styleOverrides`
+ * keeps applying. Nothing in this repo sets one today; a consumer's theme is
+ * not this package's to break.
+ */
+const TextFieldSlimRoot = styled(FormControl, {
+  name: 'MuiTextField',
+  slot: 'Root',
+  overridesResolver: (_props, styles) => styles.root,
+})({});
+
+export interface TextFieldSlimProps
+  extends Omit<FormControlProps, 'onChange' | 'onBlur' | 'onFocus' | 'defaultValue'> {
+  autoComplete?: string;
+  autoFocus?: boolean;
+  defaultValue?: unknown;
+  helperText?: React.ReactNode;
+  label?: React.ReactNode;
+  maxRows?: number | string;
+  minRows?: number | string;
+  multiline?: boolean;
+  name?: string;
+  placeholder?: string;
+  rows?: number | string;
+  type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
+  value?: unknown;
+  inputRef?: React.Ref<unknown>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  /** Props for the rendered input variant. */
+  InputProps?: Partial<MuiInputProps & FilledInputProps & OutlinedInputProps>;
+  /**
+   * Props for the `<input>` itself — where an `aria-label` has to ride.
+   *
+   * MUI's own type, because it is deliberately open: a caller puts `data-*`
+   * and `aria-*` here precisely because the root would swallow them, and
+   * `InputHTMLAttributes` alone rejects both.
+   */
+  inputProps?: InputBaseComponentProps;
+  InputLabelProps?: Partial<InputLabelProps>;
+  FormHelperTextProps?: Partial<FormHelperTextProps>;
+}
+
+/**
+ * `TextField`'s own defaults, as a table.
+ *
+ * One `= default` per destructured prop is one branch per prop, and eight of
+ * them put this component over the complexity bar before it rendered anything —
+ * which is the same reason `AppHeader` keeps its defaults in a table. The values
+ * are `TextField`'s, unchanged; the parity test would fail if any drifted.
+ */
+const DEFAULTS: Partial<TextFieldSlimProps> = {
+  autoFocus: false,
+  color: 'primary',
+  disabled: false,
+  error: false,
+  fullWidth: false,
+  multiline: false,
+  required: false,
+  variant: 'outlined',
+};
+
+/** The two ids a labelled, described field needs, and the input's own. */
+function idsOf(props: TextFieldSlimProps, generated: string): {
+  id: string;
+  helperTextId: string | undefined;
+  inputLabelId: string | undefined;
+} {
+  const id = props.id ?? generated;
+  return {
+    id,
+    helperTextId: props.helperText && id ? `${id}-helper-text` : undefined,
+    inputLabelId: props.label && id ? `${id}-label` : undefined,
+  };
+}
+
+/**
+ * What only the OUTLINED variant needs: it draws its own notch around the
+ * label, so it has to be told the label and whether the caller pinned it shrunk
+ * (FUT-729's `shrink` case).
+ */
+function outlinedPropsOf(props: TextFieldSlimProps): Record<string, unknown> {
+  if (props.variant !== 'outlined') return {};
+  const shrink = props.InputLabelProps?.shrink;
+  return { label: props.label, ...(shrink === undefined ? {} : { notched: shrink }) };
+}
+
+interface FieldIds {
+  id: string;
+  helperTextId: string | undefined;
+  inputLabelId: string | undefined;
+}
+
+/**
+ * Everything the input (or this component) consumes by name.
+ *
+ * A key LIST rather than the omit-by-destructuring idiom, which would name
+ * twenty-four bindings only to leave every one of them unused — twenty-four
+ * lint warnings, in a package that allows none.
+ *
+ * `fullWidth`, `disabled`, `error`, `required`, `color` and `variant` are
+ * deliberately absent: `TextField` hands those to the root, and `fullWidth` to
+ * both.
+ */
+const CONSUMED_BY_FIELD: ReadonlySet<string> = new Set([
+  'autoComplete', 'autoFocus', 'children', 'className', 'defaultValue',
+  'FormHelperTextProps', 'helperText', 'id', 'InputLabelProps', 'inputProps',
+  'InputProps', 'inputRef', 'label', 'maxRows', 'minRows', 'multiline', 'name',
+  'onBlur', 'onChange', 'onFocus', 'placeholder', 'rows', 'type', 'value',
+]);
+
+/**
+ * What the ROOT `FormControl` gets: the props `TextField` hands it by name,
+ * plus everything it did not recognise.
+ *
+ * That second half is `TextField`'s behaviour and not a choice made here: an
+ * unrecognised HTML attribute lands on the root `div`, which is why `Input` has
+ * to route `aria-label` through `inputProps`. The parity test pins it.
+ */
+function rootPropsOf(props: TextFieldSlimProps): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(props).filter(([key]) => !CONSUMED_BY_FIELD.has(key)),
+  );
+}
+
+/** What the INPUT gets, by name, exactly as `TextField` names them. */
+function fieldPropsOf(props: TextFieldSlimProps, ids: FieldIds): Record<string, unknown> {
+  return {
+    'aria-describedby': ids.helperTextId,
+    autoComplete: props.autoComplete,
+    autoFocus: props.autoFocus,
+    defaultValue: props.defaultValue,
+    fullWidth: props.fullWidth,
+    multiline: props.multiline,
+    name: props.name,
+    rows: props.rows,
+    maxRows: props.maxRows,
+    minRows: props.minRows,
+    type: props.type,
+    value: props.value,
+    id: ids.id,
+    inputRef: props.inputRef,
+    onBlur: props.onBlur,
+    onChange: props.onChange,
+    onFocus: props.onFocus,
+    placeholder: props.placeholder,
+    inputProps: props.inputProps,
+    ...outlinedPropsOf(props),
+    ...props.InputProps,
+  };
+}
+
+/**
+ * The field, with the input implementation chosen by `inputFor`.
+ *
+ * A factory rather than a component so the variant table lives in the CALLER's
+ * module: this module imports none of `Input`, `FilledInput` or
+ * `OutlinedInput`, so what `inputFor` returns is the only input a caller's
+ * bundle keeps. The caller's own module-scope `createTextFieldSlim(...)` call
+ * is kept by the bundler, and with it every module its argument reaches
+ * (FUT-3402), so that argument must name only the variants it serves.
+ */
+export function createTextFieldSlim(inputFor: InputForVariant): TextFieldSlimComponent {
+  return React.forwardRef<HTMLDivElement, TextFieldSlimProps>(
+    function TextFieldSlim(rawProps, ref) {
+      const props = withDefaults(rawProps, DEFAULTS);
+      // `TextField` uses `@mui/utils`'s `useId`, which is React's with a fallback
+      // for React 17. The peer here is React 19, so React's own is the same thing
+      // without the dependency. The override still wins, exactly as it did — and
+      // it is read from the RAW props, before `withDefaults` could supply one.
+      const ids = idsOf(rawProps, React.useId());
+      const InputComponent = inputFor(props.variant ?? 'outlined');
+      const { label, helperText } = props;
+
+      return (
+        <TextFieldSlimRoot
+          className={[TEXT_FIELD_ROOT_CLASS, props.className].filter(Boolean).join(' ')}
+          ref={ref}
+          {...rootPropsOf(props)}
+        >
+          {label !== null && label !== undefined && label !== '' ? (
+            <InputLabel htmlFor={ids.id} id={ids.inputLabelId} {...props.InputLabelProps}>
+              {label}
+            </InputLabel>
+          ) : null}
+          <InputComponent {...fieldPropsOf(props, ids)} />
+          {helperText ? (
+            <FormHelperText id={ids.helperTextId} {...props.FormHelperTextProps}>
+              {helperText}
+            </FormHelperText>
+          ) : null}
+        </TextFieldSlimRoot>
+      );
+    },
+  );
+}

package/src/components/form/Input/text-field-slim.tsx

@@ -33,22 +33,13 @@
  * dev-only warning about `children` that only the select branch could emit.
  */
 import FilledInput from '@mui/material/FilledInput/index.js';
-import FormControl from '@mui/material/FormControl/index.js';
-import FormHelperText from '@mui/material/FormHelperText/index.js';
 import StandardInput from '@mui/material/Input/index.js';
-import InputLabel from '@mui/material/InputLabel/index.js';
 import OutlinedInput from '@mui/material/OutlinedInput/index.js';
-import { styled } from '@mui/material/styles/index.js';
-import type { FilledInputProps } from '@mui/material/FilledInput/index.js';
-import type { FormControlProps } from '@mui/material/FormControl/index.js';
-import type { FormHelperTextProps } from '@mui/material/FormHelperText/index.js';
-import type { InputProps as MuiInputProps } from '@mui/material/Input/index.js';
-import type { InputBaseComponentProps } from '@mui/material/InputBase/index.js';
-import type { InputLabelProps } from '@mui/material/InputLabel/index.js';
-import type { OutlinedInputProps } from '@mui/material/OutlinedInput/index.js';
-import React from 'react';
 
-import { withDefaults } from '../../../utils/withDefaults';
+import { createTextFieldSlim } from './text-field-slim.factory';
+import type { TextFieldSlimComponent } from './text-field-slim.factory';
+
+export type { TextFieldSlimProps } from './text-field-slim.factory';
 
 const VARIANT_COMPONENT = {
   standard: StandardInput,
@@ -57,201 +48,10 @@ const VARIANT_COMPONENT = {
 } as const;
 
 /**
- * `MuiTextField-root`, by hand.
- *
- * `@mui/material` does not re-export `textFieldClasses` from its root barrel,
- * and the deep path that does would import `TextField` — the whole thing this
- * file exists to avoid. So the class name is written out, and the parity test
- * asserts it against a REAL `TextField`'s root rather than against itself.
- *
- * It has to be there at all because it is part of MUI's public surface: two of
- * this package's own suites reach for `.closest('.MuiTextField-root')`, and a
- * consumer's stylesheet may too.
- */
-const TEXT_FIELD_ROOT_CLASS = 'MuiTextField-root';
-
-/**
- * Named `MuiTextField` so a theme's `components.MuiTextField.styleOverrides`
- * keeps applying. Nothing in this repo sets one today; a consumer's theme is
- * not this package's to break.
- */
-const TextFieldSlimRoot = styled(FormControl, {
-  name: 'MuiTextField',
-  slot: 'Root',
-  overridesResolver: (_props, styles) => styles.root,
-})({});
-
-export interface TextFieldSlimProps
-  extends Omit<FormControlProps, 'onChange' | 'onBlur' | 'onFocus' | 'defaultValue'> {
-  autoComplete?: string;
-  autoFocus?: boolean;
-  defaultValue?: unknown;
-  helperText?: React.ReactNode;
-  label?: React.ReactNode;
-  maxRows?: number | string;
-  minRows?: number | string;
-  multiline?: boolean;
-  name?: string;
-  placeholder?: string;
-  rows?: number | string;
-  type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
-  value?: unknown;
-  inputRef?: React.Ref<unknown>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  /** Props for the rendered input variant. */
-  InputProps?: Partial<MuiInputProps & FilledInputProps & OutlinedInputProps>;
-  /**
-   * Props for the `<input>` itself — where an `aria-label` has to ride.
-   *
-   * MUI's own type, because it is deliberately open: a caller puts `data-*`
-   * and `aria-*` here precisely because the root would swallow them, and
-   * `InputHTMLAttributes` alone rejects both.
-   */
-  inputProps?: InputBaseComponentProps;
-  InputLabelProps?: Partial<InputLabelProps>;
-  FormHelperTextProps?: Partial<FormHelperTextProps>;
-}
-
-/**
- * `TextField`'s own defaults, as a table.
- *
- * One `= default` per destructured prop is one branch per prop, and eight of
- * them put this component over the complexity bar before it rendered anything —
- * which is the same reason `AppHeader` keeps its defaults in a table. The values
- * are `TextField`'s, unchanged; the parity test would fail if any drifted.
- */
-const DEFAULTS: Partial<TextFieldSlimProps> = {
-  autoFocus: false,
-  color: 'primary',
-  disabled: false,
-  error: false,
-  fullWidth: false,
-  multiline: false,
-  required: false,
-  variant: 'outlined',
-};
-
-/** The two ids a labelled, described field needs, and the input's own. */
-function idsOf(props: TextFieldSlimProps, generated: string): {
-  id: string;
-  helperTextId: string | undefined;
-  inputLabelId: string | undefined;
-} {
-  const id = props.id ?? generated;
-  return {
-    id,
-    helperTextId: props.helperText && id ? `${id}-helper-text` : undefined,
-    inputLabelId: props.label && id ? `${id}-label` : undefined,
-  };
-}
-
-/**
- * What only the OUTLINED variant needs: it draws its own notch around the
- * label, so it has to be told the label and whether the caller pinned it shrunk
- * (FUT-729's `shrink` case).
- */
-function outlinedPropsOf(props: TextFieldSlimProps): Record<string, unknown> {
-  if (props.variant !== 'outlined') return {};
-  const shrink = props.InputLabelProps?.shrink;
-  return { label: props.label, ...(shrink === undefined ? {} : { notched: shrink }) };
-}
-
-interface FieldIds {
-  id: string;
-  helperTextId: string | undefined;
-  inputLabelId: string | undefined;
-}
-
-/**
- * Everything the input (or this component) consumes by name.
- *
- * A key LIST rather than the omit-by-destructuring idiom, which would name
- * twenty-four bindings only to leave every one of them unused — twenty-four
- * lint warnings, in a package that allows none.
- *
- * `fullWidth`, `disabled`, `error`, `required`, `color` and `variant` are
- * deliberately absent: `TextField` hands those to the root, and `fullWidth` to
- * both.
- */
-const CONSUMED_BY_FIELD: ReadonlySet<string> = new Set([
-  'autoComplete', 'autoFocus', 'children', 'className', 'defaultValue',
-  'FormHelperTextProps', 'helperText', 'id', 'InputLabelProps', 'inputProps',
-  'InputProps', 'inputRef', 'label', 'maxRows', 'minRows', 'multiline', 'name',
-  'onBlur', 'onChange', 'onFocus', 'placeholder', 'rows', 'type', 'value',
-]);
-
-/**
- * What the ROOT `FormControl` gets: the props `TextField` hands it by name,
- * plus everything it did not recognise.
- *
- * That second half is `TextField`'s behaviour and not a choice made here: an
- * unrecognised HTML attribute lands on the root `div`, which is why `Input` has
- * to route `aria-label` through `inputProps`. The parity test pins it.
+ * The generic field: any of MUI's three variants, chosen at runtime. A field
+ * that only ever renders outlined uses `./outlined` instead, which never
+ * imports the other two (FUT-1054).
  */
-function rootPropsOf(props: TextFieldSlimProps): Record<string, unknown> {
-  return Object.fromEntries(
-    Object.entries(props).filter(([key]) => !CONSUMED_BY_FIELD.has(key)),
-  );
-}
-
-/** What the INPUT gets, by name, exactly as `TextField` names them. */
-function fieldPropsOf(props: TextFieldSlimProps, ids: FieldIds): Record<string, unknown> {
-  return {
-    'aria-describedby': ids.helperTextId,
-    autoComplete: props.autoComplete,
-    autoFocus: props.autoFocus,
-    defaultValue: props.defaultValue,
-    fullWidth: props.fullWidth,
-    multiline: props.multiline,
-    name: props.name,
-    rows: props.rows,
-    maxRows: props.maxRows,
-    minRows: props.minRows,
-    type: props.type,
-    value: props.value,
-    id: ids.id,
-    inputRef: props.inputRef,
-    onBlur: props.onBlur,
-    onChange: props.onChange,
-    onFocus: props.onFocus,
-    placeholder: props.placeholder,
-    inputProps: props.inputProps,
-    ...outlinedPropsOf(props),
-    ...props.InputProps,
-  };
-}
-
-export const TextFieldSlim = React.forwardRef<HTMLDivElement, TextFieldSlimProps>(
-  function TextFieldSlim(rawProps, ref) {
-    const props = withDefaults(rawProps, DEFAULTS);
-    // `TextField` uses `@mui/utils`'s `useId`, which is React's with a fallback
-    // for React 17. The peer here is React 19, so React's own is the same thing
-    // without the dependency. The override still wins, exactly as it did — and
-    // it is read from the RAW props, before `withDefaults` could supply one.
-    const ids = idsOf(rawProps, React.useId());
-    const InputComponent = VARIANT_COMPONENT[props.variant ?? 'outlined'];
-    const { label, helperText } = props;
-
-    return (
-      <TextFieldSlimRoot
-        className={[TEXT_FIELD_ROOT_CLASS, props.className].filter(Boolean).join(' ')}
-        ref={ref}
-        {...rootPropsOf(props)}
-      >
-        {label !== null && label !== undefined && label !== '' ? (
-          <InputLabel htmlFor={ids.id} id={ids.inputLabelId} {...props.InputLabelProps}>
-            {label}
-          </InputLabel>
-        ) : null}
-        <InputComponent {...fieldPropsOf(props, ids)} />
-        {helperText ? (
-          <FormHelperText id={ids.helperTextId} {...props.FormHelperTextProps}>
-            {helperText}
-          </FormHelperText>
-        ) : null}
-      </TextFieldSlimRoot>
-    );
-  },
+export const TextFieldSlim: TextFieldSlimComponent = createTextFieldSlim(
+  (variant) => VARIANT_COMPONENT[variant],
 );

package/src/components/navigation/SectionNav/SectionNav.bar.tsx

@@ -18,7 +18,7 @@ import {
   destinationControl,
   focusRing,
 } from './SectionNav.parts';
-import { RaisedActionButton } from './SectionNav.primary';
+import { raisedLift, RaisedActionButton } from './SectionNav.primary';
 import { SectionNavSheet } from './SectionNav.sheet';
 import type { SectionNavAction, SectionNavBadge, SectionNavDestination, SectionNavMenu, SectionNavProps } from './SectionNav.types';
 
@@ -45,6 +45,12 @@ export function sectionNavBarInset(theme: Parameters<typeof rem>[0], options: Se
   return `calc(${barHeight(theme, options.compact === true)} + env(safe-area-inset-bottom))`;
 }
 
+/** Where the bar's sheets stop: clear of the raised button's {@link raisedLift}, which drew over their last row (FUT-3399). */
+export function sectionNavSheetOffset(theme: Parameters<typeof rem>[0], raised: boolean, options: SectionNavBarOptions = {}): string {
+  const inset = sectionNavBarInset(theme, options);
+  return raised ? `calc(${inset} + ${rem(theme, raisedLift(options.compact === true))})` : inset;
+}
+
 /**
  * One slot: icon over label, a count on the icon.
  *
@@ -373,7 +379,7 @@ export function SectionNavBar({
           linkComponent={linkComponent}
           copy={copy}
           testId={`${dataTestId}-primary-sheet`}
-          bottomOffset={sectionNavBarInset(theme, { compact })}
+          bottomOffset={sectionNavSheetOffset(theme, primary !== undefined, { compact })}
         />
       ) : null}
       {more ? (
@@ -384,7 +390,7 @@ export function SectionNavBar({
           linkComponent={linkComponent}
           copy={copy}
           testId={`${dataTestId}-more-sheet`}
-          bottomOffset={sectionNavBarInset(theme, { compact })}
+          bottomOffset={sectionNavSheetOffset(theme, primary !== undefined, { compact })}
         />
       ) : null}
     </>

package/src/components/navigation/SectionNav/SectionNav.md

@@ -19,7 +19,7 @@ action, the sheets, and the rail's sections.
 
 | `layout` | draws | menus |
 |---|---|---|
-| `bar` | a bottom row: the destinations, `more` last, `primary` raised in the middle | open as bottom sheets over the page, stopping above the bar |
+| `bar` | a bottom row: the destinations, `more` last, `primary` raised in the middle | open as bottom sheets over the page, stopping above the bar — and above the raised `primary` when there is one, so it never draws over a sheet |
 | `rail` | a vertical list: `back`, `heading`, a `primary` menu as one button, the destinations, then `more` | `primary` opens as a menu anchored to its button (named by `title`); `more` is listed under its `title` |
 
 Which layout to use is the HOST's call. A bar beside a sidebar is two

package/src/components/navigation/SectionNav/SectionNav.primary.tsx

@@ -156,6 +156,19 @@ function RaisedCaption({ shown, label, inert }: { shown: boolean; label: string;
   );
 }
 
+/**
+ * How far the round button stands out of the bar's top edge, in design px — what
+ * the bar's sheets must clear so the button never draws over one (FUT-3399).
+ * The compact bar's smaller button stands out less.
+ */
+export const RAISED_LIFT = 18;
+export const RAISED_LIFT_COMPACT = 12;
+
+/** The lift of the round button on a bar of this form. */
+export function raisedLift(compact: boolean): number {
+  return compact ? RAISED_LIFT_COMPACT : RAISED_LIFT;
+}
+
 /** The round button: lifted half out of the bar, its icon turning while what it opened is open. */
 function raisedSx(theme: Theme, expanded: boolean, compact: boolean): SxProps<Theme> {
   const size = rem(theme, compact ? 40 : 52);
@@ -167,7 +180,7 @@ function raisedSx(theme: Theme, expanded: boolean, compact: boolean): SxProps<Th
     width: size,
     height: size,
     // Lifted half out of the bar: the one control that is not a place.
-    marginTop: rem(theme, compact ? -12 : -18),
+    marginTop: rem(theme, -raisedLift(compact)),
     borderRadius: '50%',
     display: 'flex',
     alignItems: 'center',

package/dist/chunk-23LPXHR2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.bar.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';\nimport { useState, type ElementType, type ReactNode } from 'react';\n\nimport type { SectionNavCopy } from '../../../copy';\nimport { stackedOverlayZIndex } from '../../../tokens/layers';\nimport { rem } from '../../../tokens/scales';\n\nimport { barSlots, destinationState, isMenu, menuActive, menuCount, type BarSlot } from './SectionNav.helpers';\nimport {\n  Box,\n  CONTROL_RESET,\n  CountedIcon,\n  NOT_LIVE,\n  SlotIcon,\n  controlProps,\n  useMounted,\n  destinationControl,\n  focusRing,\n} from './SectionNav.parts';\nimport { RaisedActionButton } from './SectionNav.primary';\nimport { SectionNavSheet } from './SectionNav.sheet';\nimport type { SectionNavAction, SectionNavBadge, SectionNavDestination, SectionNavMenu, SectionNavProps } from './SectionNav.types';\n\n/** Which of the bar's two menus is open, if any. */\ntype OpenMenu = 'primary' | 'more' | null;\n\n/**\n * The bar's height above the safe area — tall enough for an icon over a label;\n * a compact bar holds the icon alone.\n */\nconst barHeight = (theme: Parameters<typeof rem>[0], compact = false): string => rem(theme, compact ? 48 : 60);\n\n/** How the bar is drawn — `compact` is `SectionNavProps.compact`. */\nexport interface SectionNavBarOptions {\n  compact?: boolean;\n}\n\n/**\n * The bar's full height on screen, the safe area included — where its sheets\n * stop, and what a host reserves at the foot of its content so nothing it\n * floats (a toast, a receipt) lands under the bar.\n */\nexport function sectionNavBarInset(theme: Parameters<typeof rem>[0], options: SectionNavBarOptions = {}): string {\n  return `calc(${barHeight(theme, options.compact === true)} + env(safe-area-inset-bottom))`;\n}\n\n/**\n * One slot: icon over label, a count on the icon.\n *\n * `current` is the page the viewer is on and is what `aria-current` reports —\n * a link's claim only; an action slot that is ON says so with `aria-pressed`,\n * which arrives in `control`. `lit` is only how the slot looks, and goes out\n * while a sheet is open so the bar shows where the thumb is. Opening a sheet\n * is `aria-expanded`'s to say.\n *\n * A destination is a link or an action; the \"more\" slot is a button that\n * opens its sheet. Either way the whole slot is the target, so a thumb landing\n * on the label lands on the control. A `disabled` slot is a disabled button,\n * dimmed — the act is still where the hand expects it. A `loading` or\n * `dimmed` slot is drawn the same and stays focusable (`aria-disabled`).\n */\nfunction Slot({\n  label,\n  icon,\n  count,\n  current,\n  lit,\n  copy,\n  testId,\n  control,\n  expanded,\n  loading = false,\n  compact = false,\n}: {\n  label: string;\n  icon: ReactNode;\n  count: SectionNavBadge | undefined;\n  current: boolean;\n  lit: boolean;\n  copy: SectionNavCopy;\n  testId: string;\n  control: Record<string, unknown>;\n  expanded?: boolean;\n  loading?: boolean;\n  /** Icon only: the label stays the slot's name, out of sight, and its tooltip. */\n  compact?: boolean;\n}): React.JSX.Element {\n  const theme = useTheme();\n  const animate = useMounted();\n  return (\n    <Box\n      {...control}\n      title={compact ? label : undefined}\n      aria-current={current ? 'page' : undefined}\n      aria-expanded={expanded}\n      aria-busy={loading || undefined}\n      data-lit={lit ? 'true' : undefined}\n      data-testid={testId}\n      sx={slotSx(theme, lit, compact)}\n    >\n      <CountedIcon\n        icon={\n          <Box component=\"span\" data-slot-pill=\"\" sx={pillSx(theme)}>\n            <SlotIcon icon={icon} loading={loading} />\n          </Box>\n        }\n        count={count}\n        label={copy.badge}\n        attentionLabel={copy.attention}\n        testId={`${testId}-badge`}\n      />\n      <Typography\n        component=\"span\"\n        variant=\"caption\"\n        sx={{\n          maxWidth: '100%',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          whiteSpace: 'nowrap',\n          lineHeight: 1.3,\n          fontWeight: lit ? 700 : 600,\n          color: lit ? 'text.primary' : 'inherit',\n          ...labelFoldSx(theme, compact, animate),\n        }}\n      >\n        {label}\n      </Typography>\n    </Box>\n  );\n}\n\n/**\n * The label folding away in a compact bar: it shrinks to no height and fades\n * while the bar shrinks, rather than leaving in one frame. Never `display:\n * none` — it is still the slot's accessible name. With reduced motion it\n * simply goes.\n */\nfunction labelFoldSx(theme: Theme, compact: boolean, animate: boolean): Record<string, unknown> {\n  return {\n    maxHeight: compact ? 0 : rem(theme, 24),\n    opacity: compact ? 0 : 1,\n    transition: animate\n      ? theme.transitions.create(['max-height', 'opacity'], { duration: theme.transitions.duration.shorter })\n      : 'none',\n    '@media (prefers-reduced-motion: reduce)': { transition: 'none' },\n  };\n}\n\n/** The pill behind a slot's icon — tinted while the slot is lit. */\nfunction pillSx(theme: Theme): SxProps<Theme> {\n  return {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    px: 1.75,\n    py: 0.25,\n    borderRadius: rem(theme, 999),\n    transition: theme.transitions.create('background-color', { duration: theme.transitions.duration.shorter }),\n  };\n}\n\n/** A slot's look: icon over label, a pill behind the lit icon, dimmed when disabled. */\nfunction slotSx(theme: Theme, lit: boolean, compact: boolean): SxProps<Theme> {\n  return {\n    ...CONTROL_RESET,\n    ...focusRing(theme),\n    flex: 1,\n    minWidth: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: compact ? 0 : 0.25,\n    position: 'relative',\n    color: lit ? 'primary.main' : 'text.secondary',\n    // The current slot is marked by more than its colour: a tinted pill behind\n    // its icon and a bolder label, so the state survives a colour-blind reading.\n    '&[data-lit=\"true\"] [data-slot-pill]': { bgcolor: alpha(theme.palette.primary.main, 0.14) },\n    '& svg': { fontSize: rem(theme, 22) },\n    [NOT_LIVE]: { color: 'text.disabled' },\n  } as SxProps<Theme>;\n}\n\n/** What every slot kind is handed: the bar's open state and how to change it. */\ninterface SlotContext {\n  open: OpenMenu;\n  toggle: (menu: Exclude<OpenMenu, null>) => void;\n  close: () => void;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  dataTestId: string;\n  compact: boolean;\n}\n\n/** The raised button: an action runs on tap; a menu opens its sheet. */\nfunction PrimarySlot({\n  primary,\n  context,\n}: {\n  primary: SectionNavMenu | SectionNavAction;\n  context: SlotContext;\n}): React.JSX.Element {\n  const testId = primary.dataTestId ?? `${context.dataTestId}-primary`;\n  if (!isMenu(primary)) {\n    return (\n      <RaisedActionButton\n        label={primary.label}\n        icon={primary.icon}\n        captioned\n        compact={context.compact}\n        disabled={primary.disabled}\n        loading={primary.loading}\n        dataTestId={testId}\n        onClick={() => {\n          context.close();\n          primary.onSelect();\n        }}\n      />\n    );\n  }\n  return (\n    <RaisedActionButton\n      label={primary.label}\n      icon={primary.icon}\n      open={context.open === 'primary'}\n      closeLabel={context.copy.close}\n      compact={context.compact}\n      disabled={primary.disabled}\n      dataTestId={testId}\n      onClick={() => context.toggle('primary')}\n    />\n  );\n}\n\n/** The \"more\" slot: a button that opens its sheet, carrying its entries' counts. */\nfunction MoreSlot({ more, context }: { more: SectionNavMenu; context: SlotContext }): React.JSX.Element {\n  const { open } = context;\n  return (\n    <Slot\n      label={more.label}\n      icon={more.icon}\n      count={menuCount(more)}\n      current={false}\n      lit={open === 'more' || (open === null && menuActive(more))}\n      expanded={open === 'more'}\n      copy={context.copy}\n      testId={more.dataTestId ?? `${context.dataTestId}-more`}\n      compact={context.compact}\n      control={controlProps({\n        href: undefined,\n        linkComponent: context.linkComponent,\n        inert: more.disabled === true,\n        onClick: () => context.toggle('more'),\n      })}\n    />\n  );\n}\n\n/** A destination: a link, or an action slot (a toggle when it carries `active`). */\nfunction DestinationSlot({\n  destination,\n  context,\n}: {\n  destination: SectionNavDestination;\n  context: SlotContext;\n}): React.JSX.Element {\n  const { current, lit } = destinationState(destination);\n  return (\n    <Slot\n      label={destination.label}\n      icon={destination.icon}\n      count={destination.badge}\n      current={current}\n      lit={context.open === null && lit}\n      copy={context.copy}\n      testId={destination.dataTestId ?? `${context.dataTestId}-dest-${destination.id}`}\n      loading={destination.loading === true}\n      compact={context.compact}\n      control={destinationControl(destination, context.linkComponent, () => {\n        context.close();\n        destination.onSelect?.();\n      })}\n    />\n  );\n}\n\n/** One slot of the bar, whichever kind it is. */\nfunction BarSlotView({\n  slot,\n  primary,\n  more,\n  context,\n}: {\n  slot: BarSlot;\n  primary: SectionNavMenu | SectionNavAction | undefined;\n  more: SectionNavMenu | undefined;\n  context: SlotContext;\n}): React.JSX.Element | null {\n  if (slot.kind === 'primary') return primary ? <PrimarySlot primary={primary} context={context} /> : null;\n  if (slot.kind === 'more') return more ? <MoreSlot more={more} context={context} /> : null;\n  return <DestinationSlot destination={slot.destination} context={context} />;\n}\n\n/** The bar's own box: docked, a hairline on top, raised over the backdrop only while its sheet is open. */\nfunction barSx(theme: Theme, sheetOpen: boolean, compact: boolean, animate: boolean): SxProps<Theme> {\n  return {\n    flex: 'none',\n    display: 'flex',\n    alignItems: 'stretch',\n    boxSizing: 'border-box',\n    height: sectionNavBarInset(theme, { compact }),\n    // Folding to icons and back is a change of height the eye follows;\n    // with reduced motion it simply happens.\n    transition: animate ? theme.transitions.create('height', { duration: theme.transitions.duration.shorter }) : 'none',\n    '@media (prefers-reduced-motion: reduce)': { transition: 'none' },\n    paddingBottom: 'env(safe-area-inset-bottom)',\n    borderTop: `1px solid ${theme.palette.divider}`,\n    bgcolor: 'background.paper',\n    // Above the backdrop ONLY while one of its own sheets is open, so the\n    // primary button can close what it opened. Raised all the time it\n    // would sit over every dialog the page opens, and on a small phone a\n    // dialog's own footer is exactly where the bar is. `stackedOverlayZIndex`,\n    // not `zIndex.modal + 1`: a host lifting a bottom Drawer clear of a\n    // stacked sheet catches this bar's OWN sheets too.\n    position: 'relative',\n    zIndex: sheetOpen ? stackedOverlayZIndex(theme) + 1 : 'auto',\n  } as SxProps<Theme>;\n}\n\n/** The phone layout: a bottom bar, with its menus as bottom sheets. */\nexport function SectionNavBar({\n  label,\n  destinations,\n  primary,\n  more,\n  linkComponent,\n  copy,\n  dataTestId,\n  compact = false,\n}: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> &\n  Pick<SectionNavProps, 'primary' | 'more' | 'compact'> & { linkComponent: ElementType | undefined }): React.JSX.Element {\n  const sheetMenu = isMenu(primary) ? primary : undefined;\n  const theme = useTheme();\n  const animate = useMounted();\n  const [open, setOpen] = useState<OpenMenu>(null);\n  const toggle = (menu: Exclude<OpenMenu, null>): void => setOpen((current) => (current === menu ? null : menu));\n  const close = (): void => setOpen(null);\n\n  return (\n    <>\n      <Box\n        component=\"nav\"\n        aria-label={label}\n        data-testid={dataTestId}\n        sx={barSx(theme, open !== null, compact, animate)}\n      >\n        {barSlots(destinations, more !== undefined, primary !== undefined).map((slot) => (\n          <BarSlotView\n            key={slot.kind === 'destination' ? `dest-${slot.destination.id}` : `menu-${slot.kind}`}\n            slot={slot}\n            primary={primary}\n            more={more}\n            context={{ open, toggle, close, linkComponent, copy, dataTestId, compact }}\n          />\n        ))}\n      </Box>\n      {sheetMenu ? (\n        <SectionNavSheet\n          menu={sheetMenu}\n          open={open === 'primary'}\n          onClose={close}\n          linkComponent={linkComponent}\n          copy={copy}\n          testId={`${dataTestId}-primary-sheet`}\n          bottomOffset={sectionNavBarInset(theme, { compact })}\n        />\n      ) : null}\n      {more ? (\n        <SectionNavSheet\n          menu={more}\n          open={open === 'more'}\n          onClose={close}\n          linkComponent={linkComponent}\n          copy={copy}\n          testId={`${dataTestId}-more-sheet`}\n          bottomOffset={sectionNavBarInset(theme, { compact })}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-2ZHF5VE4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Input/Input.tsx"],"sourcesContent":["import CircularProgress from '@mui/material/CircularProgress/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { INPUT_LOADING } from './Input.metrics';\nimport { TextFieldSlim } from './text-field-slim';\n\nimport {\n  filledStyles,\n  floatingLabelStyles,\n  glowStyles,\n  inputBaseStyles,\n  inputRadiusStyles,\n  muiVariantFor,\n  outlinedStyles,\n  pulseStyles,\n  SIZE_MAP,\n} from './Input.styles';\nimport type { InputProps } from './Input.types';\nimport { splitTestId } from '../../../platform/test-id';\nimport { fieldControlStyles } from '../../../tokens/field-height';\nimport { rem } from '../../../tokens/relative';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * `TextFieldSlim`, not `TextField` — see `text-field-slim.tsx`. MUI's own\n * `TextField` imports `Select` unconditionally, and through it `Menu`,\n * `Popover`, `Modal` and seven more component modules, so every screen with one\n * text box shipped a dropdown it can never render. Same composition, same DOM,\n * same prop routing; the select branch is the only thing missing.\n */\nconst StyledTextField = styled(TextFieldSlim, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'fieldSize', 'floating', 'glow', 'pulse', 'loading'].includes(prop as string),\n})<{\n  customVariant?: InputProps['variant'];\n  fieldSize: SizeValue;\n  floating?: boolean;\n  glow?: boolean;\n  pulse?: boolean;\n  loading?: boolean;\n}>(({ theme, customVariant, fieldSize, floating, glow, pulse, loading }) => ({\n  position: 'relative',\n  // The theme's field height for this size (outlined family, one line).\n  ...fieldControlStyles(theme, fieldSize),\n  opacity: loading ? INPUT_LOADING.opacity : 1,\n\n  ...(glow ? glowStyles(theme) : {}),\n  ...(pulse ? pulseStyles(theme, fieldSize) : {}),\n  ...(floating ? floatingLabelStyles(theme) : {}),\n\n  '& .MuiInputBase-root': {\n    transition: 'all 0.3s ease',\n    ...inputRadiusStyles(theme, customVariant),\n    ...inputBaseStyles(theme, customVariant),\n  },\n\n  '& .MuiOutlinedInput-root': outlinedStyles(theme),\n  '& .MuiFilledInput-root': filledStyles(theme),\n}));\n\n/** Only one adornment shows at a time: the spinner replaces the caller's while loading. */\nconst EndAdornment: React.FC<{ loading: boolean; endAdornment?: React.ReactNode }> = ({\n  loading,\n  endAdornment,\n}) => {\n  const theme = useTheme();\n  if (loading) {\n    return (\n      <InputAdornment position=\"end\">\n        <CircularProgress size={rem(theme, INPUT_LOADING.spinnerSize)} />\n      </InputAdornment>\n    );\n  }\n\n  if (!endAdornment) return null;\n\n  return <InputAdornment position=\"end\">{endAdornment}</InputAdornment>;\n};\n\n/** While loading the field is inert: no clicks, and disabled to assistive tech. */\nconst interactionProps = (\n  loading: boolean,\n  onClick: InputProps['onClick'],\n  disabled?: boolean,\n) => ({\n  disabled: loading || disabled,\n  onClick: loading ? undefined : onClick,\n});\n\n/**\n * The ARIA that describes the field has to sit on the `<input>`: the text\n * field puts every attribute it does not recognise on its root `FormControl`,\n * a `<div>` with no role, where a screen reader never reads it.\n *\n * `aria-label` has ridden `inputProps` since FUT-755. `aria-describedby` and\n * `aria-busy` fell through to the div until FUT-2619, so CepField's input\n * pointed at nothing while its lookup status lived in a live region beside it.\n *\n * `inputProps` are spread onto the `<input>` AFTER the `aria-describedby` MUI\n * writes for helper text, so a caller's ids REPLACE the helper text's: MUI's\n * `TextField` on its own keeps only one of the two. This joins both, helper\n * text first. The helper id is MUI's `<id>-helper-text` (the parity test pins\n * that spelling), which is why the field's id is fixed here rather than left\n * to the text field.\n */\nfunction inputAriaOf(a: {\n  id: string;\n  helperText: React.ReactNode;\n  label?: string;\n  describedBy?: string;\n  busy?: InputProps['aria-busy'];\n}): Record<string, unknown> {\n  const describedBy = [a.helperText ? `${a.id}-helper-text` : undefined, a.describedBy]\n    .filter(Boolean)\n    .join(' ');\n  return {\n    ...(a.label === undefined ? {} : { 'aria-label': a.label }),\n    ...(a.describedBy === undefined ? {} : { 'aria-describedby': describedBy }),\n    ...(a.busy === undefined ? {} : { 'aria-busy': a.busy }),\n  };\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      variant = 'outlined',\n      size = 'md',\n      label,\n      error,\n      helperText,\n      startAdornment,\n      endAdornment,\n      fullWidth = true,\n      floating = false,\n      glow = false,\n      pulse = false,\n      loading = false,\n      onClick,\n      onFocus,\n      onBlur,\n      'aria-label': ariaLabel,\n      'aria-describedby': ariaDescribedBy,\n      'aria-busy': ariaBusy,\n      inputProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { testId: dataTestId, rest: props } = splitTestId(rest);\n    const generatedId = React.useId();\n    const id = props.id ?? generatedId;\n    return (\n      <StyledTextField\n        ref={ref}\n        variant={muiVariantFor(variant)}\n        customVariant={variant}\n        fieldSize={size}\n        floating={floating}\n        glow={glow}\n        pulse={pulse}\n        loading={loading}\n        label={label}\n        error={error}\n        helperText={helperText}\n        fullWidth={fullWidth}\n        {...interactionProps(loading, onClick, props.disabled)}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        /*\n         * `aria-label` has to ride `inputProps` to reach the `<input>` (FUT-755).\n         * Spread with the rest it lands on the FormControl DIV that the text\n         * field renders as its root, which carries no role — so the field kept\n         * no accessible name, and a source grep saying \"this input is labelled\"\n         * disagreed with the DOM. The reports search box and the block-title\n         * inputs were both named in source and anonymous to a screen reader.\n         * `aria-describedby` and `aria-busy` are the same case: `inputAriaOf`.\n         */\n        inputProps={{\n          'data-testid': dataTestId,\n          ...inputProps,\n          ...inputAriaOf({ id, helperText, label: ariaLabel, describedBy: ariaDescribedBy, busy: ariaBusy }),\n        }}\n        InputProps={{\n          startAdornment: startAdornment && (\n            <InputAdornment position=\"start\">{startAdornment}</InputAdornment>\n          ),\n          endAdornment: <EndAdornment loading={loading} endAdornment={endAdornment} />,\n        }}\n        {...SIZE_MAP[size]}\n        {...props}\n        id={id}\n      />\n    );\n  },\n);\n\nInput.displayName = 'Input';\n"],"mappings":"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","names":[]}

package/dist/chunk-EQK3K65G.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/CepField/CepField.tsx"],"sourcesContent":["'use client';\n\nimport type { CepFieldCopy } from \"../../../copy\";\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { cepDigits, formatCep, isValidCep } from '@12-apps/forms-core';\n\nimport { FormControl, FormLabel, FormMessage } from '../Form';\nimport { Input } from '../Input';\nimport type { CepAddress, CepFieldProps, CepLookupStatus } from './CepField.types';\n\n/** Everything {@link useCepLookup} needs, so the hook signature stays flat. */\ninterface LookupOptions {\n  digits: string;\n  complete: boolean;\n  disabled: boolean;\n  debounceMs: number;\n  onLookup?: (cep: string) => Promise<CepAddress | null>;\n  onResolved?: (address: CepAddress) => void;\n  onNotFound?: () => void;\n}\n\n/**\n * Debounced, race-safe CEP resolution.\n *\n * Two guards earn their keep here: a monotonic sequence id, bumped\n * synchronously on every new query, so a slow response for a since-edited CEP\n * can never land; and a \"last queried\" marker, so re-rendering (or the caller\n * re-masking the same value) never re-hits the provider.\n */\nfunction useCepLookup({\n  digits,\n  complete,\n  disabled,\n  debounceMs,\n  onLookup,\n  onResolved,\n  onNotFound,\n}: LookupOptions): CepLookupStatus {\n  const [status, setStatus] = useState<CepLookupStatus>('idle');\n  const lastQueriedRef = useRef('');\n  const seqRef = useRef(0);\n  // Latest callbacks, read at call time — keeps them out of the effect deps so\n  // an inline arrow from the caller doesn't re-trigger the lookup every render.\n  const lookupRef = useRef(onLookup);\n  const resolvedRef = useRef(onResolved);\n  const notFoundRef = useRef(onNotFound);\n  lookupRef.current = onLookup;\n  resolvedRef.current = onResolved;\n  notFoundRef.current = onNotFound;\n\n  useEffect(() => {\n    if (!complete || disabled || !lookupRef.current) {\n      // Editing away from a complete CEP drops any stale status and forgets the\n      // last query, so re-typing the same CEP resolves again.\n      seqRef.current += 1;\n      setStatus('idle');\n      lastQueriedRef.current = '';\n      return;\n    }\n    if (lastQueriedRef.current === digits) return;\n\n    const mySeq = (seqRef.current += 1);\n    const handle = setTimeout(() => {\n      lastQueriedRef.current = digits;\n      setStatus('loading');\n      void (async () => {\n        // A failing lookup is treated exactly like \"not found\" — the user types\n        // the address instead. Never surfaced as a crash. Going through\n        // `Promise.resolve().then` rather than calling directly covers the two\n        // failure modes an `await … .catch()` misses: a lookup that throws\n        // SYNCHRONOUSLY, and one that returns something other than a promise.\n        const address = await Promise.resolve()\n          .then(() => lookupRef.current?.(digits))\n          .catch(() => null);\n        if (seqRef.current !== mySeq) return;\n        setStatus(address ? 'found' : 'notfound');\n        // A miss is reported too, so a caller that filled from a PREVIOUS CEP\n        // can undo it rather than leaving that address under this CEP.\n        if (address) resolvedRef.current?.(address);\n        else notFoundRef.current?.();\n      })();\n    }, debounceMs);\n\n    return () => clearTimeout(handle);\n  }, [digits, complete, disabled, debounceMs]);\n\n  return status;\n}\n\n/**\n * The lookup outcome as a live region, so screen readers announce it without\n * stealing focus. Silent while idle, and while the caller is showing its own\n * validation error (which would otherwise stack two messages).\n */\nfunction CepStatus({\n  status,\n  testId,\n  suppressed,\n  copy,\n}: {\n  status: CepLookupStatus;\n  testId: string;\n  suppressed: boolean;\n  copy: CepFieldCopy;\n}): React.ReactElement {\n  const visible = !suppressed && status !== 'idle';\n  return (\n    <span id={`${testId}-status`} role=\"status\" aria-live=\"polite\">\n      {visible && (\n        <FormMessage error={status === 'notfound'} dataTestId={`${testId}-${status}`}>\n          {copy[status as Exclude<CepLookupStatus, 'idle'>]}\n        </FormMessage>\n      )}\n    </span>\n  );\n}\n\n/**\n * A CEP input that fills the rest of the address in.\n *\n * The pattern every Brazilian form has used for twenty years: type eight\n * digits, and logradouro/bairro/cidade/UF arrive on their own. This is the\n * reusable half — masking, validation, debouncing, race-safety and status —\n * with the actual lookup injected via `onLookup`, so the same component serves\n * a supplier form, a store-location form or a delivery checkout without\n * knowing anything about providers or auth.\n *\n * Resolution is best-effort by design. A provider outage, an unknown CEP or a\n * timeout leaves the field exactly as usable as a plain text input — the user\n * types the address themselves. Autofill never blocks.\n *\n * @example\n * ```tsx\n * <CepField\n *   value={cep}\n *   onChange={setCep}\n *   onLookup={(c) => fetch(`/api/…/lookup/cep/${c}`).then((r) => r.json()).then((b) => b.data)}\n *   onResolved={(a) => { setStreet(a.street ?? ''); setCity(a.city ?? ''); }}\n * />\n * ```\n */\nexport function CepField({\n  value,\n  onChange,\n  onLookup,\n  onResolved,\n  onNotFound,\n  label = 'CEP',\n  placeholder = '00000-000',\n  error,\n  disabled = false,\n  debounceMs = 500,\n  name = 'postalCode',\n  dataTestId,\n  copy,\n}: CepFieldProps): React.ReactElement {\n  const testId = dataTestId ?? `cep-field-${name}`;\n\n  const status = useCepLookup({\n    digits: cepDigits(value),\n    complete: isValidCep(value),\n    disabled,\n    debounceMs,\n    onLookup,\n    onResolved,\n    onNotFound,\n  });\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => onChange(formatCep(event.target.value)),\n    [onChange],\n  );\n\n  return (\n    <FormControl fullWidth>\n      {label && (\n        <FormLabel htmlFor={name} error={Boolean(error)}>\n          {label}\n        </FormLabel>\n      )}\n      <Input\n        id={name}\n        name={name}\n        type=\"text\"\n        inputMode=\"numeric\"\n        autoComplete=\"postal-code\"\n        placeholder={placeholder}\n        value={value}\n        error={Boolean(error)}\n        disabled={disabled}\n        loading={status === 'loading'}\n        onChange={handleChange}\n        data-testid={testId}\n        aria-describedby={`${testId}-status`}\n        aria-busy={status === 'loading'}\n      />\n      {error && (\n        <FormMessage error dataTestId={`${testId}-message`}>\n          {error}\n        </FormMessage>\n      )}\n      <CepStatus status={status} testId={testId} suppressed={Boolean(error)} copy={copy} />\n    </FormControl>\n  );\n}\n\nexport default CepField;\n"],"mappings":"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","names":[]}