@12-apps/ui 6.73.1 → 6.74.1

package/dist/types/components/form/Input/outlined/index.d.ts

@@ -0,0 +1,24 @@
+import type { InputComponent } from '../Input.factory';
+import type { InputProps as GenericInputProps, InputVariant } from '../Input.types';
+/**
+ * The house variants MUI draws as `outlined`: `muiVariantFor` maps `glass` and
+ * `gradient` onto an outline (`Input.metrics.ts`). `filled` and `underline`
+ * need the inputs this entry exists to leave out, so they are a type error here
+ * rather than a silent fallback.
+ */
+export type OutlinedInputVariant = Extract<InputVariant, 'outlined' | 'glass' | 'gradient'>;
+export type InputProps = Omit<GenericInputProps, 'variant'> & {
+    variant?: OutlinedInputVariant;
+};
+/**
+ * `@12-apps/ui/form/Input/outlined` — the same `Input`, with the same props,
+ * styles and DOM, built on a field that imports `OutlinedInput` and no other
+ * MUI input (FUT-1054). For a control that only ever renders the outlined
+ * family and sits where its bytes matter: a storefront header, a first screen.
+ *
+ * Not re-exported from `form/Input` or the `form` barrel: a second `Input`
+ * there would collide. Reach it only through this subpath.
+ */
+export declare const Input: InputComponent<InputProps>;
+export type { InputSize } from '../Input.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/form/Input/outlined/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/Input/outlined/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,IAAI,iBAAiB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGpF;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,YAAY,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC;AAE5F,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAAE,CAAC;AAEjG;;;;;;;;GAQG;AACH,eAAO,MAAM,KAAK,EAAyC,cAAc,CAAC,UAAU,CAAC,CAAC;AAEtF,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/types/components/form/Input/outlined/text-field-slim-outlined.d.ts

@@ -0,0 +1,10 @@
+import type { TextFieldSlimComponent } from '../text-field-slim.factory';
+/**
+ * `TextFieldSlim` pinned to MUI's outlined input (FUT-1054). The generic field
+ * picks its input from a three-way table at runtime, so a bundler has to keep
+ * `FilledInput` and `Input` for every caller; this one imports `OutlinedInput`
+ * alone. Every variant it can be asked for renders outlined, which is what the
+ * outlined `Input` entry ever asks for.
+ */
+export declare const OutlinedTextFieldSlim: TextFieldSlimComponent;
+//# sourceMappingURL=text-field-slim-outlined.d.ts.map

package/dist/types/components/form/Input/outlined/text-field-slim-outlined.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field-slim-outlined.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/Input/outlined/text-field-slim-outlined.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEzE;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,EAAE,sBAAiE,CAAC"}

package/dist/types/components/form/Input/text-field-slim.d.ts

@@ -1,41 +1,9 @@
-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';
-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>;
-}
-export declare const TextFieldSlim: React.ForwardRefExoticComponent<Omit<TextFieldSlimProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+import type { TextFieldSlimComponent } from './text-field-slim.factory';
+export type { TextFieldSlimProps } from './text-field-slim.factory';
+/**
+ * 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).
+ */
+export declare const TextFieldSlim: TextFieldSlimComponent;
 //# sourceMappingURL=text-field-slim.d.ts.map

package/dist/types/components/form/Input/text-field-slim.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field-slim.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Input/text-field-slim.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,KAAK,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAChF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,KAAK,MAAM,OAAO,CAAC;AAmC1B,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,cAAc,CAAC;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IACzE,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IAC5E,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IAC1E,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC,aAAa,GAAG,gBAAgB,GAAG,kBAAkB,CAAC,CAAC;IAC5E;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,uBAAuB,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAC3C,mBAAmB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CACpD;AA+GD,eAAO,MAAM,aAAa,wGA+BzB,CAAC"}
+{"version":3,"file":"text-field-slim.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Input/text-field-slim.tsx"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAExE,YAAY,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAQpE;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,sBAE3B,CAAC"}

package/dist/types/components/form/Input/text-field-slim.factory.d.ts

@@ -0,0 +1,61 @@
+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';
+/** 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>>;
+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>;
+}
+/**
+ * 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 declare function createTextFieldSlim(inputFor: InputForVariant): TextFieldSlimComponent;
+//# sourceMappingURL=text-field-slim.factory.d.ts.map

package/dist/types/components/form/Input/text-field-slim.factory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field-slim.factory.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Input/text-field-slim.factory.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,KAAK,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAChF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,sEAAsE;AACtE,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEjE;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,eAAe,KAAK,KAAK,CAAC,WAAW,CAAC;AAE9E,2EAA2E;AAC3E,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,yBAAyB,CAClE,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CACzD,CAAC;AA2BF,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,cAAc,CAAC;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IACzE,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IAC5E,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IAC1E,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC,aAAa,GAAG,gBAAgB,GAAG,kBAAkB,CAAC,CAAC;IAC5E;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,uBAAuB,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAC3C,mBAAmB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CACpD;AA+GD;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,eAAe,GAAG,sBAAsB,CAiCrF"}

package/dist/user-avatar.js

@@ -1,18 +1,18 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-Q7BGMLCX.js";
+} from "./chunk-3FDSXSEP.js";
 import "./chunk-UDQSIRAP.js";
-import "./chunk-J2RUDZVJ.js";
-import "./chunk-3ZVUNSFF.js";
-import "./chunk-EOQ6EKTS.js";
-import "./chunk-6ZZGK5DT.js";
+import "./chunk-KARMRTTM.js";
+import "./chunk-7XSCEHGA.js";
 import "./chunk-MTEQEPNY.js";
+import "./chunk-6ZZGK5DT.js";
+import "./chunk-3ZVUNSFF.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";
-import "./chunk-W2RXXF7K.js";
-import "./chunk-PLB6WWXW.js";
+import "./chunk-4XBAEKQQ.js";
 import "./chunk-FKUYRQSP.js";
+import "./chunk-PLB6WWXW.js";
 import "./chunk-HDBP55R3.js";
 import "./chunk-BA4RHQ3B.js";
 import "./chunk-364NH2NY.js";

package/dist/utility/InfiniteScroll.js

@@ -1,9 +1,9 @@
 import "../chunk-H7NA4TXY.js";
 import {
   InfiniteScroll
-} from "../chunk-HNFZLXZI.js";
-import "../chunk-Y2X7LYIN.js";
+} from "../chunk-HBP2OU4Q.js";
 import "../chunk-5KNDAC24.js";
+import "../chunk-Y2X7LYIN.js";
 import "../chunk-YKCAJ2TN.js";
 import "../chunk-PZ5AY32C.js";
 export {

package/dist/utility/InstallPrompt.js

@@ -1,11 +1,11 @@
 import "../chunk-3QQVEYOR.js";
 import {
   InstallPrompt
-} from "../chunk-5ZOJLYD2.js";
-import "../chunk-GY62N32G.js";
+} from "../chunk-JE6RZ5L6.js";
 import {
   usePwaInstall
 } from "../chunk-5GMHJ7Y5.js";
+import "../chunk-GY62N32G.js";
 import "../chunk-WXYLH3QZ.js";
 import {
   PWA_INSTALL_AVAILABLE_EVENT,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.73.1",
+  "version": "6.74.1",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",
@@ -408,6 +408,10 @@
       "types": "./dist/types/components/form/Input/index.d.ts",
       "default": "./dist/form/Input.js"
     },
+    "./form/Input/outlined": {
+      "types": "./dist/types/components/form/Input/outlined/index.d.ts",
+      "default": "./dist/form/Input/outlined.js"
+    },
     "./form/InputOTP": {
       "types": "./dist/types/components/form/InputOTP/index.d.ts",
       "default": "./dist/form/InputOTP.js"

package/src/components/feedback/ConfirmAction/ConfirmAction.parts.tsx

@@ -1,11 +1,11 @@
 import type { ConfirmActionCopy } from "../../../copy";
 import Alert from '@mui/material/Alert/index.js';
 import Stack from '@mui/material/Stack/index.js';
-import TextField from '@mui/material/TextField/index.js';
 import Typography from '@mui/material/Typography/index.js';
 import React, { type ReactNode } from 'react';
 
 import { AlertDialog } from '../../data-display/AlertDialog';
+import { OutlinedTextFieldSlim } from '../../form/Input/outlined/text-field-slim-outlined';
 
 import type {
   ConfirmInitialFocus,
@@ -79,7 +79,13 @@ function TypeToConfirmField({
       <Typography variant="body2" color="text.secondary">
         {label ?? copy.typeToConfirm(expected)}
       </Typography>
-      <TextField
+      {/*
+       * The outlined slim field, not MUI's `TextField` (FUT-3429): same
+       * composition and DOM, but no `Select` branch, so a screen that can open
+       * this popup no longer ships `Select`, `Menu`, `MenuList`, `NativeSelect`
+       * and `List` for a box that only ever takes a word.
+       */}
+      <OutlinedTextFieldSlim
         size="small"
         value={value}
         disabled={disabled}

package/src/components/form/CepField/CepField.tsx

@@ -6,7 +6,9 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { cepDigits, formatCep, isValidCep } from '@12-apps/forms-core';
 
 import { FormControl, FormLabel, FormMessage } from '../Form';
-import { Input } from '../Input';
+// The outlined entry: CepField renders no variant, and the generic one would
+// ship MUI's FilledInput and Input to every screen with a CEP field (FUT-1054).
+import { Input } from '../Input/outlined';
 import type { CepAddress, CepFieldProps, CepLookupStatus } from './CepField.types';
 
 /** Everything {@link useCepLookup} needs, so the hook signature stays flat. */

package/src/components/form/Input/Input.factory.tsx

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

package/src/components/form/Input/Input.md

@@ -115,6 +115,26 @@ The Input component provides a flexible text input field with comprehensive vali
 />
 ```
 
+## The outlined entry: `@12-apps/ui/form/Input/outlined`
+
+The same `Input`, with the same props, styles and DOM, built on a field that imports MUI's `OutlinedInput` and no other MUI input (FUT-1054).
+
+The generic `@12-apps/ui/form/Input` chooses MUI's input at runtime from `variant`. A bundler therefore ships `OutlinedInput`, `FilledInput` and `Input` (about 7 KB raw for the last two) to every screen that renders one. The outlined entry ships only the first.
+
+```tsx
+import { Input } from '@12-apps/ui/form/Input/outlined';
+
+<Input type="search" size="sm" aria-label="Buscar produtos" />
+```
+
+**When to use it:** a control that only ever renders the outlined family (`outlined`, `glass` or `gradient`, the variants `muiVariantFor` draws as an outline), and that sits where its bytes matter: a storefront header, a first screen, or a library component such as `CepField`.
+
+**What it refuses:** `variant="filled"` and `variant="underline"` are type errors. They need the inputs this entry exists to leave out, so use the generic entry for them.
+
+**What stays the same:** `__tests__/outlined-entry.test.tsx` renders both entries from the same props and compares the DOM. `__tests__/outlined-reachability.test.ts` fails if `FilledInput` or MUI's `Input` becomes reachable from this entry or from `CepField`.
+
+**Reachable only through this subpath.** The entry is not re-exported from `form/Input` or from the `form` barrel, where a second `Input` would collide.
+
 ## Accessibility
 
 ### ARIA Attributes