@12-apps/ui 6.36.0 → 6.37.0

package/src/components/form/Checkbox/Checkbox.tsx

@@ -2,7 +2,8 @@ import MuiCheckbox from '@mui/material/Checkbox/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
 import FormControlLabel from '@mui/material/FormControlLabel/index.js';
 import FormHelperText from '@mui/material/FormHelperText/index.js';
-import { alpha, keyframes, styled } from '@mui/material/styles/index.js';
+import { alpha, keyframes, styled, useTheme } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { makeTestId, resolveCheckboxProps } from './Checkbox.helpers';
@@ -19,29 +20,33 @@ import {
 } from './Checkbox.metrics';
 import type { CheckboxProps } from './Checkbox.types';
 import { splitTestId } from '../../../platform/test-id';
-import { rem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
-const pulse = keyframes`
+const pulse = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 ${effectInk(CHECKBOX_PULSE.alpha)};
   }
   70% {
-    box-shadow: 0 0 0 ${CHECKBOX_PULSE.spread}px ${effectInk(0)};
+    box-shadow: 0 0 0 ${rem(theme, CHECKBOX_PULSE.spread)} ${effectInk(0)};
   }
   100% {
     box-shadow: 0 0 0 0 ${effectInk(0)};
   }
 `;
 
-const glow = keyframes`
+const glow = (theme: Theme) => keyframes`
   0%, 100% {
-    box-shadow: 0 0 ${CHECKBOX_GLOW.blur.from}px ${effectInk(CHECKBOX_GLOW.alpha.from)};
+    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.from)} ${effectInk(CHECKBOX_GLOW.alpha.from)};
   }
   50% {
-    box-shadow: 0 0 ${CHECKBOX_GLOW.blur.to}px ${effectInk(CHECKBOX_GLOW.alpha.to)};
+    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.to)} ${effectInk(CHECKBOX_GLOW.alpha.to)};
   }
 `;
 
+/** A variant's corner: a design-px number through the type scale, a percentage as it is. */
+const cornerOf = (theme: Theme, radius: number | string | undefined): string | undefined =>
+  typeof radius === 'number' ? rem(theme, radius) : radius;
+
 const StyledCheckbox = styled(MuiCheckbox, {
   shouldForwardProp: (prop) => !['customVariant', 'ripple', 'glow', 'pulse'].includes(prop as string),
 })<{ 
@@ -53,13 +58,13 @@ const StyledCheckbox = styled(MuiCheckbox, {
   ({ theme, customVariant, ripple, glow: glowProp, pulse: pulseProp }) => ({
     ...(customVariant === 'rounded' && {
       '& .MuiSvgIcon-root': {
-        borderRadius: CHECKBOX_VARIANT.rounded.radius,
+        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.rounded.radius),
       },
     }),
     
     ...(customVariant === 'toggle' && {
       '& .MuiSvgIcon-root': {
-        borderRadius: `${CHECKBOX_VARIANT.toggle.radius}px`,
+        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.toggle.radius),
         transform: `scale(${CHECKBOX_VARIANT.toggle.scale})`,
       },
     }),
@@ -72,10 +77,10 @@ const StyledCheckbox = styled(MuiCheckbox, {
         },
       }),
       ...(glowProp && {
-        animation: `${glow} ${CHECKBOX_GLOW.ms / 1000}s ease-in-out infinite`,
+        animation: `${glow(theme)} ${CHECKBOX_GLOW.ms / 1000}s ease-in-out infinite`,
       }),
       ...(pulseProp && {
-        animation: `${pulse} ${CHECKBOX_PULSE.ms / 1000}s infinite`,
+        animation: `${pulse(theme)} ${CHECKBOX_PULSE.ms / 1000}s infinite`,
       }),
       '&:hover': {
         backgroundColor: alpha(theme.palette.primary.main, CHECKBOX_HOVER_ALPHA),
@@ -96,7 +101,7 @@ const StyledFormControlLabel = styled(FormControlLabel, {
   shouldForwardProp: (prop) => prop !== 'error',
 })<{ error?: boolean }>(
   ({ theme, error }) => ({
-    marginLeft: CHECKBOX_LABEL.marginLeft,
+    marginLeft: rem(theme, CHECKBOX_LABEL.marginLeft),
     '& .MuiFormControlLabel-label': {
       color: error ? theme.palette.error.main : theme.palette.text.primary,
       fontSize: rem(theme, CHECKBOX_LABEL.fontSize),
@@ -123,6 +128,7 @@ export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
       disabled,
       ...others
     } = resolveCheckboxProps(rawProps);
+    const theme = useTheme();
     const isDisabled = disabled || loading;
     const { testId: dataTestId, rest: props } = splitTestId(others);
     const testId = makeTestId(dataTestId);
@@ -141,13 +147,13 @@ export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
         />
         {loading && (
           <CircularProgress
-            size={CHECKBOX_SPINNER.size}
+            size={rem(theme, CHECKBOX_SPINNER.size)}
             sx={{
               position: 'absolute',
               top: '50%',
               left: '50%',
-              marginTop: `${CHECKBOX_SPINNER.offset}px`,
-              marginLeft: `${CHECKBOX_SPINNER.offset}px`,
+              marginTop: sxRem(CHECKBOX_SPINNER.offset),
+              marginLeft: sxRem(CHECKBOX_SPINNER.offset),
               color: 'primary.main',
             }}
           />

package/src/components/form/CodeEditor/CodeEditor.helpers.ts

@@ -7,7 +7,6 @@ export const makeTestId =
     dataTestId ? `${dataTestId}-${suffix}` : `code-editor-${suffix}`;
 
 type CodeEditorDefaultedKeys =
-  | 'height'
   | 'theme'
   | 'readOnly'
   | 'lineNumbers'
@@ -21,7 +20,6 @@ type ResolvedCodeEditorProps = CodeEditorProps &
   Required<Pick<CodeEditorProps, CodeEditorDefaultedKeys>>;
 
 const CODE_EDITOR_DEFAULTS: Pick<CodeEditorProps, CodeEditorDefaultedKeys> = {
-  height: '400px',
   theme: 'auto',
   readOnly: false,
   lineNumbers: true,

package/src/components/form/CodeEditor/CodeEditor.md

@@ -74,7 +74,7 @@ function EditorWithSave() {
 
 ### Optional Props
 
-- **`height`** (`string`): Editor height (default: `'400px'`)
+- **`height`** (`string`): Editor height (default: the design's 400px through the type scale — `25rem` at MUI's defaults)
 - **`theme`** (`EditorTheme`): Color theme (default: `'auto'`)
   - Options: `'light' | 'dark' | 'auto'`
 - **`onChange`** (`(value: string) => void`): Callback when content changes

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

@@ -21,8 +21,8 @@ const EditorContainer = styled(Paper)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
-  backdropFilter: 'blur(10px)',
-  WebkitBackdropFilter: 'blur(10px)',
+  backdropFilter: `blur(${rem(theme, 10)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
   border: `1px solid ${fieldEdge(theme)}`,
   borderRadius: fieldRadius(theme),
   overflow: 'hidden' }));
@@ -31,7 +31,7 @@ const EditorWrapper = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'fullscreen' })<{ fullscreen: boolean }>(({ theme, fullscreen }) => ({
   position: 'relative',
   flex: 1,
-  minHeight: 200,
+  minHeight: rem(theme, 200),
   ...(fullscreen && {
     position: 'fixed',
     top: 0,
@@ -102,7 +102,7 @@ const buildEditorOptions = ({
     renderLineHighlight: 'all',
     selectOnLineNumbers: true,
     roundedSelection: true,
-    padding: { top: 16, bottom: 16 },
+    padding: { top: remPx(theme, 16), bottom: remPx(theme, 16) },
     fontFamily: 'Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace',
     fontLigatures: true });
 
@@ -161,7 +161,7 @@ export const CodeEditor: FC<CodeEditorProps> = (componentProps) => {
         )}
 
         <Editor
-          height={editor.isFullscreen ? '100vh' : height}
+          height={editor.isFullscreen ? '100vh' : (height ?? rem(muiTheme, 400))}
           language={language}
           value={value}
           onChange={(newValue) => onChange?.(newValue || '')}

package/src/components/form/CodeEditor/CodeEditor.types.ts

@@ -14,7 +14,7 @@ export interface CodeEditorProps {
   copy: CodeEditorCopy;
   /** Programming language for syntax highlighting */
   language: EditorLanguage;
-  /** Editor height (default: '400px') */
+  /** Editor height (default: the design's 400px through the type scale — `25rem` at MUI's defaults) */
   height?: string;
   /** Editor color theme (default: 'auto') */
   theme?: EditorTheme;

package/src/components/form/Command/Command.hooks.ts

@@ -14,7 +14,6 @@ type CommandDefaultedKeys =
   | 'pulse'
   | 'loading'
   | 'disabled'
-  | 'maxHeight'
   | 'emptyMessage'
   | 'showCategories'
   | 'showShortcuts'
@@ -37,7 +36,6 @@ const COMMAND_DEFAULTS: Pick<CommandProps, CommandDefaultedKeys> = {
   pulse: false,
   loading: false,
   disabled: false,
-  maxHeight: 400,
   emptyMessage: 'No results found',
   showCategories: true,
   showShortcuts: true,

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

@@ -2,6 +2,7 @@ import Box from '@mui/material/Box/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
 import Divider from '@mui/material/Divider/index.js';
 import Typography from '@mui/material/Typography/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type {
@@ -9,6 +10,7 @@ import type {
   CommandLoadingProps,
   CommandSeparatorProps,
 } from './Command.types';
+import { rem } from '../../../tokens/relative';
 
 export const CommandEmpty: React.FC<CommandEmptyProps> = ({
   message = 'No results found',
@@ -35,7 +37,9 @@ export const CommandLoading: React.FC<CommandLoadingProps> = ({
   className,
   style,
   dataTestId,
-}) => (
+}) => {
+  const theme = useTheme();
+  return (
     <Box
       className={className}
       data-testid={dataTestId}
@@ -48,12 +52,13 @@ export const CommandLoading: React.FC<CommandLoadingProps> = ({
         ...style,
       }}
     >
-      <CircularProgress size={24} />
+      <CircularProgress size={rem(theme, 24)} />
       <Typography variant="body2" color="text.secondary">
         {message}
       </Typography>
     </Box>
   );
+};
 
 export const CommandSeparator: React.FC<CommandSeparatorProps> = ({
   className,

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

@@ -8,18 +8,18 @@ type CommandVariant = NonNullable<CommandProps['variant']>;
 type CommandColor = NonNullable<CommandProps['color']>;
 type CommandSize = NonNullable<CommandProps['size']>;
 
-const SIZE_MAP: Record<CommandSize, { width: number; fontPx: number }> = {
-  xs: { width: 400, fontPx: 12 },
-  sm: { width: 450, fontPx: 14 },
-  md: { width: 500, fontPx: 16 },
-  lg: { width: 550, fontPx: 18 },
-  xl: { width: 600, fontPx: 20 },
+const SIZE_MAP: Record<CommandSize, { widthPx: number; fontPx: number }> = {
+  xs: { widthPx: 400, fontPx: 12 },
+  sm: { widthPx: 450, fontPx: 14 },
+  md: { widthPx: 500, fontPx: 16 },
+  lg: { widthPx: 550, fontPx: 18 },
+  xl: { widthPx: 600, fontPx: 20 },
 };
 
 /** The paper's width and type for a size, both design px read through the type scale. */
 export const commandSizeStyles = (theme: Theme, size: CommandSize) => {
-  const { width, fontPx } = SIZE_MAP[size] || SIZE_MAP.md;
-  return { width: rem(theme, width), fontSize: rem(theme, fontPx) };
+  const { widthPx, fontPx } = SIZE_MAP[size] || SIZE_MAP.md;
+  return { width: rem(theme, widthPx), fontSize: rem(theme, fontPx) };
 };
 
 const emphasisStyles = (
@@ -29,13 +29,13 @@ const emphasisStyles = (
   pulse: boolean,
 ): CSSObject => ({
   ...(glow && {
-    boxShadow: `0 0 20px ${alpha(accentFor(theme, color).main, 0.4)}`,
+    boxShadow: `0 0 ${rem(theme, 20)} ${alpha(accentFor(theme, color).main, 0.4)}`,
   }),
   ...(pulse && {
     animation: 'pulse 2s infinite',
     '@keyframes pulse': {
       '0%': { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0.4)}` },
-      '70%': { boxShadow: `0 0 0 10px ${alpha(accentFor(theme, color).main, 0)}` },
+      '70%': { boxShadow: `0 0 0 ${rem(theme, 10)} ${alpha(accentFor(theme, color).main, 0)}` },
       '100%': { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0)}` },
     },
   }),
@@ -50,7 +50,7 @@ const surfaceStyles = (
     case 'glass':
       return {
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
-        backdropFilter: 'blur(20px)',
+        backdropFilter: `blur(${rem(theme, 20)})`,
         border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`,
       };
     case 'gradient':

package/src/components/form/Command/Command.tsx

@@ -15,7 +15,7 @@ import ListItemIcon from '@mui/material/ListItemIcon/index.js';
 import ListItemText from '@mui/material/ListItemText/index.js';
 import TextField from '@mui/material/TextField/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { alpha, useTheme } from '@mui/material/styles/index.js';
+import { alpha, useTheme, type Theme } from '@mui/material/styles/index.js';
 import React, { useMemo } from 'react';
 
 import { resolveCommandProps, useCommandPalette } from './Command.hooks';
@@ -29,10 +29,19 @@ import type {
   CommandListProps,
   CommandProps,
 } from './Command.types';
-import { rem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 export { CommandEmpty, CommandLoading, CommandSeparator } from './Command.parts';
 
+/**
+ * The list's `maxHeight`: a number is design px (400 when unset), read through
+ * the type scale; a string is any CSS length, and a number ≤ 1 stays the
+ * fraction `sx` reads it as (an `sx` callback's result still goes through the
+ * sizing transform).
+ */
+const contentMaxHeight = (theme: Theme, value: number | string = 400): number | string =>
+  typeof value === 'number' && value > 1 ? rem(theme, value) : value;
+
 const makeTestId = (dataTestId?: string) => (suffix: string) =>
   dataTestId ? `${dataTestId}-${suffix}` : undefined;
 
@@ -78,7 +87,7 @@ export const Command: React.FC<CommandProps> = (rawProps) => {
 
         <Divider />
 
-        <DialogContent sx={{ p: 0, maxHeight: props.maxHeight, overflow: 'auto' }}>
+        <DialogContent sx={{ p: 0, maxHeight: (t: Theme) => contentMaxHeight(t, props.maxHeight), overflow: 'auto' }}>
           <CommandBody
             loading={props.loading}
             items={filteredItems}
@@ -300,7 +309,7 @@ const CommandItemComponent: React.FC<CommandItemProps> = ({
       }}
     >
       {icon && (
-        <ListItemIcon sx={{ minWidth: 40 }}>
+        <ListItemIcon sx={{ minWidth: sxRem(40) }}>
           {icon}
         </ListItemIcon>
       )}
@@ -323,7 +332,7 @@ const CommandItemComponent: React.FC<CommandItemProps> = ({
           size="small"
           variant="outlined"
           sx={{
-            height: 20,
+            height: sxRem(20),
             fontSize: rem(theme, 11.2),
             ml: 1,
           }}

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

@@ -1,6 +1,6 @@
 'use client';
 
-import type { Theme } from '@mui/material/styles/index.js';
+import { useTheme, type Theme } from '@mui/material/styles/index.js';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete/index.js';
 import type { AutocompleteRenderInputParams } from '@mui/material/Autocomplete/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
@@ -15,6 +15,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';
+import { rem, sxRem } from '../../../tokens/relative';
 
 /** Internal option shape: a real option, or the synthetic "create new" row. */
 interface InternalOption extends CreatableSelectOption {
@@ -27,8 +28,8 @@ const CREATE_PREFIX = ' create:';
 
 const filterOptions = createFilterOptions<InternalOption>();
 
-/** How far one nesting level indents a dropdown row, in px. */
-const INDENT_STEP = 16;
+/** A dropdown row's left inset at `depth`: one 16px step per level, plus the first, through the type scale. */
+const rowInset = (theme: Theme, depth: number): string => rem(theme, 16 * (1 + depth));
 
 /** `sm`/`md` → MUI's own scale, the same mapping {@link Input} uses. */
 // All five house stops onto MUI's two. `xs`/`sm` draw small; `md` and up draw
@@ -43,7 +44,7 @@ const fieldSx = {
       borderColor: (theme: Theme) => fieldEdge(theme),
     },
     '&:hover fieldset': { borderColor: 'primary.main' },
-    '&.Mui-focused fieldset': { borderColor: 'primary.main', borderWidth: 2 },
+    '&.Mui-focused fieldset': { borderColor: 'primary.main', borderWidth: sxRem(2) },
     '&.Mui-error fieldset': { borderColor: 'error.main' },
   },
 } as const;
@@ -80,13 +81,14 @@ function buildFilter(
 function renderIndentedOption(
   props: React.HTMLAttributes<HTMLLIElement>,
   option: InternalOption,
+  theme: Theme,
 ): React.JSX.Element {
   const { key, ...rest } = props as typeof props & { key?: string };
   return (
     <li
       key={key ?? option.value}
       {...rest}
-      style={{ paddingLeft: INDENT_STEP * (1 + (option.depth ?? 0)) }}
+      style={{ paddingLeft: rowInset(theme, option.depth ?? 0) }}
     >
       {option.label}
     </li>
@@ -103,6 +105,7 @@ function renderField(
     loading: boolean;
     size: SizeValue;
     dataTestId: string;
+    theme: Theme;
   },
 ): React.JSX.Element {
   return (
@@ -119,7 +122,7 @@ function renderField(
           ...params.InputProps,
           endAdornment: (
             <>
-              {field.loading ? <CircularProgress color="inherit" size={18} /> : null}
+              {field.loading ? <CircularProgress color="inherit" size={rem(field.theme, 18)} /> : null}
               {params.InputProps.endAdornment}
             </>
           ),
@@ -199,6 +202,7 @@ export function CreatableSelect({
   dataTestId = 'creatable-select',
 }: CreatableSelectProps): React.JSX.Element {
   const inputId = useId();
+  const theme = useTheme();
   const { items, selected } = useInternalOptions(options, value);
 
   return (
@@ -228,11 +232,11 @@ export function CreatableSelect({
         slotProps={{ popper: { sx: { zIndex: stackedOverlayZIndex } } }}
         getOptionLabel={(option) => (typeof option === 'string' ? option : option.label)}
         isOptionEqualToValue={(option, current) => option.value === current.value}
-        renderOption={renderIndentedOption}
+        renderOption={(props, option) => renderIndentedOption(props, option, theme)}
         filterOptions={buildFilter(onCreate, createOptionLabel)}
         onChange={(_event, next) => handlePick(next, onChange, onCreate)}
         renderInput={(params) =>
-          renderField(params, { inputId, placeholder, error, loading, size, dataTestId })
+          renderField(params, { inputId, placeholder, error, loading, size, dataTestId, theme })
         }
       />
       {error && <FormMessage error dataTestId={`${dataTestId}-message`}>{error}</FormMessage>}

package/src/components/form/DateRangePicker/DateRangePicker.tsx

@@ -25,6 +25,7 @@
 import Box from '@mui/material/Box/index.js';
 import Paper from '@mui/material/Paper/index.js';
 import useMediaQuery from '@mui/material/useMediaQuery/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import type { SxProps, Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
@@ -39,9 +40,6 @@ import { DateRangeQuickList } from './DateRangePickerQuickList';
 
 const CALENDAR_CLASS = 'date-range-picker__calendar';
 
-/** Below this the picker is a phone layout. MUI's own `md`, written out. */
-const NARROW_QUERY = '(max-width:899.95px)';
-
 const ROOT_SX: SxProps<Theme> = {
   display: 'inline-flex',
   flexDirection: 'column',
@@ -119,13 +117,17 @@ type Picker = ReturnType<typeof useDateRangePicker>;
  * A media query rather than an `sx` breakpoint: this decides what to RENDER,
  * and CSS cannot un-render a second month.
  *
- * The query is a LITERAL, not `theme.breakpoints.down('md')`. The callback form
- * reads the theme from context and throws on a null one, so a consumer that
- * mounts this outside a `ThemeProvider` would crash — which the unit tests here
- * do, and which is a fair thing for a consumer to do.
+ * Below the theme's `md` the picker is a phone layout — the same breakpoint the
+ * `sx` blocks here switch on. The query is a STRING built from `useTheme()`,
+ * not `useMediaQuery`'s callback form: the callback reads the theme from
+ * context and throws on a null one, so a consumer that mounts this outside a
+ * `ThemeProvider` would crash — which the unit tests here do, and which is a
+ * fair thing for a consumer to do. `useTheme()` falls back to MUI's default
+ * theme there, whose `md` is the `(max-width:899.95px)` this used to spell out.
  */
 function useMonthCount(requested: number | undefined): number | undefined {
-  const narrow = useMediaQuery(NARROW_QUERY);
+  const theme = useTheme();
+  const narrow = useMediaQuery(theme.breakpoints.down('md'));
   return narrow ? 1 : requested;
 }
 

package/src/components/form/DateRangePicker/DateRangePickerQuickList.tsx

@@ -17,7 +17,7 @@ import type { SxProps, Theme } from '@mui/material/styles/index.js';
 import React, { useId } from 'react';
 
 import type { ResolvedQuickRange } from './DateRangePicker.types';
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 const optionSx = (active: boolean, overMax: boolean): SxProps<Theme> => ({
   display: 'block',
@@ -46,7 +46,11 @@ const optionSx = (active: boolean, overMax: boolean): SxProps<Theme> => ({
   color: overMax ? 'text.disabled' : active ? 'primary.main' : 'text.primary',
   backgroundColor: active ? 'action.selected' : 'transparent',
   '&:hover': { backgroundColor: overMax ? 'transparent' : 'action.hover' },
-  '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 1 },
+  '&:focus-visible': {
+    outline: (theme: Theme) => `${rem(theme, 2)} solid`,
+    outlineColor: 'primary.main',
+    outlineOffset: sxRem(1),
+  },
 });
 
 const REASON_SX: SxProps<Theme> = {
@@ -107,8 +111,8 @@ export function DateRangeQuickList({
         '&::-webkit-scrollbar': { display: 'none' },
         alignContent: 'flex-start',
         gap: 0.5,
-        minWidth: { md: 168 },
-        maxWidth: { md: 200 },
+        minWidth: (theme: Theme) => ({ md: rem(theme, 168) }),
+        maxWidth: (theme: Theme) => ({ md: rem(theme, 200) }),
       }}
     >
       {options.map((option) => {

package/src/components/form/Form/Form.tsx

@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box/index.js';
 import Stack from '@mui/material/Stack/index.js';
-import { styled } from '@mui/material/styles/index.js';
+import { styled, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type {
@@ -31,18 +31,14 @@ const spacingMap = {
   xl: 5,
 };
 
-const maxWidthMap = {
-  sm: '600px',
-  md: '900px',
-  lg: '1200px',
-  xl: '1536px',
-  full: '100%',
-};
+/** A form's width cap: the theme's breakpoint of that name, through the type scale; `full` is uncapped. */
+const formMaxWidth = (theme: Theme, maxWidth: NonNullable<FormProps['maxWidth']>): string =>
+  maxWidth === 'full' ? '100%' : rem(theme, theme.breakpoints.values[maxWidth]);
 
 export const Form = React.forwardRef<HTMLFormElement, FormProps>(
   ({ variant = 'vertical', maxWidth = 'full', spacing = 'md', children, dataTestId, ...props }, ref) => (
       <StyledForm ref={ref} variant={variant} role="form" data-testid={dataTestId} {...props}>
-        <Box sx={{ maxWidth: maxWidthMap[maxWidth], width: '100%' }}>
+        <Box sx={{ maxWidth: (theme) => formMaxWidth(theme, maxWidth), width: '100%' }}>
           {variant === 'inline' ? (
             children
           ) : (
@@ -100,7 +96,7 @@ const StyledFormField = styled(Box, {
   ({ theme, variant }) => ({
     display: variant === 'horizontal' ? 'grid' : 'flex',
     flexDirection: variant === 'horizontal' ? undefined : 'column',
-    gridTemplateColumns: variant === 'horizontal' ? '200px 1fr' : undefined,
+    gridTemplateColumns: variant === 'horizontal' ? `${rem(theme, 200)} 1fr` : undefined,
     columnGap: variant === 'horizontal' ? theme.spacing(1) : undefined,
     alignItems: variant === 'horizontal' ? 'center' : undefined,
   }),

package/src/components/form/HeaderActions/HeaderActions.tsx

@@ -11,6 +11,7 @@ import React, { useState } from 'react';
 
 import { HeaderButton } from '../HeaderButton';
 import type { HeaderActionItem, HeaderActionsProps } from './HeaderActions.types';
+import { sxRem } from '../../../tokens/relative';
 
 /** Drop the gated-away entries, so everything below can count what is left. */
 function present(
@@ -122,7 +123,7 @@ export function HeaderActions({
                 }}
                 data-testid={action.dataTestId ?? action.id}
               >
-                <ListItemIcon sx={{ minWidth: 32 }}>{action.icon}</ListItemIcon>
+                <ListItemIcon sx={{ minWidth: sxRem(32) }}>{action.icon}</ListItemIcon>
                 <ListItemText>{action.text}</ListItemText>
               </MenuItem>
             ))}