@12-apps/ui 6.30.0 → 6.32.0

package/src/components/layout/ContentToolbar/SortByDropdown.tsx

@@ -16,6 +16,8 @@ import type {
   SortFieldDefinition,
   SortOrderOption,
 } from './ContentToolbar.types';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
+import { fieldHeight } from '../../../tokens/field-height';
 
 function findActiveField<TField extends string>(
   fields: SortFieldDefinition<TField>[] | undefined,
@@ -218,7 +220,7 @@ export function SortByDropdown<TField extends string = string>({
         aria-haspopup="menu"
         aria-expanded={open}
         onClick={(event) => setAnchorEl(event.currentTarget)}
-        sx={{ minWidth: 0, height: 32, px: 1, gap: 0.5, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}
+        sx={{ minWidth: 0, height: fieldHeight, px: 1, gap: 0.5, borderRadius: fieldRadiusPx, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}
       >
         {/* Full "Nome (crescente)" on md+; just the field name on mobile — the
             arrow already conveys the direction, so the parenthetical is dropped. */}

package/src/components/layout/ContentToolbar/ViewSelector.tsx

@@ -18,6 +18,8 @@ import type SvgIcon from '@mui/material/SvgIcon/index.js';
 import React, { useState } from 'react';
 
 import type { ViewMode, ViewSelectorProps } from './ContentToolbar.types';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
+import { fieldHeight } from '../../../tokens/field-height';
 
 const VIEW_OPTIONS: { value: ViewMode; label: string; icon: typeof SvgIcon }[] = [
   { value: 'grid', label: 'Grid View', icon: GridIcon },
@@ -66,7 +68,7 @@ export function ViewSelector({
         aria-haspopup="menu"
         aria-expanded={open}
         onClick={(event) => setAnchorEl(event.currentTarget)}
-        sx={{ minWidth: 0, height: 32, px: 1, gap: 1, color: 'text.secondary' }}
+        sx={{ minWidth: 0, height: fieldHeight, px: 1, gap: 1, borderRadius: fieldRadiusPx, color: 'text.secondary' }}
       >
         <ActiveIcon sx={{ fontSize: 16 }} />
         <ChevronDownIcon sx={{ fontSize: 14 }} />

package/src/components/layout/TableFilter/TableFilter.tsx

@@ -24,6 +24,7 @@ import type {
   TableFilterRangeFieldProps,
   TableFilterSectionProps,
 } from './TableFilter.types';
+import { fieldTextFieldStyles } from '../../../tokens/field-height';
 
 const PANEL_WIDTH = 280;
 
@@ -182,6 +183,7 @@ const TableFilterKeyword = ({
       </Typography>
       <TextField
         size="small"
+        sx={fieldTextFieldStyles}
         name="keyword"
         placeholder={placeholder}
         value={draft}
@@ -306,6 +308,7 @@ function RangeBound({
   return (
     <TextField
       size="small"
+      sx={fieldTextFieldStyles}
       type="number"
       error={error}
       placeholder={placeholder}

package/src/components/navigation/Pagination/PaginationParts.tsx

@@ -8,6 +8,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { scaleFor } from './Pagination.helpers';
+import { asFieldSize, fieldTextFieldStyles } from '../../../tokens/field-height';
 
 // Kept module-local: styled() components cannot be exported across a module
 // boundary here without tripping TS2742.
@@ -47,7 +48,7 @@ export const ItemsPerPageSelect: FC<ItemsPerPageSelectProps> = ({
     <Typography variant="body2" color="text.secondary">
       {pageSizeLabel}
     </Typography>
-    <FormControl size="small" sx={{ minWidth: 80 }}>
+    <FormControl size="small" sx={(theme) => ({ minWidth: 80, ...fieldTextFieldStyles(theme, asFieldSize(size)) })}>
       <Select
         value={value}
         onChange={(event) => onChange(event.target.value as number)}
@@ -56,7 +57,6 @@ export const ItemsPerPageSelect: FC<ItemsPerPageSelectProps> = ({
         sx={{
           '& .MuiSelect-select': {
             fontSize: scaleFor(size, ['0.875rem', '1rem', '1.125rem']),
-            py: scaleFor(size, [0.5, 1, 1.5]),
           },
         }}
       >

package/src/provider/mui-bridge.ts

@@ -1,6 +1,9 @@
 import type { PaletteColor, Theme, ThemeOptions } from '@mui/material/styles/index.js';
 
 import { cssLengthToPx, cssTrackingToEm } from '../tokens/css-units';
+import { resolveFieldHeight } from '../tokens/field-height.core';
+import { fieldOverrides } from '../tokens/field-height';
+import { fieldRadius } from '../tokens/field-radius';
 import { accentFor } from '../tokens/scales';
 import {
   FONT_WEIGHTS,
@@ -97,7 +100,8 @@ export function uiThemeFromMui(theme: Theme): UiTheme {
     },
     spacing: (units: number) => units * unit,
     spacingUnit: unit,
-    radius: { sm: md / 2, md, lg: md * 2, xl: md * 4, full: 9999 },
+    radius: { sm: md / 2, md, lg: md * 2, xl: md * 4, full: 9999, field: fieldRadius(theme) },
+    fieldHeight: resolveFieldHeight(theme.fieldHeight),
     typography: {
       fontFamily: theme.typography.fontFamily ?? WEB_FONT_FAMILY,
       monospaceFontFamily: WEB_MONOSPACE_FONT_FAMILY,
@@ -134,6 +138,9 @@ export function muiThemeOptionsFrom(ui: UiTheme): ThemeOptions {
       grey: { ...palette.grey },
     },
     shape: { borderRadius: ui.radius.md },
+    fieldRadius: ui.radius.field,
+    fieldHeight: ui.fieldHeight,
+    components: fieldOverrides(ui.radius.field, ui.fieldHeight),
     spacing: ui.spacingUnit,
     typography: { fontFamily: ui.typography.fontFamily ?? WEB_FONT_FAMILY },
     zIndex: { ...ui.zIndex },

package/src/tokens/field-height.core.ts

@@ -0,0 +1,70 @@
+import type { SizeValue } from './vocabulary';
+
+/**
+ * THE ONE HEIGHT EVERY FIELD IS DRAWN AT, WITH NO RENDERER BEHIND IT.
+ *
+ * A filter row used to stand at three heights — a 40px search box, 34px filter
+ * pills, 38px category and "Mais" triggers — and a form's default field was
+ * 56px beside a 44px button (FUT-2555). A field's height is one decision, so it
+ * is one token, the same way its corner is (`./field-radius.core.ts`).
+ *
+ * It is a multiple of the DEFAULT FONT SIZE — `rem` on the web, the body size on
+ * native — not a pixel count, so a field grows with the type it holds: a reader
+ * who raises the browser's base size gets taller fields with it instead of text
+ * crammed into a fixed box.
+ *
+ * The web reader and the theme channel are in `./field-height.ts`.
+ */
+
+/**
+ * The standard field height, in multiples of the default font size.
+ *
+ * 2.5 — 40px at the 16px default: what MUI's small outlined field has always
+ * drawn (the filter row's search box), and the 40px touch-target floor the
+ * product already holds its controls to.
+ */
+export const DEFAULT_FIELD_HEIGHT = 2.5;
+
+/** The px (dp) the default font size stands for — `1rem`, the body size. */
+export const FIELD_HEIGHT_FONT_PX = 16;
+
+/**
+ * How each step of the size scale relates to the standard height.
+ *
+ * `sm` and `md` ARE the standard: they were the two everyday densities (a 40px
+ * small field, a 56px medium one, a 36px and a 44px button), and a row mixing
+ * them is exactly what this token ends. `xs` is the compact step; `lg` and `xl`
+ * the roomy ones. All of them stay multiples of the font size.
+ */
+export const FIELD_HEIGHT_SCALE: Record<SizeValue, number> = {
+  xs: 0.8,
+  sm: 1,
+  md: 1,
+  lg: 1.2,
+  xl: 1.4,
+};
+
+/** A usable standard height: the given one when it is a positive number, the default otherwise. */
+export function resolveFieldHeight(height: unknown): number {
+  return typeof height === 'number' && Number.isFinite(height) && height > 0 ? height : DEFAULT_FIELD_HEIGHT;
+}
+
+/** A field's height for a size, in multiples of the default font size (`rem`). */
+export function fieldHeightRem(height: number, size: SizeValue = 'md'): number {
+  // Rounded to 1/10000rem: `3 * 0.8` is 2.4000000000000004 in floating point,
+  // and that would be the CSS every field of the step is written with.
+  return Math.round(resolveFieldHeight(height) * FIELD_HEIGHT_SCALE[size] * 10_000) / 10_000;
+}
+
+/** A field's height for a size in px (dp) — what the native renderer lays out. */
+export function fieldHeightPx(height: number, size: SizeValue = 'md'): number {
+  return fieldHeightRem(height, size) * FIELD_HEIGHT_FONT_PX;
+}
+
+/**
+ * THE ONE RESTING BORDER EVERY FIELD DRAWS: this width, in `fieldEdge`'s colour
+ * (`./field-edge.core.ts`, the tone of the theme's hairline that clears the 3:1
+ * non-text contrast floor). A variant that draws a different edge on purpose —
+ * `glass`, `gradient`, `underline`, a coloured outline button — keeps it.
+ */
+export const FIELD_BORDER_WIDTH = 1;

package/src/tokens/field-height.ts

@@ -0,0 +1,152 @@
+import type { Components, CSSObject, Theme } from '@mui/material/styles/index.js';
+
+import { fieldEdge } from './field-edge';
+import { fieldRadiusOverrides, fieldRootStyles } from './field-radius';
+import {
+  DEFAULT_FIELD_HEIGHT,
+  FIELD_BORDER_WIDTH,
+  FIELD_HEIGHT_SCALE,
+  fieldHeightRem,
+  resolveFieldHeight,
+} from './field-height.core';
+
+import type { SizeValue } from './vocabulary';
+
+/**
+ * THE FIELD HEIGHT AND BORDER ON THE WEB: the theme channel, the readers, and
+ * the styles that put a MUI text field or select on them.
+ *
+ * The argument for one height is in `./field-height.core.ts`. It is a top-level
+ * theme key for the reason `fieldRadius` is (`./field-radius.ts`): MUI types
+ * `shape` in `@mui/system`, which this package does not depend on.
+ */
+
+export {
+  DEFAULT_FIELD_HEIGHT,
+  FIELD_BORDER_WIDTH,
+  FIELD_HEIGHT_SCALE,
+  fieldHeightPx,
+  fieldHeightRem,
+} from './field-height.core';
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    /** The standard field height, in multiples of the default font size. See `@12-apps/ui/tokens`' `fieldHeight`. */
+    fieldHeight?: number;
+  }
+  interface ThemeOptions {
+    /** The standard field height, in multiples of the default font size. Defaults to {@link DEFAULT_FIELD_HEIGHT}. */
+    fieldHeight?: number;
+  }
+}
+
+/** A component's own size string as a step of the field scale — `md` when it is not one. */
+export function asFieldSize(size: string | undefined): SizeValue {
+  return size !== undefined && size in FIELD_HEIGHT_SCALE ? (size as SizeValue) : 'md';
+}
+
+/** A field's height for a size, as CSS — `2.5rem` for the default. */
+export function fieldHeight(theme: Theme, size: SizeValue = 'md'): string {
+  return `${fieldHeightRem(resolveFieldHeight(theme.fieldHeight), size)}rem`;
+}
+
+/** The resting border every field draws: 1px in {@link fieldEdge}'s colour. */
+export function fieldBorder(theme: Theme, surface?: string): string {
+  return `${FIELD_BORDER_WIDTH}px solid ${fieldEdge(theme, surface)}`;
+}
+
+/**
+ * The vertical padding that makes a one-line box `height` tall around MUI's
+ * `1.4375em` line — in `em`, so it is measured against the field's own type.
+ */
+const verticalInset = (height: string): string => `calc((${height} - 1.4375em) / 2)`;
+
+/**
+ * A MUI `TextField` / `Select` / `Autocomplete` (outlined, one line) at the
+ * field height for `size`: the root's own vertical padding goes, the input
+ * takes the inset, and the resting label sits on the new centre line.
+ *
+ * Multiline fields are left alone — their height is their content's — and so
+ * are `filled` and `standard`, whose label sits inside the box and which draw
+ * their own heights as variants.
+ */
+export function fieldControlStyles(theme: Theme, size: SizeValue = 'md'): CSSObject {
+  const inset = verticalInset(fieldHeight(theme, size));
+  return {
+    '& .MuiOutlinedInput-root:not(.MuiInputBase-multiline)': {
+      paddingTop: 0,
+      paddingBottom: 0,
+      '& .MuiOutlinedInput-input, & .MuiSelect-select': { paddingTop: inset, paddingBottom: inset },
+      // A select's display box inherits the ROOT's line height as an absolute
+      // length, so at a smaller font (0.875rem) it outgrew the inset measured in
+      // its own `em` — 42.88px in a 40px row. Its line follows its own type now.
+      '& .MuiSelect-select': { lineHeight: '1.4375em' },
+    },
+    '& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {
+      transform: `translate(14px, ${inset}) scale(1)`,
+    },
+  };
+}
+
+/**
+ * The notched outline's resting colour, as a MUI style-override callback. One
+ * function, not one per call: two themes built from the same options must
+ * compare equal, and a fresh closure each time would make them differ.
+ */
+const restingEdge = ({ theme }: { theme: Theme }): CSSObject => ({ borderColor: fieldEdge(theme) });
+
+/**
+ * MUI component overrides that put MUI's OWN outlined fields on the standard
+ * height and the one resting border — for a host's bare `TextField` / `Select`,
+ * the way `fieldRadiusOverrides` rounds them. Every size MUI has maps to the standard:
+ * a host that wants another density asks this package's fields for a `size`.
+ */
+export function fieldHeightOverrides(height: number = DEFAULT_FIELD_HEIGHT): Components<Theme> {
+  const inset = verticalInset(`${fieldHeightRem(height)}rem`);
+  return {
+    MuiOutlinedInput: {
+      styleOverrides: {
+        input: { '&:not(.MuiInputBase-inputMultiline)': { paddingTop: inset, paddingBottom: inset } },
+        // The one resting border; MUI's hover, focus and error rules outrank it.
+        notchedOutline: restingEdge,
+      },
+    },
+    MuiInputLabel: {
+      styleOverrides: {
+        outlined: { '&:not(.MuiInputLabel-shrink)': { transform: `translate(14px, ${inset}) scale(1)` } },
+      },
+    },
+  };
+}
+
+/**
+ * Both field overrides — the corner and the height — merged per component.
+ * They meet on `MuiOutlinedInput` (`root` from the radius, `input` from the
+ * height), so a plain spread would lose one of them.
+ */
+export function fieldOverrides(radius: number | undefined, height: number | undefined): Components<Theme> {
+  type Entry = { styleOverrides?: Record<string, unknown> };
+  const corner = fieldRadiusOverrides(radius) as Record<string, Entry>;
+  const tall = fieldHeightOverrides(height) as Record<string, Entry>;
+  const names = new Set([...Object.keys(corner), ...Object.keys(tall)]);
+  return Object.fromEntries(
+    [...names].map((name) => [
+      name,
+      { styleOverrides: { ...corner[name]?.styleOverrides, ...tall[name]?.styleOverrides } },
+    ]),
+  ) as Components<Theme>;
+}
+
+/**
+ * THE field standard on a MUI `TextField` / `Select` / `Autocomplete`, for a
+ * composite that renders MUI's own: the field radius, the field height for
+ * `size`, and the one resting border ({@link fieldEdge}). MUI's own hover,
+ * focus and error borders outrank the resting one, so they still show.
+ */
+export function fieldTextFieldStyles(theme: Theme, size: SizeValue = 'md'): CSSObject {
+  return {
+    ...fieldRootStyles(theme),
+    ...fieldControlStyles(theme, size),
+    '& .MuiOutlinedInput-notchedOutline': { borderColor: fieldEdge(theme) },
+  };
+}

package/src/tokens/field-radius.core.ts

@@ -0,0 +1,26 @@
+/**
+ * THE ONE RADIUS EVERY FIELD IS DRAWN WITH, WITH NO RENDERER BEHIND IT.
+ *
+ * A row of controls — a search box, three filter triggers, a "Mais" button —
+ * used to carry three radii: the text field took MUI's `shape.borderRadius`
+ * (4px), the button `theme.spacing(1)` (8px), and the filter triggers a 999px
+ * pill. Each was reasonable on its own; side by side they read as three kits
+ * glued together. A field's corner is one decision, so it is one token.
+ *
+ * "Field" is anything that sits at control height and takes input or opens a
+ * choice: text inputs, selects, textareas, OTP slots, date and filter triggers,
+ * toggles, and the buttons that share their rows. It is NOT a card, a menu, a
+ * badge or a chip counter — those keep the theme's general `radius` scale.
+ *
+ * This file is the number alone, so the native renderer and `./theme.ts` read
+ * it without importing MUI. The web reader and the theme channel it is set
+ * through are in `./field-radius.ts`.
+ */
+
+/**
+ * The default field radius, in px (dp on native).
+ *
+ * 8, because that is what `Button` has always drawn — so the control people
+ * see most keeps its corner and the rest of the row comes to meet it.
+ */
+export const DEFAULT_FIELD_RADIUS = 8;

package/src/tokens/field-radius.ts

@@ -0,0 +1,90 @@
+import type { Components, CSSObject, Theme } from '@mui/material/styles/index.js';
+
+import { DEFAULT_FIELD_RADIUS } from './field-radius.core';
+
+/**
+ * THE FIELD RADIUS ON THE WEB: the theme channel, the reader, and the MUI
+ * overrides that carry it into controls this package does not style itself.
+ *
+ * The argument for one radius is in `./field-radius.core.ts`.
+ *
+ * ## Why a key of our own, and not `shape.borderRadius`
+ *
+ * `shape.borderRadius` is MUI's GENERAL radius: `Paper`, `Card`, `Menu`,
+ * `Alert`, `Chip` and every `sx={{ borderRadius: n }}` multiply it. Moving it to
+ * round the fields would round every surface in the app along with them. A
+ * separate key moves the fields and nothing else.
+ *
+ * It is a top-level theme key rather than `shape.fieldRadius` because MUI types
+ * `shape` in `@mui/system`, which this package does not depend on — augmenting
+ * it would fail to resolve in a host. MUI documents top-level custom variables
+ * for exactly this, and `createTheme` carries unknown keys through.
+ */
+
+export { DEFAULT_FIELD_RADIUS } from './field-radius.core';
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    /** The radius every field is drawn with, in px. See `@12-apps/ui/tokens`' `fieldRadius`. */
+    fieldRadius?: number;
+  }
+  interface ThemeOptions {
+    /** The radius every field is drawn with, in px. Defaults to {@link DEFAULT_FIELD_RADIUS}. */
+    fieldRadius?: number;
+  }
+}
+
+/** The field radius the host's theme asks for, in px — the default when it asks for none. */
+export function fieldRadius(theme: Theme): number {
+  const radius = theme.fieldRadius;
+  return typeof radius === 'number' && Number.isFinite(radius) && radius >= 0 ? radius : DEFAULT_FIELD_RADIUS;
+}
+
+/**
+ * {@link fieldRadius} as a `px` string, for `sx`.
+ *
+ * `sx` MULTIPLIES a bare number by `shape.borderRadius` — `sx={{ borderRadius: 8 }}`
+ * is 32px on the default theme — so a field radius handed to `sx` must carry
+ * its unit. `styled()` objects take the plain number.
+ */
+export function fieldRadiusPx(theme: Theme): string {
+  return `${fieldRadius(theme)}px`;
+}
+
+/**
+ * The field radius on a MUI `TextField`'s input root — for a composite that
+ * renders MUI's own `TextField`, so it follows the theme's field radius under
+ * ANY theme, not only one built with {@link fieldRadiusOverrides}. Plain CSS
+ * with the unit, so it works as `styled()` styles and as an `sx` entry.
+ */
+export function fieldRootStyles(theme: Theme): CSSObject {
+  const radius = fieldRadiusPx(theme);
+  return {
+    '& .MuiOutlinedInput-root': { borderRadius: radius },
+    '& .MuiFilledInput-root': { borderTopLeftRadius: radius, borderTopRightRadius: radius },
+  };
+}
+
+/**
+ * MUI component overrides that round MUI's OWN fields to `radius`.
+ *
+ * This package's fields read {@link fieldRadius} themselves, so they are right
+ * under any theme. These overrides are for the host's: a bare `TextField`,
+ * `Select` or `Button` a host renders straight from MUI would otherwise keep
+ * `shape.borderRadius` and sit in the row with a different corner. A theme builder spreads them into `components`, under the
+ * host's own entries so a host override still wins.
+ *
+ * `FilledInput` rounds its top corners only — its bottom edge is the underline.
+ */
+export function fieldRadiusOverrides(radius: number = DEFAULT_FIELD_RADIUS): Components<Theme> {
+  return {
+    MuiOutlinedInput: { styleOverrides: { root: { borderRadius: radius } } },
+    MuiFilledInput: {
+      styleOverrides: { root: { borderTopLeftRadius: radius, borderTopRightRadius: radius } },
+    },
+    MuiButton: { styleOverrides: { root: { borderRadius: radius } } },
+    // The group squares its inner corners itself, so rounding each button
+    // rounds the group's outer ones.
+    MuiToggleButton: { styleOverrides: { root: { borderRadius: radius } } },
+  };
+}

package/src/tokens/index.native.ts

@@ -7,3 +7,11 @@
 export * from './vocabulary';
 export * from './theme';
 export * from './color';
+export { DEFAULT_FIELD_RADIUS } from './field-radius.core';
+export {
+  DEFAULT_FIELD_HEIGHT,
+  FIELD_BORDER_WIDTH,
+  FIELD_HEIGHT_SCALE,
+  fieldHeightPx,
+  fieldHeightRem,
+} from './field-height.core';

package/src/tokens/scales.ts

@@ -14,6 +14,21 @@ export { headingMetrics } from './typography';
 // host can build a `UiTheme` from the same module path a native one does.
 export * from './theme';
 export * from './color';
+export { DEFAULT_FIELD_RADIUS, fieldRadius, fieldRadiusOverrides, fieldRadiusPx, fieldRootStyles } from './field-radius';
+export {
+  asFieldSize,
+  DEFAULT_FIELD_HEIGHT,
+  FIELD_BORDER_WIDTH,
+  FIELD_HEIGHT_SCALE,
+  fieldBorder,
+  fieldControlStyles,
+  fieldHeight,
+  fieldHeightOverrides,
+  fieldHeightPx,
+  fieldHeightRem,
+  fieldOverrides,
+  fieldTextFieldStyles,
+} from './field-height';
 
 export interface Accent {
   main: string;

package/src/tokens/theme.ts

@@ -8,6 +8,8 @@ import { contrastText, DARK_TEXT_PRIMARY, inkOver } from './ink-over';
 */
 export { contrastText, inkOver };
 import { cssLengthToPx, cssTrackingToEm } from './css-units';
+import { resolveFieldHeight } from './field-height.core';
+import { DEFAULT_FIELD_RADIUS } from './field-radius.core';
 import { HEADING_SCALE, type HeadingLevel } from './heading-scale';
 
 import type { SizeValue } from './vocabulary';
@@ -106,8 +108,18 @@ export interface UiTheme {
   /** MUI's `theme.spacing(n)`: `n` units of {@link UiTheme.spacingUnit}, in px. */
   spacing: (units: number) => number;
   spacingUnit: number;
-  /** `md` is MUI's `shape.borderRadius`; the others are its halves and doubles. */
-  radius: { sm: number; md: number; lg: number; xl: number; full: number };
+  /**
+   * `md` is MUI's `shape.borderRadius`; `sm`–`xl` are its halves and doubles.
+   * `field` is not on that scale: it is the one corner every field is drawn
+   * with (see `./field-radius.core`), MUI's `theme.fieldRadius` on the web.
+   */
+  radius: { sm: number; md: number; lg: number; xl: number; full: number; field: number };
+  /**
+   * The standard field height, in multiples of the default font size — MUI's
+   * `theme.fieldHeight` on the web. `fieldHeightPx(theme.fieldHeight, size)`
+   * (`./field-height.core`) is the dp a field of `size` lays out at.
+   */
+  fieldHeight: number;
   typography: UiTypography;
   zIndex: { appBar: number; drawer: number; modal: number; snackbar: number; tooltip: number };
 }
@@ -128,6 +140,10 @@ export interface UiThemeOptions {
   }>;
   typography?: Partial<Pick<UiTypography, 'fontFamily' | 'monospaceFontFamily'>>;
   spacingUnit?: number;
+  /** The radius every field is drawn with, in dp. Defaults to {@link DEFAULT_FIELD_RADIUS}. */
+  fieldRadius?: number;
+  /** The standard field height, in multiples of the default font size. Defaults to 2.5. */
+  fieldHeight?: number;
 }
 
 const ROOT_FONT_PX = 16;
@@ -311,7 +327,8 @@ export function createUiTheme(options: UiThemeOptions = {}): UiTheme {
     palette,
     spacing: (units: number) => units * spacingUnit,
     spacingUnit,
-    radius: { sm: 2, md: 4, lg: 8, xl: 16, full: 9999 },
+    radius: { sm: 2, md: 4, lg: 8, xl: 16, full: 9999, field: options.fieldRadius ?? DEFAULT_FIELD_RADIUS },
+    fieldHeight: resolveFieldHeight(options.fieldHeight),
     typography: {
       fontFamily: options.typography?.fontFamily,
       monospaceFontFamily: options.typography?.monospaceFontFamily,

package/dist/chunk-3W7IEWEL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/AddressAutocomplete/AddressTextField.tsx"],"sourcesContent":["import type { TextFieldProps } from '@mui/material/TextField/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport type { AddressAutocompleteProps } from './AddressAutocomplete.types';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\n\n// Kept module-local on purpose: the inferred type of a styled() component cannot\n// be named across a module boundary here (TS2742), so the plain component below\n// is what the rest of the folder imports.\nconst GlassTextField = styled(TextField)(({ theme }) => ({\n  '& .MuiOutlinedInput-root': {\n    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,\n    backdropFilter: 'blur(10px)',\n    WebkitBackdropFilter: 'blur(10px)',\n    border: `1px solid ${fieldEdge(theme)}`,\n    transition: theme.transitions.create(['border-color', 'box-shadow', 'background']),\n    '&:hover': {\n      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.7)} 100%)`,\n      borderColor: theme.palette.primary.main,\n    },\n    '&.Mui-focused': {\n      background: theme.palette.background.paper,\n      boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.25)}`,\n    },\n    '& fieldset': {\n      border: 'none',\n    },\n  },\n}));\n\nexport type AddressTextFieldProps = Omit<TextFieldProps, 'variant'> & {\n  addressVariant: AddressAutocompleteProps['variant'];\n};\n\n// 'glass' is not a MUI variant: it renders the outlined field with the frosted\n// treatment on top.\nexport const AddressTextField: FC<AddressTextFieldProps> = ({ addressVariant, ...props }) =>\n  addressVariant === 'glass' ? (\n    <GlassTextField variant=\"outlined\" {...props} />\n  ) : (\n    <TextField variant={addressVariant} {...props} />\n  );\n"],"mappings":";;;;;AACA,OAAO,eAAe;AACtB,SAAS,OAAO,cAAc;AAwC1B;AA7BJ,IAAM,iBAAiB,OAAO,SAAS,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACvD,4BAA4B;AAAA,IAC1B,YAAY,2BAA2B,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC;AAAA,IACnI,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,QAAQ,aAAa,UAAU,KAAK,CAAC;AAAA,IACrC,YAAY,MAAM,YAAY,OAAO,CAAC,gBAAgB,cAAc,YAAY,CAAC;AAAA,IACjF,WAAW;AAAA,MACT,YAAY,2BAA2B,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC;AAAA,MACnI,aAAa,MAAM,QAAQ,QAAQ;AAAA,IACrC;AAAA,IACA,iBAAiB;AAAA,MACf,YAAY,MAAM,QAAQ,WAAW;AAAA,MACrC,WAAW,aAAa,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI,CAAC;AAAA,IACjE;AAAA,IACA,cAAc;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,EACF;AACF,EAAE;AAQK,IAAM,mBAA8C,CAAC,EAAE,gBAAgB,GAAG,MAAM,MACrF,mBAAmB,UACjB,oBAAC,kBAAe,SAAQ,YAAY,GAAG,OAAO,IAE9C,oBAAC,aAAU,SAAS,gBAAiB,GAAG,OAAO;","names":[]}

package/dist/chunk-4T6W43TO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/layout/ContentToolbar/MultiSelectDropdown.tsx"],"sourcesContent":["'use client';\n\nimport SearchIcon from '@mui/icons-material/Search';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Checkbox from '@mui/material/Checkbox/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport ListSubheader from '@mui/material/ListSubheader/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport React, { useMemo, useState } from 'react';\n\nimport type {\n  MultiSelectDropdownProps,\n  MultiSelectExtraOption,\n  MultiSelectOption,\n} from './ContentToolbar.types';\nimport { buildTriggerLabel, InlineTrigger, PillTrigger, StackedTrigger } from './MultiSelectTriggers';\n\n/** One checkbox menu row with an optional trailing count. */\nfunction CheckboxRow({\n  label,\n  count,\n  checked,\n  onToggle,\n}: {\n  label: string;\n  count?: number;\n  checked: boolean;\n  onToggle: (next: boolean) => void;\n}): React.JSX.Element {\n  return (\n    <MenuItem onClick={() => onToggle(!checked)} sx={{ gap: 1 }}>\n      <Checkbox checked={checked} size=\"small\" disableRipple sx={{ p: 0, pointerEvents: 'none' }} tabIndex={-1} />\n      <Box component=\"span\" sx={{ flex: 1, minWidth: 0, textAlign: 'left' }}>\n        {label}\n        {count != null && (\n          <Box component=\"span\" sx={{ color: 'text.secondary' }}>\n            {' '}\n            ({count})\n          </Box>\n        )}\n      </Box>\n    </MenuItem>\n  );\n}\n\n/**\n * Generic multi-select dropdown with checkboxes, counts, an optional \"Options\"\n * section, and a \"Clear\" action. Faithful MUI port of the reference toolbar's\n * \"Content Type\" control. The menu stays open while toggling options.\n */\nexport function MultiSelectDropdown<TValue extends string = string>({\n  label,\n  options,\n  selected,\n  onToggle,\n  onClear,\n  allLabel = 'All',\n  clearLabel,\n  clearText,\n  extraOptionsHeading,\n  extraOptions,\n  searchable,\n  searchPlaceholder = 'Search…',\n  noResultsLabel = 'No results',\n  layout = 'inline',\n  'data-testid': testId,\n  onOpenChange,\n}: MultiSelectDropdownProps<TValue>): React.JSX.Element {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const [query, setQuery] = useState('');\n  const open = Boolean(anchorEl);\n  const stacked = layout === 'stacked';\n  // Reset the query each time the menu closes so it reopens showing everything.\n  const close = (): void => {\n    setAnchorEl(null);\n    setQuery('');\n    onOpenChange?.(false);\n  };\n  const triggerLabel = buildTriggerLabel(selected, options, allLabel);\n  // Auto-enable search for long lists (e.g. many categories) unless overridden.\n  const showSearch = searchable ?? options.length > 8;\n  const anyExtraChecked = extraOptions?.some((option) => option.checked) ?? false;\n  const clearDisabled = selected.size === 0 && !anyExtraChecked;\n\n  const openMenu = (event: React.MouseEvent<HTMLElement>): void => {\n    setAnchorEl(event.currentTarget);\n    onOpenChange?.(true);\n  };\n  const triggerProps = { triggerLabel, open, onOpen: openMenu, testId };\n\n  const renderTrigger = (): React.JSX.Element => {\n    if (stacked) return <StackedTrigger label={label} {...triggerProps} />;\n    if (layout === 'pill')\n      return (\n        <PillTrigger\n          clearLabel={clearLabel}\n          label={label}\n          selectedCount={selected.size}\n          onClear={onClear}\n          {...triggerProps}\n        />\n      );\n    return <InlineTrigger label={label} {...triggerProps} />;\n  };\n\n  return (\n    <>\n      {renderTrigger()}\n      <MultiSelectMenu\n        extraOptionsHeading={extraOptionsHeading} clearText={clearText} anchorEl={anchorEl}\n        open={open}\n        close={close}\n        options={options}\n        selected={selected}\n        onToggle={onToggle}\n        extraOptions={extraOptions}\n        clearDisabled={clearDisabled}\n        onClear={onClear}\n        showSearch={showSearch}\n        query={query}\n        onQueryChange={setQuery}\n        searchPlaceholder={searchPlaceholder}\n        noResultsLabel={noResultsLabel}\n        matchAnchorWidth={stacked}\n        testId={testId}\n      />\n    </>\n  );\n}\n\n/** Sticky search box at the top of the menu; keydowns don't reach the Menu's typeahead. */\nfunction MenuSearchField({\n  query,\n  onQueryChange,\n  placeholder,\n  testId,\n}: {\n  query: string;\n  onQueryChange: (value: string) => void;\n  placeholder: string;\n  testId?: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      sx={{ position: 'sticky', top: 0, zIndex: 1, bgcolor: 'background.paper', px: 1, py: 0.75 }}\n      onKeyDown={(event) => event.stopPropagation()}\n    >\n      <TextField\n        autoFocus\n        size=\"small\"\n        fullWidth\n        value={query}\n        onChange={(event) => onQueryChange(event.target.value)}\n        placeholder={placeholder}\n        inputProps={{ 'aria-label': placeholder, 'data-testid': testId ? `${testId}-search` : undefined }}\n        InputProps={{\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <SearchIcon sx={{ fontSize: 16 }} />\n            </InputAdornment>\n          ),\n        }}\n      />\n    </Box>\n  );\n}\n\ninterface MultiSelectMenuProps<TValue extends string> {\n  anchorEl: HTMLElement | null;\n  open: boolean;\n  close: () => void;\n  options: MultiSelectOption<TValue>[];\n  selected: ReadonlySet<TValue>;\n  onToggle: (value: TValue, checked: boolean) => void;\n  extraOptions?: MultiSelectExtraOption[];\n  clearDisabled: boolean;\n  onClear: () => void;\n  showSearch: boolean;\n  query: string;\n  onQueryChange: (value: string) => void;\n  searchPlaceholder: string;\n  noResultsLabel: string;\n  extraOptionsHeading: string;\n  clearText: string;\n  /** Match the menu width to the trigger and left-align it (stacked select). */\n  matchAnchorWidth?: boolean;\n  testId?: string;\n}\n\n/**\n * Menu placement. Default: anchored to the trigger's right (toolbar). When\n * `matchAnchorWidth` (stacked select), match the trigger width and left-align so\n * the menu sits flush under the full-width control.\n */\nfunction resolveMenuPlacement(\n  matchAnchorWidth: boolean | undefined,\n  anchorEl: HTMLElement | null,\n): { anchorWidth: number | undefined; align: 'left' | 'right' } {\n  if (!matchAnchorWidth) return { anchorWidth: undefined, align: 'right' };\n  return { anchorWidth: anchorEl?.offsetWidth, align: 'left' };\n}\n\n/** The (optional) search box + checkbox list + optional \"Options\" section + a \"Clear\" footer. */\nfunction MultiSelectMenu<TValue extends string>({\n  anchorEl,\n  open,\n  close,\n  options,\n  selected,\n  onToggle,\n  extraOptions,\n  extraOptionsHeading,\n  clearText,\n  clearDisabled,\n  onClear,\n  showSearch,\n  query,\n  onQueryChange,\n  searchPlaceholder,\n  noResultsLabel,\n  matchAnchorWidth,\n  testId,\n}: MultiSelectMenuProps<TValue>): React.JSX.Element {\n  const trimmed = query.trim().toLowerCase();\n  const visibleOptions = useMemo(\n    () => (trimmed ? options.filter((option) => option.label.toLowerCase().includes(trimmed)) : options),\n    [options, trimmed],\n  );\n  const { anchorWidth, align } = resolveMenuPlacement(matchAnchorWidth, anchorEl);\n  return (\n    <Menu\n      anchorEl={anchorEl}\n      open={open}\n      onClose={close}\n      anchorOrigin={{ vertical: 'bottom', horizontal: align }}\n      transformOrigin={{ vertical: 'top', horizontal: align }}\n      // Keep focus on the search box (don't let the Menu grab the first item),\n      // and stop MUI's typeahead from swallowing keystrokes meant for the input.\n      autoFocus={!showSearch}\n      disableAutoFocusItem\n      slotProps={{\n        // Cap the height so a long list (e.g. many categories) scrolls instead\n        // of running off-screen; the sticky search box stays pinned on top.\n        paper: { sx: { minWidth: anchorWidth ?? 180, width: anchorWidth, maxHeight: 360 } },\n        list: { sx: { pt: showSearch ? 0 : undefined, pb: 0 } },\n      }}\n    >\n      {showSearch && (\n        <MenuSearchField query={query} onQueryChange={onQueryChange} placeholder={searchPlaceholder} testId={testId} />\n      )}\n      {visibleOptions.length === 0 && showSearch ? (\n        <MenuItem disabled data-testid={testId ? `${testId}-no-results` : undefined} sx={{ fontSize: '0.8125rem' }}>\n          {noResultsLabel}\n        </MenuItem>\n      ) : (\n        visibleOptions.map((option) => (\n          <CheckboxRow\n            key={option.value}\n            label={option.label}\n            count={option.count}\n            checked={selected.has(option.value)}\n            onToggle={(next) => onToggle(option.value, next)}\n          />\n        ))\n      )}\n      {extraOptions && extraOptions.length > 0\n        ? [\n            <Divider key=\"extra-divider\" />,\n            <ListSubheader key=\"extra-label\" sx={{ px: 1, py: 0.75, fontSize: '0.75rem', fontWeight: 600 }}>\n              {extraOptionsHeading}\n            </ListSubheader>,\n            ...extraOptions.map((extra) => (\n              <CheckboxRow key={extra.id} label={extra.label} checked={extra.checked} onToggle={(next) => extra.onCheckedChange(next)} />\n            )),\n          ]\n        : null}\n      <MenuClearFooter\n        clearText={clearText} clearDisabled={clearDisabled} onClear={onClear}\n        close={close} testId={testId}\n      />\n    </Menu>\n  );\n}\n\n/** The bottom \"Clear\" footer that resets the selection and closes the menu. */\nfunction MenuClearFooter({\n  clearText,\n  clearDisabled,\n  onClear,\n  close,\n  testId,\n}: {\n  clearText: string;\n  clearDisabled: boolean;\n  onClear: () => void;\n  close: () => void;\n  testId?: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      sx={{\n        // Pin to the bottom of the scroll viewport so it stays visible while the\n        // options list scrolls (mirrors the sticky search box on top).\n        position: 'sticky',\n        bottom: 0,\n        zIndex: 1,\n        display: 'flex',\n        justifyContent: 'flex-end',\n        borderTop: 1,\n        borderColor: 'divider',\n        bgcolor: 'background.paper',\n        px: 1,\n        py: 0.75,\n      }}\n    >\n      <Button\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        data-testid={testId ? `${testId}-clear` : undefined}\n        disabled={clearDisabled}\n        onClick={() => {\n          onClear();\n          close();\n        }}\n        sx={{ minWidth: 0, px: 1, py: 0.25, fontSize: '0.75rem', fontWeight: 400, textTransform: 'none', color: 'text.secondary' }}\n      >\n        {clearText}\n      </Button>\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-5LQ7PKMW.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Button/Button.metrics.ts"],"sourcesContent":["import { darken, lighten } from '../../../tokens/color';\nimport type { ColorValue, SizeValue } from '../../../tokens/vocabulary';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `Button` RENDERERS DRAW WITH.\n *\n * `Button.styles.ts` (web, emotion) and `Button.native.tsx` (React Native)\n * read this one table. The web turns the px into rem and the padding into a\n * shorthand string; native uses the numbers as they are. Neither restates a\n * value, which is what keeps a native `md` button 16px tall of padding and\n * 16px of type exactly like the web one.\n */\nexport interface ButtonSizeMetrics {\n  paddingVertical: number;\n  paddingHorizontal: number;\n  fontSize: number;\n}\n\nexport const BUTTON_SIZES: Record<SizeValue, ButtonSizeMetrics> = {\n  xs: { paddingVertical: 2, paddingHorizontal: 8, fontSize: 12 },\n  sm: { paddingVertical: 6, paddingHorizontal: 12, fontSize: 14 },\n  md: { paddingVertical: 8, paddingHorizontal: 16, fontSize: 16 },\n  lg: { paddingVertical: 10, paddingHorizontal: 20, fontSize: 18 },\n  xl: { paddingVertical: 12, paddingHorizontal: 24, fontSize: 20 },\n};\n\n/** A button that is only an icon is square: uniform padding, no min-width. */\nexport const ICON_ONLY_PADDING: Record<SizeValue, number> = {\n  xs: 2,\n  sm: 5,\n  md: 7,\n  lg: 9,\n  xl: 11,\n};\n\n/**\n * The start/end icon slot's font-size, in px — MUI's `medium` value, pinned\n * (12-74).\n *\n * MUI sizes that slot off its OWN `size` prop, writing 18/20/22 onto the first\n * child of `.MuiButton-startIcon`. We never passed a `size`, so every button in\n * every size has always drawn medium's 20px; now that `size` IS forwarded — so\n * the rendered class finally names the size the button actually is — the number\n * would start moving with it.\n *\n * WHAT THAT ACTUALLY REACHES, measured in a browser rather than assumed: this\n * Button renders its own wrapper span around the icon (it carries the child\n * test id), so MUI's rule lands on the WRAPPER and reaches the glyph only when\n * the glyph takes its size by inheritance — `fontSize=\"inherit\"`, an em-sized\n * SVG, a text or emoji glyph. With the pin removed, such a glyph measured 18px\n * at `xs`/`sm` and 22px at `lg`/`xl` against the 20px it has always been. An\n * icon carrying an absolute size of its own does not move at all: a default\n * `SvgIcon` stayed 24×24 across all five.\n *\n * A silent resize of the inherited case is still a design decision arriving as\n * a side effect of a class-name fix, so it is pinned to what shipped before —\n * `Button.tsx` puts it on that same wrapper. Scaling the glyph with the button\n * is a ticket of its own.\n */\nexport const BUTTON_ICON_GLYPH_SIZE = 20;\n\nexport const BUTTON_FONT_WEIGHT = 500;\n/** `theme.spacing(1)`. */\nexport const BUTTON_RADIUS_UNITS = 1;\n/** Between the icon and the label: `theme.spacing(0.5)`. */\nexport const BUTTON_ICON_GAP_UNITS = 0.5;\nexport const BUTTON_SPINNER_SIZE = 16;\n/** MUI's `line-height` for button text. */\nexport const BUTTON_LINE_HEIGHT = 1.75;\n\n/** The wash behind an outline, ghost or text button while it is hovered or pressed. */\nexport const BUTTON_WASH_ALPHA = 0.1;\nexport const GLASS_BACKGROUND_ALPHA = 0.1;\nexport const GLASS_BACKGROUND_ALPHA_PRESSED = 0.2;\nexport const GLASS_BORDER_ALPHA = 0.2;\nexport const GLOW_INNER_ALPHA = 0.6;\nexport const GLOW_OUTER_ALPHA = 0.3;\nexport const GLOW_RADIUS = 20;\nexport const PULSE_ALPHA = 0.3;\nexport const PULSE_DURATION_MS = 2000;\nexport const PULSE_SPREAD = 15;\n\n/**\n * `neutral` has no palette slot of its own in MUI, so `Button.styles.ts` has\n * always drawn it from three greys. Same three greys here.\n */\nexport function buttonPalette(theme: UiTheme, color: ColorValue): UiPaletteColor {\n  if (color === 'neutral') {\n    return {\n      main: theme.palette.grey[700],\n      dark: theme.palette.grey[800],\n      light: theme.palette.grey[500],\n      contrastText: '#fff',\n    };\n  }\n  return theme.palette[color];\n}\n\n/**\n * The label colour for `ghost` and `text`: one step darker than `main` in\n * light mode (lighter in dark), because `main` is chosen to sit UNDER white and\n * is not legible AS text on a tinted surface. See the web `quietInk`.\n */\nexport const quietInk = (theme: UiTheme, palette: UiPaletteColor): string =>\n  theme.mode === 'dark' ? lighten(palette.main, 0.35) : darken(palette.main, 0.3);\n\n/** Gradients run between two related hues; the named colours pick a specific pair. */\nexport function gradientStops(\n  theme: UiTheme,\n  color: ColorValue,\n  palette: UiPaletteColor,\n): [string, string] {\n  switch (color) {\n    case 'primary':\n      return [theme.palette.primary.main, theme.palette.secondary.main];\n    case 'secondary':\n      return [theme.palette.secondary.main, theme.palette.primary.main];\n    case 'success':\n    case 'warning':\n      return [theme.palette[color].light, theme.palette[color].dark];\n    case 'danger':\n      return [theme.palette.danger.light, theme.palette.danger.dark];\n    default:\n      return [palette.main, palette.dark];\n  }\n}\n"],"mappings":";;;;;;AAmBO,IAAM,eAAqD;AAAA,EAChE,IAAI,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,UAAU,GAAG;AAAA,EAC7D,IAAI,EAAE,iBAAiB,GAAG,mBAAmB,IAAI,UAAU,GAAG;AAAA,EAC9D,IAAI,EAAE,iBAAiB,GAAG,mBAAmB,IAAI,UAAU,GAAG;AAAA,EAC9D,IAAI,EAAE,iBAAiB,IAAI,mBAAmB,IAAI,UAAU,GAAG;AAAA,EAC/D,IAAI,EAAE,iBAAiB,IAAI,mBAAmB,IAAI,UAAU,GAAG;AACjE;AAGO,IAAM,oBAA+C;AAAA,EAC1D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA0BO,IAAM,yBAAyB;AAE/B,IAAM,qBAAqB;AAE3B,IAAM,sBAAsB;AAE5B,IAAM,wBAAwB;AAC9B,IAAM,sBAAsB;AAE5B,IAAM,qBAAqB;AAG3B,IAAM,oBAAoB;AAC1B,IAAM,yBAAyB;AAC/B,IAAM,iCAAiC;AACvC,IAAM,qBAAqB;AAC3B,IAAM,mBAAmB;AACzB,IAAM,mBAAmB;AACzB,IAAM,cAAc;AACpB,IAAM,cAAc;AACpB,IAAM,oBAAoB;AAC1B,IAAM,eAAe;AAMrB,SAAS,cAAc,OAAgB,OAAmC;AAC/E,MAAI,UAAU,WAAW;AACvB,WAAO;AAAA,MACL,MAAM,MAAM,QAAQ,KAAK,GAAG;AAAA,MAC5B,MAAM,MAAM,QAAQ,KAAK,GAAG;AAAA,MAC5B,OAAO,MAAM,QAAQ,KAAK,GAAG;AAAA,MAC7B,cAAc;AAAA,IAChB;AAAA,EACF;AACA,SAAO,MAAM,QAAQ,KAAK;AAC5B;AAOO,IAAM,WAAW,CAAC,OAAgB,YACvC,MAAM,SAAS,SAAS,QAAQ,QAAQ,MAAM,IAAI,IAAI,OAAO,QAAQ,MAAM,GAAG;AAGzE,SAAS,cACd,OACA,OACA,SACkB;AAClB,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,CAAC,MAAM,QAAQ,QAAQ,MAAM,MAAM,QAAQ,UAAU,IAAI;AAAA,IAClE,KAAK;AACH,aAAO,CAAC,MAAM,QAAQ,UAAU,MAAM,MAAM,QAAQ,QAAQ,IAAI;AAAA,IAClE,KAAK;AAAA,IACL,KAAK;AACH,aAAO,CAAC,MAAM,QAAQ,KAAK,EAAE,OAAO,MAAM,QAAQ,KAAK,EAAE,IAAI;AAAA,IAC/D,KAAK;AACH,aAAO,CAAC,MAAM,QAAQ,OAAO,OAAO,MAAM,QAAQ,OAAO,IAAI;AAAA,IAC/D;AACE,aAAO,CAAC,QAAQ,MAAM,QAAQ,IAAI;AAAA,EACtC;AACF;","names":[]}

package/dist/chunk-5WNQJ5KS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/DataViews/data-views-bar-controls.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * THE TWO BARE AFFORDANCES ON THE FILTER BAR.\n *\n * Neither opens anything, which is what sets them apart from every other\n * control on that row and why they are styled flat rather than as outlined\n * pills: one clears the filters, one leaves a search takeover. Giving them a\n * pill's weight made \"Limpar\" read as a sixth filter.\n *\n * Their own module because `data-views-inline-bar` outgrew the file-size gate.\n */\nimport CloseRoundedIcon from \"@mui/icons-material/CloseRounded\";\nimport FilterAltOffRoundedIcon from \"@mui/icons-material/FilterAltOffRounded\";\nimport Tooltip from \"@mui/material/Tooltip/index.js\";\n\nimport { Box } from \"../../../mui/Box\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\n\n/**\n * \"Limpar\" — one gesture back to the unfiltered list.\n *\n * Present ONLY while something is applied, and last in the cluster, because it\n * is destructive and must never be where a filter control was a moment ago.\n * Each pill already carries its own ✕; this is the other job — six applied\n * filters is six ✕ hunts, and the operator who wants \"show me everything\n * again\" has no way to say it.\n *\n * Loses its label on the same rung Exibir/Exportar lose theirs, and keeps a\n * tooltip when it does: it is one of the two controls (with the search) whose\n * icon has to carry the whole meaning on a phone.\n */\nexport function ClearAllControl({\n  onClearAll,\n  compact,\n  testIdPrefix,\n}: {\n  onClearAll: () => void;\n  compact: boolean;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  // No border, no fill. Every other control on this row is an outlined pill\n  // because it OPENS something; this one is an escape hatch, and giving it the\n  // same weight made it read as a sixth filter. Quiet until hovered.\n  const button = (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      onClick={onClearAll}\n      data-testid={`${testIdPrefix}-clear-all`}\n      aria-label={copy.filters.clearAll}\n      sx={{\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        gap: 0.5,\n        height: 34,\n        px: compact ? 0.75 : 1,\n        border: 0,\n        borderRadius: 1,\n        bgcolor: \"transparent\",\n        cursor: \"pointer\",\n        font: \"inherit\",\n        fontSize: \"0.8125rem\",\n        whiteSpace: \"nowrap\",\n        color: \"text.secondary\",\n        \"&:hover\": { color: \"text.primary\", bgcolor: \"action.hover\" },\n      }}\n    >\n      <FilterAltOffRoundedIcon sx={{ fontSize: 16 }} />\n      {!compact && <Box component=\"span\">{copy.filters.clear}</Box>}\n    </Box>\n  );\n  return compact ? <Tooltip title={copy.filters.clearAll}>{button}</Tooltip> : button;\n}\n\n/**\n * The way out of a search takeover.\n *\n * A phone has no Escape key, and without this the takeover is a one-way door\n * onto a bar with no filters on it.\n\n/**\n * The way out of a search takeover.\n *\n * A phone has no Escape key, and without this the takeover is a one-way door\n * onto a bar with no filters on it.\n */\nexport function CloseSearchControl({\n  onClose,\n  testIdPrefix,\n}: {\n  onClose: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Tooltip title={copy.search.close}>\n      <Box\n        component=\"button\"\n        type=\"button\"\n        onClick={onClose}\n        aria-label={copy.search.close}\n        data-testid={`${testIdPrefix}-search-close`}\n        sx={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          height: 34,\n          px: 0.75,\n          border: 0,\n          borderRadius: 1,\n          bgcolor: \"transparent\",\n          cursor: \"pointer\",\n          color: \"text.secondary\",\n          \"&:hover\": { color: \"text.primary\", bgcolor: \"action.hover\" },\n        }}\n      >\n        <CloseRoundedIcon sx={{ fontSize: 18 }} />\n      </Box>\n    </Tooltip>\n  );\n}\n"],"mappings":";;;;;;;;AAYA,OAAO,sBAAsB;AAC7B,OAAO,6BAA6B;AACpC,OAAO,aAAa;AAgChB,SAuBE,KAvBF;AAdG,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAIsB;AACpB,QAAM,OAAO,iBAAiB;AAI9B,QAAM,SACJ;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,SAAS;AAAA,MACT,eAAa,GAAG,YAAY;AAAA,MAC5B,cAAY,KAAK,QAAQ;AAAA,MACzB,IAAI;AAAA,QACF,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,IAAI,UAAU,OAAO;AAAA,QACrB,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,WAAW,EAAE,OAAO,gBAAgB,SAAS,eAAe;AAAA,MAC9D;AAAA,MAEA;AAAA,4BAAC,2BAAwB,IAAI,EAAE,UAAU,GAAG,GAAG;AAAA,QAC9C,CAAC,WAAW,oBAACA,UAAA,EAAI,WAAU,QAAQ,eAAK,QAAQ,OAAM;AAAA;AAAA;AAAA,EACzD;AAEF,SAAO,UAAU,oBAAC,WAAQ,OAAO,KAAK,QAAQ,UAAW,kBAAO,IAAa;AAC/E;AAcO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAGsB;AACpB,QAAM,OAAO,iBAAiB;AAC9B,SACE,oBAAC,WAAQ,OAAO,KAAK,OAAO,OAC1B;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,SAAS;AAAA,MACT,cAAY,KAAK,OAAO;AAAA,MACxB,eAAa,GAAG,YAAY;AAAA,MAC5B,IAAI;AAAA,QACF,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW,EAAE,OAAO,gBAAgB,SAAS,eAAe;AAAA,MAC9D;AAAA,MAEA,8BAAC,oBAAiB,IAAI,EAAE,UAAU,GAAG,GAAG;AAAA;AAAA,EAC1C,GACF;AAEJ;","names":["default"]}