PaneGroup

	export type PaneGroupProps = {
	/**
	 * The id to save the layout of the panes to in local storage.
	 */
	autoSaveId?: string | null;
 
	/**
	 * The direction of the panes.
	 * @required
	 */
	direction: "horizontal" | "vertical";
 
	/**
	 * The id of the pane group DOM element.
	 */
	id?: string | null;
 
	/**
	 * The amount of space to add to the pane group when the keyboard
	 * resize event is triggered.
	 */
	keyboardResizeBy?: number | null;
 
	/**
	 * A callback called when the layout of the panes within the group changes.
	 */
	onLayoutChange?: (layout: number[]) => void | null;
 
	/**
	 * The storage object to use for saving the layout of the panes in the group.
	 *
	 * Defaults to use `localStorage` if an `autoSaveId` is provided and no storage is provided.
	 */
	storage?: PaneGroupStorage;
 
	/**
	 * The style of the pane group. This will be appended to styles applied by
	 * the library.
	 */
	style?: string;
 
	/**
	 * The underlying DOM element of the pane group. You can `bind` to this
	 * prop to get a reference to the element.
	 */
	el?: HTMLElement | null;
 
	/**
	 * An imperative API for the pane group. `bind` to this prop to get access
	 * to methods for controlling the pane group.
	 */
	paneGroup?: PaneGroupAPI;
} & Omit<HTMLAttributes<HTMLDivElement>, "id">;	

	export type PaneGroupAPI = {
	/** Get the ID of the PaneGroup */
	getId: () => string;
	/** Get the layout of the PaneGroup */
	getLayout: () => number[];
	/** Set the layout of the PaneGroup */
	setLayout: (layout: number[]) => void;
};	

	export type PaneGroupStorage = {
	/** Retrieves the item from storage */
	getItem(name: string): string | null;
	/** Sets the item to storage */
	setItem(name: string, value: string): void;
};	

	export type PaneGroupAttributes = {
	/** Applied to every pane group element. */
	"data-pane-group": "";
	/** The direction of the pane group. */
	"data-direction": "horizontal" | "vertical";
	/** The ID of the pane group. */
	"data-pane-group-id": string;
};