@12-apps/ui 6.30.0 → 6.32.0

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/Button/Button.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { resolveButtonProps } from './Button.helpers';
 import { BUTTON_ICON_GLYPH_SIZE } from './Button.metrics';
 import { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
+import { fieldRadius } from '../../../tokens/field-radius';
 import {
   buttonEmphasisStyles,
   buttonVariantStyles,
@@ -32,7 +33,7 @@ const StyledButton = styled(MuiButton, {
   return {
     textTransform: 'none',
     fontWeight: 500,
-    borderRadius: theme.spacing(1),
+    borderRadius: fieldRadius(theme),
     transition: 'all 0.3s ease',
     position: 'relative',
     overflow: 'hidden',

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

@@ -5,12 +5,13 @@ import Button from '@mui/material/Button/index.js';
 
 import type { CategorySelectCopy } from '../../../copy';
 import { footerSx, METRICS } from './CategorySelect.styles';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 const buttonSx = (sheet: boolean) =>
   ({
     height: sheet ? METRICS.sheetFooterButton : METRICS.footerButton,
     padding: '0 13px',
-    borderRadius: '8px',
+    borderRadius: fieldRadiusPx,
     fontSize: 12.5,
     fontWeight: 600,
     textTransform: 'none',

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

@@ -13,6 +13,8 @@ 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 {
   query: string;
@@ -32,12 +34,11 @@ const searchFieldSx = {
   alignItems: 'center',
   '& input': {
     width: '100%',
-    height: 36,
+    height: fieldHeight,
     padding: '0 30px 0 32px',
     fontSize: 13,
-    border: '1px solid',
-    borderColor: 'divider',
-    borderRadius: '9px',
+    border: fieldBorder,
+    borderRadius: fieldRadiusPx,
     background: 'background.paper',
     color: 'text.primary',
     '&:focus': {

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

@@ -1,6 +1,8 @@
 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.
@@ -10,6 +12,10 @@ import { fieldEdge } from '../../../tokens/field-edge';
  * 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 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
  * rebrand and the rest of the screen would not) and because the library ships a
@@ -17,8 +23,6 @@ import { fieldEdge } from '../../../tokens/field-edge';
  * prototype's own values.
  */
 export const METRICS = {
-  triggerHeight: 38,
-  triggerRadius: 10,
   panelWidth: 340,
   panelRadius: 14,
   listMaxHeight: 290,
@@ -52,9 +56,9 @@ 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: `${METRICS.triggerRadius}px`,
+    borderRadius: fieldRadiusPx(theme),
     border: `1px solid ${open || selected ? brand.edge : fieldEdge(theme)}`,
     background: selected ? brand.soft : theme.palette.background.paper,
     color: selected ? brand.ink : theme.palette.text.primary,

package/src/components/form/CodeEditor/CodeEditor.tsx

@@ -13,6 +13,7 @@ import type { CodeEditorProps } from './CodeEditor.types';
 import { EditorToolbar } from './CodeEditorToolbar';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
 
 // Styled components
 const EditorContainer = styled(Paper)(({ theme }) => ({
@@ -22,7 +23,7 @@ const EditorContainer = styled(Paper)(({ theme }) => ({
   backdropFilter: 'blur(10px)',
   WebkitBackdropFilter: 'blur(10px)',
   border: `1px solid ${fieldEdge(theme)}`,
-  borderRadius: theme.shape.borderRadius * 2,
+  borderRadius: fieldRadius(theme),
   overflow: 'hidden' }));
 
 const EditorWrapper = styled(Box, {

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

@@ -13,6 +13,8 @@ import type { CreatableSelectOption, CreatableSelectProps } from './CreatableSel
 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 {
@@ -36,6 +38,7 @@ const MUI_SIZE = { xs: 'small', sm: 'small', md: 'medium', lg: 'medium', xl: 'me
 /** Match the outlined border treatment of `Input` so siblings look identical. */
 const fieldSx = {
   '& .MuiOutlinedInput-root': {
+    borderRadius: fieldRadiusPx,
     '& fieldset': {
       borderColor: (theme: Theme) => fieldEdge(theme),
     },
@@ -109,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.
@@ -119,13 +119,16 @@ function backgroundFor(theme: UiTheme, variant: InputVariant, state: FieldState)
   }
 }
 
-/** `filled` rounds its top two corners, `underline` none, the rest all four. */
+/**
+ * The theme's one field radius: `filled` rounds its top two corners with it,
+ * `underline` none, the rest all four.
+ */
 function radiusFor(theme: UiTheme, variant: InputVariant): ViewStyle {
   if (variant === 'underline') return {};
   if (variant === 'filled') {
-    return { borderTopLeftRadius: theme.radius.md, borderTopRightRadius: theme.radius.md };
+    return { borderTopLeftRadius: theme.radius.field, borderTopRightRadius: theme.radius.field };
   }
-  return { borderRadius: theme.radius.md };
+  return { borderRadius: theme.radius.field };
 }
 
 /** The border as React Native writes it: a width per side, one colour, one style. */
@@ -155,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(
@@ -164,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];
@@ -215,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,
@@ -170,10 +198,11 @@ export const INPUT_GLOW = {
   focused: { blur: 20, alpha: 0.5 },
 } as const;
 
-/** `pulse`: a 56px bar behind the field, fading outward every two seconds. */
+/**
+ * `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,
-  radiusUnits: 0.5,
   opacity: 0.3,
   ms: 2000,
   spread: 10,
@@ -206,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 => {
@@ -219,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

@@ -17,10 +17,11 @@ import {
 import { resolveInputProps } from './Input.helpers';
 import { FieldPulse } from '../field-pulse.native';
 import { fieldLook, helperStyle, labelStyle, type FieldState } from './Input.look.native';
-import { ADORNMENT_GAP, INPUT_GLOW, INPUT_LOADING, INPUT_PULSE } from './Input.metrics';
+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';
 
 /**
@@ -180,7 +181,8 @@ export const Input = React.forwardRef<RNTextInput, InputProps>((rawProps, ref) =
       {pulse ? (
         <FieldPulse
           color={theme.palette.primary.main}
-          radius={theme.spacing(INPUT_PULSE.radiusUnits)}
+          radius={theme.radius.field}
+          height={fieldHeightPx(theme.fieldHeight, size)}
           testID={idFor('pulse')}
         />
       ) : null}

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

@@ -13,6 +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']>;
 
@@ -47,16 +50,16 @@ 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: theme.spacing(INPUT_PULSE.radiusUnits),
+    borderRadius: fieldRadius(theme),
     backgroundColor: theme.palette.primary.main,
     opacity: INPUT_PULSE.opacity,
     animation: `${pulseAnimation} ${INPUT_PULSE.ms / 1000}s infinite`,
@@ -76,6 +79,18 @@ export const floatingLabelStyles = (theme: Theme): CSSObject => ({
   },
 });
 
+/**
+ * The field's corner: the theme's one field radius (see `tokens/field-radius`).
+ * `filled` rounds its top two only — its bottom edge is the underline — and
+ * `underline` none, which is how MUI draws those two variants.
+ */
+export const inputRadiusStyles = (theme: Theme, variant?: InputVariant): CSSObject => {
+  if (variant === 'underline') return {};
+  const radius = fieldRadius(theme);
+  if (variant === 'filled') return { borderTopLeftRadius: radius, borderTopRightRadius: radius };
+  return { borderRadius: radius };
+};
+
 export const inputBaseStyles = (theme: Theme, variant?: InputVariant): CSSObject => {
   switch (variant) {
     case 'glass':

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

@@ -11,6 +11,7 @@ import {
   floatingLabelStyles,
   glowStyles,
   inputBaseStyles,
+  inputRadiusStyles,
   muiVariantFor,
   outlinedStyles,
   pulseStyles,
@@ -18,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
@@ -28,23 +31,27 @@ 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': {
     transition: 'all 0.3s ease',
+    ...inputRadiusStyles(theme, customVariant),
     ...inputBaseStyles(theme, customVariant),
   },
 
@@ -109,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

@@ -2,6 +2,8 @@ import { alpha } from '@mui/material/styles/index.js';
 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;
@@ -50,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 {
@@ -69,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,
@@ -80,7 +84,7 @@ export const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {
       fontSize,
       fontWeight: 600,
       textAlign: 'center',
-      borderRadius: theme.spacing(1),
+      borderRadius: fieldRadius(theme),
       ...(glass && {
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
         backdropFilter: 'blur(20px)',
@@ -93,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,12 +18,19 @@ import type { CountryData,PhoneInputProps } from './PhoneInput.types';
 import type { PhoneInputCopy } from '../../../copy';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+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 }) => 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%)`,
     backdropFilter: 'blur(10px)',
     WebkitBackdropFilter: 'blur(10px)',
@@ -332,7 +339,7 @@ export const PhoneInput: FC<PhoneInputProps> = (props) => {
     countryName: selectedCountry?.name,
     copy });
 
-  const TextFieldComponent = variant === 'glass' ? GlassTextField : TextField;
+  const TextFieldComponent = variant === 'glass' ? GlassTextField : FieldTextField;
 
   return (
     <Box data-testid="phone-input-container">