diff --git a/.design-sync/config.json b/.design-sync/config.json
index e706ae1491..46df2b8d8a 100644
--- a/.design-sync/config.json
+++ b/.design-sync/config.json
@@ -59,7 +59,7 @@
     "SearchField": "about?: string; accept?: string; accessKey?: string; alt?: string; \"aria-activedescendant\"?: string; \"aria-atomic\"?: (boolean | \"true\" | \"false\"); \"aria-autocomplete\"?: \"none\" | \"list\" | \"inline\" | \"both\"; \"aria-braillelabel\"?: string; \"aria-brailleroledescription\"?: string; \"aria-busy\"?: (boolean | \"true\" | \"false\"); \"aria-checked\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-colcount\"?: number; \"aria-colindex\"?: number; \"aria-colindextext\"?: string; \"aria-colspan\"?: number; \"aria-controls\"?: string; \"aria-current\"?: boolean | \"true\" | \"false\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\"; \"aria-describedby\"?: string; \"aria-description\"?: string; \"aria-details\"?: string; \"aria-disabled\"?: (boolean | \"true\" | \"false\"); \"aria-dropeffect\"?: \"none\" | \"link\" | \"copy\" | \"execute\" | \"move\" | \"popup\"; \"aria-errormessage\"?: string; \"aria-expanded\"?: (boolean | \"true\" | \"false\"); \"aria-flowto\"?: string; \"aria-grabbed\"?: (boolean | \"true\" | \"false\"); \"aria-haspopup\"?: boolean | \"true\" | \"false\" | \"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\"; \"aria-hidden\"?: (boolean | \"true\" | \"false\"); \"aria-invalid\"?: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"; \"aria-keyshortcuts\"?: string; \"aria-label\"?: string; \"aria-labelledby\"?: string; \"aria-level\"?: number; \"aria-live\"?: \"off\" | \"assertive\" | \"polite\"; \"aria-modal\"?: (boolean | \"true\" | \"false\"); \"aria-multiline\"?: (boolean | \"true\" | \"false\"); \"aria-multiselectable\"?: (boolean | \"true\" | \"false\"); \"aria-orientation\"?: \"horizontal\" | \"vertical\"; \"aria-owns\"?: string; \"aria-placeholder\"?: string; \"aria-posinset\"?: number; \"aria-pressed\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-readonly\"?: (boolean | \"true\" | \"false\"); \"aria-relevant\"?: \"text\" | \"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text additions\" | \"text removals\"; \"aria-required\"?: (boolean | \"true\" | \"false\"); \"aria-roledescription\"?: string; \"aria-rowcount\"?: number; \"aria-rowindex\"?: number; \"aria-rowindextext\"?: string; \"aria-rowspan\"?: number; \"aria-selected\"?: (boolean | \"true\" | \"false\"); \"aria-setsize\"?: number; \"aria-sort\"?: \"none\" | \"ascending\" | \"descending\" | \"other\"; \"aria-valuemax\"?: number; \"aria-valuemin\"?: number; \"aria-valuenow\"?: number; \"aria-valuetext\"?: string; autoCapitalize?: \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}); autoComplete?: import(\"react\").HTMLInputAutoCompleteAttribute; autoCorrect?: string; autoFocus?: boolean; autoSave?: string; capture?: boolean | \"user\" | \"environment\"; checked?: boolean; children?: import(\"react\").ReactNode; className?: string; clearLabel?: string; color?: string; content?: string; contentEditable?: (boolean | \"true\" | \"false\") | \"inherit\" | \"plaintext-only\"; contextMenu?: string; dangerouslySetInnerHTML?: { __html: string | TrustedHTML; }; datatype?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; dir?: string; disabled?: boolean; draggable?: (boolean | \"true\" | \"false\"); enterKeyHint?: \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\"; error?: string; exportparts?: string; fieldClassName?: string; form?: string; formAction?: string | ((formData: FormData) => void | Promise<void>); formEncType?: string; formMethod?: string; formNoValidate?: boolean; formTarget?: string; height?: string | number; hidden?: boolean; hideLabel?: boolean; hint?: string; id?: string; inert?: boolean; inlist?: any; inputMode?: \"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\"; is?: string; itemID?: string; itemProp?: string; itemRef?: string; itemScope?: boolean; itemType?: string; label: string; lang?: string; list?: string; max?: string | number; maxLength?: number; min?: string | number; minLength?: number; multiple?: boolean; name?: string; nonce?: string; onAbort?: import(\"react\").ReactEventHandler<HTMLInputElement>; onAbortCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onAnimationEnd?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAnimationEndCapture?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAnimationIteration?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAnimationIterationCapture?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAnimationStart?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAnimationStartCapture?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAuxClick?: import(\"react\").MouseEventHandler<HTMLInputElement>; onAuxClickCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onBeforeInput?: import(\"react\").InputEventHandler<HTMLInputElement>; onBeforeInputCapture?: import(\"react\").InputEventHandler<HTMLInputElement>; onBeforeToggle?: import(\"react\").ToggleEventHandler<HTMLInputElement>; onBlur?: import(\"react\").FocusEventHandler<HTMLInputElement>; onBlurCapture?: import(\"react\").FocusEventHandler<HTMLInputElement>; onCanPlay?: import(\"react\").ReactEventHandler<HTMLInputElement>; onCanPlayCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onCanPlayThrough?: import(\"react\").ReactEventHandler<HTMLInputElement>; onCanPlayThroughCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onChange?: import(\"react\").ChangeEventHandler<HTMLInputElement, HTMLInputElement>; onChangeCapture?: import(\"react\").ChangeEventHandler<HTMLInputElement, Element>; onClear?: (() => void); onClick?: import(\"react\").MouseEventHandler<HTMLInputElement>; onClickCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onCompositionEnd?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onCompositionEndCapture?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onCompositionStart?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onCompositionStartCapture?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onCompositionUpdate?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onCompositionUpdateCapture?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onContextMenu?: import(\"react\").MouseEventHandler<HTMLInputElement>; onContextMenuCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onCopy?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onCopyCapture?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onCut?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onCutCapture?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onDoubleClick?: import(\"react\").MouseEventHandler<HTMLInputElement>; onDoubleClickCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onDrag?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragEnd?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragEndCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragEnter?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragEnterCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragExit?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragExitCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragLeave?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragLeaveCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragOver?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragOverCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragStart?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragStartCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDrop?: import(\"react\").DragEventHandler<HTMLInputElement>; onDropCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDurationChange?: import(\"react\").ReactEventHandler<HTMLInputElement>; onDurationChangeCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEmptied?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEmptiedCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEncrypted?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEncryptedCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEnded?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEndedCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onError?: import(\"react\").ReactEventHandler<HTMLInputElement>; onErrorCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onFocus?: import(\"react\").FocusEventHandler<HTMLInputElement>; onFocusCapture?: import(\"react\").FocusEventHandler<HTMLInputElement>; onGotPointerCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onGotPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onInput?: import(\"react\").InputEventHandler<HTMLInputElement>; onInputCapture?: import(\"react\").InputEventHandler<HTMLInputElement>; onInvalid?: import(\"react\").ReactEventHandler<HTMLInputElement>; onInvalidCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onKeyDown?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onKeyDownCapture?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onKeyPress?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onKeyPressCapture?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onKeyUp?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onKeyUpCapture?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onLoad?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadedData?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadedDataCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadedMetadata?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadedMetadataCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadStart?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadStartCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLostPointerCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onLostPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onMouseDown?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseDownCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseEnter?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseLeave?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseMove?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseMoveCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseOut?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseOutCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseOver?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseOverCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseUp?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseUpCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onPaste?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onPasteCapture?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onPause?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPauseCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPlay?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPlayCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPlaying?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPlayingCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPointerCancel?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerCancelCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerDown?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerDownCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerEnter?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerLeave?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerMove?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerMoveCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerOut?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerOutCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerOver?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerOverCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerUp?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerUpCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onProgress?: import(\"react\").ReactEventHandler<HTMLInputElement>; onProgressCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onRateChange?: import(\"react\").ReactEventHandler<HTMLInputElement>; onRateChangeCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onReset?: import(\"react\").ReactEventHandler<HTMLInputElement>; onResetCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onScroll?: import(\"react\").UIEventHandler<HTMLInputElement>; onScrollCapture?: import(\"react\").UIEventHandler<HTMLInputElement>; onScrollEnd?: import(\"react\").UIEventHandler<HTMLInputElement>; onScrollEndCapture?: import(\"react\").UIEventHandler<HTMLInputElement>; onSeeked?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSeekedCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSeeking?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSeekingCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSelect?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSelectCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onStalled?: import(\"react\").ReactEventHandler<HTMLInputElement>; onStalledCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSubmit?: import(\"react\").SubmitEventHandler<HTMLInputElement>; onSubmitCapture?: import(\"react\").SubmitEventHandler<HTMLInputElement>; onSuspend?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSuspendCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onTimeUpdate?: import(\"react\").ReactEventHandler<HTMLInputElement>; onTimeUpdateCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onToggle?: import(\"react\").ToggleEventHandler<HTMLInputElement>; onTouchCancel?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchCancelCapture?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchEnd?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchEndCapture?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchMove?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchMoveCapture?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchStart?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchStartCapture?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTransitionCancel?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionCancelCapture?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionEnd?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionEndCapture?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionRun?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionRunCapture?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionStart?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionStartCapture?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onVolumeChange?: import(\"react\").ReactEventHandler<HTMLInputElement>; onVolumeChangeCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onWaiting?: import(\"react\").ReactEventHandler<HTMLInputElement>; onWaitingCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onWheel?: import(\"react\").WheelEventHandler<HTMLInputElement>; onWheelCapture?: import(\"react\").WheelEventHandler<HTMLInputElement>; part?: string; pattern?: string; placeholder?: string; popover?: \"\" | \"auto\" | \"manual\" | \"hint\"; popoverTarget?: string; popoverTargetAction?: \"toggle\" | \"show\" | \"hide\"; prefix?: string; property?: string; radioGroup?: string; readOnly?: boolean; ref?: Ref<HTMLInputElement>; rel?: string; required?: boolean; resource?: string; results?: number; rev?: string; role?: import(\"react\").AriaRole; security?: string; size?: number; slot?: string; spellCheck?: (boolean | \"true\" | \"false\"); src?: string; step?: string | number; style?: import(\"react\").CSSProperties; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; tabIndex?: number; title?: string; translate?: \"yes\" | \"no\"; typeof?: string; unselectable?: \"off\" | \"on\"; value?: string | number | readonly string[]; vocab?: string; width?: string | number;",
     "SegmentedControl": "ariaControls?: string; ariaDescribedBy?: string; ariaLabelledBy?: string; className?: string; label?: string; layout?: \"fit\" | \"equal\"; onChange: (value: string) => void; options: readonly SegmentedControlOption<string>[]; value: string;",
     "Select": "about?: string; accessKey?: string; \"aria-activedescendant\"?: string; \"aria-atomic\"?: (boolean | \"true\" | \"false\"); \"aria-autocomplete\"?: \"none\" | \"list\" | \"inline\" | \"both\"; \"aria-braillelabel\"?: string; \"aria-brailleroledescription\"?: string; \"aria-busy\"?: (boolean | \"true\" | \"false\"); \"aria-checked\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-colcount\"?: number; \"aria-colindex\"?: number; \"aria-colindextext\"?: string; \"aria-colspan\"?: number; \"aria-controls\"?: string; \"aria-current\"?: boolean | \"true\" | \"false\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\"; \"aria-describedby\"?: string; \"aria-description\"?: string; \"aria-details\"?: string; \"aria-disabled\"?: (boolean | \"true\" | \"false\"); \"aria-dropeffect\"?: \"none\" | \"link\" | \"copy\" | \"execute\" | \"move\" | \"popup\"; \"aria-errormessage\"?: string; \"aria-expanded\"?: (boolean | \"true\" | \"false\"); \"aria-flowto\"?: string; \"aria-grabbed\"?: (boolean | \"true\" | \"false\"); \"aria-haspopup\"?: boolean | \"true\" | \"false\" | \"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\"; \"aria-hidden\"?: (boolean | \"true\" | \"false\"); \"aria-invalid\"?: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"; \"aria-keyshortcuts\"?: string; \"aria-label\"?: string; \"aria-labelledby\"?: string; \"aria-level\"?: number; \"aria-live\"?: \"off\" | \"assertive\" | \"polite\"; \"aria-modal\"?: (boolean | \"true\" | \"false\"); \"aria-multiline\"?: (boolean | \"true\" | \"false\"); \"aria-multiselectable\"?: (boolean | \"true\" | \"false\"); \"aria-orientation\"?: \"horizontal\" | \"vertical\"; \"aria-owns\"?: string; \"aria-placeholder\"?: string; \"aria-posinset\"?: number; \"aria-pressed\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-readonly\"?: (boolean | \"true\" | \"false\"); \"aria-relevant\"?: \"text\" | \"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text additions\" | \"text removals\"; \"aria-required\"?: (boolean | \"true\" | \"false\"); \"aria-roledescription\"?: string; \"aria-rowcount\"?: number; \"aria-rowindex\"?: number; \"aria-rowindextext\"?: string; \"aria-rowspan\"?: number; \"aria-selected\"?: (boolean | \"true\" | \"false\"); \"aria-setsize\"?: number; \"aria-sort\"?: \"none\" | \"ascending\" | \"descending\" | \"other\"; \"aria-valuemax\"?: number; \"aria-valuemin\"?: number; \"aria-valuenow\"?: number; \"aria-valuetext\"?: string; autoCapitalize?: \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}); autoComplete?: string; autoCorrect?: string; autoFocus?: boolean; autoSave?: string; className?: string; color?: string; content?: string; contentEditable?: (boolean | \"true\" | \"false\") | \"inherit\" | \"plaintext-only\"; contextMenu?: string; dangerouslySetInnerHTML?: { __html: string | TrustedHTML; }; datatype?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; dir?: string; disabled?: boolean; draggable?: (boolean | \"true\" | \"false\"); enterKeyHint?: \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\"; error?: string; exportparts?: string; fieldClassName?: string; form?: string; hidden?: boolean; hideLabel?: boolean; hint?: string; id?: string; inert?: boolean; inlist?: any; inputMode?: \"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\"; is?: string; itemID?: string; itemProp?: string; itemRef?: string; itemScope?: boolean; itemType?: string; label: string; lang?: string; multiple?: boolean; name?: string; nonce?: string; onAbort?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onAbortCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onAnimationEnd?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAnimationEndCapture?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAnimationIteration?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAnimationIterationCapture?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAnimationStart?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAnimationStartCapture?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAuxClick?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onAuxClickCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onBeforeInput?: import(\"react\").InputEventHandler<HTMLSelectElement>; onBeforeInputCapture?: import(\"react\").InputEventHandler<HTMLSelectElement>; onBeforeToggle?: import(\"react\").ToggleEventHandler<HTMLSelectElement>; onBlur?: import(\"react\").FocusEventHandler<HTMLSelectElement>; onBlurCapture?: import(\"react\").FocusEventHandler<HTMLSelectElement>; onCanPlay?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onCanPlayCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onCanPlayThrough?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onCanPlayThroughCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onChange?: import(\"react\").ChangeEventHandler<HTMLSelectElement, HTMLSelectElement>; onChangeCapture?: import(\"react\").ChangeEventHandler<HTMLSelectElement, Element>; onClick?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onClickCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onCompositionEnd?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onCompositionEndCapture?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onCompositionStart?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onCompositionStartCapture?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onCompositionUpdate?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onCompositionUpdateCapture?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onContextMenu?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onContextMenuCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onCopy?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onCopyCapture?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onCut?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onCutCapture?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onDoubleClick?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onDoubleClickCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onDrag?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragEnd?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragEndCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragEnter?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragEnterCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragExit?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragExitCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragLeave?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragLeaveCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragOver?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragOverCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragStart?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragStartCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDrop?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDropCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDurationChange?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onDurationChangeCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEmptied?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEmptiedCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEncrypted?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEncryptedCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEnded?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEndedCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onError?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onErrorCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onFocus?: import(\"react\").FocusEventHandler<HTMLSelectElement>; onFocusCapture?: import(\"react\").FocusEventHandler<HTMLSelectElement>; onGotPointerCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onGotPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onInput?: import(\"react\").InputEventHandler<HTMLSelectElement>; onInputCapture?: import(\"react\").InputEventHandler<HTMLSelectElement>; onInvalid?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onInvalidCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onKeyDown?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onKeyDownCapture?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onKeyPress?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onKeyPressCapture?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onKeyUp?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onKeyUpCapture?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onLoad?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadedData?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadedDataCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadedMetadata?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadedMetadataCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadStart?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadStartCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLostPointerCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onLostPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onMouseDown?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseDownCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseEnter?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseLeave?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseMove?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseMoveCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseOut?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseOutCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseOver?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseOverCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseUp?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseUpCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onPaste?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onPasteCapture?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onPause?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPauseCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPlay?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPlayCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPlaying?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPlayingCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPointerCancel?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerCancelCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerDown?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerDownCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerEnter?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerLeave?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerMove?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerMoveCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerOut?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerOutCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerOver?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerOverCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerUp?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerUpCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onProgress?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onProgressCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onRateChange?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onRateChangeCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onReset?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onResetCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onScroll?: import(\"react\").UIEventHandler<HTMLSelectElement>; onScrollCapture?: import(\"react\").UIEventHandler<HTMLSelectElement>; onScrollEnd?: import(\"react\").UIEventHandler<HTMLSelectElement>; onScrollEndCapture?: import(\"react\").UIEventHandler<HTMLSelectElement>; onSeeked?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSeekedCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSeeking?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSeekingCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSelect?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSelectCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onStalled?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onStalledCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSubmit?: import(\"react\").SubmitEventHandler<HTMLSelectElement>; onSubmitCapture?: import(\"react\").SubmitEventHandler<HTMLSelectElement>; onSuspend?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSuspendCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onTimeUpdate?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onTimeUpdateCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onToggle?: import(\"react\").ToggleEventHandler<HTMLSelectElement>; onTouchCancel?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchCancelCapture?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchEnd?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchEndCapture?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchMove?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchMoveCapture?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchStart?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchStartCapture?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTransitionCancel?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionCancelCapture?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionEnd?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionEndCapture?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionRun?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionRunCapture?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionStart?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionStartCapture?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onVolumeChange?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onVolumeChangeCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onWaiting?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onWaitingCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onWheel?: import(\"react\").WheelEventHandler<HTMLSelectElement>; onWheelCapture?: import(\"react\").WheelEventHandler<HTMLSelectElement>; options: SelectOption[]; part?: string; placeholder?: string; popover?: \"\" | \"auto\" | \"manual\" | \"hint\"; popoverTarget?: string; popoverTargetAction?: \"toggle\" | \"show\" | \"hide\"; prefix?: string; property?: string; radioGroup?: string; ref?: Ref<HTMLSelectElement>; rel?: string; required?: boolean; resource?: string; results?: number; rev?: string; role?: import(\"react\").AriaRole; security?: string; size?: number; slot?: string; spellCheck?: (boolean | \"true\" | \"false\"); style?: import(\"react\").CSSProperties; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; tabIndex?: number; title?: string; translate?: \"yes\" | \"no\"; typeof?: string; unselectable?: \"off\" | \"on\"; value?: string | number | readonly string[]; vocab?: string;",
-    "Sheet": "ariaLabel?: string; bodyClassName?: string; bodyRef?: RefObject<HTMLDivElement | null>; children: ReactNode; closeButtonClassName?: string; closeLabel?: string; contentClassName?: string; contentStyle?: CSSProperties; description?: string; descriptionContent?: ReactNode; desktopBackdropClassName?: string; footer?: ReactNode; footerClassName?: string; headerActions?: ReactNode; headerClassName?: string; headerLeading?: ReactNode; id?: string; initialFocusRef?: RefObject<HTMLElement | null>; labelledBy?: string; mobilePlacement?: \"bottom\" | \"top\" | \"fullscreen\"; mobileSize?: SheetMobileSize; onBodyScroll?: UIEventHandler<HTMLDivElement>; onClose: () => void; open: boolean; placement?: \"default\" | \"left\"; portal?: boolean; resolveReturnFocusTarget?: (() => HTMLElement | null); returnFocusRef?: RefObject<HTMLElement | null>; testId?: string; title?: string; titleAccessory?: ReactNode; titleClassName?: string;",
+    "Sheet": "ariaLabel?: string; bodyClassName?: string; bodyRef?: RefObject<HTMLDivElement | null>; children: ReactNode; closeButtonClassName?: string; closeLabel?: string; contentClassName?: string; contentStyle?: CSSProperties; description?: string; descriptionContent?: ReactNode; desktopBackdropClassName?: string; footer?: ReactNode; footerClassName?: string; headerActions?: ReactNode; headerClassName?: string; headerLeading?: ReactNode; id?: string; initialFocusRef?: RefObject<HTMLElement | null>; labelledBy?: string; mobileHeaderSafeArea?: SheetMobileHeaderSafeArea; mobilePlacement?: \"bottom\" | \"top\" | \"fullscreen\"; mobileSize?: SheetMobileSize; onBodyScroll?: UIEventHandler<HTMLDivElement>; onClose: () => void; open: boolean; placement?: \"default\" | \"left\"; portal?: boolean; resolveReturnFocusTarget?: (() => HTMLElement | null); returnFocusRef?: RefObject<HTMLElement | null>; testId?: string; title?: string; titleAccessory?: ReactNode; titleClassName?: string;",
     "Skeleton": "about?: string; accessKey?: string; animationDelay?: string; \"aria-activedescendant\"?: string; \"aria-atomic\"?: (boolean | \"true\" | \"false\"); \"aria-autocomplete\"?: \"none\" | \"list\" | \"inline\" | \"both\"; \"aria-braillelabel\"?: string; \"aria-brailleroledescription\"?: string; \"aria-busy\"?: (boolean | \"true\" | \"false\"); \"aria-checked\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-colcount\"?: number; \"aria-colindex\"?: number; \"aria-colindextext\"?: string; \"aria-colspan\"?: number; \"aria-controls\"?: string; \"aria-current\"?: boolean | \"true\" | \"false\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\"; \"aria-describedby\"?: string; \"aria-description\"?: string; \"aria-details\"?: string; \"aria-disabled\"?: (boolean | \"true\" | \"false\"); \"aria-dropeffect\"?: \"none\" | \"link\" | \"copy\" | \"execute\" | \"move\" | \"popup\"; \"aria-errormessage\"?: string; \"aria-expanded\"?: (boolean | \"true\" | \"false\"); \"aria-flowto\"?: string; \"aria-grabbed\"?: (boolean | \"true\" | \"false\"); \"aria-haspopup\"?: boolean | \"true\" | \"false\" | \"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\"; \"aria-hidden\"?: (boolean | \"true\" | \"false\"); \"aria-invalid\"?: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"; \"aria-keyshortcuts\"?: string; \"aria-label\"?: string; \"aria-labelledby\"?: string; \"aria-level\"?: number; \"aria-live\"?: \"off\" | \"assertive\" | \"polite\"; \"aria-modal\"?: (boolean | \"true\" | \"false\"); \"aria-multiline\"?: (boolean | \"true\" | \"false\"); \"aria-multiselectable\"?: (boolean | \"true\" | \"false\"); \"aria-orientation\"?: \"horizontal\" | \"vertical\"; \"aria-owns\"?: string; \"aria-placeholder\"?: string; \"aria-posinset\"?: number; \"aria-pressed\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-readonly\"?: (boolean | \"true\" | \"false\"); \"aria-relevant\"?: \"text\" | \"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text additions\" | \"text removals\"; \"aria-required\"?: (boolean | \"true\" | \"false\"); \"aria-roledescription\"?: string; \"aria-rowcount\"?: number; \"aria-rowindex\"?: number; \"aria-rowindextext\"?: string; \"aria-rowspan\"?: number; \"aria-selected\"?: (boolean | \"true\" | \"false\"); \"aria-setsize\"?: number; \"aria-sort\"?: \"none\" | \"ascending\" | \"descending\" | \"other\"; \"aria-valuemax\"?: number; \"aria-valuemin\"?: number; \"aria-valuenow\"?: number; \"aria-valuetext\"?: string; autoCapitalize?: \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}); autoCorrect?: string; autoFocus?: boolean; autoSave?: string; children?: ReactNode; className?: string; color?: string; content?: string; contentEditable?: (boolean | \"true\" | \"false\") | \"inherit\" | \"plaintext-only\"; contextMenu?: string; dangerouslySetInnerHTML?: { __html: string | TrustedHTML; }; datatype?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; dir?: string; draggable?: (boolean | \"true\" | \"false\"); enterKeyHint?: \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\"; exportparts?: string; hidden?: boolean; id?: string; inert?: boolean; inlist?: any; inputMode?: \"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\"; is?: string; itemID?: string; itemProp?: string; itemRef?: string; itemScope?: boolean; itemType?: string; lang?: string; nonce?: string; onAbort?: import(\"react\").ReactEventHandler<HTMLDivElement>; onAbortCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onAnimationEnd?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAnimationEndCapture?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAnimationIteration?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAnimationIterationCapture?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAnimationStart?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAnimationStartCapture?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAuxClick?: import(\"react\").MouseEventHandler<HTMLDivElement>; onAuxClickCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onBeforeInput?: import(\"react\").InputEventHandler<HTMLDivElement>; onBeforeInputCapture?: import(\"react\").InputEventHandler<HTMLDivElement>; onBeforeToggle?: import(\"react\").ToggleEventHandler<HTMLDivElement>; onBlur?: import(\"react\").FocusEventHandler<HTMLDivElement>; onBlurCapture?: import(\"react\").FocusEventHandler<HTMLDivElement>; onCanPlay?: import(\"react\").ReactEventHandler<HTMLDivElement>; onCanPlayCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onCanPlayThrough?: import(\"react\").ReactEventHandler<HTMLDivElement>; onCanPlayThroughCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onChange?: import(\"react\").ChangeEventHandler<HTMLDivElement, Element>; onChangeCapture?: import(\"react\").ChangeEventHandler<HTMLDivElement, Element>; onClick?: import(\"react\").MouseEventHandler<HTMLDivElement>; onClickCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onCompositionEnd?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onCompositionEndCapture?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onCompositionStart?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onCompositionStartCapture?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onCompositionUpdate?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onCompositionUpdateCapture?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onContextMenu?: import(\"react\").MouseEventHandler<HTMLDivElement>; onContextMenuCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onCopy?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onCopyCapture?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onCut?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onCutCapture?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onDoubleClick?: import(\"react\").MouseEventHandler<HTMLDivElement>; onDoubleClickCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onDrag?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragEnd?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragEndCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragEnter?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragEnterCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragExit?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragExitCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragLeave?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragLeaveCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragOver?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragOverCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragStart?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragStartCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDrop?: import(\"react\").DragEventHandler<HTMLDivElement>; onDropCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDurationChange?: import(\"react\").ReactEventHandler<HTMLDivElement>; onDurationChangeCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEmptied?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEmptiedCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEncrypted?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEncryptedCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEnded?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEndedCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onError?: import(\"react\").ReactEventHandler<HTMLDivElement>; onErrorCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onFocus?: import(\"react\").FocusEventHandler<HTMLDivElement>; onFocusCapture?: import(\"react\").FocusEventHandler<HTMLDivElement>; onGotPointerCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onGotPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onInput?: import(\"react\").InputEventHandler<HTMLDivElement>; onInputCapture?: import(\"react\").InputEventHandler<HTMLDivElement>; onInvalid?: import(\"react\").ReactEventHandler<HTMLDivElement>; onInvalidCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onKeyDown?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onKeyDownCapture?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onKeyPress?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onKeyPressCapture?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onKeyUp?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onKeyUpCapture?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onLoad?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadedData?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadedDataCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadedMetadata?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadedMetadataCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadStart?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadStartCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLostPointerCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onLostPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onMouseDown?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseDownCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseEnter?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseLeave?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseMove?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseMoveCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseOut?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseOutCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseOver?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseOverCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseUp?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseUpCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onPaste?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onPasteCapture?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onPause?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPauseCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPlay?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPlayCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPlaying?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPlayingCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPointerCancel?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerCancelCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerDown?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerDownCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerEnter?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerLeave?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerMove?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerMoveCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerOut?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerOutCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerOver?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerOverCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerUp?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerUpCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onProgress?: import(\"react\").ReactEventHandler<HTMLDivElement>; onProgressCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onRateChange?: import(\"react\").ReactEventHandler<HTMLDivElement>; onRateChangeCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onReset?: import(\"react\").ReactEventHandler<HTMLDivElement>; onResetCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onScroll?: import(\"react\").UIEventHandler<HTMLDivElement>; onScrollCapture?: import(\"react\").UIEventHandler<HTMLDivElement>; onScrollEnd?: import(\"react\").UIEventHandler<HTMLDivElement>; onScrollEndCapture?: import(\"react\").UIEventHandler<HTMLDivElement>; onSeeked?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSeekedCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSeeking?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSeekingCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSelect?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSelectCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onStalled?: import(\"react\").ReactEventHandler<HTMLDivElement>; onStalledCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSubmit?: import(\"react\").SubmitEventHandler<HTMLDivElement>; onSubmitCapture?: import(\"react\").SubmitEventHandler<HTMLDivElement>; onSuspend?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSuspendCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onTimeUpdate?: import(\"react\").ReactEventHandler<HTMLDivElement>; onTimeUpdateCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onToggle?: import(\"react\").ToggleEventHandler<HTMLDivElement>; onTouchCancel?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchCancelCapture?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchEnd?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchEndCapture?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchMove?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchMoveCapture?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchStart?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchStartCapture?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTransitionCancel?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionCancelCapture?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionEnd?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionEndCapture?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionRun?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionRunCapture?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionStart?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionStartCapture?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onVolumeChange?: import(\"react\").ReactEventHandler<HTMLDivElement>; onVolumeChangeCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onWaiting?: import(\"react\").ReactEventHandler<HTMLDivElement>; onWaitingCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onWheel?: import(\"react\").WheelEventHandler<HTMLDivElement>; onWheelCapture?: import(\"react\").WheelEventHandler<HTMLDivElement>; part?: string; popover?: \"\" | \"auto\" | \"manual\" | \"hint\"; popoverTarget?: string; popoverTargetAction?: \"toggle\" | \"show\" | \"hide\"; prefix?: string; property?: string; radioGroup?: string; rel?: string; resource?: string; results?: number; rev?: string; role?: import(\"react\").AriaRole; security?: string; slot?: string; spellCheck?: (boolean | \"true\" | \"false\"); style?: import(\"react\").CSSProperties; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; tabIndex?: number; title?: string; translate?: \"yes\" | \"no\"; typeof?: string; unselectable?: \"off\" | \"on\"; vocab?: string;",
     "SourceDesignationBadge": "className?: string; metadata?: SourceMetadataInput;",
     "SourceProvenance": "metadata?: SourceMetadataInput;",
diff --git a/docs/design-system/adoption-manifest.json b/docs/design-system/adoption-manifest.json
index 4b369cea4e..dc67c932b7 100644
--- a/docs/design-system/adoption-manifest.json
+++ b/docs/design-system/adoption-manifest.json
@@ -1562,6 +1562,7 @@
         "tests/header-scroll-hide-contract.test.ts",
         "tests/image-lightbox-geometry.test.ts",
         "tests/in-page-nav-route-sections.dom.test.tsx",
+        "tests/mobile-sheet-safe-area-contract.test.ts",
         "tests/mode-nav.dom.test.tsx",
         "tests/rag-answer-fallback.test.ts",
         "tests/settings-dialog-actions.dom.test.tsx",
diff --git a/src/components/calculators/calculator-sheet.tsx b/src/components/calculators/calculator-sheet.tsx
index 644623daa7..80b6b7c4cb 100644
--- a/src/components/calculators/calculator-sheet.tsx
+++ b/src/components/calculators/calculator-sheet.tsx
@@ -104,7 +104,7 @@ export function CalculatorSheet({
         onClick={onClose}
         className="absolute inset-0 animate-overlay-in bg-[color:var(--neutral-950)]/55 backdrop-blur-[2px]"
       />
-      <div className="relative flex max-h-[92dvh] w-full animate-sheet-up flex-col overflow-hidden rounded-t-xl border border-[color:var(--border-strong)] bg-[color:var(--background)] shadow-[var(--shadow-lux)] sm:max-w-3xl sm:animate-dialog-rise sm:rounded-xl">
+      <div className="relative flex max-h-[calc(100dvh-max(0.75rem,var(--safe-area-top)))] w-full animate-sheet-up flex-col overflow-hidden rounded-t-xl border border-[color:var(--border-strong)] bg-[color:var(--background)] shadow-[var(--shadow-lux)] sm:max-h-[92dvh] sm:max-w-3xl sm:animate-dialog-rise sm:rounded-xl">
         <header className="modal-landscape-container grid shrink-0 grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-3 border-b border-[color:var(--border)] bg-[color:var(--surface)] py-3">
           <span className="grid size-9 shrink-0 place-items-center rounded-md border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]">
             <Icon className="size-icon-md" aria-hidden="true" />
diff --git a/src/components/clinical-dashboard/ClinicalSidebar.tsx b/src/components/clinical-dashboard/ClinicalSidebar.tsx
index a47ccba15f..ae8cdfd3a0 100644
--- a/src/components/clinical-dashboard/ClinicalSidebar.tsx
+++ b/src/components/clinical-dashboard/ClinicalSidebar.tsx
@@ -184,6 +184,7 @@ function MoreModesMenu({
         returnFocusRef={triggerRef}
         mobilePlacement="bottom"
         mobileSize="content"
+        mobileHeaderSafeArea="padding"
         testId="sidebar-more-modes-sheet"
         contentClassName="max-h-[calc(100dvh-0.5rem)] sm:max-w-md"
         bodyClassName="p-2"
diff --git a/src/components/clinical-dashboard/account-setup-dialog.tsx b/src/components/clinical-dashboard/account-setup-dialog.tsx
index 02a576cdc1..bd3ddac0ac 100644
--- a/src/components/clinical-dashboard/account-setup-dialog.tsx
+++ b/src/components/clinical-dashboard/account-setup-dialog.tsx
@@ -104,6 +104,7 @@ export function AccountSetupDialog({
       onClose={onClose}
       title="Account setup"
       closeLabel="Close account setup"
+      mobileHeaderSafeArea="offset"
       headerClassName="absolute right-3 top-3 z-30 w-auto border-0 bg-transparent p-0 sm:right-4 sm:top-4 sm:p-0"
       titleClassName="sr-only"
       bodyClassName="bg-[color:var(--surface)] p-0 sm:p-0"
@@ -197,7 +198,7 @@ function AccountOrientationPanel() {
     <section
       aria-labelledby="account-workspace-benefits"
       data-testid="account-storage-summary"
-      className="relative isolate flex min-h-0 flex-col overflow-hidden bg-[color:var(--clinical-accent-soft)] px-5 pb-5 pt-6 sm:px-8 sm:py-8 lg:min-h-[36rem] lg:px-10 lg:py-10"
+      className="relative isolate flex min-h-0 flex-col overflow-hidden bg-[color:var(--clinical-accent-soft)] px-5 pb-5 pt-[max(1.5rem,var(--safe-area-top))] sm:px-8 sm:py-8 lg:min-h-[36rem] lg:px-10 lg:py-10"
     >
       <span
         aria-hidden="true"
@@ -209,7 +210,10 @@ function AccountOrientationPanel() {
       />
 
       <div className="relative z-10 pr-12">
-        <span className="grid size-tap place-items-center rounded-xl border border-[color:var(--border-lux)] bg-[color:var(--surface)] shadow-[var(--e2),var(--shadow-inset)]">
+        <span
+          data-testid="account-workspace-mark"
+          className="grid size-tap place-items-center rounded-xl border border-[color:var(--border-lux)] bg-[color:var(--surface)] shadow-[var(--e2),var(--shadow-inset)]"
+        >
           <BrandMark className="h-8 w-8" />
         </span>
         <h3
diff --git a/src/components/clinical-dashboard/master-search-header.tsx b/src/components/clinical-dashboard/master-search-header.tsx
index 021e133126..f1926ccd00 100644
--- a/src/components/clinical-dashboard/master-search-header.tsx
+++ b/src/components/clinical-dashboard/master-search-header.tsx
@@ -2401,6 +2401,7 @@ export function MasterSearchHeader({
           portal
           mobilePlacement="bottom"
           mobileSize="content"
+          mobileHeaderSafeArea="padding"
           testId="app-mode-menu-sheet"
           contentClassName="max-h-[calc(100dvh-0.75rem)] rounded-t-3xl bg-[color:var(--surface-lux)] sm:max-w-md sm:rounded-2xl"
           bodyClassName="bg-[color:var(--surface-lux)] px-2.5 pb-2 pt-0.5"
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 3cf633024f..1baba55e63 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -25,6 +25,7 @@ import {
 } from "@/components/ui/sheet-focus";
 
 export type SheetMobileSize = "content" | "viewport";
+export type SheetMobileHeaderSafeArea = "none" | "padding" | "offset";
 
 type SheetAccessibleName =
   | { title: string; labelledBy?: string; ariaLabel?: string }
@@ -63,6 +64,13 @@ type SheetBaseProps = {
   placement?: "default" | "left";
   mobilePlacement?: "bottom" | "top" | "fullscreen";
   mobileSize?: SheetMobileSize;
+  /**
+   * Keeps the Sheet-owned header controls below the phone top safe area.
+   * Fullscreen sheets default to `padding`; near-full bottom sheets must opt in
+   * because short bottom sheets should not inherit a notch-sized empty band.
+   * Use `offset` only for an absolutely positioned header.
+   */
+  mobileHeaderSafeArea?: SheetMobileHeaderSafeArea;
   portal?: boolean;
   desktopBackdropClassName?: string;
   testId?: string;
@@ -112,6 +120,7 @@ export function Sheet({
   placement = "default",
   mobilePlacement = "bottom",
   mobileSize = "content",
+  mobileHeaderSafeArea,
   portal = true,
   desktopBackdropClassName,
   testId,
@@ -351,6 +360,7 @@ export function Sheet({
   const defaultSheetIsFullscreen = placement !== "left" && mobilePlacement === "fullscreen";
   const defaultSheetIsTopAligned = placement !== "left" && mobilePlacement === "top";
   const defaultSheetUsesViewportSize = placement !== "left" && mobileSize === "viewport";
+  const resolvedMobileHeaderSafeArea = mobileHeaderSafeArea ?? (defaultSheetIsFullscreen ? "padding" : "none");
   const contentClassTokens = contentClassName?.split(/\s+/) ?? [];
   const hasMobileMaxHeight = contentClassTokens.some((token) => /^!?max-h-/.test(token));
   const hasSmallScreenMaxHeight = contentClassTokens.some((token) => /^sm:!?max-h-/.test(token));
@@ -388,6 +398,7 @@ export function Sheet({
         ref={panelRef}
         id={id}
         data-testid={testId}
+        data-mobile-header-safe-area={resolvedMobileHeaderSafeArea}
         role="dialog"
         aria-modal="true"
         aria-labelledby={resolvedLabelledBy}
@@ -448,9 +459,12 @@ export function Sheet({
         </div>
         {title ? (
           <div
+            data-sheet-header="true"
             className={cn(
               "flex items-center justify-between gap-3 border-b border-[color:var(--border)] p-4 sm:p-5",
               headerClassName,
+              resolvedMobileHeaderSafeArea === "padding" && "pt-[max(1rem,var(--safe-area-top))] sm:pt-5",
+              resolvedMobileHeaderSafeArea === "offset" && "top-[max(0.75rem,var(--safe-area-top))] sm:top-4",
             )}
           >
             <div className="flex min-w-0 flex-1 items-center gap-3">
diff --git a/tests/mobile-sheet-safe-area-contract.test.ts b/tests/mobile-sheet-safe-area-contract.test.ts
new file mode 100644
index 0000000000..f3cd5616f7
--- /dev/null
+++ b/tests/mobile-sheet-safe-area-contract.test.ts
@@ -0,0 +1,31 @@
+import { readFileSync } from "node:fs";
+
+import { describe, expect, it } from "vitest";
+
+function source(relativePath: string) {
+  return readFileSync(new URL(`../${relativePath}`, import.meta.url), "utf8");
+}
+
+describe("mobile sheet top safe-area ownership", () => {
+  it("routes fullscreen and near-full Sheet headers through the shared contract", () => {
+    const sheet = source("src/components/ui/sheet.tsx");
+    const accountSetup = source("src/components/clinical-dashboard/account-setup-dialog.tsx");
+    const sidebar = source("src/components/clinical-dashboard/ClinicalSidebar.tsx");
+    const masterHeader = source("src/components/clinical-dashboard/master-search-header.tsx");
+
+    expect(sheet).toContain('mobileHeaderSafeArea ?? (defaultSheetIsFullscreen ? "padding" : "none")');
+    expect(sheet).toContain('"pt-[max(1rem,var(--safe-area-top))] sm:pt-5"');
+    expect(sheet).toContain('"top-[max(0.75rem,var(--safe-area-top))] sm:top-4"');
+    expect(accountSetup).toContain('mobileHeaderSafeArea="offset"');
+    expect(accountSetup).toContain("pt-[max(1.5rem,var(--safe-area-top))]");
+    expect(sidebar).toContain('mobileHeaderSafeArea="padding"');
+    expect(masterHeader).toContain('mobileHeaderSafeArea="padding"');
+  });
+
+  it("keeps the standalone calculator sheet below the unsafe top band on phones", () => {
+    const calculatorSheet = source("src/components/calculators/calculator-sheet.tsx");
+
+    expect(calculatorSheet).toContain("max-h-[calc(100dvh-max(0.75rem,var(--safe-area-top)))]");
+    expect(calculatorSheet).toContain("sm:max-h-[92dvh]");
+  });
+});
diff --git a/tests/sheet.dom.test.tsx b/tests/sheet.dom.test.tsx
index 803d15eada..311caf86ce 100644
--- a/tests/sheet.dom.test.tsx
+++ b/tests/sheet.dom.test.tsx
@@ -236,6 +236,63 @@ describe("Sheet stacked-overlay coordination", () => {
     expect(classes).not.toContain("sm:max-h-[88dvh]");
   });
 
+  it("protects fullscreen and opted-in near-full headers without padding short bottom sheets", () => {
+    const { rerender } = render(
+      <Sheet open onClose={vi.fn()} title="Fullscreen" mobilePlacement="fullscreen">
+        <p>Body</p>
+      </Sheet>,
+    );
+
+    let dialog = screen.getByRole("dialog");
+    let header = dialog.querySelector<HTMLElement>('[data-sheet-header="true"]');
+    expect(dialog).toHaveAttribute("data-mobile-header-safe-area", "padding");
+    expect(header).not.toBeNull();
+    expect(header!.classList).toContain("pt-[max(1rem,var(--safe-area-top))]");
+
+    rerender(
+      <Sheet open onClose={vi.fn()} title="Short bottom sheet">
+        <p>Body</p>
+      </Sheet>,
+    );
+    dialog = screen.getByRole("dialog");
+    header = dialog.querySelector<HTMLElement>('[data-sheet-header="true"]');
+    expect(dialog).toHaveAttribute("data-mobile-header-safe-area", "none");
+    expect(header!.classList).not.toContain("pt-[max(1rem,var(--safe-area-top))]");
+
+    rerender(
+      <Sheet open onClose={vi.fn()} title="Near-full bottom sheet" mobileHeaderSafeArea="padding">
+        <p>Body</p>
+      </Sheet>,
+    );
+    dialog = screen.getByRole("dialog");
+    header = dialog.querySelector<HTMLElement>('[data-sheet-header="true"]');
+    expect(dialog).toHaveAttribute("data-mobile-header-safe-area", "padding");
+    expect(header!.classList).toContain("pt-[max(1rem,var(--safe-area-top))]");
+    expect(header!.classList).toContain("sm:pt-5");
+  });
+
+  it("offsets an absolutely positioned header below the phone safe area", () => {
+    render(
+      <Sheet
+        open
+        onClose={vi.fn()}
+        title="Overlay header"
+        mobileHeaderSafeArea="offset"
+        headerClassName="absolute right-3 top-3 p-0 sm:right-4 sm:top-4"
+      >
+        <p>Body</p>
+      </Sheet>,
+    );
+
+    const dialog = screen.getByRole("dialog");
+    const header = dialog.querySelector<HTMLElement>('[data-sheet-header="true"]');
+    expect(dialog).toHaveAttribute("data-mobile-header-safe-area", "offset");
+    expect(header).not.toBeNull();
+    expect(header!.classList).toContain("top-[max(0.75rem,var(--safe-area-top))]");
+    expect(header!.classList).toContain("sm:top-4");
+    expect(header!.classList).not.toContain("top-3");
+  });
+
   it("keeps the dialog mounted in production when the title resolves empty", () => {
     vi.stubEnv("NODE_ENV", "production");
     try {
diff --git a/tests/ui-smoke.spec.ts b/tests/ui-smoke.spec.ts
index df2e4cb2c5..817ee09fef 100644
--- a/tests/ui-smoke.spec.ts
+++ b/tests/ui-smoke.spec.ts
@@ -907,6 +907,19 @@ function accountSetupDialog(page: Page) {
   return page.getByRole("dialog", { name: "Account setup" });
 }
 
+async function expectControlsBelowPhoneTopSafeArea(page: Page, controls: Locator[]) {
+  const safeAreaTop = await page.evaluate(() =>
+    Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")),
+  );
+  expect(safeAreaTop).toBeGreaterThan(0);
+
+  for (const control of controls) {
+    const bounds = await control.boundingBox();
+    expect(bounds).not.toBeNull();
+    expect(bounds!.y).toBeGreaterThanOrEqual(safeAreaTop);
+  }
+}
+
 async function expectAccountSettingsSurface(settings: Locator) {
   await expect(settings.getByRole("heading", { name: "Account & app" })).toBeVisible();
   await expect(settings.getByRole("heading", { name: "Account", exact: true })).toBeVisible();
@@ -1587,6 +1600,9 @@ test.describe("Clinical KB UI smoke coverage", () => {
     await settings.getByRole("button", { name: "Close settings" }).click();
     await expect(settings).toBeHidden();
     await page.setViewportSize({ width: 390, height: 820 });
+    await page.evaluate(() => {
+      document.documentElement.style.setProperty("--safe-area-top", "59px");
+    });
 
     const escapeMenu = await openMobileClinicalGuideMenu(page);
     await escapeMenu.getByRole("button", { name: "Settings", exact: true }).click();
@@ -1601,14 +1617,26 @@ test.describe("Clinical KB UI smoke coverage", () => {
     await expectAccountSetupSurface(setup);
     await expectAccountProviderLayout(setup, "stack");
     await expect(setup.getByLabel("Work email")).toBeFocused();
+    const setupClose = setup.getByRole("button", { name: "Close account setup" });
+    const workspaceMark = setup.getByTestId("account-workspace-mark");
+    await expectControlsBelowPhoneTopSafeArea(page, [setupClose, workspaceMark]);
     const setupBox = await setup.boundingBox();
     expect(setupBox).not.toBeNull();
     expect(setupBox!.x).toBeGreaterThanOrEqual(-1);
     expect(setupBox!.width + fullscreenTolerance).toBeLessThanOrEqual(viewport.width + fullscreenTolerance);
     await expectNoPageHorizontalOverflow(page);
 
+    for (const viewportSize of [
+      { width: 320, height: 700 },
+      { width: 430, height: 820 },
+      { width: 639, height: 820 },
+    ]) {
+      await page.setViewportSize(viewportSize);
+      await expectControlsBelowPhoneTopSafeArea(page, [setupClose, workspaceMark]);
+      await expectNoPageHorizontalOverflow(page);
+    }
+
     await page.setViewportSize({ width: 320, height: 700 });
-    const setupClose = setup.getByRole("button", { name: "Close account setup" });
     const setupEmail = setup.getByLabel("Work email");
     await setupEmail.scrollIntoViewIfNeeded();
     await expect(setupEmail).toBeInViewport();
@@ -1739,6 +1767,9 @@ test.describe("Clinical KB UI smoke coverage", () => {
 
     const appModeTrigger = page.getByRole("button", { name: "Mode Answer" });
     await waitForReactEventHandler(appModeTrigger, "onClick");
+    await page.evaluate(() => {
+      document.documentElement.style.setProperty("--safe-area-top", "59px");
+    });
     await appModeTrigger.click();
 
     const modeSheet = page.getByTestId("app-mode-menu-sheet");
@@ -1748,6 +1779,10 @@ test.describe("Clinical KB UI smoke coverage", () => {
     await expect(appModeMenu).toBeVisible();
     await expect(appModeTrigger).toHaveAttribute("aria-expanded", "true");
     await expect(appModeTrigger).toHaveAttribute("aria-controls", "app-mode-menu");
+    await expectControlsBelowPhoneTopSafeArea(page, [
+      modeSheet.getByRole("heading", { name: "Choose mode" }),
+      modeSheet.getByRole("button", { name: "Close mode menu" }),
+    ]);
 
     // The full catalogue remains in one radio menu, but the phone presentation
     // now groups it into the three clinical jobs clinicians scan for first.