@react-types/shared - npm Package Compare versions

Comparing version 3.34.0 to 3.35.0

package.json

 {
   "name": "@react-types/shared",
-  "version": "3.34.0",
+  "version": "3.35.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
-  "types": "src/index.d.ts",
   "repository": {
@@ -11,9 +10,13 @@ "type": "git",
   },
+  "types": "src/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+  },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "a6999bdf494a2e9c0381a5881908328bdd22ddae"
+  "gitHead": "3577a20859b9585a000010c720f6ee39c1c588cc"
 }

src/collections.d.ts

@@ -19,13 +19,13 @@ /*
   /** Rendered contents of the item or child items. */
-  children: ReactNode,
+  children: ReactNode;
   /** Rendered contents of the item if `children` contains child items. */
-  title?: ReactNode, // label?? contents?
+  title?: ReactNode; // label?? contents?
   /** A string representation of the item's contents, used for features like typeahead. */
-  textValue?: string,
+  textValue?: string;
   /** An accessibility label for this item. */
-  'aria-label'?: string,
+  'aria-label'?: string;
   /** A list of child item objects. Used for dynamic collections. */
-  childItems?: Iterable<T>,
+  childItems?: Iterable<T>;
   /** Whether this item has children, even if not loaded yet. */
-  hasChildItems?: boolean
+  hasChildItems?: boolean;
 }
@@ -39,5 +39,5 @@
   /** Whether the items are currently loading. */
-  isLoading?: boolean, // possibly isLoadingMore
+  isLoading?: boolean; // possibly isLoadingMore
   /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
-  onLoadMore?: () => any
+  onLoadMore?: () => any;
 }
@@ -47,9 +47,9 @@
   /** Rendered contents of the section, e.g. a header. */
-  title?: ReactNode,
+  title?: ReactNode;
   /** An accessibility label for the section. */
-  'aria-label'?: string,
+  'aria-label'?: string;
   /** Static child items or a function to render children. */
-  children: ItemElement<T> | ItemElement<T>[] | ItemRenderer<T>,
+  children: ItemElement<T> | ItemElement<T>[] | ItemRenderer<T>;
   /** Item objects in the section. */
-  items?: Iterable<T>
+  items?: Iterable<T>;
 }
@@ -60,15 +60,24 @@
 export type CollectionElement<T> = SectionElement<T> | ItemElement<T>;
-export type CollectionChildren<T> = CollectionElement<T> | CollectionElement<T>[] | ((item: T) => CollectionElement<T>);
+export type CollectionChildren<T> =
+  | CollectionElement<T>
+  | CollectionElement<T>[]
+  | ((item: T) => CollectionElement<T>);
 export interface CollectionBase<T> {
   /** The contents of the collection. */
-  children: CollectionChildren<T>,
+  children: CollectionChildren<T>;
   /** Item objects in the collection. */
-  items?: Iterable<T>,
-  /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
-  disabledKeys?: Iterable<Key>
+  items?: Iterable<T>;
+  /**
+   * The item keys that are disabled. These items cannot be selected, focused, or otherwise
+   * interacted with.
+   */
+  disabledKeys?: Iterable<Key>;
 }
 
-export interface CollectionStateBase<T, C extends Collection<Node<T>> = Collection<Node<T>>> extends Partial<CollectionBase<T>> {
+export interface CollectionStateBase<
+  T,
+  C extends Collection<Node<T>> = Collection<Node<T>>
+> extends Partial<CollectionBase<T>> {
   /** A pre-constructed collection to use instead of building one from items and children. */
-  collection?: C
+  collection?: C;
 }
@@ -78,7 +87,7 @@
   /** The currently expanded keys in the collection (controlled). */
-  expandedKeys?: Iterable<Key>,
+  expandedKeys?: Iterable<Key>;
   /** The initial expanded keys in the collection (uncontrolled). */
-  defaultExpandedKeys?: Iterable<Key>,
+  defaultExpandedKeys?: Iterable<Key>;
   /** Handler that is called when items are expanded or collapsed. */
-  onExpandedChange?: (keys: Set<Key>) => any
+  onExpandedChange?: (keys: Set<Key>) => any;
 }
@@ -88,5 +97,5 @@
   /** The current sorted column and direction. */
-  sortDescriptor?: SortDescriptor,
+  sortDescriptor?: SortDescriptor;
   /** Handler that is called when the sorted column or direction changes. */
-  onSortChange?: (descriptor: SortDescriptor) => any
+  onSortChange?: (descriptor: SortDescriptor) => any;
 }
@@ -96,5 +105,5 @@
   /** The key of the column to sort by. */
-  column: Key,
+  column: Key;
   /** The direction to sort by. */
-  direction: SortDirection
+  direction: SortDirection;
 }
@@ -106,39 +115,39 @@
   /** Returns the key visually below the given one, or `null` for none. */
-  getKeyBelow?(key: Key): Key | null,
+  getKeyBelow?(key: Key, options?: {includeDisabled?: boolean}): Key | null;
 
   /** Returns the key visually above the given one, or `null` for none. */
-  getKeyAbove?(key: Key): Key | null,
+  getKeyAbove?(key: Key, options?: {includeDisabled?: boolean}): Key | null;
 
   /** Returns the key visually to the left of the given one, or `null` for none. */
-  getKeyLeftOf?(key: Key): Key | null,
+  getKeyLeftOf?(key: Key, options?: {includeDisabled?: boolean}): Key | null;
 
   /** Returns the key visually to the right of the given one, or `null` for none. */
-  getKeyRightOf?(key: Key): Key | null,
+  getKeyRightOf?(key: Key, options?: {includeDisabled?: boolean}): Key | null;
 
   /** Returns the key visually one page below the given one, or `null` for none. */
-  getKeyPageBelow?(key: Key): Key | null,
+  getKeyPageBelow?(key: Key): Key | null;
 
   /** Returns the key visually one page above the given one, or `null` for none. */
-  getKeyPageAbove?(key: Key): Key | null,
+  getKeyPageAbove?(key: Key): Key | null;
 
   /** Returns the first key, or `null` for none. */
-  getFirstKey?(key?: Key | null, global?: boolean): Key | null,
+  getFirstKey?(key?: Key | null, global?: boolean): Key | null;
 
   /** Returns the last key, or `null` for none. */
-  getLastKey?(key?: Key | null, global?: boolean): Key | null,
+  getLastKey?(key?: Key | null, global?: boolean): Key | null;
 
   /** Returns the next key after `fromKey` that matches the given search string, or `null` for none. */
-  getKeyForSearch?(search: string, fromKey?: Key | null): Key | null
+  getKeyForSearch?(search: string, fromKey?: Key | null): Key | null;
 }
 
 export interface Rect {
-  x: number,
-  y: number,
-  width: number,
-  height: number
+  x: number;
+  y: number;
+  width: number;
+  height: number;
 }
 
 export interface Size {
-  width: number,
-  height: number
+  width: number;
+  height: number;
 }
@@ -149,9 +158,9 @@
   /** Returns a rectangle for the item with the given key. */
-  getItemRect(key: Key): Rect | null,
+  getItemRect(key: Key): Rect | null;
   /** Returns the visible rectangle of the collection. */
-  getVisibleRect(): Rect,
+  getVisibleRect(): Rect;
   /** Returns the size of the scrollable content in the collection. */
-  getContentSize(): Size,
+  getContentSize(): Size;
   /** Returns a list of keys between `from` and `to`. */
-  getKeyRange?(from: Key, to: Key): Key[]
+  getKeyRange?(from: Key, to: Key): Key[];
 }
@@ -165,33 +174,33 @@
   /** The number of items in the collection. */
-  readonly size: number,
+  readonly size: number;
 
   /** Iterate over all keys in the collection. */
-  getKeys(): Iterable<Key>,
+  getKeys(): Iterable<Key>;
 
   /** Get an item by its key. */
-  getItem(key: Key): T | null,
+  getItem(key: Key): T | null;
 
   /** Get an item by the index of its key. */
-  at(idx: number): T | null,
+  at(idx: number): T | null;
 
   /** Get the key that comes before the given key in the collection. */
-  getKeyBefore(key: Key): Key | null,
+  getKeyBefore(key: Key): Key | null;
 
   /** Get the key that comes after the given key in the collection. */
-  getKeyAfter(key: Key): Key | null,
+  getKeyAfter(key: Key): Key | null;
 
   /** Get the first key in the collection. */
-  getFirstKey(): Key | null,
+  getFirstKey(): Key | null;
 
   /** Get the last key in the collection. */
-  getLastKey(): Key | null,
+  getLastKey(): Key | null;
 
   /** Iterate over the child items of the given key. */
-  getChildren?(key: Key): Iterable<T>,
+  getChildren?(key: Key): Iterable<T>;
 
   /** Returns a string representation of the item's contents. */
-  getTextValue?(key: Key): string,
+  getTextValue?(key: Key): string;
 
   /** Filters the collection using the given function. */
-  filter?(filterFn: (nodeValue: string, node: T) => boolean): Collection<T>
+  filter?(filterFn: (nodeValue: string, node: T) => boolean): Collection<T>;
 }
@@ -201,42 +210,43 @@
   /** The type of item this node represents. */
-  type: string,
+  type: string;
   /** A unique key for the node. */
-  key: Key,
+  key: Key;
   /** The object value the node was created from. */
-  value: T | null,
+  value: T | null;
   /** The level of depth this node is at in the hierarchy. */
-  level: number,
+  level: number;
   /** Whether this item has children, even if not loaded yet. */
-  hasChildNodes: boolean,
+  hasChildNodes: boolean;
   /**
    * The loaded children of this node.
+   *
    * @deprecated Use `collection.getChildren(node.key)` instead.
    */
-  childNodes: Iterable<Node<T>>,
+  childNodes: Iterable<Node<T>>;
   /** The rendered contents of this node (e.g. JSX). */
-  rendered: ReactNode,
+  rendered: ReactNode;
   /** A string value for this node, used for features like typeahead. */
-  textValue: string,
+  textValue: string;
   /** An accessibility label for this node. */
-  'aria-label'?: string,
+  'aria-label'?: string;
   /** The index of this node within its parent. */
-  index: number,
+  index: number;
   /** A function that should be called to wrap the rendered node. */
-  wrapper?: (element: ReactElement) => ReactElement,
+  wrapper?: (element: ReactElement) => ReactElement;
   /** The key of the parent node. */
-  parentKey?: Key | null,
+  parentKey?: Key | null;
   /** The key of the node before this node. */
-  prevKey?: Key | null,
+  prevKey?: Key | null;
   /** The key of the node after this node. */
-  nextKey?: Key | null,
+  nextKey?: Key | null;
   /** The first child key of this node. */
-  firstChildKey?: Key | null,
+  firstChildKey?: Key | null;
   /** The last child key of this node. */
-  lastChildKey?: Key | null,
+  lastChildKey?: Key | null;
   /** Additional properties specific to a particular node type. */
-  props?: any,
+  props?: any;
   /** @private */
-  shouldInvalidate?: (context: any) => boolean,
+  shouldInvalidate?: (context: any) => boolean;
   /** A function that renders this node to a React Element in the DOM. */
-  render?: (node: Node<any>) => ReactElement
+  render?: (node: Node<any>) => ReactElement;
 }

src/dna.d.ts

@@ -438,7 +438,3 @@ /*
 
-type SemanticColorValue =
-  | 'negative'
-  | 'notice'
-  | 'positive'
-  | 'informative';
+type SemanticColorValue = 'negative' | 'notice' | 'positive' | 'informative';
 
@@ -463,43 +459,16 @@ type BorderColorAlias =
 
-type BackgroundColorAlias =
-  | 'default'
-  | 'disabled'
-  | 'transparent'
-  | 'label-gray';
+type BackgroundColorAlias = 'default' | 'disabled' | 'transparent' | 'label-gray';
 
-export type IconColorValue =
-  | 'negative'
-  | 'notice'
-  | 'positive'
-  | 'informative';
+export type IconColorValue = 'negative' | 'notice' | 'positive' | 'informative';
 
-export type BorderSizeValue =
-  | 'thin'
-  | 'thick'
-  | 'thicker'
-  | 'thickest'
-  | 'none';
+export type BorderSizeValue = 'thin' | 'thick' | 'thicker' | 'thickest' | 'none';
 
-export type BorderRadiusValue =
-  | 'xsmall'
-  | 'small'
-  | 'regular'
-  | 'medium'
-  | 'large';
+export type BorderRadiusValue = 'xsmall' | 'small' | 'regular' | 'medium' | 'large';
 
-export type BorderColorValue =
-  | 'default'
-  | BorderColorAlias
-  | ColorValue;
+export type BorderColorValue = 'default' | BorderColorAlias | ColorValue;
 
-export type BorderColorValueV6 =
-  | BorderColorAlias
-  | ColorValueV6;
+export type BorderColorValueV6 = BorderColorAlias | ColorValueV6;
 
-export type BackgroundColorValue =
-  | BackgroundColorAlias
-  | ColorValue;
+export type BackgroundColorValue = BackgroundColorAlias | ColorValue;
 
-export type BackgroundColorValueV6 =
-  | BackgroundColorAlias
-  | ColorValueV6;
+export type BackgroundColorValueV6 = BackgroundColorAlias | ColorValueV6;

src/dnd.d.ts

@@ -17,5 +17,5 @@ /*
   /** The x coordinate of the event, relative to the target element. */
-  x: number,
+  x: number;
   /** The y coordinate of the event, relative to the target element. */
-  y: number
+  y: number;
 }
@@ -26,3 +26,3 @@
 export interface DragItem {
-  [type: string]: string
+  [type: string]: string;
 }
@@ -32,3 +32,3 @@
   /** The event type. */
-  type: 'dragstart'
+  type: 'dragstart';
 }
@@ -38,3 +38,3 @@
   /** The event type. */
-  type: 'dragmove'
+  type: 'dragmove';
 }
@@ -44,5 +44,5 @@
   /** The event type. */
-  type: 'dragend',
+  type: 'dragend';
   /** The drop operation that occurred. */
-  dropOperation: DropOperation
+  dropOperation: DropOperation;
 }
@@ -52,3 +52,3 @@
   /** The event type. */
-  type: 'dropenter'
+  type: 'dropenter';
 }
@@ -58,3 +58,3 @@
   /** The event type. */
-  type: 'dropmove'
+  type: 'dropmove';
 }
@@ -64,3 +64,3 @@
   /** The event type. */
-  type: 'dropactivate'
+  type: 'dropactivate';
 }
@@ -70,3 +70,3 @@
   /** The event type. */
-  type: 'dropexit'
+  type: 'dropexit';
 }
@@ -76,3 +76,3 @@
   /** The item kind. */
-  kind: 'text',
+  kind: 'text';
   /**
@@ -82,5 +82,5 @@ * The drag types available for this item.
    */
-  types: Set<string>,
+  types: Set<string>;
   /** Returns the data for the given type as a string. */
-  getText(type: string): Promise<string>
+  getText(type: string): Promise<string>;
 }
@@ -90,11 +90,11 @@
   /** The item kind. */
-  kind: 'file',
+  kind: 'file';
   /** The file type (usually a mime type). */
-  type: string,
+  type: string;
   /** The file name. */
-  name: string,
+  name: string;
   /** Returns the contents of the file as a blob. */
-  getFile(): Promise<File>,
+  getFile(): Promise<File>;
   /** Returns the contents of the file as a string. */
-  getText(): Promise<string>
+  getText(): Promise<string>;
 }
@@ -104,7 +104,7 @@
   /** The item kind. */
-  kind: 'directory',
+  kind: 'directory';
   /** The directory name. */
-  name: string,
+  name: string;
   /** Returns the entries contained within the directory. */
-  getEntries(): AsyncIterable<FileDropItem | DirectoryDropItem>
+  getEntries(): AsyncIterable<FileDropItem | DirectoryDropItem>;
 }
@@ -116,7 +116,7 @@
   /** The event type. */
-  type: 'drop',
+  type: 'drop';
   /** The drop operation that should occur. */
-  dropOperation: DropOperation,
+  dropOperation: DropOperation;
   /** The dropped items. */
-  items: DropItem[]
+  items: DropItem[];
 }
@@ -127,3 +127,3 @@
   /** The event type. */
-  type: 'root'
+  type: 'root';
 }
@@ -133,7 +133,7 @@
   /** The drop target type. */
-  type: 'item',
+  type: 'item';
   /** The item key. */
-  key: Key,
+  key: Key;
   /** The drop position relative to the item. */
-  dropPosition: DropPosition
+  dropPosition: DropPosition;
 }
@@ -145,3 +145,3 @@
   /** The drop target. */
-  target: DropTarget
+  target: DropTarget;
 }
@@ -151,3 +151,3 @@
   /** The drop target. */
-  target: DropTarget
+  target: DropTarget;
 }
@@ -157,3 +157,3 @@
   /** The drop target. */
-  target: DropTarget
+  target: DropTarget;
 }
@@ -163,3 +163,3 @@
   /** The drop target. */
-  target: DropTarget
+  target: DropTarget;
 }
@@ -169,3 +169,3 @@
   /** The drop target. */
-  target: DropTarget
+  target: DropTarget;
 }
@@ -175,7 +175,7 @@
   /** The dropped items. */
-  items: DropItem[],
+  items: DropItem[];
   /** The drop operation that should occur. */
-  dropOperation: DropOperation,
-   /** The drop target. */
-  target: ItemDropTarget
+  dropOperation: DropOperation;
+  /** The drop target. */
+  target: ItemDropTarget;
 }
@@ -185,5 +185,5 @@
   /** The dropped items. */
-  items: DropItem[],
+  items: DropItem[];
   /** The drop operation that should occur. */
-  dropOperation: DropOperation
+  dropOperation: DropOperation;
 }
@@ -193,9 +193,9 @@
   /** The dropped items. */
-  items: DropItem[],
+  items: DropItem[];
   /** The drop operation that should occur. */
-  dropOperation: DropOperation,
+  dropOperation: DropOperation;
   /** Whether the drag originated within the same collection as the drop. */
-  isInternal: boolean,
+  isInternal: boolean;
   /** The drop target. */
-  target: ItemDropTarget
+  target: ItemDropTarget;
 }
@@ -205,7 +205,7 @@
   /** The keys of the items that were reordered. */
-  keys: Set<Key>,
+  keys: Set<Key>;
   /** The drop operation that should occur. */
-  dropOperation: DropOperation,
+  dropOperation: DropOperation;
   /** The drop target. */
-  target: ItemDropTarget
+  target: ItemDropTarget;
 }
@@ -215,3 +215,3 @@
   /** Returns whether the drag contains data of the given type. */
-  has(type: string | symbol): boolean
+  has(type: string | symbol): boolean;
 }
@@ -221,7 +221,11 @@
   /**
-   * Returns a drop target within a collection for the given x and y coordinates.
-   * The point is provided relative to the top left corner of the collection container.
-   * A drop target can be checked to see if it is valid using the provided `isValidDropTarget` function.
+   * Returns a drop target within a collection for the given x and y coordinates. The point is
+   * provided relative to the top left corner of the collection container. A drop target can be
+   * checked to see if it is valid using the provided `isValidDropTarget` function.
    */
-  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget | null
+  getDropTargetFromPoint(
+    x: number,
+    y: number,
+    isValidDropTarget: (target: DropTarget) => boolean
+  ): DropTarget | null;
 }
@@ -231,18 +235,20 @@
   /**
-   * The drag types that the droppable collection accepts. If the collection accepts directories, include `DIRECTORY_DRAG_TYPE` in your array of allowed types.
+   * The drag types that the droppable collection accepts. If the collection accepts directories,
+   * include `DIRECTORY_DRAG_TYPE` in your array of allowed types.
+   *
    * @default 'all'
    */
-  acceptedDragTypes?: 'all' | Array<string | symbol>,
+  acceptedDragTypes?: 'all' | Array<string | symbol>;
   /**
    * Handler that is called when external items are dropped "between" items.
    */
-  onInsert?: (e: DroppableCollectionInsertDropEvent) => void,
+  onInsert?: (e: DroppableCollectionInsertDropEvent) => void;
   /**
    * Handler that is called when external items are dropped on the droppable collection's root.
    */
-  onRootDrop?: (e: DroppableCollectionRootDropEvent) => void,
+  onRootDrop?: (e: DroppableCollectionRootDropEvent) => void;
   /**
    * Handler that is called when items are dropped "on" an item.
    */
-  onItemDrop?: (e: DroppableCollectionOnItemDropEvent) => void,
+  onItemDrop?: (e: DroppableCollectionOnItemDropEvent) => void;
   /**
@@ -253,3 +259,3 @@ * Handler that is called when items are reordered within the collection.
    */
-  onReorder?: (e: DroppableCollectionReorderEvent) => void,
+  onReorder?: (e: DroppableCollectionReorderEvent) => void;
   /**
@@ -260,7 +266,8 @@ * Handler that is called when items are moved within the source collection.
    */
-  onMove?: (e: DroppableCollectionReorderEvent) => void,
+  onMove?: (e: DroppableCollectionReorderEvent) => void;
   /**
-   * A function returning whether a given target in the droppable collection is a valid "on" drop target for the current drag types.
+   * A function returning whether a given target in the droppable collection is a valid "on" drop
+   * target for the current drag types.
    */
-  shouldAcceptItemDrop?: (target: ItemDropTarget, types: DragTypes) => boolean
+  shouldAcceptItemDrop?: (target: ItemDropTarget, types: DragTypes) => boolean;
 }
@@ -270,26 +277,31 @@
   /** Handler that is called when a valid drag enters a drop target. */
-  onDropEnter?: (e: DroppableCollectionEnterEvent) => void,
+  onDropEnter?: (e: DroppableCollectionEnterEvent) => void;
   /**
    * Handler that is called after a valid drag is held over a drop target for a period of time.
    */
-  onDropActivate?: (e: DroppableCollectionActivateEvent) => void,
+  onDropActivate?: (e: DroppableCollectionActivateEvent) => void;
   /** Handler that is called when a valid drag exits a drop target. */
-  onDropExit?: (e: DroppableCollectionExitEvent) => void,
+  onDropExit?: (e: DroppableCollectionExitEvent) => void;
   /**
-   * Handler that is called when a valid drag is dropped on a drop target. When defined, this overrides other
-   * drop handlers such as `onInsert`, and `onItemDrop`.
+   * Handler that is called when a valid drag is dropped on a drop target. When defined, this
+   * overrides other drop handlers such as `onInsert`, and `onItemDrop`.
    */
-  onDrop?: (e: DroppableCollectionDropEvent) => void,
+  onDrop?: (e: DroppableCollectionDropEvent) => void;
   /**
-   * A function returning the drop operation to be performed when items matching the given types are dropped
-   * on the drop target.
+   * A function returning the drop operation to be performed when items matching the given types are
+   * dropped on the drop target.
    */
-  getDropOperation?: (target: DropTarget, types: DragTypes, allowedOperations: DropOperation[]) => DropOperation
+  getDropOperation?: (
+    target: DropTarget,
+    types: DragTypes,
+    allowedOperations: DropOperation[]
+  ) => DropOperation;
 }
 
-export interface DroppableCollectionProps extends DroppableCollectionUtilityOptions, DroppableCollectionBaseProps {}
+export interface DroppableCollectionProps
+  extends DroppableCollectionUtilityOptions, DroppableCollectionBaseProps {}
 
 export interface DraggableCollectionStartEvent extends DragStartEvent {
   /** The keys of the items that were dragged. */
-  keys: Set<Key>
+  keys: Set<Key>;
 }
@@ -299,3 +311,3 @@
   /** The keys of the items that were dragged. */
-  keys: Set<Key>
+  keys: Set<Key>;
 }
@@ -305,22 +317,31 @@
   /** The keys of the items that were dragged. */
-  keys: Set<Key>,
+  keys: Set<Key>;
   /** Whether the drop ended within the same collection as it originated. */
-  isInternal: boolean
+  isInternal: boolean;
 }
 
-export type DragPreviewRenderer = (items: DragItem[], callback: (node: HTMLElement | null, x?: number, y?: number) => void) => void;
+export type DragPreviewRenderer = (
+  items: DragItem[],
+  callback: (node: HTMLElement | null, x?: number, y?: number) => void
+) => void;
 
 export interface DraggableCollectionProps<T = object> {
   /** Handler that is called when a drag operation is started. */
-  onDragStart?: (e: DraggableCollectionStartEvent) => void,
+  onDragStart?: (e: DraggableCollectionStartEvent) => void;
   /** Handler that is called when the drag is moved. */
-  onDragMove?: (e: DraggableCollectionMoveEvent) => void,
-  /** Handler that is called when the drag operation is ended, either as a result of a drop or a cancellation. */
-  onDragEnd?: (e: DraggableCollectionEndEvent) => void,
+  onDragMove?: (e: DraggableCollectionMoveEvent) => void;
+  /**
+   * Handler that is called when the drag operation is ended, either as a result of a drop or a
+   * cancellation.
+   */
+  onDragEnd?: (e: DraggableCollectionEndEvent) => void;
   /** A function that returns the items being dragged. */
-  getItems: (keys: Set<Key>, items: T[]) => DragItem[],
+  getItems: (keys: Set<Key>, items: T[]) => DragItem[];
   /** The ref of the element that will be rendered as the drag preview while dragging. */
-  preview?: RefObject<DragPreviewRenderer | null>,
-  /** Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed. */
-  getAllowedDropOperations?: () => DropOperation[]
+  preview?: RefObject<DragPreviewRenderer | null>;
+  /**
+   * Function that returns the drop operations that are allowed for the dragged items. If not
+   * provided, all drop operations are allowed.
+   */
+  getAllowedDropOperations?: () => DropOperation[];
 }

src/dom.d.ts

@@ -29,2 +29,3 @@ /*
   ReactEventHandler,
+  RefAttributes,
   TouchEventHandler,
@@ -41,3 +42,3 @@ TransitionEventHandler,
    */
-  'aria-label'?: string,
+  'aria-label'?: string;
 
@@ -47,3 +48,3 @@ /**
    */
-  'aria-labelledby'?: string,
+  'aria-labelledby'?: string;
 
@@ -53,8 +54,9 @@ /**
    */
-  'aria-describedby'?: string,
+  'aria-describedby'?: string;
 
   /**
-   * Identifies the element (or elements) that provide a detailed, extended description for the object.
+   * Identifies the element (or elements) that provide a detailed, extended description for the
+   * object.
    */
-  'aria-details'?: string
+  'aria-details'?: string;
 }
@@ -67,3 +69,3 @@
    */
-  'aria-errormessage'?: string
+  'aria-errormessage'?: string;
 }
@@ -75,5 +77,6 @@
   /**
-   * The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
+   * The element's unique identifier. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
    */
-  id?: string
+  id?: string;
 }
@@ -88,54 +91,64 @@
    */
-  excludeFromTabOrder?: boolean
+  excludeFromTabOrder?: boolean;
 }
 
-
-export interface TextInputDOMEvents {
+export interface TextInputDOMEvents<T = HTMLInputElement> {
   // Clipboard events
   /**
-   * Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).
+   * Handler that is called when the user copies text. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).
    */
-   onCopy?: ClipboardEventHandler<HTMLInputElement>,
+  onCopy?: ClipboardEventHandler<T>;
 
-   /**
-    * Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).
-    */
-   onCut?: ClipboardEventHandler<HTMLInputElement>,
+  /**
+   * Handler that is called when the user cuts text. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).
+   */
+  onCut?: ClipboardEventHandler<T>;
 
-   /**
-    * Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).
-    */
-   onPaste?: ClipboardEventHandler<HTMLInputElement>,
+  /**
+   * Handler that is called when the user pastes text. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).
+   */
+  onPaste?: ClipboardEventHandler<T>;
 
-   // Composition events
-   /**
-    * Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).
-    */
-   onCompositionStart?: CompositionEventHandler<HTMLInputElement>,
+  // Composition events
+  /**
+   * Handler that is called when a text composition system starts a new text composition session.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).
+   */
+  onCompositionStart?: CompositionEventHandler<T>;
 
-   /**
-    * Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event).
-    */
-   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>,
+  /**
+   * Handler that is called when a text composition system completes or cancels the current text
+   * composition session. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event).
+   */
+  onCompositionEnd?: CompositionEventHandler<T>;
 
-   /**
-    * Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).
-    */
-   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>,
+  /**
+   * Handler that is called when a new character is received in the current text composition
+   * session. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).
+   */
+  onCompositionUpdate?: CompositionEventHandler<T>;
 
-   // Selection events
-   /**
-    * Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).
-    */
-   onSelect?: ReactEventHandler<HTMLInputElement>,
+  // Selection events
+  /**
+   * Handler that is called when text in the input is selected. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).
+   */
+  onSelect?: ReactEventHandler<T>;
 
-   // Input events
-   /**
-    * Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).
-    */
-   onBeforeInput?: FormEventHandler<HTMLInputElement>,
-   /**
-    * Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).
-    */
-   onInput?: FormEventHandler<HTMLInputElement>
+  // Input events
+  /**
+   * Handler that is called when the input value is about to be modified. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).
+   */
+  onBeforeInput?: FormEventHandler<T>;
+  /**
+   * Handler that is called when the input value is modified. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).
+   */
+  onInput?: FormEventHandler<T>;
 }
@@ -145,5 +158,6 @@
   /**
-   * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
+   * The name of the input element, used when submitting an HTML form. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
    */
-  name?: string,
+  name?: string;
   /**
@@ -154,3 +168,3 @@ * The `<form>` element to associate the input with.
    */
-  form?: string
+  form?: string;
 }
@@ -160,53 +174,67 @@
 // Ensure this is synced with useTextField
-export interface TextInputDOMProps extends DOMProps, InputDOMProps, TextInputDOMEvents {
+export interface TextInputDOMProps<T = HTMLInputElement>
+  extends DOMProps, InputDOMProps, TextInputDOMEvents<T> {
   /**
-   * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
+   * Describes the type of autocomplete functionality the input should provide if any. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
    */
-  autoComplete?: string,
+  autoComplete?: string;
 
   /**
-   * The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength).
+   * The maximum number of characters supported by the input. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength).
    */
-  maxLength?: number,
+  maxLength?: number;
 
   /**
-   * The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength).
+   * The minimum number of characters required by the input. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength).
    */
-  minLength?: number,
+  minLength?: number;
 
   /**
-   * Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern).
+   * Regex pattern that the value of the input must match to be valid. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern).
    */
-  pattern?: string,
+  pattern?: string;
 
   /**
-   * Content that appears in the input when it is empty. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefplaceholder).
+   * Content that appears in the input when it is empty. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefplaceholder).
    */
-  placeholder?: string,
+  placeholder?: string;
 
   /**
-   * The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).
+   * The type of input to render. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).
+   *
    * @default 'text'
    */
-  type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {}),
+  type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {});
 
   /**
-   * Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).
+   * Hints at the type of data that might be entered by the user while editing the element or its
+   * contents. See
+   * [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).
    */
-  inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search',
+  inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
 
   /**
-   * An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete).
+   * An attribute that takes as its value a space-separated string that describes what, if any, type
+   * of autocomplete functionality the input should provide. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete).
    */
-  autoCorrect?: string,
+  autoCorrect?: string;
 
   /**
-   * An enumerated attribute that defines whether the element may be checked for spelling errors. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).
+   * An enumerated attribute that defines whether the element may be checked for spelling errors.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).
    */
-  spellCheck?: string
+  spellCheck?: string;
 }
 
 /**
- * This type allows configuring link props with router options and type-safe URLs via TS module augmentation.
- * By default, this is an empty type. Extend with `href` and `routerOptions` properties to configure your router.
+ * This type allows configuring link props with router options and type-safe URLs via TS module
+ * augmentation. By default, this is an empty type. Extend with `href` and `routerOptions`
+ * properties to configure your router.
  */
@@ -221,17 +249,35 @@ export interface RouterConfig {}
   /** A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). */
-  href?: Href,
-  /** Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang). */
-  hrefLang?: string,
-  /** The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). */
-  target?: HTMLAttributeAnchorTarget,
-  /** The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). */
-  rel?: string,
-  /** Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). */
-  download?: boolean | string,
-  /** A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping). */
-  ping?: string,
-  /** How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */
-  referrerPolicy?: HTMLAttributeReferrerPolicy,
+  href?: Href;
+  /**
+   * Hints at the human language of the linked URL.
+   * See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).
+   */
+  hrefLang?: string;
+  /**
+   * The target window for the link. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
+   */
+  target?: HTMLAttributeAnchorTarget;
+  /**
+   * The relationship between the linked resource and the current page. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
+   */
+  rel?: string;
+  /**
+   * Causes the browser to download the linked URL. A string may be provided to suggest a file name.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
+   */
+  download?: boolean | string;
+  /**
+   * A space-separated list of URLs to ping when the link is followed. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).
+   */
+  ping?: string;
+  /**
+   * How much of the referrer to send when following the link. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).
+   */
+  referrerPolicy?: HTMLAttributeReferrerPolicy;
   /** Options for the configured client side router. */
-  routerOptions?: RouterOptions
+  routerOptions?: RouterOptions;
 }
@@ -244,11 +290,13 @@
 export interface DOMAttributes<T = FocusableElement> extends AriaAttributes, ReactDOMAttributes<T> {
-  id?: string | undefined,
-  role?: AriaRole | undefined,
-  tabIndex?: number | undefined,
-  style?: CSSProperties | undefined,
-  className?: string | undefined
+  id?: string | undefined;
+  role?: AriaRole | undefined;
+  tabIndex?: number | undefined;
+  style?: CSSProperties | undefined;
+  className?: string | undefined;
 }
 
+export interface DOMAttributesWithRef<T = Element> extends DOMAttributes<T>, RefAttributes<T> {}
+
 export interface GroupDOMAttributes extends Omit<DOMAttributes<HTMLElement>, 'role'> {
-  role?: 'group' | 'region' | 'presentation'
+  role?: 'group' | 'region' | 'presentation';
 }
@@ -258,2 +306,3 @@
  * Global attributes that can be applied to any DOM element.
+ *
  * @private
@@ -263,7 +312,7 @@ */
 export interface GlobalDOMAttributes<T = Element> extends GlobalDOMEvents<T> {
-  dir?: string | undefined,
-  lang?: string | undefined,
-  hidden?: boolean | undefined,
-  inert?: boolean | undefined,
-  translate?: 'yes' | 'no' | undefined
+  dir?: string | undefined;
+  lang?: string | undefined;
+  hidden?: boolean | undefined;
+  inert?: boolean | undefined;
+  translate?: 'yes' | 'no' | undefined;
 }
@@ -273,2 +322,3 @@
  * Global DOM events that are supported on all DOM elements.
+ *
  * @private
@@ -279,3 +329,3 @@ */
 //   - Keyboard and focus events are supported directly on focusable elements (FocusableProps).
-//   - Text input events (e.g. onInput, onCompositionStart, onCopy) are 
+//   - Text input events (e.g. onInput, onCompositionStart, onCopy) are
 //     supported only directly on input elements (TextInputDOMProps).
@@ -286,78 +336,78 @@ //     We don't support contentEditable on our components.
   // MouseEvents
-  onClick?: MouseEventHandler<T> | undefined,
-  onClickCapture?: MouseEventHandler<T> | undefined,
-  onAuxClick?: MouseEventHandler<T> | undefined,
-  onAuxClickCapture?: MouseEventHandler<T> | undefined,
-  onContextMenu?: MouseEventHandler<T> | undefined,
-  onContextMenuCapture?: MouseEventHandler<T> | undefined,
-  onDoubleClick?: MouseEventHandler<T> | undefined,
-  onDoubleClickCapture?: MouseEventHandler<T> | undefined,
-  onMouseDown?: MouseEventHandler<T> | undefined,
-  onMouseDownCapture?: MouseEventHandler<T> | undefined,
-  onMouseEnter?: MouseEventHandler<T> | undefined,
-  onMouseLeave?: MouseEventHandler<T> | undefined,
-  onMouseMove?: MouseEventHandler<T> | undefined,
-  onMouseMoveCapture?: MouseEventHandler<T> | undefined,
-  onMouseOut?: MouseEventHandler<T> | undefined,
-  onMouseOutCapture?: MouseEventHandler<T> | undefined,
-  onMouseOver?: MouseEventHandler<T> | undefined,
-  onMouseOverCapture?: MouseEventHandler<T> | undefined,
-  onMouseUp?: MouseEventHandler<T> | undefined,
-  onMouseUpCapture?: MouseEventHandler<T> | undefined,
+  onClick?: MouseEventHandler<T> | undefined;
+  onClickCapture?: MouseEventHandler<T> | undefined;
+  onAuxClick?: MouseEventHandler<T> | undefined;
+  onAuxClickCapture?: MouseEventHandler<T> | undefined;
+  onContextMenu?: MouseEventHandler<T> | undefined;
+  onContextMenuCapture?: MouseEventHandler<T> | undefined;
+  onDoubleClick?: MouseEventHandler<T> | undefined;
+  onDoubleClickCapture?: MouseEventHandler<T> | undefined;
+  onMouseDown?: MouseEventHandler<T> | undefined;
+  onMouseDownCapture?: MouseEventHandler<T> | undefined;
+  onMouseEnter?: MouseEventHandler<T> | undefined;
+  onMouseLeave?: MouseEventHandler<T> | undefined;
+  onMouseMove?: MouseEventHandler<T> | undefined;
+  onMouseMoveCapture?: MouseEventHandler<T> | undefined;
+  onMouseOut?: MouseEventHandler<T> | undefined;
+  onMouseOutCapture?: MouseEventHandler<T> | undefined;
+  onMouseOver?: MouseEventHandler<T> | undefined;
+  onMouseOverCapture?: MouseEventHandler<T> | undefined;
+  onMouseUp?: MouseEventHandler<T> | undefined;
+  onMouseUpCapture?: MouseEventHandler<T> | undefined;
 
   // Touch Events
-  onTouchCancel?: TouchEventHandler<T> | undefined,
-  onTouchCancelCapture?: TouchEventHandler<T> | undefined,
-  onTouchEnd?: TouchEventHandler<T> | undefined,
-  onTouchEndCapture?: TouchEventHandler<T> | undefined,
-  onTouchMove?: TouchEventHandler<T> | undefined,
-  onTouchMoveCapture?: TouchEventHandler<T> | undefined,
-  onTouchStart?: TouchEventHandler<T> | undefined,
-  onTouchStartCapture?: TouchEventHandler<T> | undefined,
+  onTouchCancel?: TouchEventHandler<T> | undefined;
+  onTouchCancelCapture?: TouchEventHandler<T> | undefined;
+  onTouchEnd?: TouchEventHandler<T> | undefined;
+  onTouchEndCapture?: TouchEventHandler<T> | undefined;
+  onTouchMove?: TouchEventHandler<T> | undefined;
+  onTouchMoveCapture?: TouchEventHandler<T> | undefined;
+  onTouchStart?: TouchEventHandler<T> | undefined;
+  onTouchStartCapture?: TouchEventHandler<T> | undefined;
 
   // Pointer Events
-  onPointerDown?: PointerEventHandler<T> | undefined,
-  onPointerDownCapture?: PointerEventHandler<T> | undefined,
-  onPointerMove?: PointerEventHandler<T> | undefined,
-  onPointerMoveCapture?: PointerEventHandler<T> | undefined,
-  onPointerUp?: PointerEventHandler<T> | undefined,
-  onPointerUpCapture?: PointerEventHandler<T> | undefined,
-  onPointerCancel?: PointerEventHandler<T> | undefined,
-  onPointerCancelCapture?: PointerEventHandler<T> | undefined,
-  onPointerEnter?: PointerEventHandler<T> | undefined,
-  onPointerLeave?: PointerEventHandler<T> | undefined,
-  onPointerOver?: PointerEventHandler<T> | undefined,
-  onPointerOverCapture?: PointerEventHandler<T> | undefined,
-  onPointerOut?: PointerEventHandler<T> | undefined,
-  onPointerOutCapture?: PointerEventHandler<T> | undefined,
-  onGotPointerCapture?: PointerEventHandler<T> | undefined,
-  onGotPointerCaptureCapture?: PointerEventHandler<T> | undefined,
-  onLostPointerCapture?: PointerEventHandler<T> | undefined,
-  onLostPointerCaptureCapture?: PointerEventHandler<T> | undefined,
+  onPointerDown?: PointerEventHandler<T> | undefined;
+  onPointerDownCapture?: PointerEventHandler<T> | undefined;
+  onPointerMove?: PointerEventHandler<T> | undefined;
+  onPointerMoveCapture?: PointerEventHandler<T> | undefined;
+  onPointerUp?: PointerEventHandler<T> | undefined;
+  onPointerUpCapture?: PointerEventHandler<T> | undefined;
+  onPointerCancel?: PointerEventHandler<T> | undefined;
+  onPointerCancelCapture?: PointerEventHandler<T> | undefined;
+  onPointerEnter?: PointerEventHandler<T> | undefined;
+  onPointerLeave?: PointerEventHandler<T> | undefined;
+  onPointerOver?: PointerEventHandler<T> | undefined;
+  onPointerOverCapture?: PointerEventHandler<T> | undefined;
+  onPointerOut?: PointerEventHandler<T> | undefined;
+  onPointerOutCapture?: PointerEventHandler<T> | undefined;
+  onGotPointerCapture?: PointerEventHandler<T> | undefined;
+  onGotPointerCaptureCapture?: PointerEventHandler<T> | undefined;
+  onLostPointerCapture?: PointerEventHandler<T> | undefined;
+  onLostPointerCaptureCapture?: PointerEventHandler<T> | undefined;
 
   // UI Events
-  onScroll?: UIEventHandler<T> | undefined,
-  onScrollCapture?: UIEventHandler<T> | undefined,
+  onScroll?: UIEventHandler<T> | undefined;
+  onScrollCapture?: UIEventHandler<T> | undefined;
 
   // Wheel Events
-  onWheel?: WheelEventHandler<T> | undefined,
-  onWheelCapture?: WheelEventHandler<T> | undefined,
+  onWheel?: WheelEventHandler<T> | undefined;
+  onWheelCapture?: WheelEventHandler<T> | undefined;
 
   // Animation Events
-  onAnimationStart?: AnimationEventHandler<T> | undefined,
-  onAnimationStartCapture?: AnimationEventHandler<T> | undefined,
-  onAnimationEnd?: AnimationEventHandler<T> | undefined,
-  onAnimationEndCapture?: AnimationEventHandler<T> | undefined,
-  onAnimationIteration?: AnimationEventHandler<T> | undefined,
-  onAnimationIterationCapture?: AnimationEventHandler<T> | undefined,
+  onAnimationStart?: AnimationEventHandler<T> | undefined;
+  onAnimationStartCapture?: AnimationEventHandler<T> | undefined;
+  onAnimationEnd?: AnimationEventHandler<T> | undefined;
+  onAnimationEndCapture?: AnimationEventHandler<T> | undefined;
+  onAnimationIteration?: AnimationEventHandler<T> | undefined;
+  onAnimationIterationCapture?: AnimationEventHandler<T> | undefined;
 
   // Transition Events
-  onTransitionCancel?: TransitionEventHandler<T> | undefined,
-  onTransitionCancelCapture?: TransitionEventHandler<T> | undefined,
-  onTransitionEnd?: TransitionEventHandler<T> | undefined,
-  onTransitionEndCapture?: TransitionEventHandler<T> | undefined,
-  onTransitionRun?: TransitionEventHandler<T> | undefined,
-  onTransitionRunCapture?: TransitionEventHandler<T> | undefined,
-  onTransitionStart?: TransitionEventHandler<T> | undefined,
-  onTransitionStartCapture?: TransitionEventHandler<T> | undefined
+  onTransitionCancel?: TransitionEventHandler<T> | undefined;
+  onTransitionCancelCapture?: TransitionEventHandler<T> | undefined;
+  onTransitionEnd?: TransitionEventHandler<T> | undefined;
+  onTransitionEndCapture?: TransitionEventHandler<T> | undefined;
+  onTransitionRun?: TransitionEventHandler<T> | undefined;
+  onTransitionRunCapture?: TransitionEventHandler<T> | undefined;
+  onTransitionStart?: TransitionEventHandler<T> | undefined;
+  onTransitionStartCapture?: TransitionEventHandler<T> | undefined;
 }
@@ -370,3 +420,3 @@
    */
-  validationErrors?: ValidationErrors,
+  validationErrors?: ValidationErrors;
   /**
@@ -376,8 +426,8 @@ * Where to send the form-data when the form is submitted.
    */
-  action?: string | FormHTMLAttributes<HTMLFormElement>['action'],
+  action?: string | FormHTMLAttributes<HTMLFormElement>['action'];
   /**
-   * The enctype attribute specifies how the form-data should be encoded when submitting it to the server.
-   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#enctype).
+   * The enctype attribute specifies how the form-data should be encoded when submitting it to the
+   * server. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#enctype).
    */
-  encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain',
+  encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
   /**
@@ -387,34 +437,36 @@ * The HTTP method to submit the form with.
    */
-  method?: 'get' | 'post' | 'dialog',
+  method?: 'get' | 'post' | 'dialog';
   /**
-   * The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
-   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#target).
+   * The target attribute specifies a name or a keyword that indicates where to display the response
+   * that is received after submitting the form. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#target).
    */
-  target?: '_blank' | '_self' | '_parent' | '_top',
+  target?: '_blank' | '_self' | '_parent' | '_top';
   /**
    * Triggered when a user submits the form.
    */
-  onSubmit?: (event: FormEvent<HTMLFormElement>) => void,
+  onSubmit?: (event: FormEvent<HTMLFormElement>) => void;
   /**
    * Triggered when a user resets the form.
    */
-  onReset?:  (event: FormEvent<HTMLFormElement>) => void,
+  onReset?: (event: FormEvent<HTMLFormElement>) => void;
   /**
    * Triggered for each invalid field when a user submits the form.
    */
-  onInvalid?:  (event: FormEvent<HTMLFormElement>) => void,
+  onInvalid?: (event: FormEvent<HTMLFormElement>) => void;
   /**
-   * Indicates whether input elements can by default have their values automatically completed by the browser.
-   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#autocomplete).
+   * Indicates whether input elements can by default have their values automatically completed by
+   * the browser. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#autocomplete).
    */
-  autoComplete?: 'off' | 'on',
+  autoComplete?: 'off' | 'on';
   /**
-   * Controls whether inputted text is automatically capitalized and, if so, in what manner. 
+   * Controls whether inputted text is automatically capitalized and, if so, in what manner.
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).
    */
-  autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters',
+  autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
   /**
    * An ARIA role override to apply to the form element.
    */
-  role?: 'search' | 'presentation'
+  role?: 'search' | 'presentation';
 }

src/events.d.ts

@@ -14,8 +14,3 @@ /*
 import {FocusableElement} from './dom';
-import {
-  FocusEvent,
-  MouseEvent,
-  KeyboardEvent as ReactKeyboardEvent,
-  SyntheticEvent
-} from 'react';
+import {FocusEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent, SyntheticEvent} from 'react';
 
@@ -27,6 +22,8 @@ // Event bubbling can be problematic in real-world applications, so the default for React Spectrum components
    * Use continuePropagation.
-   * @deprecated */
-  stopPropagation(): void,
-  continuePropagation(): void
-}
+   *
+   * @deprecated
+   */
+  stopPropagation(): void;
+  continuePropagation(): void;
+};
 
@@ -39,19 +36,19 @@ export type KeyboardEvent = BaseEvent<ReactKeyboardEvent<any>>;
   /** The type of press event being fired. */
-  type: 'pressstart' | 'pressend' | 'pressup' | 'press',
+  type: 'pressstart' | 'pressend' | 'pressup' | 'press';
   /** The pointer type that triggered the press event. */
-  pointerType: PointerType,
+  pointerType: PointerType;
   /** The target element of the press event. */
-  target: Element,
+  target: Element;
   /** Whether the shift keyboard modifier was held during the press event. */
-  shiftKey: boolean,
+  shiftKey: boolean;
   /** Whether the ctrl keyboard modifier was held during the press event. */
-  ctrlKey: boolean,
+  ctrlKey: boolean;
   /** Whether the meta keyboard modifier was held during the press event. */
-  metaKey: boolean,
+  metaKey: boolean;
   /** Whether the alt keyboard modifier was held during the press event. */
-  altKey: boolean,
+  altKey: boolean;
   /** X position relative to the target. */
-  x: number,
+  x: number;
   /** Y position relative to the target. */
-  y: number,
+  y: number;
   /**
@@ -61,3 +58,3 @@ * The key that triggered the press event, if it was triggered by a keyboard interaction.
    */
-  key?: string,
+  key?: string;
   /**
@@ -68,3 +65,3 @@ * By default, press events stop propagation to parent elements.
    */
-  continuePropagation(): void
+  continuePropagation(): void;
 }
@@ -74,3 +71,3 @@
   /** The type of long press event being fired. */
-  type: 'longpressstart' | 'longpressend' | 'longpress'
+  type: 'longpressstart' | 'longpressend' | 'longpress';
 }
@@ -80,7 +77,7 @@
   /** The type of hover event being fired. */
-  type: 'hoverstart' | 'hoverend',
+  type: 'hoverstart' | 'hoverend';
   /** The pointer type that triggered the hover event. */
-  pointerType: 'mouse' | 'pen',
+  pointerType: 'mouse' | 'pen';
   /** The target element of the hover event. */
-  target: HTMLElement
+  target: HTMLElement;
 }
@@ -90,5 +87,5 @@
   /** Handler that is called when a key is pressed. */
-  onKeyDown?: (e: KeyboardEvent) => void,
+  onKeyDown?: (e: KeyboardEvent) => void;
   /** Handler that is called when a key is released. */
-  onKeyUp?: (e: KeyboardEvent) => void
+  onKeyUp?: (e: KeyboardEvent) => void;
 }
@@ -98,7 +95,7 @@
   /** Handler that is called when the element receives focus. */
-  onFocus?: (e: FocusEvent<Target>) => void,
+  onFocus?: (e: FocusEvent<Target>) => void;
   /** Handler that is called when the element loses focus. */
-  onBlur?: (e: FocusEvent<Target>) => void,
+  onBlur?: (e: FocusEvent<Target>) => void;
   /** Handler that is called when the element's focus status changes. */
-  onFocusChange?: (isFocused: boolean) => void
+  onFocusChange?: (isFocused: boolean) => void;
 }
@@ -108,7 +105,7 @@
   /** Handler that is called when a hover interaction starts. */
-  onHoverStart?: (e: HoverEvent) => void,
+  onHoverStart?: (e: HoverEvent) => void;
   /** Handler that is called when a hover interaction ends. */
-  onHoverEnd?: (e: HoverEvent) => void,
+  onHoverEnd?: (e: HoverEvent) => void;
   /** Handler that is called when the hover state changes. */
-  onHoverChange?: (isHovering: boolean) => void
+  onHoverChange?: (isHovering: boolean) => void;
 }
@@ -118,5 +115,5 @@
   /** Handler that is called when the press is released over the target. */
-  onPress?: (e: PressEvent) => void,
+  onPress?: (e: PressEvent) => void;
   /** Handler that is called when a press interaction starts. */
-  onPressStart?: (e: PressEvent) => void,
+  onPressStart?: (e: PressEvent) => void;
   /**
@@ -126,5 +123,5 @@ * Handler that is called when a press interaction ends, either
    */
-  onPressEnd?: (e: PressEvent) => void,
+  onPressEnd?: (e: PressEvent) => void;
   /** Handler that is called when the press state changes. */
-  onPressChange?: (isPressed: boolean) => void,
+  onPressChange?: (isPressed: boolean) => void;
   /**
@@ -134,9 +131,9 @@ * Handler that is called when a press is released over the target, regardless of
    */
-  onPressUp?: (e: PressEvent) => void,
+  onPressUp?: (e: PressEvent) => void;
   /**
    * **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress`
-   * provided for compatibility with other libraries. `onPress` provides 
+   * provided for compatibility with other libraries. `onPress` provides
    * additional event details for non-mouse interactions.
    */
-  onClick?: (e: MouseEvent<FocusableElement>) => void
+  onClick?: (e: MouseEvent<FocusableElement>) => void;
 }
@@ -146,3 +143,3 @@
   /** Whether the element should receive focus on render. */
-  autoFocus?: boolean
+  autoFocus?: boolean;
 }
@@ -152,11 +149,11 @@
   /** The pointer type that triggered the move event. */
-  pointerType: PointerType,
+  pointerType: PointerType;
   /** Whether the shift keyboard modifier was held during the move event. */
-  shiftKey: boolean,
+  shiftKey: boolean;
   /** Whether the ctrl keyboard modifier was held during the move event. */
-  ctrlKey: boolean,
+  ctrlKey: boolean;
   /** Whether the meta keyboard modifier was held during the move event. */
-  metaKey: boolean,
+  metaKey: boolean;
   /** Whether the alt keyboard modifier was held during the move event. */
-  altKey: boolean
+  altKey: boolean;
 }
@@ -166,3 +163,3 @@
   /** The type of move event being fired. */
-  type: 'movestart'
+  type: 'movestart';
 }
@@ -172,8 +169,7 @@
   /** The type of move event being fired. */
-  type: 'move',
+  type: 'move';
   /** The amount moved in the X direction since the last event. */
-  deltaX: number,
+  deltaX: number;
   /** The amount moved in the Y direction since the last event. */
-  deltaY: number
-
+  deltaY: number;
 }
@@ -183,3 +179,3 @@
   /** The type of move event being fired. */
-  type: 'moveend'
+  type: 'moveend';
 }
@@ -191,7 +187,7 @@
   /** Handler that is called when a move interaction starts. */
-  onMoveStart?: (e: MoveStartEvent) => void,
+  onMoveStart?: (e: MoveStartEvent) => void;
   /** Handler that is called when the element is moved. */
-  onMove?: (e: MoveMoveEvent) => void,
+  onMove?: (e: MoveMoveEvent) => void;
   /** Handler that is called when a move interaction ends. */
-  onMoveEnd?: (e: MoveEndEvent) => void
+  onMoveEnd?: (e: MoveEndEvent) => void;
 }
@@ -201,5 +197,5 @@
   /** The amount moved in the X direction since the last event. */
-  deltaX: number,
+  deltaX: number;
   /** The amount moved in the Y direction since the last event. */
-  deltaY: number
+  deltaY: number;
 }
@@ -209,3 +205,3 @@
   /** Handler that is called when the scroll wheel moves. */
-  onScroll?: (e: ScrollEvent) => void
+  onScroll?: (e: ScrollEvent) => void;
 }

src/inputs.d.ts

@@ -23,7 +23,7 @@ /*
   /** Whether user input is required on the input before form submission. */
-  isRequired?: boolean,
+  isRequired?: boolean;
   /** Whether the input value is invalid. */
-  isInvalid?: boolean,
+  isInvalid?: boolean;
   /** @deprecated Use `isInvalid` instead. */
-  validationState?: ValidationState,
+  validationState?: ValidationState;
   /**
@@ -33,5 +33,6 @@ * Whether to use native HTML form validation to prevent form submission
    * or invalid via ARIA.
+   *
    * @default 'aria'
    */
-  validationBehavior?: 'aria' | 'native',
+  validationBehavior?: 'aria' | 'native';
   /**
@@ -43,3 +44,3 @@ * A function that returns an error message if a given value is invalid.
    */
-  validate?: (value: T) => ValidationError | true | null | undefined
+  validate?: (value: T) => ValidationError | true | null | undefined;
 }
@@ -49,12 +50,15 @@
   /** Whether the input value is invalid. */
-  isInvalid: boolean,
+  isInvalid: boolean;
   /** The current error messages for the input if it is invalid, otherwise an empty array. */
-  validationErrors: string[],
+  validationErrors: string[];
   /** The native validation details for the input. */
-  validationDetails: ValidityState
+  validationDetails: ValidityState;
 }
 
-export interface SpectrumFieldValidation<T> extends Omit<Validation<T>, 'isInvalid' | 'validationState'> {
+export interface SpectrumFieldValidation<T> extends Omit<
+  Validation<T>,
+  'isInvalid' | 'validationState'
+> {
   /** Whether the input should display its "valid" or "invalid" visual styling. */
-  validationState?: ValidationState
+  validationState?: ValidationState;
 }
@@ -64,5 +68,5 @@
   /** Whether the input is disabled. */
-  isDisabled?: boolean,
+  isDisabled?: boolean;
   /** Whether the input can be selected but not changed by the user. */
-  isReadOnly?: boolean
+  isReadOnly?: boolean;
 }
@@ -72,7 +76,7 @@
   /** The current value (controlled). */
-  value?: T,
+  value?: T;
   /** The default value (uncontrolled). */
-  defaultValue?: T,
+  defaultValue?: T;
   /** Handler that is called when the value changes. */
-  onChange?: (value: C) => void
+  onChange?: (value: C) => void;
 }
@@ -82,3 +86,3 @@
   /** Temporary text that occupies the text input when it is empty. */
-  placeholder?: string
+  placeholder?: string;
 }
@@ -90,5 +94,6 @@
    * Please use help text instead.
+   *
    * @deprecated
-   **/
-  placeholder?: string
+   */
+  placeholder?: string;
 }
@@ -98,5 +103,5 @@
   /** The start value of the range. */
-  start: T,
+  start: T;
   /** The end value of the range. */
-  end: T
+  end: T;
 }
@@ -106,7 +111,7 @@
   /** The smallest value allowed for the input. */
-  minValue?: T,
+  minValue?: T;
   /** The largest value allowed for the input. */
-  maxValue?: T,
+  maxValue?: T;
   /** The amount that the input value changes with each increment or decrement "tick". */
-  step?: T // ??
+  step?: T; // ??
 }
@@ -116,5 +121,5 @@
   /** A description for the field. Provides a hint such as specific requirements for what to choose. */
-  description?: ReactNode,
+  description?: ReactNode;
   /** An error message for the field. */
-  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode)
+  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);
 }
@@ -125,5 +130,5 @@
   /** Whether the description is displayed with lighter text. */
-  isDisabled?: boolean,
+  isDisabled?: boolean;
   /** Whether an error icon is rendered. */
-  showErrorIcon?: boolean
+  showErrorIcon?: boolean;
 }

src/labelable.d.ts

@@ -21,3 +21,3 @@ /*
   /** The content to display as the label. */
-  label?: ReactNode
+  label?: ReactNode;
 }
@@ -28,23 +28,26 @@
    * The label's overall position relative to the element it is labeling.
+   *
    * @default 'top'
    */
-  labelPosition?: LabelPosition,
+  labelPosition?: LabelPosition;
   /**
    * The label's horizontal alignment relative to the element it is labeling.
+   *
    * @default 'start'
    */
-  labelAlign?: Alignment,
+  labelAlign?: Alignment;
   /**
    * Whether the required state should be shown as an icon or text.
+   *
    * @default 'icon'
    */
-  necessityIndicator?: NecessityIndicator,
+  necessityIndicator?: NecessityIndicator;
   /**
    * Whether the label is labeling a required field or group.
    */
-  isRequired?: boolean,
+  isRequired?: boolean;
   /**
    * A ContextualHelp element to place next to the label.
    */
-  contextualHelp?: ReactNode
+  contextualHelp?: ReactNode;
 }

src/refs.d.ts

@@ -16,14 +16,19 @@ /*
 export interface DOMRefValue<T extends HTMLElement = HTMLElement> {
-  UNSAFE_getDOMNode(): T | null
+  UNSAFE_getDOMNode(): T | null;
 }
 
-export interface FocusableRefValue<T extends HTMLElement = HTMLElement, D extends HTMLElement = T> extends DOMRefValue<D> {
-  focus(): void
+export interface FocusableRefValue<
+  T extends HTMLElement = HTMLElement,
+  D extends HTMLElement = T
+> extends DOMRefValue<D> {
+  focus(): void;
 }
 
 export type DOMRef<T extends HTMLElement = HTMLElement> = Ref<DOMRefValue<T>>;
-export type FocusableRef<T extends HTMLElement = HTMLElement> = Ref<FocusableRefValue<T>>;
+export type FocusableRef<T extends HTMLElement = HTMLElement, D extends HTMLElement = T> = Ref<
+  FocusableRefValue<T, D>
+>;
 
 export interface RefObject<T> {
-  current: T
+  current: T;
 }
@@ -30,0 +35,0 @@

src/removable.d.ts

@@ -16,4 +16,4 @@ /*
 export interface Removable<T, R> {
-  isRemovable?: boolean,
-  onRemove?: (value: T, event?: SyntheticEvent) => R
+  isRemovable?: boolean;
+  onRemove?: (value: T, event?: SyntheticEvent) => R;
 }

src/selection.d.ts

@@ -17,9 +17,9 @@ /*
   /** Whether the collection allows empty selection. */
-  disallowEmptySelection?: boolean,
+  disallowEmptySelection?: boolean;
   /** The currently selected key in the collection (controlled). */
-  selectedKey?: Key | null,
+  selectedKey?: Key | null;
   /** The initial selected key in the collection (uncontrolled). */
-  defaultSelectedKey?: Key | null,
+  defaultSelectedKey?: Key | null;
   /** Handler that is called when the selection changes. */
-  onSelectionChange?: (key: Key | null) => void
+  onSelectionChange?: (key: Key | null) => void;
 }
@@ -32,13 +32,13 @@
   /** The type of selection that is allowed in the collection. */
-  selectionMode?: SelectionMode,
+  selectionMode?: SelectionMode;
   /** Whether the collection allows empty selection. */
-  disallowEmptySelection?: boolean,
+  disallowEmptySelection?: boolean;
   /** The currently selected keys in the collection (controlled). */
-  selectedKeys?: 'all' | Iterable<Key>,
+  selectedKeys?: 'all' | Iterable<Key>;
   /** The initial selected keys in the collection (uncontrolled). */
-  defaultSelectedKeys?: 'all' | Iterable<Key>,
+  defaultSelectedKeys?: 'all' | Iterable<Key>;
   /** Handler that is called when the selection changes. */
-  onSelectionChange?: (keys: Selection) => void,
+  onSelectionChange?: (keys: Selection) => void;
   /** The currently disabled keys in the collection (controlled). */
-  disabledKeys?: Iterable<Key>
+  disabledKeys?: Iterable<Key>;
 }
@@ -48,3 +48,3 @@
   /** How selection should be displayed. */
-  selectionStyle?: 'checkbox' | 'highlight'
+  selectionStyle?: 'checkbox' | 'highlight';
 }
@@ -51,0 +51,0 @@

src/style.d.ts

@@ -13,27 +13,50 @@ /*
 
-import {BackgroundColorValue, BackgroundColorValueV6, BorderColorValue, BorderColorValueV6, BorderRadiusValue, BorderSizeValue, DimensionValue} from './dna';
+import {
+  BackgroundColorValue,
+  BackgroundColorValueV6,
+  BorderColorValue,
+  BorderColorValueV6,
+  BorderRadiusValue,
+  BorderSizeValue,
+  DimensionValue
+} from './dna';
 import {CSSProperties} from 'react';
 
 type ResponsiveProp<T> = {
-  base?: T,
-  S?: T,
-  M?: T,
-  L?: T,
-  [custom: string]: T | undefined
-}
-type Responsive<T> = T | ResponsiveProp<T>
+  base?: T;
+  S?: T;
+  M?: T;
+  L?: T;
+  [custom: string]: T | undefined;
+};
+type Responsive<T> = T | ResponsiveProp<T>;
 
 export interface StyleProps {
   // For backward compatibility!
-  /** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use style props instead. */
-  UNSAFE_className?: string,
-  /** Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use style props instead. */
-  UNSAFE_style?: CSSProperties,
+  /**
+   * Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)
+   * for the element. Only use as a **last resort**. Use style props instead.
+   */
+  UNSAFE_className?: string;
+  /**
+   * Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the
+   * element. Only use as a **last resort**. Use style props instead.
+   */
+  UNSAFE_style?: CSSProperties;
 
-  /** The margin for all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). */
-  margin?: Responsive<DimensionValue>,
-  /** The margin for the logical start side of the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start). */
-  marginStart?: Responsive<DimensionValue>,
-  /** The margin for the logical end side of an element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end). */
-  marginEnd?: Responsive<DimensionValue>,
+  /**
+   * The margin for all four sides of the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin).
+   */
+  margin?: Responsive<DimensionValue>;
+  /**
+   * The margin for the logical start side of the element, depending on layout direction. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start).
+   */
+  marginStart?: Responsive<DimensionValue>;
+  /**
+   * The margin for the logical end side of an element, depending on layout direction. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end).
+   */
+  marginEnd?: Responsive<DimensionValue>;
   // /** The margin for the left side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left). Consider using `marginStart` instead for RTL support. */
@@ -43,73 +66,189 @@ // marginLeft?: Responsive<DimensionValue>,
   // marginRight?: Responsive<DimensionValue>,
-  /** The margin for the top side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top). */
-  marginTop?: Responsive<DimensionValue>,
-  /** The margin for the bottom side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom). */
-  marginBottom?: Responsive<DimensionValue>,
-  /** The margin for both the left and right sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). */
-  marginX?: Responsive<DimensionValue>,
-  /** The margin for both the top and bottom sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). */
-  marginY?: Responsive<DimensionValue>,
+  /**
+   * The margin for the top side of the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top).
+   */
+  marginTop?: Responsive<DimensionValue>;
+  /**
+   * The margin for the bottom side of the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom).
+   */
+  marginBottom?: Responsive<DimensionValue>;
+  /**
+   * The margin for both the left and right sides of the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin).
+   */
+  marginX?: Responsive<DimensionValue>;
+  /**
+   * The margin for both the top and bottom sides of the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin).
+   */
+  marginY?: Responsive<DimensionValue>;
 
   /** The width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width). */
-  width?: Responsive<DimensionValue>,
+  width?: Responsive<DimensionValue>;
   /** The height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height). */
-  height?: Responsive<DimensionValue>,
-  /** The minimum width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width). */
-  minWidth?: Responsive<DimensionValue>,
-  /** The minimum height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height). */
-  minHeight?: Responsive<DimensionValue>,
-  /** The maximum width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width). */
-  maxWidth?: Responsive<DimensionValue>,
-  /** The maximum height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height). */
-  maxHeight?: Responsive<DimensionValue>,
+  height?: Responsive<DimensionValue>;
+  /**
+   * The minimum width of the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width).
+   */
+  minWidth?: Responsive<DimensionValue>;
+  /**
+   * The minimum height of the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height).
+   */
+  minHeight?: Responsive<DimensionValue>;
+  /**
+   * The maximum width of the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width).
+   */
+  maxWidth?: Responsive<DimensionValue>;
+  /**
+   * The maximum height of the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height).
+   */
+  maxHeight?: Responsive<DimensionValue>;
 
-  /** When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex). */
-  flex?: Responsive<string | number | boolean>,
-  /** When used in a flex layout, specifies how the element will grow to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow). */
-  flexGrow?: Responsive<number>,
-  /** When used in a flex layout, specifies how the element will shrink to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink). */
-  flexShrink?: Responsive<number>,
-  /** When used in a flex layout, specifies the initial main size of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis). */
-  flexBasis?: Responsive<number | string>,
-  /** Specifies how the element is justified inside a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self). */
-  justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>, // ...
-  /** Overrides the `alignItems` property of a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self). */
-  alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>,
-  /** The layout order for the element within a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/order). */
-  order?: Responsive<number>,
+  /**
+   * When used in a flex layout, specifies how the element will grow or shrink to fit the space
+   * available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex).
+   */
+  flex?: Responsive<string | number | boolean>;
+  /**
+   * When used in a flex layout, specifies how the element will grow to fit the space available. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow).
+   */
+  flexGrow?: Responsive<number>;
+  /**
+   * When used in a flex layout, specifies how the element will shrink to fit the space available.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink).
+   */
+  flexShrink?: Responsive<number>;
+  /**
+   * When used in a flex layout, specifies the initial main size of the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis).
+   */
+  flexBasis?: Responsive<number | string>;
+  /**
+   * Specifies how the element is justified inside a flex or grid container. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self).
+   */
+  justifySelf?: Responsive<
+    | 'auto'
+    | 'normal'
+    | 'start'
+    | 'end'
+    | 'flex-start'
+    | 'flex-end'
+    | 'self-start'
+    | 'self-end'
+    | 'center'
+    | 'left'
+    | 'right'
+    | 'stretch'
+  >; // ...
+  /**
+   * Overrides the `alignItems` property of a flex or grid container. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self).
+   */
+  alignSelf?: Responsive<
+    | 'auto'
+    | 'normal'
+    | 'start'
+    | 'end'
+    | 'center'
+    | 'flex-start'
+    | 'flex-end'
+    | 'self-start'
+    | 'self-end'
+    | 'stretch'
+  >;
+  /**
+   * The layout order for the element within a flex or grid container. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/order).
+   */
+  order?: Responsive<number>;
 
-  /** When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area). */
-  gridArea?: Responsive<string>,
-  /** When used in a grid layout, specifies the column the element should be placed in within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column). */
-  gridColumn?: Responsive<string>,
-  /** When used in a grid layout, specifies the row the element should be placed in within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row). */
-  gridRow?: Responsive<string>,
-  /** When used in a grid layout, specifies the starting column to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start). */
-  gridColumnStart?: Responsive<string>,
-  /** When used in a grid layout, specifies the ending column to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end). */
-  gridColumnEnd?: Responsive<string>,
-  /** When used in a grid layout, specifies the starting row to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start). */
-  gridRowStart?: Responsive<string>,
-  /** When used in a grid layout, specifies the ending row to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end). */
-  gridRowEnd?: Responsive<string>,
+  /**
+   * When used in a grid layout, specifies the named grid area that the element should be placed in
+   * within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area).
+   */
+  gridArea?: Responsive<string>;
+  /**
+   * When used in a grid layout, specifies the column the element should be placed in within the
+   * grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).
+   */
+  gridColumn?: Responsive<string>;
+  /**
+   * When used in a grid layout, specifies the row the element should be placed in within the grid.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row).
+   */
+  gridRow?: Responsive<string>;
+  /**
+   * When used in a grid layout, specifies the starting column to span within the grid. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start).
+   */
+  gridColumnStart?: Responsive<string>;
+  /**
+   * When used in a grid layout, specifies the ending column to span within the grid. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end).
+   */
+  gridColumnEnd?: Responsive<string>;
+  /**
+   * When used in a grid layout, specifies the starting row to span within the grid. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start).
+   */
+  gridRowStart?: Responsive<string>;
+  /**
+   * When used in a grid layout, specifies the ending row to span within the grid. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end).
+   */
+  gridRowEnd?: Responsive<string>;
 
-  /** Specifies how the element is positioned. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position). */
-  position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>,
-  /** The stacking order for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index). */
-  zIndex?: Responsive<number>,
-  /** The top position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/top). */
-  top?: Responsive<DimensionValue>,
-  /** The bottom position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom). */
-  bottom?: Responsive<DimensionValue>,
-  /** The logical start position for the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start). */
-  start?: Responsive<DimensionValue>,
-  /** The logical end position for the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end). */
-  end?: Responsive<DimensionValue>,
-  /** The left position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/left). Consider using `start` instead for RTL support. */
-  left?: Responsive<DimensionValue>,
-  /** The right position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/right). Consider using `start` instead for RTL support. */
-  right?: Responsive<DimensionValue>,
+  /**
+   * Specifies how the element is positioned. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
+   */
+  position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>;
+  /**
+   * The stacking order for the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).
+   */
+  zIndex?: Responsive<number>;
+  /**
+   * The top position for the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/top).
+   */
+  top?: Responsive<DimensionValue>;
+  /**
+   * The bottom position for the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom).
+   */
+  bottom?: Responsive<DimensionValue>;
+  /**
+   * The logical start position for the element, depending on layout direction. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start).
+   */
+  start?: Responsive<DimensionValue>;
+  /**
+   * The logical end position for the element, depending on layout direction. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end).
+   */
+  end?: Responsive<DimensionValue>;
+  /**
+   * The left position for the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/left). Consider using `start` instead
+   * for RTL support.
+   */
+  left?: Responsive<DimensionValue>;
+  /**
+   * The right position for the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/right). Consider using `start` instead
+   * for RTL support.
+   */
+  right?: Responsive<DimensionValue>;
 
   /** Hides the element. */
-  isHidden?: Responsive<boolean>
+  isHidden?: Responsive<boolean>;
 }
@@ -119,10 +258,10 @@
 type BackgroundColor = {
-  5: BackgroundColorValue,
-  6: BackgroundColorValueV6
+  5: BackgroundColorValue;
+  6: BackgroundColorValueV6;
 };
 
 type BorderColor = {
-  5: BorderColorValue,
-  6: BorderColorValueV6
-}
+  5: BorderColorValue;
+  6: BorderColorValueV6;
+};
 
@@ -134,53 +273,112 @@ // These support more properties than specific Spectrum components
    * The Spectrum color token version number.
+   *
    * @default 5
    */
-  colorVersion?: C,
+  colorVersion?: C;
 
   /** The background color for the element. */
-  backgroundColor?: Responsive<BackgroundColor[C]>,
+  backgroundColor?: Responsive<BackgroundColor[C]>;
 
-  /** The width of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
-  borderWidth?: Responsive<BorderSizeValue>,
-  /** The width of the border on the logical start side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width). */
-  borderStartWidth?: Responsive<BorderSizeValue>,
-  /** The width of the border on the logical end side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width). */
-  borderEndWidth?: Responsive<BorderSizeValue>,
+  /**
+   * The width of the element's border on all four sides. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width).
+   */
+  borderWidth?: Responsive<BorderSizeValue>;
+  /**
+   * The width of the border on the logical start side, depending on the layout direction. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width).
+   */
+  borderStartWidth?: Responsive<BorderSizeValue>;
+  /**
+   * The width of the border on the logical end side, depending on the layout direction. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width).
+   */
+  borderEndWidth?: Responsive<BorderSizeValue>;
   // borderLeftWidth?: BorderSizeValue,
   // borderRightWidth?: BorderSizeValue,
-  /** The width of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width). */
-  borderTopWidth?: Responsive<BorderSizeValue>,
-  /** The width of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width). */
-  borderBottomWidth?: Responsive<BorderSizeValue>,
-  /** The width of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
-  borderXWidth?: Responsive<BorderSizeValue>,
-  /** The width of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
-  borderYWidth?: Responsive<BorderSizeValue>,
+  /**
+   * The width of the top border. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width).
+   */
+  borderTopWidth?: Responsive<BorderSizeValue>;
+  /**
+   * The width of the bottom border. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width).
+   */
+  borderBottomWidth?: Responsive<BorderSizeValue>;
+  /**
+   * The width of the left and right borders. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width).
+   */
+  borderXWidth?: Responsive<BorderSizeValue>;
+  /**
+   * The width of the top and bottom borders. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width).
+   */
+  borderYWidth?: Responsive<BorderSizeValue>;
 
-  /** The color of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */
-  borderColor?: Responsive<BorderColor[C]>,
-  /** The color of the border on the logical start side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color). */
-  borderStartColor?: Responsive<BorderColor[C]>,
-  /** The color of the border on the logical end side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color). */
-  borderEndColor?: Responsive<BorderColor[C]>,
+  /**
+   * The color of the element's border on all four sides. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color).
+   */
+  borderColor?: Responsive<BorderColor[C]>;
+  /**
+   * The color of the border on the logical start side, depending on the layout direction. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color).
+   */
+  borderStartColor?: Responsive<BorderColor[C]>;
+  /**
+   * The color of the border on the logical end side, depending on the layout direction. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color).
+   */
+  borderEndColor?: Responsive<BorderColor[C]>;
   // borderLeftColor?: BorderColorValue,
   // borderRightColor?: BorderColorValue,
-  /** The color of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color). */
-  borderTopColor?: Responsive<BorderColor[C]>,
-  /** The color of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color). */
-  borderBottomColor?: Responsive<BorderColor[C]>,
-  /** The color of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */
-  borderXColor?: Responsive<BorderColor[C]>,
-  /** The color of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
-  borderYColor?: Responsive<BorderColor[C]>,
+  /**
+   * The color of the top border. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color).
+   */
+  borderTopColor?: Responsive<BorderColor[C]>;
+  /**
+   * The color of the bottom border. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color).
+   */
+  borderBottomColor?: Responsive<BorderColor[C]>;
+  /**
+   * The color of the left and right borders. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color).
+   */
+  borderXColor?: Responsive<BorderColor[C]>;
+  /**
+   * The color of the top and bottom borders. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width).
+   */
+  borderYColor?: Responsive<BorderColor[C]>;
 
-  /** The border radius on all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius). */
-  borderRadius?: Responsive<BorderRadiusValue>,
-  /** The border radius for the top start corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius). */
-  borderTopStartRadius?: Responsive<BorderRadiusValue>,
-  /** The border radius for the top end corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius). */
-  borderTopEndRadius?: Responsive<BorderRadiusValue>,
-  /** The border radius for the bottom start corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius). */
-  borderBottomStartRadius?: Responsive<BorderRadiusValue>,
-  /** The border radius for the bottom end corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius). */
-  borderBottomEndRadius?: Responsive<BorderRadiusValue>,
+  /**
+   * The border radius on all four sides of the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius).
+   */
+  borderRadius?: Responsive<BorderRadiusValue>;
+  /**
+   * The border radius for the top start corner of the element, depending on the layout direction.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius).
+   */
+  borderTopStartRadius?: Responsive<BorderRadiusValue>;
+  /**
+   * The border radius for the top end corner of the element, depending on the layout direction. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius).
+   */
+  borderTopEndRadius?: Responsive<BorderRadiusValue>;
+  /**
+   * The border radius for the bottom start corner of the element, depending on the layout
+   * direction. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius).
+   */
+  borderBottomStartRadius?: Responsive<BorderRadiusValue>;
+  /**
+   * The border radius for the bottom end corner of the element, depending on the layout direction.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius).
+   */
+  borderBottomEndRadius?: Responsive<BorderRadiusValue>;
   // borderTopLeftRadius?: BorderRadiusValue,
@@ -191,21 +389,45 @@ // borderTopRightRadius?: BorderRadiusValue,
 
-  /** The padding for all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
-  padding?: Responsive<DimensionValue>,
-  /** The padding for the logical start side of the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start). */
-  paddingStart?: Responsive<DimensionValue>,
-  /** The padding for the logical end side of an element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end). */
-  paddingEnd?: Responsive<DimensionValue>,
+  /**
+   * The padding for all four sides of the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding).
+   */
+  padding?: Responsive<DimensionValue>;
+  /**
+   * The padding for the logical start side of the element, depending on layout direction. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start).
+   */
+  paddingStart?: Responsive<DimensionValue>;
+  /**
+   * The padding for the logical end side of an element, depending on layout direction. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end).
+   */
+  paddingEnd?: Responsive<DimensionValue>;
   // paddingLeft?: Responsive<DimensionValue>,
   // paddingRight?: Responsive<DimensionValue>,
-  /** The padding for the top side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top). */
-  paddingTop?: Responsive<DimensionValue>,
-  /** The padding for the bottom side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom). */
-  paddingBottom?: Responsive<DimensionValue>,
-  /** The padding for both the left and right sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
-  paddingX?: Responsive<DimensionValue>,
-  /** The padding for both the top and bottom sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */
-  paddingY?: Responsive<DimensionValue>,
+  /**
+   * The padding for the top side of the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top).
+   */
+  paddingTop?: Responsive<DimensionValue>;
+  /**
+   * The padding for the bottom side of the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom).
+   */
+  paddingBottom?: Responsive<DimensionValue>;
+  /**
+   * The padding for both the left and right sides of the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding).
+   */
+  paddingX?: Responsive<DimensionValue>;
+  /**
+   * The padding for both the top and bottom sides of the element. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding).
+   */
+  paddingY?: Responsive<DimensionValue>;
 
-  /** Species what to do when the element's content is too long to fit its size. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow). */
-  overflow?: Responsive<string>
+  /**
+   * Species what to do when the element's content is too long to fit its size. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow).
+   */
+  overflow?: Responsive<string>;
   // ...
@@ -217,14 +439,72 @@ // shadows?
 export interface BoxAlignmentStyleProps {
-  /** The distribution of space around items along the main axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content). */
-  justifyContent?: Responsive<'start' | 'end' | 'center' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center'>,
-  /** The distribution of space around child items along the cross axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).*/
-  alignContent?: Responsive<'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center'>,
-  /** The alignment of children within their container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items). */
-  alignItems?: Responsive<'start' | 'end' | 'center' | 'stretch' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center'>,
-  /** The space to display between both rows and columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap). */
-  gap?: Responsive<DimensionValue>,
-  /** The space to display between columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap). */
-  columnGap?: Responsive<DimensionValue>,
-  /** The space to display between rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap). */
-  rowGap?: Responsive<DimensionValue>
+  /**
+   * The distribution of space around items along the main axis. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
+   */
+  justifyContent?: Responsive<
+    | 'start'
+    | 'end'
+    | 'center'
+    | 'left'
+    | 'right'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly'
+    | 'stretch'
+    | 'baseline'
+    | 'first baseline'
+    | 'last baseline'
+    | 'safe center'
+    | 'unsafe center'
+  >;
+  /**
+   * The distribution of space around child items along the cross axis. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).
+   */
+  alignContent?: Responsive<
+    | 'start'
+    | 'end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly'
+    | 'stretch'
+    | 'baseline'
+    | 'first baseline'
+    | 'last baseline'
+    | 'safe center'
+    | 'unsafe center'
+  >;
+  /**
+   * The alignment of children within their container. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).
+   */
+  alignItems?: Responsive<
+    | 'start'
+    | 'end'
+    | 'center'
+    | 'stretch'
+    | 'self-start'
+    | 'self-end'
+    | 'baseline'
+    | 'first baseline'
+    | 'last baseline'
+    | 'safe center'
+    | 'unsafe center'
+  >;
+  /**
+   * The space to display between both rows and columns. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap).
+   */
+  gap?: Responsive<DimensionValue>;
+  /**
+   * The space to display between columns. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap).
+   */
+  columnGap?: Responsive<DimensionValue>;
+  /**
+   * The space to display between rows. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap).
+   */
+  rowGap?: Responsive<DimensionValue>;
 }
@@ -234,28 +514,72 @@
   /**
-   * The direction in which to layout children. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction).
+   * The direction in which to layout children. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction).
+   *
    * @default 'row'
    */
-  direction?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>,
+  direction?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
   /**
-   * Whether to wrap items onto multiple lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap).
+   * Whether to wrap items onto multiple lines. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap).
+   *
    * @default false
    */
-  wrap?: Responsive<boolean | 'wrap' | 'nowrap' | 'wrap-reverse'>
+  wrap?: Responsive<boolean | 'wrap' | 'nowrap' | 'wrap-reverse'>;
 }
 
 export interface GridStyleProps extends BoxAlignmentStyleProps, StyleProps {
-  /** Defines named grid areas. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas). */
-  areas?: Responsive<string[]>,
-  /** Defines the sizes of each row in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows). */
-  rows?: Responsive<string | DimensionValue[]>,
-  /** Defines the sizes of each column in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns). */
-  columns?: Responsive<string | DimensionValue[]>,
-  /** Defines the size of implicitly generated columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns). */
-  autoColumns?: Responsive<DimensionValue>,
-  /** Defines the size of implicitly generated rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows). */
-  autoRows?: Responsive<DimensionValue>,
-  /** Controls how auto-placed items are flowed into the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow). */
-  autoFlow?: Responsive<'row' | 'column' | 'row dense' | 'column dense'>,
-  /** Defines the default `justifySelf` for all items in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items). */
-  justifyItems?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'left' | 'right' | 'stretch' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'legacy right' | 'legacy left' | 'legacy center'>
+  /**
+   * Defines named grid areas. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas).
+   */
+  areas?: Responsive<string[]>;
+  /**
+   * Defines the sizes of each row in the grid. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows).
+   */
+  rows?: Responsive<string | DimensionValue[]>;
+  /**
+   * Defines the sizes of each column in the grid. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns).
+   */
+  columns?: Responsive<string | DimensionValue[]>;
+  /**
+   * Defines the size of implicitly generated columns. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns).
+   */
+  autoColumns?: Responsive<DimensionValue>;
+  /**
+   * Defines the size of implicitly generated rows. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows).
+   */
+  autoRows?: Responsive<DimensionValue>;
+  /**
+   * Controls how auto-placed items are flowed into the grid. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow).
+   */
+  autoFlow?: Responsive<'row' | 'column' | 'row dense' | 'column dense'>;
+  /**
+   * Defines the default `justifySelf` for all items in the grid. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).
+   */
+  justifyItems?: Responsive<
+    | 'auto'
+    | 'normal'
+    | 'start'
+    | 'end'
+    | 'center'
+    | 'left'
+    | 'right'
+    | 'stretch'
+    | 'self-start'
+    | 'self-end'
+    | 'baseline'
+    | 'first baseline'
+    | 'last baseline'
+    | 'safe center'
+    | 'unsafe center'
+    | 'legacy right'
+    | 'legacy left'
+    | 'legacy center'
+  >;
 }

No alert changes

Improved metrics

Total package byte prevSize

97579

2.14%

Lines of code

2382

19.34%

Worsened metrics

Dev dependency count

1

Infinity%

No dependency changes