@12-apps/ui 6.31.0 → 6.32.0

package/src/components/data-display/DataViews/data-views-range-pill.tsx

@@ -33,6 +33,8 @@ import {
 } from './data-views-range-values';
 import type { RangeFieldConfig, RangeValue } from './data-views-types';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
+import { fieldHeight } from '../../../tokens/field-height';
+import { fieldEdge } from '../../../tokens/field-edge';
 
 
 
@@ -206,7 +208,8 @@ function RangeTrigger<T extends Record<string, unknown>>({
   const inverted = isRangeInverted(value);
   // An INVERTED window gets its own tone rather than the ordinary "applied"
   // one: it is applied, and it matches nothing, and those are different states.
-  const tone = inverted ? 'error.main' : active ? 'primary.main' : 'divider';
+  // At rest the pill draws the one field border (`fieldEdge`).
+  const tone = inverted ? 'error.main' : active ? 'primary.main' : null;
   return (
     <Button
       variant="outlined"
@@ -228,7 +231,7 @@ function RangeTrigger<T extends Record<string, unknown>>({
       endIcon={<ChevronDownIcon sx={{ fontSize: 16 }} />}
       sx={{
         borderRadius: fieldRadiusPx,
-        height: 34,
+        height: fieldHeight,
         px: 1.5,
         maxWidth: 280,
         color: inverted ? 'error.main' : 'text.primary',
@@ -236,7 +239,7 @@ function RangeTrigger<T extends Record<string, unknown>>({
         fontSize: '0.8125rem',
         textTransform: 'none',
         whiteSpace: 'nowrap',
-        borderColor: tone,
+        borderColor: (theme) => tone ?? fieldEdge(theme),
         bgcolor: active ? 'action.selected' : 'background.paper',
         '&:hover': {
           borderColor: active ? tone : 'text.primary',

package/src/components/data-display/DataViews/data-views-search.tsx

@@ -15,6 +15,8 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { Box } from "../../../mui/Box";
 import { fieldRadiusPx } from "../../../tokens/field-radius";
 import { useDataViewsCopy } from "./data-views-copy-context";
+import { fieldHeight, fieldTextFieldStyles } from "../../../tokens/field-height";
+import { fieldEdge } from "../../../tokens/field-edge";
 
 /** How long the box waits after the last keystroke before it queries. */
 const SEARCH_DEBOUNCE_MS = 350;
@@ -170,7 +172,7 @@ export function InlineKeyword({
       // Takes the free space and gives it up first — step 3 of the ladder,
       // which needs no flag because flex does it (see `computeSplit`). The
       // corner is the theme's field radius, so the box matches the pills beside it.
-      sx={(theme) => ({ ...boxWidth(fill), "& .MuiOutlinedInput-root": { borderRadius: fieldRadiusPx(theme) } })}
+      sx={(theme) => ({ ...boxWidth(fill), ...fieldTextFieldStyles(theme) })}
     />
   );
 }
@@ -201,9 +203,11 @@ export function CollapsedSearch({
       data-testid={testId ? `${testId}-collapsed` : undefined}
       sx={{
         position: "relative",
+        width: fieldHeight,
+        height: fieldHeight,
         border: 1,
         borderRadius: fieldRadiusPx,
-        borderColor: active ? "primary.main" : "divider",
+        borderColor: (theme) => (active ? theme.palette.primary.main : fieldEdge(theme)),
         color: active ? "primary.main" : "text.secondary",
         bgcolor: active ? "action.selected" : "background.paper",
       }}

package/src/components/data-display/MapPreview/MapSearchBar.tsx

@@ -7,6 +7,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { fieldRadius } from '../../../tokens/field-radius';
+import { fieldControlStyles } from '../../../tokens/field-height';
 
 // Kept module-local: styled() components cannot be exported across a module
 // boundary here without tripping TS2742.
@@ -21,6 +22,7 @@ const SearchBar = styled(Box)(({ theme }) => ({
 }));
 
 const SearchField = styled(TextField)(({ theme }) => ({
+  ...fieldControlStyles(theme),
   '& .MuiOutlinedInput-root': {
     background: alpha(theme.palette.background.paper, 0.95),
     backdropFilter: 'blur(10px)',

package/src/components/form/AddressAutocomplete/AddressTextField.tsx

@@ -7,12 +7,14 @@ import React from 'react';
 import type { AddressAutocompleteProps } from './AddressAutocomplete.types';
 
 import { fieldEdge } from '../../../tokens/field-edge';
-import { fieldRadius, fieldRootStyles } from '../../../tokens/field-radius';
+import { fieldRadius } from '../../../tokens/field-radius';
+import { fieldControlStyles, fieldTextFieldStyles } from '../../../tokens/field-height';
 
 // Kept module-local on purpose: the inferred type of a styled() component cannot
 // be named across a module boundary here (TS2742), so the plain component below
 // is what the rest of the folder imports.
 const GlassTextField = styled(TextField)(({ theme }) => ({
+  ...fieldControlStyles(theme),
   '& .MuiOutlinedInput-root': {
     borderRadius: fieldRadius(theme),
     background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
@@ -35,7 +37,7 @@ const GlassTextField = styled(TextField)(({ theme }) => ({
 }));
 
 /** The plain variants: MUI's own field, on the theme's field radius. */
-const FieldTextField = styled(TextField)(({ theme }) => fieldRootStyles(theme));
+const FieldTextField = styled(TextField)(({ theme }) => fieldTextFieldStyles(theme));
 
 export type AddressTextFieldProps = Omit<TextFieldProps, 'variant'> & {
   addressVariant: AddressAutocompleteProps['variant'];

package/src/components/form/Autocomplete/Autocomplete.parts.tsx

@@ -16,7 +16,7 @@ import React from 'react';
 import { highlightLabel, type MatchMode } from './Autocomplete.helpers';
 import type { SuggestionItemState, SuggestionType } from './Autocomplete.types';
 import type { AutocompleteCopy } from '../../../copy';
-import { fieldRootStyles } from '../../../tokens/field-radius';
+import { fieldTextFieldStyles } from '../../../tokens/field-height';
 
 const StyledPopper = styled(Popper)(({ theme }) => ({
   zIndex: theme.zIndex.tooltip,
@@ -114,7 +114,7 @@ export function AutocompleteInput(props: AutocompleteInputProps): React.JSX.Elem
       <TextField
         ref={props.inputRef}
         fullWidth
-        sx={fieldRootStyles}
+        sx={fieldTextFieldStyles}
         value={props.inputValue}
         onChange={props.onChange}
         onKeyDown={props.onKeyDown}

package/src/components/form/Button/Button.native.tsx

@@ -27,7 +27,6 @@ import {
   GLASS_BORDER_ALPHA,
   GLOW_INNER_ALPHA,
   GLOW_RADIUS,
-  ICON_ONLY_PADDING,
   PULSE_ALPHA,
   PULSE_DURATION_MS,
   PULSE_SPREAD,
@@ -39,6 +38,8 @@ import type { ButtonProps, ButtonVariant } from './Button.types.native';
 import { renderTextChildren } from '../../../platform/text-children';
 import { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 import { useUiTheme } from '../../../provider/use-ui-theme.native';
+import { resolveFieldEdge } from '../../../tokens/field-edge.core';
+import { FIELD_BORDER_WIDTH, fieldHeightPx } from '../../../tokens/field-height.core';
 import { alpha } from '../../../tokens/color';
 import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
 import type { UiPaletteColor, UiTheme } from '../../../tokens/theme';
@@ -72,7 +73,15 @@ function paintFor(
   switch (variant) {
     case 'outline':
       return {
-        container: { backgroundColor: 'transparent', borderWidth: 1, borderColor: palette.main },
+        // A neutral outline rests on the one field border, as on the web.
+        container: {
+          backgroundColor: 'transparent',
+          borderWidth: FIELD_BORDER_WIDTH,
+          borderColor:
+            color === 'neutral'
+              ? resolveFieldEdge(theme.palette.divider, theme.palette.background.paper)
+              : palette.main,
+        },
         pressed: { backgroundColor: wash, borderColor: palette.dark },
         label: { color: palette.main },
       };
@@ -131,11 +140,15 @@ function disabledPaint(theme: UiTheme, variant: ButtonVariant): Paint {
 
 function sizeStyle(theme: UiTheme, size: SizeValue, iconOnly: boolean, hasIcon: boolean): ViewStyle {
   const metrics = BUTTON_SIZES[size];
+  // The theme's field height for the size, as on the web: a button stands
+  // level with the field beside it, and an icon-only one is that square.
+  const height = fieldHeightPx(theme.fieldHeight, size);
   if (iconOnly) {
-    return { padding: ICON_ONLY_PADDING[size], minWidth: 0 };
+    return { padding: 0, minWidth: height, minHeight: height };
   }
   return {
-    paddingVertical: metrics.paddingVertical,
+    minHeight: height,
+    paddingVertical: 0,
     paddingHorizontal: metrics.paddingHorizontal,
     minWidth: MIN_WIDTH,
     gap: hasIcon ? theme.spacing(BUTTON_ICON_GAP_UNITS) : undefined,

package/src/components/form/Button/Button.styles.ts

@@ -2,6 +2,7 @@ import { alpha, darken, keyframes, lighten } from '@mui/material/styles/index.js
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { BUTTON_SIZES, ICON_ONLY_PADDING as ICON_ONLY_PADDING_PX } from './Button.metrics';
+import { asFieldSize, fieldBorder, fieldHeight } from '../../../tokens/field-height';
 import { inkOver, px } from '../../../tokens/theme';
 
 // Define pulse animation globally
@@ -101,9 +102,21 @@ const iconOnlySize = (size: string): CSSObject => ({
   '& .MuiButton-startIcon, & .MuiButton-endIcon': { margin: 0 },
 });
 
-/** The size styles for a button, square when it carries nothing but an icon. */
-export const buttonSize = (size: string, iconOnly: boolean): CSSObject =>
-  iconOnly ? iconOnlySize(size) : (SIZE_MAP[size] ?? DEFAULT_SIZE);
+/**
+ * The size styles for a button, square when it carries nothing but an icon.
+ *
+ * The HEIGHT is the theme's field height for the size (`tokens/field-height`),
+ * so a button stands level with the field beside it: the vertical padding goes
+ * and the label is centred in a box at least that tall — a label that wraps
+ * still grows it. An icon-only button is that height on every side.
+ */
+export const buttonSize =
+  (size: string, iconOnly: boolean) =>
+  (theme: Theme): CSSObject => {
+    const height = fieldHeight(theme, asFieldSize(size));
+    if (iconOnly) return { ...iconOnlySize(size), padding: 0, minWidth: height, minHeight: height };
+    return { ...(SIZE_MAP[size] ?? DEFAULT_SIZE), minHeight: height, paddingTop: 0, paddingBottom: 0 };
+  };
 
 /**
  * MUI centres icons with a negative margin that fights our own padding, so the
@@ -199,10 +212,13 @@ const VARIANT_STYLES: Record<
       boxShadow: theme.shadows[8],
     },
   }),
-  outline: (_theme, palette) => ({
+  // A NEUTRAL outline is a field-row control ("Mais", "Exibir"), so it rests on
+  // the one field border; a coloured outline keeps its colour, which is the
+  // point of asking for one.
+  outline: (theme, palette, color) => ({
     backgroundColor: 'transparent',
     color: palette.main,
-    border: `1px solid ${palette.main}`,
+    border: color === 'neutral' ? fieldBorder(theme) : `1px solid ${palette.main}`,
     '&:hover': {
       backgroundColor: alpha(palette.main, 0.1),
       borderColor: palette.dark,

package/src/components/form/CategorySelect/CategoryPanelHead.tsx

@@ -13,6 +13,7 @@ import {
   pinnedSx,
 } from './CategorySelect.styles';
 import type { CategorySelectionChip } from './CategorySelect.types';
+import { fieldBorder, fieldHeight } from '../../../tokens/field-height';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 interface PanelHeadProps {
@@ -33,11 +34,10 @@ const searchFieldSx = {
   alignItems: 'center',
   '& input': {
     width: '100%',
-    height: 36,
+    height: fieldHeight,
     padding: '0 30px 0 32px',
     fontSize: 13,
-    border: '1px solid',
-    borderColor: 'divider',
+    border: fieldBorder,
     borderRadius: fieldRadiusPx,
     background: 'background.paper',
     color: 'text.primary',

package/src/components/form/CategorySelect/CategorySelect.styles.ts

@@ -2,6 +2,7 @@ import { alpha, type CSSObject, type Theme } from '@mui/material/styles/index.js
 
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
+import { fieldHeight } from '../../../tokens/field-height';
 
 /**
  * The prototype's METRICS, verbatim.
@@ -11,9 +12,9 @@ import { fieldRadiusPx } from '../../../tokens/field-radius';
  * a half-pixel type scale (13.5px rows, 1.5px checkbox borders) that an 8px
  * spacing grid cannot express without rounding the look away.
  *
- * The trigger's CORNER is the other exception: it is a field, so it takes the
- * theme's one field radius (`tokens/field-radius`) and lines up with the inputs
- * and filter pills it sits beside.
+ * The trigger's CORNER and HEIGHT are the other exception: it is a field, so it
+ * takes the theme's field radius and field height (`tokens/field-radius`,
+ * `tokens/field-height`) and lines up with the inputs and filter pills beside it.
  *
  * COLOURS are the deliberate exception — they come from the theme, because a
  * tenant can white-label the palette (a hard-coded indigo would survive the
@@ -22,7 +23,6 @@ import { fieldRadiusPx } from '../../../tokens/field-radius';
  * prototype's own values.
  */
 export const METRICS = {
-  triggerHeight: 38,
   panelWidth: 340,
   panelRadius: 14,
   listMaxHeight: 290,
@@ -56,7 +56,7 @@ export const triggerSx = (theme: Theme, selected: boolean, open: boolean): CSSOb
     display: 'flex',
     alignItems: 'center',
     gap: '8px',
-    height: METRICS.triggerHeight,
+    height: fieldHeight(theme),
     padding: '0 10px 0 12px',
     borderRadius: fieldRadiusPx(theme),
     border: `1px solid ${open || selected ? brand.edge : fieldEdge(theme)}`,

package/src/components/form/CreatableSelect/CreatableSelect.tsx

@@ -14,6 +14,7 @@ import type { SizeValue } from '../../../tokens/scales';
 
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
+import { fieldControlStyles } from '../../../tokens/field-height';
 
 /** Internal option shape: a real option, or the synthetic "create new" row. */
 interface InternalOption extends CreatableSelectOption {
@@ -111,7 +112,7 @@ function renderField(
       placeholder={field.placeholder}
       error={Boolean(field.error)}
       size={MUI_SIZE[field.size]}
-      sx={fieldSx}
+      sx={[fieldSx, (theme) => fieldControlStyles(theme, field.size)]}
       inputProps={{ ...params.inputProps, 'data-testid': `${field.dataTestId}-input` }}
       slotProps={{
         input: {

package/src/components/form/Input/Input.look.native.ts

@@ -46,7 +46,7 @@ const BORDER_SIDES: Record<InputVariant, 'all' | 'bottom'> = {
  * Whether the web draws this border on an absolutely positioned element.
  *
  * MUI's `notchedOutline` fieldset and the `::before` / `::after` underlines
- * cost no height — the field is 56px tall WITH its border. `glass` and
+ * cost no height — the field is the field height tall WITH its border. `glass` and
  * `gradient` instead put a real `border` on the input root, which does add to
  * the box, so the web field is 2px and 4px taller respectively. React Native
  * has only the second kind, so the first three compensate below.
@@ -158,7 +158,7 @@ export interface FieldLook {
  * adornments and one without.
  *
  * Where the web's border costs no height, the inset gives the border back its
- * width, so the box is the height MUI draws (56px medium, 40px small) and the
+ * width, so the box is the theme's field height (40px by default) and the
  * value does not shift by a pixel when the focused border thickens.
  */
 export function fieldLook(
@@ -167,7 +167,7 @@ export function fieldLook(
   size: SizeValue,
   state: FieldState,
 ): FieldLook {
-  const padding = inputPadding(variant, size);
+  const padding = inputPadding(variant, size, theme.fieldHeight);
   const width = borderWidthFor(variant, state.focused);
   const inset = BORDER_IS_FREE[variant] ? width : 0;
   const sides = BORDER_SIDES[variant];
@@ -218,14 +218,14 @@ export function labelStyle(theme: UiTheme, variant: InputVariant, size: SizeValu
     marginBottom: INPUT_LABEL.gap,
     // Aligned with the value it names: the web's floating label and the input
     // share one left inset (14px outlined, 12px filled, 0 standard).
-    marginLeft: inputPadding(variant, size).left,
+    marginLeft: inputPadding(variant, size, theme.fieldHeight).left,
   };
 }
 
 /**
  * `FormHelperText`: caption type, 3px below the field, inset 14px when
  * contained — and 4px below at MUI's `small` density, which `INPUT_MUI_SIZE`
- * selects for `xs` and `sm` (`FormHelperText.js`: `marginTop: 3`, then a
+ * selects for `xs`, `sm` and `md` (`FormHelperText.js`: `marginTop: 3`, then a
  * `size: 'small'` variant raising it to 4).
  */
 export function helperStyle(

package/src/components/form/Input/Input.metrics.ts

@@ -1,5 +1,6 @@
 import type { InputVariant } from './Input.base';
 import { decomposeColor, recomposeColor } from '../../../tokens/color';
+import { DEFAULT_FIELD_HEIGHT, fieldHeightPx } from '../../../tokens/field-height.core';
 import type { UiTheme } from '../../../tokens/theme';
 import { SIZE_VALUES, type SizeValue } from '../../../tokens/vocabulary';
 
@@ -47,23 +48,25 @@ export const muiVariantFor = (variant: InputVariant): MuiInputVariant => {
   }
 };
 
-/** Which of MUI's two heights each step of the house scale asks for. */
+/**
+ * Which of MUI's two densities each step asks for — its label offsets and
+ * helper-text lift. The HEIGHT is not MUI's: every outlined step is drawn at
+ * the theme's field height (`tokens/field-height`), which puts `md` at MUI's
+ * small 40px, so `md` takes the small density with it.
+ */
 export const INPUT_MUI_SIZE: Record<SizeValue, MuiInputSize> = {
   xs: 'small',
   sm: 'small',
-  md: 'medium',
+  md: 'small',
   lg: 'medium',
   xl: 'medium',
 };
 
 /**
- * The three steps MUI has no height for, as `padding` on the input itself.
- *
- * `sm` and `md` are absent on purpose — they ARE MUI's two heights, so they
- * fall through to {@link MUI_INPUT_PADDING} below rather than restating it.
- * (`lg`'s 16px is a hair under `md`'s 16.5px: the override is a round number
- * where MUI's is derived from a 56px box. Kept as written — this table is what
- * the web draws, not what it ought to draw.)
+ * The horizontal inset of the steps that have their own, and — for `filled` and
+ * `underline`, which are not drawn at the field height — their vertical one.
+ * An outlined-family field takes its vertical inset from the field height
+ * instead ({@link inputPadding}).
  */
 export const INPUT_SIZE_OVERRIDES: Partial<Record<SizeValue, { vertical: number; horizontal: number }>> = {
   xs: { vertical: 6, horizontal: 10 },
@@ -91,9 +94,34 @@ export const MUI_INPUT_PADDING: Record<MuiInputVariant, Record<MuiInputSize, Inp
   },
 };
 
-/** The inset the value is drawn at: the size override where there is one, MUI's otherwise. */
-export function inputPadding(variant: InputVariant, size: SizeValue): InputInset {
+/** The variants drawn at the theme's field height: the outline and the two that restyle it. */
+const AT_FIELD_HEIGHT: Record<InputVariant, boolean> = {
+  outlined: true,
+  glass: true,
+  gradient: true,
+  filled: false,
+  underline: false,
+};
+
+/**
+ * The inset the value is drawn at.
+ *
+ * An outlined-family field is the theme's field height tall, so its vertical
+ * inset is whatever centres the 23px line in that height; its horizontal inset
+ * is the size override's, or MUI's 14px. `filled` and `underline` keep their
+ * own heights — their label sits inside the box — so they keep MUI's insets.
+ */
+export function inputPadding(
+  variant: InputVariant,
+  size: SizeValue,
+  fieldHeight: number = DEFAULT_FIELD_HEIGHT,
+): InputInset {
   const override = INPUT_SIZE_OVERRIDES[size];
+  if (AT_FIELD_HEIGHT[variant]) {
+    const vertical = (fieldHeightPx(fieldHeight, size) - INPUT_LINE_HEIGHT) / 2;
+    const horizontal = override?.horizontal ?? MUI_INPUT_PADDING.outlined.small.left;
+    return { top: vertical, right: horizontal, bottom: vertical, left: horizontal };
+  }
   if (override) {
     return {
       top: override.vertical,
@@ -171,11 +199,10 @@ export const INPUT_GLOW = {
 } as const;
 
 /**
- * `pulse`: a 56px bar behind the field, fading outward every two seconds. Its
- * corner is the field's own — `fieldRadius` on the web, `radius.field` native.
+ * `pulse`: a bar behind the field, fading outward every two seconds. Its height
+ * and corner are the field's own — the theme's field height and radius.
  */
 export const INPUT_PULSE = {
-  height: 56,
   opacity: 0.3,
   ms: 2000,
   spread: 10,
@@ -208,12 +235,13 @@ export const INPUT_GRADIENT = {
 export const FILLED_WASH = { rest: 0.04, hover: 0.08, focused: 0.12 } as const;
 
 /**
- * The `sx` the web spreads onto the `TextField` for a size: MUI's height, plus
- * the input padding for the three steps MUI has no height for.
+ * The props the web spreads onto the `TextField` for a size: MUI's density, and
+ * the horizontal inset of the steps that have their own. The HEIGHT is not
+ * here — `Input.tsx` draws every outlined step at the theme's field height.
  */
 export interface InputSizeProps {
   size: MuiInputSize;
-  sx?: { '& .MuiInputBase-input': { padding: string } };
+  sx?: { '& .MuiInputBase-input': { paddingLeft: string; paddingRight: string } };
 }
 
 const sizeProps = (size: SizeValue): InputSizeProps => {
@@ -221,7 +249,14 @@ const sizeProps = (size: SizeValue): InputSizeProps => {
   return {
     size: INPUT_MUI_SIZE[size],
     ...(override
-      ? { sx: { '& .MuiInputBase-input': { padding: `${override.vertical}px ${override.horizontal}px` } } }
+      ? {
+          sx: {
+            '& .MuiInputBase-input': {
+              paddingLeft: `${override.horizontal}px`,
+              paddingRight: `${override.horizontal}px`,
+            },
+          },
+        }
       : {}),
   };
 };

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

@@ -21,6 +21,7 @@ import { ADORNMENT_GAP, INPUT_GLOW, INPUT_LOADING } from './Input.metrics';
 import type { InputProps } from './Input.types.native';
 import { webAria, webClick, webDisabled } from '../../../platform/aria';
 import { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
+import { fieldHeightPx } from '../../../tokens/field-height.core';
 import { useUiTheme } from '../../../provider/use-ui-theme.native';
 
 /**
@@ -181,6 +182,7 @@ export const Input = React.forwardRef<RNTextInput, InputProps>((rawProps, ref) =
         <FieldPulse
           color={theme.palette.primary.main}
           radius={theme.radius.field}
+          height={fieldHeightPx(theme.fieldHeight, size)}
           testID={idFor('pulse')}
         />
       ) : null}

package/src/components/form/Input/Input.styles.ts

@@ -13,7 +13,9 @@ import {
 import type { InputProps } from './Input.types';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldHeight } from '../../../tokens/field-height';
 import { fieldRadius } from '../../../tokens/field-radius';
+import type { SizeValue } from '../../../tokens/vocabulary';
 
 type InputVariant = NonNullable<InputProps['variant']>;
 
@@ -48,14 +50,14 @@ export const glowStyles = (theme: Theme): CSSObject => ({
 
 // A bar behind the field rather than a border on it, so it can pulse outward
 // without the input resizing.
-export const pulseStyles = (theme: Theme): CSSObject => ({
+export const pulseStyles = (theme: Theme, size: SizeValue = 'md'): CSSObject => ({
   '&::after': {
     content: '""',
     position: 'absolute',
     top: '50%',
     left: '0',
     right: '0',
-    height: `${INPUT_PULSE.height}px`,
+    height: fieldHeight(theme, size),
     transform: 'translateY(-50%)',
     borderRadius: fieldRadius(theme),
     backgroundColor: theme.palette.primary.main,

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

@@ -19,6 +19,8 @@ import {
 } from './Input.styles';
 import type { InputProps } from './Input.types';
 import { splitTestId } from '../../../platform/test-id';
+import { fieldControlStyles } from '../../../tokens/field-height';
+import type { SizeValue } from '../../../tokens/vocabulary';
 
 /**
  * `TextFieldSlim`, not `TextField` — see `text-field-slim.tsx`. MUI's own
@@ -29,19 +31,22 @@ import { splitTestId } from '../../../platform/test-id';
  */
 const StyledTextField = styled(TextFieldSlim, {
   shouldForwardProp: (prop) =>
-    !['customVariant', 'floating', 'glow', 'pulse', 'loading'].includes(prop as string),
+    !['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, floating, glow, pulse, loading }) => ({
+}>(({ 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) : {}),
+  ...(pulse ? pulseStyles(theme, fieldSize) : {}),
   ...(floating ? floatingLabelStyles(theme) : {}),
 
   '& .MuiInputBase-root': {
@@ -111,6 +116,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         ref={ref}
         variant={muiVariantFor(variant)}
         customVariant={variant}
+        fieldSize={size}
         floating={floating}
         glow={glow}
         pulse={pulse}

package/src/components/form/InputOTP/InputOTP.styles.ts

@@ -3,6 +3,7 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
+import { asFieldSize, fieldHeight } from '../../../tokens/field-height';
 
 interface ColorPalette {
   main: string;
@@ -51,13 +52,13 @@ const getColorFromTheme = (theme: Theme, color: string): ColorPalette => {
 
 type SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
-/** Each slot is a square, so width and height always match. */
-const SIZES: Record<SizeKey, { side: string; fontSize: string }> = {
-  xs: { side: '32px', fontSize: '0.75rem' },
-  sm: { side: '40px', fontSize: '0.875rem' },
-  md: { side: '48px', fontSize: '1rem' },
-  lg: { side: '56px', fontSize: '1.125rem' },
-  xl: { side: '64px', fontSize: '1.25rem' },
+/** Each slot's type. Its side is the theme's field height for the size (a square). */
+const SIZES: Record<SizeKey, { fontSize: string }> = {
+  xs: { fontSize: '0.75rem' },
+  sm: { fontSize: '0.875rem' },
+  md: { fontSize: '1rem' },
+  lg: { fontSize: '1.125rem' },
+  xl: { fontSize: '1.25rem' },
 };
 
 export interface OtpSlotFlags {
@@ -70,7 +71,9 @@ export interface OtpSlotFlags {
 export const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {
   const { customColor = 'primary', customSize = 'md', glass, gradient } = flags;
   const palette = getColorFromTheme(theme, customColor);
-  const { side, fontSize } = SIZES[customSize as SizeKey] ?? SIZES.md;
+  const { fontSize } = SIZES[customSize as SizeKey] ?? SIZES.md;
+  // A slot is a field: a square of the theme's field height for its size.
+  const side = fieldHeight(theme, asFieldSize(customSize));
 
   return {
     width: side,
@@ -94,6 +97,7 @@ export const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {
         },
       }),
       '& input': { textAlign: 'center', padding: 0, fontWeight: 'inherit' },
+      ...(!glass && { '& fieldset': { borderColor: fieldEdge(theme) } }),
       '&:hover fieldset': { borderColor: palette.main },
       '&.Mui-focused fieldset': { borderColor: palette.main, borderWidth: '2px' },
     },

package/src/components/form/PhoneInput/PhoneInput.tsx

@@ -18,15 +18,17 @@ import type { CountryData,PhoneInputProps } from './PhoneInput.types';
 import type { PhoneInputCopy } from '../../../copy';
 
 import { fieldEdge } from '../../../tokens/field-edge';
-import { fieldRadius, fieldRootStyles } from '../../../tokens/field-radius';
+import { fieldRadius } from '../../../tokens/field-radius';
+import { fieldControlStyles, fieldTextFieldStyles } from '../../../tokens/field-height';
 
 // Country data with expanded support
 
 // Styled components
 /** The plain variant: MUI's own field, on the theme's field radius. */
-const FieldTextField = styled(TextField)(({ theme }) => fieldRootStyles(theme));
+const FieldTextField = styled(TextField)(({ theme }) => fieldTextFieldStyles(theme));
 
 const GlassTextField = styled(TextField)(({ theme }) => ({
+  ...fieldControlStyles(theme),
   '& .MuiOutlinedInput-root': {
     borderRadius: fieldRadius(theme),
     background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,