@12-apps/ui 2.1.0 → 3.1.0

package/components-catalog.md

@@ -311,6 +311,14 @@ Components for user input and form interactions.
 **Location**: `src/components/form/Calendar`
 **Docs**: `src/components/form/Calendar/Calendar.md`
 
+### DateRangePicker
+**Purpose**: Pick a range of days three ways over one value — calendar, quick ranges, typed dates
+**Use Cases**: Report periods, analytics filters, booking windows, any from/to a reader edits
+**Features**: Range `Calendar` reused (not forked), quick-range column (today, yesterday, this week, last 7/30/365 days, this month, this quarter, this year) with `aria-pressed`, masked `dd/mm/aaaa` fields, `timeZone`-aware "today", a `maxRangeDays` cap that disables over-cap options WITH the reason instead of clamping, overridable copy, stacks on narrow screens
+**Types**: `DateRangeDraft`, `DayWindow`, `DateRangeStatus`, `QuickRange`
+**Location**: `src/components/form/DateRangePicker`
+**Docs**: `src/components/form/DateRangePicker/DateRangePicker.md`
+
 ### Checkbox
 **Purpose**: Toggle selection checkbox
 **Use Cases**: Multi-select, boolean options, agreements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "2.1.0",
+  "version": "3.1.0",
   "license": "MIT",
   "packageManager": "pnpm@9.0.0",
   "type": "module",
@@ -84,6 +84,7 @@
     "./form/CodeEditor": "./src/components/form/CodeEditor/index.ts",
     "./form/Command": "./src/components/form/Command/index.ts",
     "./form/CreatableSelect": "./src/components/form/CreatableSelect/index.ts",
+    "./form/DateRangePicker": "./src/components/form/DateRangePicker/index.ts",
     "./form/Form": "./src/components/form/Form/index.ts",
     "./form/HeaderButton": "./src/components/form/HeaderButton/index.ts",
     "./form/total-form": "./src/components/form/total-form/index.ts",

package/src/components/data-display/Alert/Alert.types.ts

@@ -11,7 +11,7 @@ export interface AlertProps extends Omit<MuiAlertProps, 'variant' | 'color' | 'r
   /**
    * The color of the alert (when not using variant-specific colors)
    */
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
   
   /**
    * Whether the alert should have a glow effect

package/src/components/data-display/Avatar/Avatar.types.ts

@@ -57,7 +57,7 @@ export interface AvatarProps extends Omit<MuiAvatarProps, 'variant'> {
   /**
    * Color of the avatar background when no image is provided
    */
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
 
   /**
    * Whether the avatar is in a loading state

package/src/components/data-display/Avatar/Avatar.view.tsx

@@ -64,7 +64,11 @@ const getColorFromTheme = (theme: Theme, color: string): PaletteLike => {
     secondary: theme.palette.secondary,
     success: theme.palette.success,
     warning: theme.palette.warning,
-    error: theme.palette.error,
+    info: theme.palette.info,
+    // `danger`, not `error`. This map was keyed on MUI's word while the prop
+    // took the house one, so `danger` matched nothing and fell through to
+    // primary — a red avatar rendering blue, silently.
+    danger: theme.palette.error,
     neutral: { main: theme.palette.grey[700], contrastText: '#fff' },
   };
 

package/src/components/data-display/Badge/Badge.styles.ts

@@ -24,8 +24,10 @@ const getColorFromTheme = (theme: Theme, color: string) => {
     secondary: theme.palette.secondary,
     success: theme.palette.success,
     warning: theme.palette.warning,
-    error: theme.palette.error,
     info: theme.palette.info,
+    // `danger`, the house word the prop actually takes. Keyed on MUI's `error`
+    // it matched nothing and fell through to the default.
+    danger: theme.palette.error,
     neutral: {
       main: theme.palette.grey[600],
       light: theme.palette.grey[400],
@@ -74,7 +76,14 @@ export const getSizeStyles = (size: BadgeSize) => {
       fontSize: '0.875rem',
       padding: '0 8px',
       dotSize: 12,
-      iconSize: '1rem' } };
+      iconSize: '1rem' },
+    xl: {
+      minWidth: 28,
+      height: 28,
+      fontSize: '1rem',
+      padding: '0 10px',
+      dotSize: 14,
+      iconSize: '1.125rem' } };
 
   return sizeMap[size] || sizeMap.md;
 };

package/src/components/data-display/Badge/Badge.types.ts

@@ -14,7 +14,7 @@ export type BadgeVariant =
   | 'success'
   | 'warning';
 
-export type BadgeSize = Extract<SizeValue, 'xs' | 'sm' | 'md' | 'lg'>;
+export type BadgeSize = SizeValue;
 
 export interface BadgeProps extends Omit<MuiBadgeProps, 'variant' | 'color' | 'content'> {
   /**

package/src/components/data-display/Carousel/Carousel.types.ts

@@ -14,7 +14,7 @@ export interface CarouselProps {
   items: CarouselItem[];
   variant?: 'default' | 'glass' | 'gradient' | 'elevated' | 'minimal' | 'cards';
   size?: SizeValue;
-  color?: Exclude<ColorValue, 'neutral'>;
+  color?: ColorValue;
   autoPlay?: boolean;
   autoPlayInterval?: number;
   loop?: boolean;
@@ -51,7 +51,7 @@ export interface CarouselIndicatorsProps {
   activeIndex: number;
   onSelect: (index: number) => void;
   position?: 'top' | 'bottom' | 'left' | 'right';
-  color?: Exclude<ColorValue, 'neutral'>;
+  color?: ColorValue;
   variant?: 'dots' | 'lines' | 'numbers';
   className?: string;
   style?: CSSProperties;
@@ -64,8 +64,8 @@ export interface CarouselArrowsProps {
   disabled?: boolean;
   disablePrev?: boolean;
   disableNext?: boolean;
-  color?: Exclude<ColorValue, 'neutral'>;
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  color?: ColorValue;
+  size?: SizeValue;
   className?: string;
   style?: CSSProperties;
 }

package/src/components/data-display/Chart/Chart.types.ts

@@ -28,7 +28,7 @@ export interface ChartProps {
   type?: ChartType;
   variant?: 'default' | 'glass' | 'gradient' | 'elevated' | 'minimal' | 'neon';
   size?: SizeValue;
-  color?: Exclude<ColorValue, 'neutral'>;
+  color?: ColorValue;
   height?: number;
   width?: number | string;
   glow?: boolean;

package/src/components/data-display/Chart/ChartSpec.types.ts

@@ -18,7 +18,7 @@ export type ChartSpecType = 'line' | 'bar' | 'area' | 'pie' | 'donut';
  * The house vocabulary minus `neutral`: a data series is always an accent, and
  * an unaccented series would be indistinguishable from the grid it sits on.
  */
-export type ChartSemanticColor = Exclude<ColorValue, 'neutral'>;
+export type ChartSemanticColor = ColorValue;
 
 /**
  * Number formatting applied to tooltip values and the y axis.

package/src/components/data-display/Chip/Chip.tsx

@@ -15,7 +15,7 @@ import type { ChipProps } from './Chip.types';
 
 /** MUI draws two chip sizes; ours are the house abbreviations for them. */
 const muiSizeFor = (size: NonNullable<ChipProps['size']>): 'small' | 'medium' =>
-  size === 'sm' ? 'small' : 'medium';
+  size === 'xs' || size === 'sm' ? 'small' : 'medium';
 
 type MuiChipColor =
   | 'primary'

package/src/components/data-display/Chip/Chip.types.ts

@@ -13,10 +13,13 @@ export type ChipVariant = 'filled' | 'outlined';
  * `ChipSize` nowhere and reached MUI as an unknown value, and the chip silently
  * rendered at the default `medium`. Twelve of them are doing that today.
  *
- * Only two entries, because a MUI chip only draws two. Inventing `lg` here would
- * put a size in the type that nothing can render.
+ * All five stops, and `Chip.tsx` draws them: MUI gives a chip two heights, so
+ * `xs`/`sm` map to small and `md` and up to medium. Offering fewer than five
+ * here is what made callers write `size="sm"` against a type that did not have
+ * it — the scale is the vocabulary, and a component that speaks a dialect of it
+ * is the problem, not the solution.
  */
-export type ChipSize = Extract<SizeValue, 'sm' | 'md'>;
+export type ChipSize = SizeValue;
 
 /**
  * The colours a chip can draw — THE HOUSE VOCABULARY, identical to `ButtonProps`.

package/src/components/data-display/DataViews/data-views-day-input.tsx

@@ -70,6 +70,36 @@ export function maskBrDate(raw: string): string {
   return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4)}`;
 }
 
+/**
+ * What has to land on the `<input>` itself rather than on the `TextField`.
+ *
+ * Anything `TextField` does not recognise is spread onto its root `FormControl`
+ * div. `inputMode` went up there once: the attribute sat on a non-editable
+ * wrapper, meant nothing, and the phone went on offering the letter keyboard
+ * for a field that only takes digits (the `dd/mm/aaaa` hint under a QWERTY
+ * layout). Only the `<input>` this reaches decides which keypad opens — and the
+ * same is true of `aria-describedby`, which on the wrapper points at a
+ * description no screen reader will read out for the field.
+ *
+ * `numeric` and not `tel`: both raise a keypad, but the phone one is a dialler
+ * with `+ * #` on it — keys that cannot occur in a date. A paste carrying
+ * separators still lands, because the MASK is what filters the text; the keypad
+ * only narrows what a thumb can reach for.
+ *
+ * Autofill off for the same reason: the browser's saved-value strip covers the
+ * keypad to suggest names and addresses, none of which are a date, and none of
+ * which the mask would keep.
+ */
+function dayInputProps(testId: string, describedBy: string | undefined) {
+  return {
+    'data-testid': testId,
+    maxLength: 10,
+    inputMode: 'numeric' as const,
+    autoComplete: 'off',
+    ...(describedBy ? { 'aria-describedby': describedBy } : {}),
+  };
+}
+
 /**
  * One end of a day window. The BOUND stays `AAAA-MM-DD` — the form the backend's
  * inclusive day comparison already speaks, and the form the chip label reads —
@@ -80,12 +110,23 @@ export function DayBoundInput({
   value,
   onChange,
   testId,
+  error = false,
+  describedBy,
 }: {
   label: string;
   /** The applied bound, `AAAA-MM-DD`, or undefined when this end is open. */
   value: string | undefined;
   onChange: (bound: string | undefined) => void;
   testId: string;
+  /**
+   * Paint the field as rejected. It only ever writes a real day by itself, so
+   * this is for a caller judging the PAIR: a window whose end precedes its
+   * start is two valid days and one impossible period, and the field it was
+   * typed into is the only place to say which half is being complained about.
+   */
+  error?: boolean;
+  /** Id of the element carrying that complaint, so it is read WITH the field. */
+  describedBy?: string;
 }): React.JSX.Element {
   const applied = value ?? '';
   const [text, setText] = useState(() => isoToBr(applied));
@@ -104,6 +145,7 @@ export function DayBoundInput({
       size="small"
       type="text"
       label={label}
+      error={error}
       // The mask IS the placeholder, so the expected order is on screen before
       // the first keystroke rather than discovered by getting it wrong.
       placeholder="dd/mm/aaaa"
@@ -124,28 +166,7 @@ export function DayBoundInput({
       onBlur={() => setText(isoToBr(applied))}
       // The placeholder occupies the space an un-shrunk label would render into.
       InputLabelProps={{ shrink: true }}
-      // `inputMode` HAS to be here rather than on the TextField. Anything
-      // TextField does not recognise is spread onto its root `FormControl` div,
-      // and `inputMode` is not in that list — so passing it up there put the
-      // attribute on a non-editable wrapper, where it means nothing, and the
-      // phone went on offering the letter keyboard for a field that only takes
-      // digits (the `dd/mm/aaaa` hint sitting under a QWERTY layout). Only the
-      // `<input>` this reaches decides which keypad opens.
-      //
-      // `numeric` and not `tel`: both raise a keypad, but the phone one is a
-      // dialler with `+ * #` on it — keys that cannot occur in a date. A paste
-      // carrying separators still lands, because the MASK is what filters the
-      // text; the keypad only narrows what a thumb can reach for.
-      //
-      // Autofill off for the same reason: the browser's saved-value strip
-      // covers the keypad to suggest names and addresses, none of which are a
-      // date, and none of which the mask would keep.
-      inputProps={{
-        'data-testid': testId,
-        maxLength: 10,
-        inputMode: 'numeric',
-        autoComplete: 'off',
-      }}
+      inputProps={dayInputProps(testId, describedBy)}
       sx={{ width: 165 }}
     />
   );

package/src/components/data-display/DateTimeDisplay/DateTimeDisplay.types.ts

@@ -26,7 +26,7 @@ export interface DateTimeDisplayProps {
    * Size variant
    * @default 'medium'
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
   /**
    * Whether to show a tooltip with full date/time
    * @default true

package/src/components/data-display/InteractiveTooltip/InteractiveTooltip.types.ts

@@ -20,7 +20,7 @@ export interface InteractiveTooltipProps extends Omit<MuiTooltipProps, 'variant'
   /**
    * Size of the tooltip
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
 
   /**
    * Maximum width of the tooltip

package/src/components/data-display/LoadingState/LoadingState.helpers.ts

@@ -4,15 +4,19 @@ export const SIZE_MAP: Record<
   LoadingStateSize,
   { spinner: number; text: 'body2' | 'body1' | 'h6' }
 > = {
+  xs: { spinner: 16, text: 'body2' },
   sm: { spinner: 24, text: 'body2' },
   md: { spinner: 40, text: 'body1' },
   lg: { spinner: 56, text: 'h6' },
+  xl: { spinner: 64, text: 'h6' },
 };
 
 export const SKELETON_ROW_HEIGHT: Record<LoadingStateSize, number> = {
+  xs: 14,
   sm: 20,
   md: 28,
   lg: 36,
+  xl: 44,
 };
 
 type LoadingStateDefaultedKeys = 'variant' | 'size' | 'skeletonRows';

package/src/components/data-display/LoadingState/LoadingState.types.ts

@@ -1,6 +1,6 @@
 import type { SizeValue } from '../../../tokens/scales';
 export type LoadingStateVariant = 'spinner' | 'skeleton';
-export type LoadingStateSize = Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+export type LoadingStateSize = SizeValue;
 
 export interface LoadingStateProps {
   /**

package/src/components/data-display/Progress/Progress.styles.ts

@@ -34,6 +34,7 @@ export const getColorFromTheme = (theme: Theme, color: string): PaletteColor =>
     success: theme.palette.success,
     warning: theme.palette.warning,
     error: theme.palette.error,
+    info: theme.palette.info,
     danger: theme.palette.error, // Add danger alias
   };
 
@@ -42,9 +43,11 @@ export const getColorFromTheme = (theme: Theme, color: string): PaletteColor =>
 };
 
 const SIZE_MAP: Record<ProgressSize, { height: number; circularSize: number; fontSize: string }> = {
+  xs: { height: 2, circularSize: 24, fontSize: '0.625rem' },
   sm: { height: 4, circularSize: 32, fontSize: '0.75rem' },
   md: { height: 6, circularSize: 40, fontSize: '0.875rem' },
   lg: { height: 8, circularSize: 48, fontSize: '1rem' },
+  xl: { height: 10, circularSize: 56, fontSize: '1.125rem' },
 };
 
 export const getSizeStyles = (size?: ProgressSize) => SIZE_MAP[size as ProgressSize] || SIZE_MAP.md;

package/src/components/data-display/Progress/Progress.types.ts

@@ -2,7 +2,7 @@ import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { LinearProgressProps } from '@mui/material';
 
 export type ProgressVariant = 'linear' | 'circular' | 'segmented' | 'gradient' | 'glass';
-export type ProgressSize = Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+export type ProgressSize = SizeValue;
 
 export interface ProgressProps extends Omit<LinearProgressProps, 'variant' | 'color'> {
   /**
@@ -18,7 +18,7 @@ export interface ProgressProps extends Omit<LinearProgressProps, 'variant' | 'co
   /**
    * The color of the progress
    */
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
 
   /**
    * Whether the progress should have a glow effect

package/src/components/data-display/Sheet/Sheet.types.ts

@@ -14,7 +14,7 @@ export interface SheetProps {
    * "the whole viewport", so it extends rather than replaces.
    */
   size?: SizeValue | 'full';
-  color?: Exclude<ColorValue, 'neutral'>;
+  color?: ColorValue;
   glow?: boolean;
   pulse?: boolean;
   glass?: boolean;

package/src/components/data-display/Stepper/Stepper.tsx

@@ -8,6 +8,18 @@ import {
 import React from 'react';
 
 import type { Step, StepItemProps, StepperProps } from './Stepper.types';
+import type { SizeValue } from '../../../tokens/scales';
+
+/**
+ * The five house stops, drawn rather than collapsed.
+ *
+ * These were two-way ternaries on `sm`, which is what a two-value size prop
+ * allows; with the full scale they have to be real values or the three new
+ * stops would render identically to `md` and the prop would be a lie.
+ */
+const STEP_MIN_WIDTH: Record<SizeValue, number> = { xs: 44, sm: 56, md: 80, lg: 96, xl: 112 };
+const STEP_ICON_SIZE: Record<SizeValue, number> = { xs: 14, sm: 18, md: 24, lg: 30, xl: 36 };
+
 
 const StepperRoot = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'orientation',
@@ -37,12 +49,12 @@ const StepItem = styled(Box, {
 }));
 
 /** Circle diameter per size. */
-const CIRCLE_SIZE = { sm: 32, md: 48 } as const;
+const CIRCLE_SIZE: Record<SizeValue, number> = { xs: 24, sm: 32, md: 48, lg: 60, xl: 72 };
 
 const StepButton = styled(Button, {
   shouldForwardProp: (prop) =>
     !['isActive', 'isCompleted', 'clickable', 'stepSize'].includes(prop as string),
-})<{ isActive: boolean; isCompleted: boolean; clickable: boolean; stepSize: 'sm' | 'md' }>(
+})<{ isActive: boolean; isCompleted: boolean; clickable: boolean; stepSize: SizeValue }>(
   ({ theme, isActive, isCompleted, clickable, stepSize }) => ({
     minWidth: CIRCLE_SIZE[stepSize],
     width: CIRCLE_SIZE[stepSize],
@@ -80,7 +92,7 @@ const StepButton = styled(Button, {
 const StepConnector = styled(Box, {
   shouldForwardProp: (prop) =>
     !['orientation', 'isCompleted', 'size'].includes(prop as string),
-})<{ orientation: 'horizontal' | 'vertical'; isCompleted: boolean; size: 'sm' | 'md' }>(
+})<{ orientation: 'horizontal' | 'vertical'; isCompleted: boolean; size: SizeValue }>(
   ({ theme, orientation, isCompleted, size }) => ({
     backgroundColor: isCompleted ? theme.palette.primary.main : theme.palette.grey[300],
     transition: theme.transitions.create('background-color', {
@@ -115,7 +127,7 @@ const StepLabel = styled(Box, {
   marginTop: orientation === 'horizontal' ? 8 : 0,
 }));
 
-type StepSize = 'sm' | 'md';
+type StepSize = SizeValue;
 type LabelVariant = 'caption' | 'body2';
 
 /** Space-joined state classes for a step (active / completed / optional). */
@@ -132,7 +144,7 @@ function stepClasses(isActive: boolean, isCompleted: boolean, optional?: boolean
 /** The circle content-column width per orientation/size. */
 function contentSx(orientation: 'horizontal' | 'vertical', size: StepSize) {
   return orientation === 'horizontal'
-    ? { minWidth: size === 'sm' ? 56 : 80, maxWidth: 150, flex: '0 1 auto' }
+    ? { minWidth: STEP_MIN_WIDTH[size], maxWidth: 150, flex: '0 1 auto' }
     : { flexShrink: 0 };
 }
 
@@ -162,7 +174,7 @@ const StepCircle: React.FC<
       data-testid={`stepper-step-icon-${index}`}
     >
       {isCompleted ? (
-        <CheckCircle sx={{ fontSize: size === 'sm' ? 18 : 24 }} />
+        <CheckCircle sx={{ fontSize: STEP_ICON_SIZE[size] }} />
       ) : (
         <Typography variant={labelVariant} fontWeight="bold">
           {index + 1}

package/src/components/data-display/Stepper/Stepper.types.ts

@@ -41,7 +41,7 @@ export interface StepperProps {
    * takes far less vertical space — useful above the fold on mobile checkouts.
    * @default 'md'
    */
-  size?: Extract<SizeValue, 'sm' | 'md'>;
+  size?: SizeValue;
   
   /**
    * Navigation variant controlling step access
@@ -89,7 +89,7 @@ export interface StepItemProps {
   isCompleted: boolean;
   isLast: boolean;
   orientation: 'horizontal' | 'vertical';
-  size: 'sm' | 'md';
+  size: SizeValue;
   variant: 'linear' | 'non-linear';
   clickable: boolean;
   onStepClick?: (id: string) => void;

package/src/components/data-display/Tooltip/Tooltip.types.ts

@@ -20,7 +20,7 @@ export interface TooltipProps extends Omit<MuiTooltipProps, 'variant'> {
   /**
    * Size of the tooltip
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
 
   /**
    * Maximum width of the tooltip

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

@@ -46,6 +46,7 @@ export const getColorFromTheme = (theme: Theme, color: string): ColorPalette =>
     secondary: theme.palette.secondary as ColorPalette,
     success: theme.palette.success as ColorPalette,
     warning: theme.palette.warning as ColorPalette,
+    info: theme.palette.info as ColorPalette,
     danger: theme.palette.error as ColorPalette,
   };
 

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

@@ -23,7 +23,7 @@ export interface CommandProps {
   onSelect?: (item: CommandItem) => void;
   variant?: 'default' | 'glass' | 'gradient' | 'minimal' | 'elevated';
   size?: SizeValue;
-  color?: Exclude<ColorValue, 'neutral'>;
+  color?: ColorValue;
   glow?: boolean;
   pulse?: boolean;
   loading?: boolean;

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

@@ -9,6 +9,7 @@ import { useId, useMemo } from 'react';
 
 import { FormControl, FormLabel, FormMessage } from '../Form';
 import type { CreatableSelectOption, CreatableSelectProps } from './CreatableSelect.types';
+import type { SizeValue } from '../../../tokens/scales';
 
 /** Internal option shape: a real option, or the synthetic "create new" row. */
 interface InternalOption extends CreatableSelectOption {
@@ -25,7 +26,9 @@ const filterOptions = createFilterOptions<InternalOption>();
 const INDENT_STEP = 16;
 
 /** `sm`/`md` → MUI's own scale, the same mapping {@link Input} uses. */
-const MUI_SIZE = { sm: 'small', md: 'medium' } as const;
+// All five house stops onto MUI's two. `xs`/`sm` draw small; `md` and up draw
+// medium, because an autocomplete field has no third or fourth height to give.
+const MUI_SIZE = { xs: 'small', sm: 'small', md: 'medium', lg: 'medium', xl: 'medium' } as const;
 
 /** Match the outlined border treatment of `Input` so siblings look identical. */
 const fieldSx = {
@@ -92,7 +95,7 @@ function renderField(
     placeholder?: string;
     error?: string;
     loading: boolean;
-    size: 'sm' | 'md';
+    size: SizeValue;
     dataTestId: string;
   },
 ): React.JSX.Element {

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

@@ -45,7 +45,7 @@ export interface CreatableSelectProps {
    * Control height, matching {@link Input}'s scale so the two line up when they
    * share a grid row (default: `md`).
    */
-  size?: Extract<SizeValue, 'sm' | 'md'>;
+  size?: SizeValue;
   /** Base test id; the input is `<dataTestId>-input`. */
   dataTestId?: string;
 }