@searchcraft/react-sdk 0.9.3 → 0.9.5

package/dist/index.d.ts

@@ -1,289 +1,3508 @@
-import { Components } from '@searchcraft/javascript-sdk';
-import { FC } from 'react';
-import { SearchcraftConfig } from '@searchcraft/core';
-import { SearchcraftCore } from '@searchcraft/core';
-
-/**
- * The consumer-facing Searchcraft class.
- */
-export declare class Searchcraft extends SearchcraftCore {
-    constructor(config: SearchcraftConfig);
-}
-
-/**
- * A component that renders a list of search results with customizable styles, layout, and link behavior.
- *
- * @example
- * ```tsx
- * import React from 'react';
- * import { SearchcraftBaseSearchResults } from '@searchcraft/react-sdk';
- * import searchResultMappings from './searchResultMappings';
- *
- * const MySearchComponent = () => {
- *   return (
- *     <SearchcraftBaseSearchResults
- *       searchResultMappings={searchResultMappings}
- *       resultImagePlacement="left"
- *       buttonLabel="View More"
- *       buttonTarget="_blank"
- *       buttonRel="noopener"
- *       containerTarget="_self"
- *       containerRel="nofollow"
- *       onNoResults={() => console.log("No search results found")}
- *     />
- *   );
- * };
- *
- * export default MySearchComponent;
- * ```
- */
-export declare const SearchcraftBaseSearchResults: FC<SearchcraftBaseSearchResultsProps>;
-
-/**
- * The props for the SearchcraftBaseSearchResults component.
- */
-export declare interface SearchcraftBaseSearchResultsProps extends Components.SearchcraftBaseSearchResults {
-}
-
-/**
- * A component that represents a filter panel UI view, allowing users to refine and control their search queries by applying various filter criteria.
- *
- * @example
- * ```tsx
- * import React from 'react';
- * import { SearchcraftFilterPanel } from '@searchcraft/react-sdk';
- * import filterItems from './filterItems';
- *
- * const MyFilterComponent = () => {
- *   return (
- *     <SearchcraftFilterPanel items={filterItems} />
- *   );
- * };
- *
- * export default MyFilterComponent;
- * ```
- */
-export declare const SearchcraftFilterPanel: FC<SearchcraftFilterPanelProps>;
-
-/**
- * The props for the SearchcraftFilterPanel.
- */
-export declare interface SearchcraftFilterPanelProps extends Components.SearchcraftFilterPanel {
-}
-
-/**
- * A component that provides a user-friendly interface for querying an indexed dataset,
- * enabling users to easily search large collections of data. It abstracts the complexities
- * of index-based searching, making it accessible to users of all technical levels.
- *
- * @example
- * ```tsx
- * import React from 'react';
- * import { SearchcraftInputForm } from '@searchcraft/react-sdk';
- * import searchcraftConfig from './searchcraftConfig';
- *
- * const MySearchComponent = () => {
- *   const handleQuerySubmit = (event: CustomEvent<string>) => {
- *     console.log("Query submitted", event.detail);
- *   };
- *
- *   return (
- *     <SearchcraftInputForm
- *       config={searchcraftConfig}
- *       autoSearch={true}
- *       buttonPlacement="right"
- *       buttonLabel="Search"
- *       inputLabel="Search Database"
- *       customStyles={{ border: "1px solid gray", padding: "5px" }}
- *       placeholderValue="Search here..."
- *       searchTerm=""
- *       onQuerySubmit={handleQuerySubmit}
- *       onInputCleared={() => console.log("Input cleared")}
- *       onNoResultsReceived={() => console.log("No results found")}
- *       onInputFocus={() => console.log("Input focused")}
- *       onInputBlur={() => console.log("Input blurred")}
- *       onInputInit={() => console.log("Input initialized")}
- *     />
- *   );
- * };
- *
- * export default MySearchComponent;
- * ```
- */
-export declare const SearchcraftInputForm: FC<SearchcraftInputFormProps>;
-
-/**
- * The props for the SearchcraftInputForm.
- */
-export declare interface SearchcraftInputFormProps extends Components.SearchcraftInputForm {
-}
-
-/**
- * This React component is designed to facilitate pagination of search results.
- * Once a query is submitted, calculates the number for pages.
- *
- * @example
- * ```tsx
- * import React from 'react';
- * import { SearchcraftPagination } from '@searchcraft/react-sdk';
- *
- * const MyPaginationComponent = () => {
- *   return (
- *     // other searchcraft components
- *     <SearchcraftPagination />
- *   );
- * };
- *
- * export default MyPaginationComponent;
- * ```
- */
-export declare const SearchcraftPagination: FC<SearchcraftPaginationProps>;
-
-/**
- * The props for the SearchcraftPagination component.
- */
-export declare interface SearchcraftPaginationProps extends Components.SearchcraftPagination {
-}
-
-/**
- * A button component that, when clicked, toggles the visibility of a popover.
- *
- * @example
- * ```tsx
- * import React from 'react';
- * import { SearchcraftPopoverButton } from '@searchcraft/react-sdk';
- *
- * const MyPopoverTrigger = () => {
- *   return (
- *     <SearchcraftPopoverButton>
- *       Open Popover
- *     </SearchcraftPopoverButton>
- *   );
- * };
- *
- * export default MyPopoverTrigger;
- * ```
- */
-export declare const SearchcraftPopoverButton: FC<SearchcraftPopoverButtonProps>;
-
-/**
- * The props for the SearchcraftPopoverButton.
- */
-export declare interface SearchcraftPopoverButtonProps extends Components.SearchcraftPopoverButton {
-}
-
-/**
- * A component that displays search results in a popover container that dynamically appears
- * when the user interacts with a search input field, or when a popover button is clicked.
- *
- * @example
- * ```tsx
- * import React from 'react';
- * import { SearchcraftPopoverForm } from '@searchcraft/react-sdk';
- * import searchcraftConfig from './searchcraftConfig';
- * import popoverResultMappings from './popoverResultMappings';
- *
- * const MyPopoverSearch = () => {
- *   return (
- *     <SearchcraftPopoverForm
- *       config={searchcraftConfig}
- *       type="fullscreen"
- *       popoverResultMappings={popoverResultMappings}
- *       hotkey="k"
- *       hotkeyModifier="meta"
- *     />
- *   );
- * };
- *
- * export default MyPopoverSearch;
- * ```
- */
-export declare const SearchcraftPopoverForm: FC<SearchcraftPopoverFormProps>;
-
-/**
- * The props for the SearchcraftPopoverForm component.
- */
-export declare interface SearchcraftPopoverFormProps extends Components.SearchcraftPopoverForm {
-}
-
-/**
- * This React component is designed to display the number of results returned from a search query.
- *
- * @example
- * ```tsx
- * import React, { useEffect, useRef } from 'react';
- * import { SearchcraftResultsInfo } from '@searchcraft/react-sdk';
- *
- * const MyResultsInfo = () => {
- *   const ref = useRef();
- *
- *   useEffect(() => {
- *     ref.current.customFormatter = (range, count, responseTime) =>
- *       `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
- *   });
- *
- *   return <SearchcraftResultsInfo ref={ref} />;
- * };
- *
- * export default MyResultsInfo;
- * ```
- */
-export declare const SearchcraftResultsInfo: FC<SearchcraftResultsInfoProps>;
-
-/**
- * The Props for the SearchcraftResultsInfo component.
- */
-export declare interface SearchcraftResultsInfoProps extends Components.SearchcraftResultsInfo {
-}
-
-/**
- * This React component is designed to choose the number of search results displayed.
- *
- * @example
- * ```tsx
- * import React from 'react';
- * import { SearchcraftSearchResultsPerPage } from '@searchcraft/react-sdk';
- *
- * const MyResultsPerPage = () => {
- *   return <SearchcraftSearchResultsPerPage increment={20} />;
- * };
- *
- * export default MyResultsPerPage;
- * ```
- */
-export declare const SearchcraftSearchResultsPerPage: FC<SearchcraftSearchResultsPerPageProps>;
-
-/**
- * The Props for the SearchcraftSearchResultsPerPage component.
- */
-export declare interface SearchcraftSearchResultsPerPageProps extends Components.SearchcraftSearchResultsPerPage {
-}
-
-/**
- * A component that applies Searchcraft's built-in CSS theme to your page.
- * It does not render anything visible—its only function is to manage the CSS styles on the page.
- *
- * @example
- * ```tsx
- * import React from 'react';
- * import { SearchcraftTheme } from '@searchcraft/react-sdk';
- *
- * const MyThemeProvider = () => {
- *   return <SearchcraftTheme theme="light" customTheme={'[]'} />;
- * };
- *
- * export default MyThemeProvider;
- * ```
- */
-export declare const SearchcraftTheme: FC<SearchcraftThemeProps>;
-
-/**
- * The Props for the SearchcraftTheme component.
- */
-export declare interface SearchcraftThemeProps extends Components.SearchcraftTheme {
-}
-
-
-export * from "@searchcraft/core/dist/types/sdk-types";
-
-export { }
+// Generated by dts-bundle-generator v9.5.1
+
+import { FC } from 'react';
+
+/**
+ * The SearchcraftConfig object is used to initialize Searchcraft in your application.
+ */
+export interface SearchcraftConfig {
+	/**
+	 * Host IP Address and port number configured and created using Vektron
+	 */
+	endpointURL: string;
+	/**
+	 * Name or names of search indices configured using Vektron. Given as an array of strings
+	 */
+	index: string[];
+	/**
+	 * A unique user identifier for the end user.
+	 */
+	userId?: string;
+	/**
+	 * The Index read key provided by Vektron.
+	 */
+	readKey: string;
+	/**
+	 * The amount of delay, in milliseconds, to debounce search requests. Defaults to `0`.
+	 */
+	searchDebounceDelay?: number;
+	/**
+	 * The maximum number of results to return per page.
+	 */
+	searchResultsPerPage?: number;
+	/**
+	 * Name of the ad source to use.
+	 */
+	adSource?: "adMarketplace" | "Nativo" | "Custom" | "None";
+	/**
+	 * The maximum number of product ads to show for a single search term.
+	 */
+	admProductAdQuantity?: number;
+	/**
+	 * The maximum number of text ads to show for a single search term.
+	 */
+	admTextAdQuantity?: number;
+	/**
+	 * The adm sub value.
+	 */
+	admSub?: string;
+	/**
+	 * The number of custom ads to render at the start of the search results page.
+	 */
+	customAdStartQuantity?: number;
+	/**
+	 * The number of custom ads to render at the end of the search results page.
+	 */
+	customAdEndQuantity?: number;
+	/**
+	 * Renders a custom ad in between search results, at the specified interval.
+	 */
+	customAdInterstitialInterval?: number;
+	/**
+	 * Specifies the number of ads to be rendered in each interstitial in between search results.
+	 */
+	customAdInterstitialQuantity?: number;
+	/**
+	 * A callback function responsible for rendering the custom ad containers.
+	 */
+	customAdTemplate?: CustomAdTemplateRenderFunction;
+	/**
+	 * The placement id to use for Nativo ads.
+	 */
+	nativoPlacementId?: number;
+	/**
+	 * The class name for nativo ad containers.
+	 */
+	nativoAdClassName?: string;
+	/**
+	 * The number of custom ads to render at the start of the search results page.
+	 */
+	nativoAdStartQuantity?: number;
+	/**
+	 * The number of custom ads to render at the end of the search results page.
+	 */
+	nativoAdEndQuantity?: number;
+	/**
+	 * Renders a custom ad in between search results, at the specified interval.
+	 */
+	nativoAdInterstitialInterval?: number;
+	/**
+	 * Specify how many normal search results to render before rendering the first interstitial ad grouping.
+	 */
+	nativoAdInterstialStartIndex?: number;
+	/**
+	 * Specifies the number of ads to be rendered in each interstitial in between search results.
+	 */
+	nativoAdInterstitialQuantity?: number;
+}
+export type SearchcraftAdSource = "adMarketplace" | "Nativo" | "Custom" | "None";
+/**
+ * Used internally by consuming packages as part of the core sdk constructor.
+ */
+export interface SearchcraftSDKInfo {
+	sdkName: string;
+	sdkVersion: string;
+}
+export interface CustomAdTemplateRenderData {
+	adContainerId: string;
+	searchTerm: string;
+}
+export type CustomAdTemplateRenderFunction = (data: CustomAdTemplateRenderData) => string;
+export interface AdClientResponseItem {
+	id: string;
+	adSource: SearchcraftAdSource;
+}
+/**
+ * A Facet object returned in a search response.
+ */
+export type FacetRoot = {
+	[key: string]: FacetChild[];
+};
+export type FacetPrime = FacetRoot[];
+/**
+ * Represents the structure of facets, which group search results into categories.
+ */
+export interface FacetChild {
+	count: number;
+	path: string;
+	children?: FacetChild[];
+}
+/**
+ * Types of measure requests that can be sent to the /measure/event endpoint.
+ */
+export type MeasureEventName = "sdk_initialized" | "search_requested" | "search_response_received" | "document_clicked";
+/**
+ * Properties attached to a measure request.
+ */
+export interface MeasureRequestProperties {
+	searchcraft_organization_id?: string;
+	searchcraft_application_id?: string;
+	searchcraft_index_names: string[];
+	search_term?: string;
+	number_of_documents?: number;
+	external_document_id?: string;
+	document_position?: number;
+	session_id?: string;
+}
+/**
+ * User properties attached to a measure request.
+ */
+export interface MeasureRequestUser {
+	user_id: string;
+	country?: string;
+	city?: string;
+	device_id?: string;
+	client_ip?: string;
+	locale?: string;
+	os?: string;
+	platform?: string;
+	region?: string;
+	sdk_name?: string;
+	sdk_version?: string;
+	user_agent?: string;
+	latitude?: number;
+	longitude?: number;
+}
+/**
+ * The structure of a response returned from a Searchcraft operation.
+ */
+export interface SearchcraftResponse {
+	status: number;
+	data: SearchcraftResponseData | SearchcraftResponseError;
+}
+/**
+ * Error returned when a search is unsuccessful.
+ */
+export type SearchcraftResponseError = {
+	status: number;
+	message?: string;
+	code?: number;
+	hits?: [
+	];
+	facets?: null;
+	count?: number;
+	time_taken?: number;
+};
+/**
+ * Top-level result returned when a search is successful.
+ */
+export interface SearchcraftResponseData {
+	count?: number;
+	facets?: FacetPrime;
+	hits?: SearchIndexEntry[];
+	time_taken?: number;
+}
+/**
+ * Represents an entry in the search index returned as part of a search result.
+ */
+export interface SearchIndexEntry {
+	doc?: SearchDocument;
+	document_id?: string;
+	score?: number;
+}
+/**
+ * Data document returned within a SearchResult.
+ */
+export interface SearchDocument extends Record<string, string | number> {
+	id: number;
+	[key: string]: string | number;
+}
+export interface SearchClientResponseItem {
+	id: string;
+	document: SearchDocument;
+}
+export type FacetPathsForIndexField = {
+	fieldName: string;
+	value: string;
+};
+export type RangeValueForIndexField = {
+	fieldName: string;
+	value: string;
+};
+/**
+ * Parameters required to make a successful Search request.
+ */
+export type SearchParams = {
+	/**
+	 * The search mode, which can be either 'fuzzy' or 'exact'.
+	 */
+	mode: "fuzzy" | "exact";
+	/**
+	 * The starting point for the results, used for pagination.
+	 * Optional parameter.
+	 */
+	offset?: number;
+	/**
+	 * The number of results returned.
+	 * Optional parameter.
+	 */
+	limit?: number;
+	/**
+	 * The field to order the results by (e.g., 'date_published', 'title', etc.).
+	 * Optional parameter.
+	 */
+	order_by?: string;
+	/**
+	 * The search term provided by the user.
+	 */
+	searchTerm: string;
+	/**
+	 * The sort order, which can be either 'asc' or 'desc'.
+	 * Optional parameter.
+	 */
+	sort?: "asc" | "desc";
+	facetPathsForIndexFields?: Record<string, FacetPathsForIndexField>;
+	rangeValueForIndexFields?: Record<string, RangeValueForIndexField>;
+};
+export interface SubscriptionEventMap {
+	ad_container_rendered: AdContainerSubscriptionEvent;
+	query_fetched: QueryFetchedEvent;
+	query_submitted: QuerySubmittedEvent;
+	input_cleared: InputClearedEvent;
+	no_results_returned: NoResultsReturnedEvent;
+}
+export interface AdContainerSubscriptionEvent extends SubscriptionEvent {
+	name: "ad_container_rendered";
+	data: {
+		adContainerId: string;
+		adSource: SearchcraftAdSource;
+		searchTerm: string;
+	};
+}
+export interface QuerySubmittedEvent extends SubscriptionEvent {
+	name: "query_submitted";
+	data: {
+		searchTerm: string;
+	};
+}
+export interface QueryFetchedEvent extends SubscriptionEvent {
+	name: "query_fetched";
+	data: {
+		searchTerm: string;
+	};
+}
+export interface InputClearedEvent extends SubscriptionEvent {
+	name: "input_cleared";
+}
+export interface NoResultsReturnedEvent extends SubscriptionEvent {
+	name: "no_results_returned";
+}
+export type SubscriptionEventName = keyof SubscriptionEventMap;
+export type SubscriptionEventCallback<T extends SubscriptionEventName> = (event: SubscriptionEventMap[T]) => void;
+export type UnsubscribeFunction = () => void;
+export interface SubscriptionEvent {
+	name: SubscriptionEventName;
+}
+/**
+ * A data type representing an index field value, along with properties
+ * describing how to format and display the index field value.
+ */
+export type SearchResultFieldName = {
+	/**
+	 * The index field name.
+	 */
+	fieldName: string;
+	/**
+	 * The data type to treat this index field as.
+	 */
+	dataType: "text" | "date" | "number";
+	/**
+	 * The locale to use when formatting dataType: `number`
+	 */
+	numberFormatLocale?: string;
+	/**
+	 * If it's a number, the number format to apply.
+	 * reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+	 */
+	numberFormatOptions?: Intl.NumberFormatOptions;
+	/**
+	 * A scale factor to apply to a `number` value.
+	 */
+	numberScale?: number;
+	/**
+	 * TODO: Implement DateFormatOptions, for date formatting
+	 */
+	dateFormatOptions?: unknown;
+};
+/**
+ * A data type representing the mapping of index fields, for the purpose of rendering them
+ * in search result item.
+ */
+export type SearchResultMapping = {
+	/**
+	 * The fields to map to.
+	 */
+	fieldNames: SearchResultFieldName[];
+	/**
+	 * The delimiter used to join them.
+	 */
+	delimiter?: string;
+};
+export type SearchResultMappings = {
+	body?: SearchResultMapping;
+	buttonHref?: SearchResultMapping;
+	containerHref?: SearchResultMapping;
+	footer?: SearchResultMapping;
+	imageSource?: SearchResultMapping;
+	subtitle?: SearchResultMapping;
+	title?: SearchResultMapping;
+};
+export type PopoverResultMappings = {
+	title?: SearchResultMapping;
+	subtitle?: SearchResultMapping;
+	imageSource?: SearchResultMapping;
+	imageAlt?: SearchResultMapping;
+	href?: SearchResultMapping;
+};
+export interface FilterItem {
+	type: "facets" | "dateRange" | "numericRange" | "exactMatchToggle" | "mostRecentToggle";
+	label: string;
+	options: object | null;
+}
+export interface FacetsFilterItem extends FilterItem {
+	fieldName: string;
+	type: "facets";
+	options: {
+		showSublevel: boolean;
+	};
+}
+export interface NumericFilterItem extends FilterItem {
+	fieldName: string;
+	type: "numericRange";
+	options: {
+		min: number;
+		max: number;
+		granularity: number;
+	};
+}
+export interface DateRangeFilterItem extends FilterItem {
+	fieldName: string;
+	type: "dateRange";
+	options: {
+		minDate: Date;
+		maxDate: Date;
+		granularity: "year" | "month" | "day" | "hour";
+	};
+}
+export interface ExactMatchToggleFilterItem extends FilterItem {
+	type: "exactMatchToggle";
+	options: {
+		subLabel?: string;
+	};
+}
+export interface MostRecentToggleFilterItem extends FilterItem {
+	type: "mostRecentToggle";
+	options: {
+		subLabel?: string;
+	};
+}
+declare class AdClient {
+	config: SearchcraftConfig;
+	constructor(config: SearchcraftConfig);
+	getAdsForSearchParams(_params: SearchParams): Promise<AdClientResponseItem[]>;
+	onQuerySubmitted(_params: SearchParams): Promise<void>;
+	onQueryFetched(_params: SearchParams, _response: SearchcraftResponse): Promise<void>;
+	onInputCleared(): Promise<void>;
+}
+declare class MeasureClient {
+	private measureRequestTimeout;
+	private measureRequestsBatched;
+	private config;
+	private sdkInfo;
+	private userId;
+	private sessionId;
+	constructor(config: SearchcraftConfig, sdkInfo: SearchcraftSDKInfo, userId: string);
+	/**
+	 * Getter for the base url used by the /measure endpoints.
+	 */
+	private get baseMeasureUrl();
+	/**
+	 * Getter for the measure request user. Uses config values + navigator values.
+	 */
+	private get measureRequestUser();
+	/**
+	 * Sends a measure event to the `/measure/event` endpoint for analytics purposes.
+	 *
+	 * @param {MeasureEventName} eventName - Name of the event.
+	 * @param {Partial<MeasureRequestProperties>} properties - Additional properties to send with the event.
+	 * @param {Partial<MeasureRequestUser>} user - Additional user properites to send with the event.
+	 */
+	sendMeasureEvent: (eventName: MeasureEventName, properties?: Partial<MeasureRequestProperties>, user?: Partial<MeasureRequestUser>) => void;
+}
+declare class SearchClient {
+	private config;
+	private userId;
+	private parent;
+	constructor(parent: SearchcraftCore, config: SearchcraftConfig, userId: string);
+	/**
+	 * Getter for the base url used by the /search endpoint.
+	 */
+	private get baseSearchUrl();
+	/**
+	 * Performs a search operation.
+	 * @param {SearchParams} searchParams - The parameters for the search.
+	 */
+	getSearchResponse: (searchParams: SearchParams) => Promise<SearchcraftResponse>;
+}
+declare class SearchcraftCore {
+	config: SearchcraftConfig;
+	measureClient: MeasureClient | undefined;
+	searchClient: SearchClient | undefined;
+	adClient: AdClient | undefined;
+	userId: string;
+	private requestTimeout;
+	private subscriptionEvents;
+	constructor(config: SearchcraftConfig, sdkInfo: SearchcraftSDKInfo);
+	private initInputForms;
+	/**
+	 * When changes happen in the DOM, we want to link any input forms found to the instance of the core.
+	 */
+	private startObservingMutations;
+	private initClients;
+	emitEvent<T extends SubscriptionEventName>(eventName: T, event: SubscriptionEventMap[T]): void;
+	subscribe<T extends SubscriptionEventName>(eventName: T, callback: SubscriptionEventCallback<T>): UnsubscribeFunction;
+	/**
+	 * Called when a `<searchcraft-ad>` component is rendered
+	 */
+	handleAdContainerRendered(data: {
+		adClientResponseItem?: AdClientResponseItem;
+		adContainerId: string;
+		adSource: SearchcraftAdSource;
+		searchTerm: string;
+	}): void;
+	/**
+	 * Perform various actions when the input is cleared
+	 */
+	handleInputCleared(): void;
+	/**
+	 * Gets items from the SearchClient and the AdClient.
+	 */
+	getItems: (searchParams: SearchParams, itemsCallback: (response: SearchcraftResponse, items: SearchClientResponseItem[]) => void, adCallback: (adClientResponseItems: AdClientResponseItem[]) => void) => void;
+}
+export interface HTMLStencilElement extends HTMLElement {
+	componentOnReady(): Promise<this>;
+}
+declare namespace JSXBase {
+	interface IntrinsicElements {
+		slot: JSXBase.SlotAttributes;
+		a: JSXBase.AnchorHTMLAttributes<HTMLAnchorElement>;
+		abbr: JSXBase.HTMLAttributes;
+		address: JSXBase.HTMLAttributes;
+		area: JSXBase.AreaHTMLAttributes<HTMLAreaElement>;
+		article: JSXBase.HTMLAttributes;
+		aside: JSXBase.HTMLAttributes;
+		audio: JSXBase.AudioHTMLAttributes<HTMLAudioElement>;
+		b: JSXBase.HTMLAttributes;
+		base: JSXBase.BaseHTMLAttributes<HTMLBaseElement>;
+		bdi: JSXBase.HTMLAttributes;
+		bdo: JSXBase.HTMLAttributes;
+		big: JSXBase.HTMLAttributes;
+		blockquote: JSXBase.BlockquoteHTMLAttributes<HTMLQuoteElement>;
+		body: JSXBase.HTMLAttributes<HTMLBodyElement>;
+		br: JSXBase.HTMLAttributes<HTMLBRElement>;
+		button: JSXBase.ButtonHTMLAttributes<HTMLButtonElement>;
+		canvas: JSXBase.CanvasHTMLAttributes<HTMLCanvasElement>;
+		caption: JSXBase.HTMLAttributes<HTMLTableCaptionElement>;
+		cite: JSXBase.HTMLAttributes;
+		code: JSXBase.HTMLAttributes;
+		col: JSXBase.ColHTMLAttributes<HTMLTableColElement>;
+		colgroup: JSXBase.ColgroupHTMLAttributes<HTMLTableColElement>;
+		data: JSXBase.HTMLAttributes<HTMLDataElement>;
+		datalist: JSXBase.HTMLAttributes<HTMLDataListElement>;
+		dd: JSXBase.HTMLAttributes;
+		del: JSXBase.DelHTMLAttributes<HTMLModElement>;
+		details: JSXBase.DetailsHTMLAttributes<HTMLElement>;
+		dfn: JSXBase.HTMLAttributes;
+		dialog: JSXBase.DialogHTMLAttributes<HTMLDialogElement>;
+		div: JSXBase.HTMLAttributes<HTMLDivElement>;
+		dl: JSXBase.HTMLAttributes<HTMLDListElement>;
+		dt: JSXBase.HTMLAttributes;
+		em: JSXBase.HTMLAttributes;
+		embed: JSXBase.EmbedHTMLAttributes<HTMLEmbedElement>;
+		fieldset: JSXBase.FieldsetHTMLAttributes<HTMLFieldSetElement>;
+		figcaption: JSXBase.HTMLAttributes;
+		figure: JSXBase.HTMLAttributes;
+		footer: JSXBase.HTMLAttributes;
+		form: JSXBase.FormHTMLAttributes<HTMLFormElement>;
+		h1: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+		h2: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+		h3: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+		h4: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+		h5: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+		h6: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+		head: JSXBase.HTMLAttributes<HTMLHeadElement>;
+		header: JSXBase.HTMLAttributes;
+		hgroup: JSXBase.HTMLAttributes;
+		hr: JSXBase.HTMLAttributes<HTMLHRElement>;
+		html: JSXBase.HTMLAttributes<HTMLHtmlElement>;
+		i: JSXBase.HTMLAttributes;
+		iframe: JSXBase.IframeHTMLAttributes<HTMLIFrameElement>;
+		img: JSXBase.ImgHTMLAttributes<HTMLImageElement>;
+		input: JSXBase.InputHTMLAttributes<HTMLInputElement>;
+		ins: JSXBase.InsHTMLAttributes<HTMLModElement>;
+		kbd: JSXBase.HTMLAttributes;
+		keygen: JSXBase.KeygenHTMLAttributes<HTMLElement>;
+		label: JSXBase.LabelHTMLAttributes<HTMLLabelElement>;
+		legend: JSXBase.HTMLAttributes<HTMLLegendElement>;
+		li: JSXBase.LiHTMLAttributes<HTMLLIElement>;
+		link: JSXBase.LinkHTMLAttributes<HTMLLinkElement>;
+		main: JSXBase.HTMLAttributes;
+		map: JSXBase.MapHTMLAttributes<HTMLMapElement>;
+		mark: JSXBase.HTMLAttributes;
+		menu: JSXBase.MenuHTMLAttributes<HTMLMenuElement>;
+		menuitem: JSXBase.HTMLAttributes;
+		meta: JSXBase.MetaHTMLAttributes<HTMLMetaElement>;
+		meter: JSXBase.MeterHTMLAttributes<HTMLMeterElement>;
+		nav: JSXBase.HTMLAttributes;
+		noscript: JSXBase.HTMLAttributes;
+		object: JSXBase.ObjectHTMLAttributes<HTMLObjectElement>;
+		ol: JSXBase.OlHTMLAttributes<HTMLOListElement>;
+		optgroup: JSXBase.OptgroupHTMLAttributes<HTMLOptGroupElement>;
+		option: JSXBase.OptionHTMLAttributes<HTMLOptionElement>;
+		output: JSXBase.OutputHTMLAttributes<HTMLOutputElement>;
+		p: JSXBase.HTMLAttributes<HTMLParagraphElement>;
+		param: JSXBase.ParamHTMLAttributes<HTMLParamElement>;
+		picture: JSXBase.HTMLAttributes<HTMLPictureElement>;
+		pre: JSXBase.HTMLAttributes<HTMLPreElement>;
+		progress: JSXBase.ProgressHTMLAttributes<HTMLProgressElement>;
+		q: JSXBase.QuoteHTMLAttributes<HTMLQuoteElement>;
+		rp: JSXBase.HTMLAttributes;
+		rt: JSXBase.HTMLAttributes;
+		ruby: JSXBase.HTMLAttributes;
+		s: JSXBase.HTMLAttributes;
+		samp: JSXBase.HTMLAttributes;
+		script: JSXBase.ScriptHTMLAttributes<HTMLScriptElement>;
+		section: JSXBase.HTMLAttributes;
+		select: JSXBase.SelectHTMLAttributes<HTMLSelectElement>;
+		small: JSXBase.HTMLAttributes;
+		source: JSXBase.SourceHTMLAttributes<HTMLSourceElement>;
+		span: JSXBase.HTMLAttributes<HTMLSpanElement>;
+		strong: JSXBase.HTMLAttributes;
+		style: JSXBase.StyleHTMLAttributes<HTMLStyleElement>;
+		sub: JSXBase.HTMLAttributes;
+		summary: JSXBase.HTMLAttributes;
+		sup: JSXBase.HTMLAttributes;
+		table: JSXBase.TableHTMLAttributes<HTMLTableElement>;
+		tbody: JSXBase.HTMLAttributes<HTMLTableSectionElement>;
+		td: JSXBase.TdHTMLAttributes<HTMLTableDataCellElement>;
+		textarea: JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement>;
+		tfoot: JSXBase.HTMLAttributes<HTMLTableSectionElement>;
+		th: JSXBase.ThHTMLAttributes<HTMLTableHeaderCellElement>;
+		thead: JSXBase.HTMLAttributes<HTMLTableSectionElement>;
+		time: JSXBase.TimeHTMLAttributes<HTMLTimeElement>;
+		title: JSXBase.HTMLAttributes<HTMLTitleElement>;
+		tr: JSXBase.HTMLAttributes<HTMLTableRowElement>;
+		track: JSXBase.TrackHTMLAttributes<HTMLTrackElement>;
+		u: JSXBase.HTMLAttributes;
+		ul: JSXBase.HTMLAttributes<HTMLUListElement>;
+		var: JSXBase.HTMLAttributes;
+		video: JSXBase.VideoHTMLAttributes<HTMLVideoElement>;
+		wbr: JSXBase.HTMLAttributes;
+		animate: JSXBase.SVGAttributes;
+		circle: JSXBase.SVGAttributes;
+		clipPath: JSXBase.SVGAttributes;
+		defs: JSXBase.SVGAttributes;
+		desc: JSXBase.SVGAttributes;
+		ellipse: JSXBase.SVGAttributes;
+		feBlend: JSXBase.SVGAttributes;
+		feColorMatrix: JSXBase.SVGAttributes;
+		feComponentTransfer: JSXBase.SVGAttributes;
+		feComposite: JSXBase.SVGAttributes;
+		feConvolveMatrix: JSXBase.SVGAttributes;
+		feDiffuseLighting: JSXBase.SVGAttributes;
+		feDisplacementMap: JSXBase.SVGAttributes;
+		feDistantLight: JSXBase.SVGAttributes;
+		feDropShadow: JSXBase.SVGAttributes;
+		feFlood: JSXBase.SVGAttributes;
+		feFuncA: JSXBase.SVGAttributes;
+		feFuncB: JSXBase.SVGAttributes;
+		feFuncG: JSXBase.SVGAttributes;
+		feFuncR: JSXBase.SVGAttributes;
+		feGaussianBlur: JSXBase.SVGAttributes;
+		feImage: JSXBase.SVGAttributes;
+		feMerge: JSXBase.SVGAttributes;
+		feMergeNode: JSXBase.SVGAttributes;
+		feMorphology: JSXBase.SVGAttributes;
+		feOffset: JSXBase.SVGAttributes;
+		fePointLight: JSXBase.SVGAttributes;
+		feSpecularLighting: JSXBase.SVGAttributes;
+		feSpotLight: JSXBase.SVGAttributes;
+		feTile: JSXBase.SVGAttributes;
+		feTurbulence: JSXBase.SVGAttributes;
+		filter: JSXBase.SVGAttributes;
+		foreignObject: JSXBase.SVGAttributes;
+		g: JSXBase.SVGAttributes;
+		image: JSXBase.SVGAttributes;
+		line: JSXBase.SVGAttributes;
+		linearGradient: JSXBase.SVGAttributes;
+		marker: JSXBase.SVGAttributes;
+		mask: JSXBase.SVGAttributes;
+		metadata: JSXBase.SVGAttributes;
+		path: JSXBase.SVGAttributes;
+		pattern: JSXBase.SVGAttributes;
+		polygon: JSXBase.SVGAttributes;
+		polyline: JSXBase.SVGAttributes;
+		radialGradient: JSXBase.SVGAttributes;
+		rect: JSXBase.SVGAttributes;
+		stop: JSXBase.SVGAttributes;
+		svg: JSXBase.SVGAttributes;
+		switch: JSXBase.SVGAttributes;
+		symbol: JSXBase.SVGAttributes;
+		text: JSXBase.SVGAttributes;
+		textPath: JSXBase.SVGAttributes;
+		tspan: JSXBase.SVGAttributes;
+		use: JSXBase.SVGAttributes;
+		view: JSXBase.SVGAttributes;
+	}
+	interface SlotAttributes extends JSXAttributes {
+		name?: string;
+		slot?: string;
+		onSlotchange?: (event: Event) => void;
+	}
+	interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> {
+		download?: any;
+		href?: string;
+		hrefLang?: string;
+		hreflang?: string;
+		media?: string;
+		ping?: string;
+		rel?: string;
+		target?: string;
+		referrerPolicy?: ReferrerPolicy;
+	}
+	interface AudioHTMLAttributes<T> extends MediaHTMLAttributes<T> {
+	}
+	interface AreaHTMLAttributes<T> extends HTMLAttributes<T> {
+		alt?: string;
+		coords?: string;
+		download?: any;
+		href?: string;
+		hrefLang?: string;
+		hreflang?: string;
+		media?: string;
+		rel?: string;
+		shape?: string;
+		target?: string;
+	}
+	interface BaseHTMLAttributes<T> extends HTMLAttributes<T> {
+		href?: string;
+		target?: string;
+	}
+	interface BlockquoteHTMLAttributes<T> extends HTMLAttributes<T> {
+		cite?: string;
+	}
+	interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
+		disabled?: boolean;
+		form?: string;
+		formAction?: string;
+		formaction?: string;
+		formEncType?: string;
+		formenctype?: string;
+		formMethod?: string;
+		formmethod?: string;
+		formNoValidate?: boolean;
+		formnovalidate?: boolean;
+		formTarget?: string;
+		formtarget?: string;
+		name?: string;
+		type?: string;
+		value?: string | string[] | number;
+		popoverTargetAction?: string;
+		popoverTargetElement?: Element | null;
+		popoverTarget?: string;
+	}
+	interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
+		height?: number | string;
+		width?: number | string;
+	}
+	interface ColHTMLAttributes<T> extends HTMLAttributes<T> {
+		span?: number;
+	}
+	interface ColgroupHTMLAttributes<T> extends HTMLAttributes<T> {
+		span?: number;
+	}
+	interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
+		open?: boolean;
+		onToggle?: (event: Event) => void;
+	}
+	interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
+		cite?: string;
+		dateTime?: string;
+		datetime?: string;
+	}
+	interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
+		onCancel?: (event: Event) => void;
+		onClose?: (event: Event) => void;
+		open?: boolean;
+		returnValue?: string;
+	}
+	interface EmbedHTMLAttributes<T> extends HTMLAttributes<T> {
+		height?: number | string;
+		src?: string;
+		type?: string;
+		width?: number | string;
+	}
+	interface FieldsetHTMLAttributes<T> extends HTMLAttributes<T> {
+		disabled?: boolean;
+		form?: string;
+		name?: string;
+	}
+	interface FormHTMLAttributes<T> extends HTMLAttributes<T> {
+		acceptCharset?: string;
+		acceptcharset?: string;
+		action?: string;
+		autoComplete?: string;
+		autocomplete?: string;
+		encType?: string;
+		enctype?: string;
+		method?: string;
+		name?: string;
+		noValidate?: boolean;
+		novalidate?: boolean | string;
+		target?: string;
+	}
+	interface HtmlHTMLAttributes<T> extends HTMLAttributes<T> {
+		manifest?: string;
+	}
+	interface IframeHTMLAttributes<T> extends HTMLAttributes<T> {
+		allow?: string;
+		allowFullScreen?: boolean;
+		allowfullScreen?: string | boolean;
+		allowTransparency?: boolean;
+		allowtransparency?: string | boolean;
+		frameBorder?: number | string;
+		frameborder?: number | string;
+		importance?: "low" | "auto" | "high";
+		height?: number | string;
+		loading?: "lazy" | "auto" | "eager";
+		marginHeight?: number;
+		marginheight?: string | number;
+		marginWidth?: number;
+		marginwidth?: string | number;
+		name?: string;
+		referrerPolicy?: ReferrerPolicy;
+		sandbox?: string;
+		scrolling?: string;
+		seamless?: boolean;
+		src?: string;
+		srcDoc?: string;
+		srcdoc?: string;
+		width?: number | string;
+	}
+	interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
+		alt?: string;
+		crossOrigin?: string;
+		crossorigin?: string;
+		decoding?: "async" | "auto" | "sync";
+		importance?: "low" | "auto" | "high";
+		height?: number | string;
+		loading?: "lazy" | "auto" | "eager";
+		sizes?: string;
+		src?: string;
+		srcSet?: string;
+		srcset?: string;
+		useMap?: string;
+		usemap?: string;
+		width?: number | string;
+	}
+	interface InsHTMLAttributes<T> extends HTMLAttributes<T> {
+		cite?: string;
+		dateTime?: string;
+		datetime?: string;
+	}
+	interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
+		accept?: string;
+		allowdirs?: boolean;
+		alt?: string;
+		autoCapitalize?: string;
+		autocapitalize?: string;
+		autoComplete?: string;
+		autocomplete?: string;
+		capture?: string;
+		checked?: boolean;
+		crossOrigin?: string;
+		crossorigin?: string;
+		defaultChecked?: boolean;
+		defaultValue?: string;
+		dirName?: string;
+		disabled?: boolean;
+		files?: any;
+		form?: string;
+		formAction?: string;
+		formaction?: string;
+		formEncType?: string;
+		formenctype?: string;
+		formMethod?: string;
+		formmethod?: string;
+		formNoValidate?: boolean;
+		formnovalidate?: boolean;
+		formTarget?: string;
+		formtarget?: string;
+		height?: number | string;
+		indeterminate?: boolean;
+		list?: string;
+		max?: number | string;
+		maxLength?: number;
+		maxlength?: number | string;
+		min?: number | string;
+		minLength?: number;
+		minlength?: number | string;
+		multiple?: boolean;
+		name?: string;
+		onSelect?: (event: Event) => void;
+		onselect?: (event: Event) => void;
+		pattern?: string;
+		placeholder?: string;
+		readOnly?: boolean;
+		readonly?: boolean | string;
+		required?: boolean;
+		selectionStart?: number | string;
+		selectionEnd?: number | string;
+		selectionDirection?: string;
+		size?: number;
+		src?: string;
+		step?: number | string;
+		type?: string;
+		value?: string | string[] | number;
+		valueAsDate?: any;
+		valueAsNumber?: any;
+		webkitdirectory?: boolean;
+		webkitEntries?: any;
+		width?: number | string;
+		popoverTargetAction?: string;
+		popoverTargetElement?: Element | null;
+		popoverTarget?: string;
+	}
+	interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
+		challenge?: string;
+		disabled?: boolean;
+		form?: string;
+		keyType?: string;
+		keytype?: string;
+		keyParams?: string;
+		keyparams?: string;
+		name?: string;
+	}
+	interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
+		form?: string;
+		htmlFor?: string;
+	}
+	interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
+		value?: string | string[] | number;
+	}
+	interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {
+		as?: string;
+		href?: string;
+		hrefLang?: string;
+		hreflang?: string;
+		importance?: "low" | "auto" | "high";
+		integrity?: string;
+		media?: string;
+		rel?: string;
+		sizes?: string;
+		type?: string;
+	}
+	interface MapHTMLAttributes<T> extends HTMLAttributes<T> {
+		name?: string;
+	}
+	interface MenuHTMLAttributes<T> extends HTMLAttributes<T> {
+		type?: string;
+	}
+	interface MediaHTMLAttributes<T> extends HTMLAttributes<T> {
+		autoPlay?: boolean;
+		autoplay?: boolean | string;
+		controls?: boolean;
+		controlslist?: "nodownload" | "nofullscreen" | "noremoteplayback";
+		controlsList?: "nodownload" | "nofullscreen" | "noremoteplayback";
+		crossOrigin?: string;
+		crossorigin?: string;
+		loop?: boolean;
+		mediaGroup?: string;
+		mediagroup?: string;
+		muted?: boolean;
+		preload?: string;
+		src?: string;
+		onAbort?: (event: Event) => void;
+		onCanPlay?: (event: Event) => void;
+		onCanPlayThrough?: (event: Event) => void;
+		onDurationChange?: (event: Event) => void;
+		onEmptied?: (event: Event) => void;
+		onEnded?: (event: Event) => void;
+		onError?: (event: Event) => void;
+		onInterruptBegin?: (event: Event) => void;
+		onInterruptEnd?: (event: Event) => void;
+		onLoadedData?: (event: Event) => void;
+		onLoadedMetaData?: (event: Event) => void;
+		onLoadStart?: (event: Event) => void;
+		onMozAudioAvailable?: (event: Event) => void;
+		onPause?: (event: Event) => void;
+		onPlay?: (event: Event) => void;
+		onPlaying?: (event: Event) => void;
+		onProgress?: (event: Event) => void;
+		onRateChange?: (event: Event) => void;
+		onSeeked?: (event: Event) => void;
+		onSeeking?: (event: Event) => void;
+		onStalled?: (event: Event) => void;
+		onSuspend?: (event: Event) => void;
+		onTimeUpdate?: (event: Event) => void;
+		onVolumeChange?: (event: Event) => void;
+		onWaiting?: (event: Event) => void;
+	}
+	interface MetaHTMLAttributes<T> extends HTMLAttributes<T> {
+		charSet?: string;
+		charset?: string;
+		content?: string;
+		httpEquiv?: string;
+		httpequiv?: string;
+		name?: string;
+	}
+	interface MeterHTMLAttributes<T> extends HTMLAttributes<T> {
+		form?: string;
+		high?: number;
+		low?: number;
+		max?: number | string;
+		min?: number | string;
+		optimum?: number;
+		value?: string | string[] | number;
+	}
+	interface QuoteHTMLAttributes<T> extends HTMLAttributes<T> {
+		cite?: string;
+	}
+	interface ObjectHTMLAttributes<T> extends HTMLAttributes<T> {
+		classID?: string;
+		classid?: string;
+		data?: string;
+		form?: string;
+		height?: number | string;
+		name?: string;
+		type?: string;
+		useMap?: string;
+		usemap?: string;
+		width?: number | string;
+		wmode?: string;
+	}
+	interface OlHTMLAttributes<T> extends HTMLAttributes<T> {
+		reversed?: boolean;
+		start?: number;
+	}
+	interface OptgroupHTMLAttributes<T> extends HTMLAttributes<T> {
+		disabled?: boolean;
+		label?: string;
+	}
+	interface OptionHTMLAttributes<T> extends HTMLAttributes<T> {
+		disabled?: boolean;
+		label?: string;
+		selected?: boolean;
+		value?: string | string[] | number;
+	}
+	interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
+		form?: string;
+		htmlFor?: string;
+		name?: string;
+	}
+	interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
+		name?: string;
+		value?: string | string[] | number;
+	}
+	interface ProgressHTMLAttributes<T> extends HTMLAttributes<T> {
+		max?: number | string;
+		value?: string | string[] | number;
+	}
+	interface ScriptHTMLAttributes<T> extends HTMLAttributes<T> {
+		async?: boolean;
+		charSet?: string;
+		charset?: string;
+		crossOrigin?: string;
+		crossorigin?: string;
+		defer?: boolean;
+		importance?: "low" | "auto" | "high";
+		integrity?: string;
+		nonce?: string;
+		src?: string;
+		type?: string;
+	}
+	interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
+		disabled?: boolean;
+		form?: string;
+		multiple?: boolean;
+		name?: string;
+		required?: boolean;
+		size?: number;
+		autoComplete?: string;
+		autocomplete?: string;
+	}
+	interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
+		height?: number;
+		media?: string;
+		sizes?: string;
+		src?: string;
+		srcSet?: string;
+		type?: string;
+		width?: number;
+	}
+	interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
+		media?: string;
+		nonce?: string;
+		scoped?: boolean;
+		type?: string;
+	}
+	interface TableHTMLAttributes<T> extends HTMLAttributes<T> {
+		cellPadding?: number | string;
+		cellpadding?: number | string;
+		cellSpacing?: number | string;
+		cellspacing?: number | string;
+		summary?: string;
+	}
+	interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
+		autoComplete?: string;
+		autocomplete?: string;
+		cols?: number;
+		disabled?: boolean;
+		form?: string;
+		maxLength?: number;
+		maxlength?: number | string;
+		minLength?: number;
+		minlength?: number | string;
+		name?: string;
+		onSelect?: (event: Event) => void;
+		onselect?: (event: Event) => void;
+		placeholder?: string;
+		readOnly?: boolean;
+		readonly?: boolean | string;
+		required?: boolean;
+		rows?: number;
+		value?: string | string[] | number;
+		wrap?: string;
+	}
+	interface TdHTMLAttributes<T> extends HTMLAttributes<T> {
+		colSpan?: number;
+		headers?: string;
+		rowSpan?: number;
+	}
+	interface ThHTMLAttributes<T> extends HTMLAttributes<T> {
+		abbr?: string;
+		colSpan?: number;
+		headers?: string;
+		rowSpan?: number;
+		rowspan?: number | string;
+		scope?: string;
+	}
+	interface TimeHTMLAttributes<T> extends HTMLAttributes<T> {
+		dateTime?: string;
+	}
+	interface TrackHTMLAttributes<T> extends HTMLAttributes<T> {
+		default?: boolean;
+		kind?: string;
+		label?: string;
+		src?: string;
+		srcLang?: string;
+		srclang?: string;
+	}
+	interface VideoHTMLAttributes<T> extends MediaHTMLAttributes<T> {
+		height?: number | string;
+		playsInline?: boolean;
+		playsinline?: boolean | string;
+		poster?: string;
+		width?: number | string;
+	}
+	interface HTMLAttributes<T = HTMLElement> extends DOMAttributes<T> {
+		innerHTML?: string;
+		accessKey?: string;
+		autoFocus?: boolean;
+		autofocus?: boolean | string;
+		class?: string | {
+			[className: string]: boolean;
+		};
+		contentEditable?: boolean | string;
+		contenteditable?: boolean | string;
+		contextMenu?: string;
+		contextmenu?: string;
+		dir?: string;
+		draggable?: boolean;
+		hidden?: boolean;
+		id?: string;
+		inert?: boolean;
+		lang?: string;
+		spellcheck?: "true" | "false" | any;
+		style?: {
+			[key: string]: string | undefined;
+		};
+		tabIndex?: number;
+		tabindex?: number | string;
+		title?: string;
+		popover?: string | null;
+		inputMode?: string;
+		inputmode?: string;
+		enterKeyHint?: string;
+		enterkeyhint?: string;
+		is?: string;
+		radioGroup?: string;
+		radiogroup?: string;
+		role?: string;
+		about?: string;
+		datatype?: string;
+		inlist?: any;
+		prefix?: string;
+		property?: string;
+		resource?: string;
+		typeof?: string;
+		vocab?: string;
+		autoCapitalize?: string;
+		autocapitalize?: string;
+		autoCorrect?: string;
+		autocorrect?: string;
+		autoSave?: string;
+		autosave?: string;
+		color?: string;
+		itemProp?: string;
+		itemprop?: string;
+		itemScope?: boolean;
+		itemscope?: boolean;
+		itemType?: string;
+		itemtype?: string;
+		itemID?: string;
+		itemid?: string;
+		itemRef?: string;
+		itemref?: string;
+		results?: number;
+		security?: string;
+		unselectable?: boolean;
+	}
+	interface SVGAttributes<T = SVGElement> extends DOMAttributes<T> {
+		class?: string | {
+			[className: string]: boolean;
+		};
+		color?: string;
+		height?: number | string;
+		id?: string;
+		lang?: string;
+		max?: number | string;
+		media?: string;
+		method?: string;
+		min?: number | string;
+		name?: string;
+		style?: {
+			[key: string]: string | undefined;
+		};
+		target?: string;
+		type?: string;
+		width?: number | string;
+		role?: string;
+		tabindex?: number;
+		"accent-height"?: number | string;
+		accumulate?: "none" | "sum";
+		additive?: "replace" | "sum";
+		"alignment-baseline"?: "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit";
+		allowReorder?: "no" | "yes";
+		alphabetic?: number | string;
+		amplitude?: number | string;
+		"arabic-form"?: "initial" | "medial" | "terminal" | "isolated";
+		ascent?: number | string;
+		attributeName?: string;
+		attributeType?: string;
+		autoReverse?: number | string;
+		azimuth?: number | string;
+		baseFrequency?: number | string;
+		"baseline-shift"?: number | string;
+		baseProfile?: number | string;
+		bbox?: number | string;
+		begin?: number | string;
+		bias?: number | string;
+		by?: number | string;
+		calcMode?: number | string;
+		"cap-height"?: number | string;
+		clip?: number | string;
+		"clip-path"?: string;
+		clipPathUnits?: number | string;
+		"clip-rule"?: number | string;
+		"color-interpolation"?: number | string;
+		"color-interpolation-filters"?: "auto" | "sRGB" | "linearRGB";
+		"color-profile"?: number | string;
+		"color-rendering"?: number | string;
+		contentScriptType?: number | string;
+		contentStyleType?: number | string;
+		cursor?: number | string;
+		cx?: number | string;
+		cy?: number | string;
+		d?: string;
+		decelerate?: number | string;
+		descent?: number | string;
+		diffuseConstant?: number | string;
+		direction?: number | string;
+		display?: number | string;
+		divisor?: number | string;
+		"dominant-baseline"?: number | string;
+		dur?: number | string;
+		dx?: number | string;
+		dy?: number | string;
+		"edge-mode"?: number | string;
+		elevation?: number | string;
+		"enable-background"?: number | string;
+		end?: number | string;
+		exponent?: number | string;
+		externalResourcesRequired?: number | string;
+		fill?: string;
+		"fill-opacity"?: number | string;
+		"fill-rule"?: "nonzero" | "evenodd" | "inherit";
+		filter?: string;
+		filterRes?: number | string;
+		filterUnits?: number | string;
+		"flood-color"?: number | string;
+		"flood-opacity"?: number | string;
+		focusable?: number | string;
+		"font-family"?: string;
+		"font-size"?: number | string;
+		"font-size-adjust"?: number | string;
+		"font-stretch"?: number | string;
+		"font-style"?: number | string;
+		"font-variant"?: number | string;
+		"font-weight"?: number | string;
+		format?: number | string;
+		from?: number | string;
+		fx?: number | string;
+		fy?: number | string;
+		g1?: number | string;
+		g2?: number | string;
+		"glyph-name"?: number | string;
+		"glyph-orientation-horizontal"?: number | string;
+		"glyph-orientation-vertical"?: number | string;
+		glyphRef?: number | string;
+		gradientTransform?: string;
+		gradientUnits?: string;
+		hanging?: number | string;
+		"horiz-adv-x"?: number | string;
+		"horiz-origin-x"?: number | string;
+		href?: string;
+		ideographic?: number | string;
+		"image-rendering"?: number | string;
+		in2?: number | string;
+		in?: string;
+		intercept?: number | string;
+		k1?: number | string;
+		k2?: number | string;
+		k3?: number | string;
+		k4?: number | string;
+		k?: number | string;
+		kernelMatrix?: number | string;
+		kernelUnitLength?: number | string;
+		kerning?: number | string;
+		keyPoints?: number | string;
+		keySplines?: number | string;
+		keyTimes?: number | string;
+		lengthAdjust?: number | string;
+		"letter-spacing"?: number | string;
+		"lighting-color"?: number | string;
+		limitingConeAngle?: number | string;
+		local?: number | string;
+		"marker-end"?: string;
+		markerHeight?: number | string;
+		"marker-mid"?: string;
+		"marker-start"?: string;
+		markerUnits?: number | string;
+		markerWidth?: number | string;
+		mask?: string;
+		maskContentUnits?: number | string;
+		maskUnits?: number | string;
+		mathematical?: number | string;
+		mode?: number | string;
+		numOctaves?: number | string;
+		offset?: number | string;
+		opacity?: number | string;
+		operator?: number | string;
+		order?: number | string;
+		orient?: number | string;
+		orientation?: number | string;
+		origin?: number | string;
+		overflow?: number | string;
+		"overline-position"?: number | string;
+		"overline-thickness"?: number | string;
+		"paint-order"?: number | string;
+		panose1?: number | string;
+		pathLength?: number | string;
+		patternContentUnits?: string;
+		patternTransform?: number | string;
+		patternUnits?: string;
+		"pointer-events"?: number | string;
+		points?: string;
+		pointsAtX?: number | string;
+		pointsAtY?: number | string;
+		pointsAtZ?: number | string;
+		preserveAlpha?: number | string;
+		preserveAspectRatio?: string;
+		primitiveUnits?: number | string;
+		r?: number | string;
+		radius?: number | string;
+		refX?: number | string;
+		refY?: number | string;
+		"rendering-intent"?: number | string;
+		repeatCount?: number | string;
+		repeatDur?: number | string;
+		requiredextensions?: number | string;
+		requiredFeatures?: number | string;
+		restart?: number | string;
+		result?: string;
+		rotate?: number | string;
+		rx?: number | string;
+		ry?: number | string;
+		scale?: number | string;
+		seed?: number | string;
+		"shape-rendering"?: number | string;
+		slope?: number | string;
+		spacing?: number | string;
+		specularConstant?: number | string;
+		specularExponent?: number | string;
+		speed?: number | string;
+		spreadMethod?: string;
+		startOffset?: number | string;
+		stdDeviation?: number | string;
+		stemh?: number | string;
+		stemv?: number | string;
+		stitchTiles?: number | string;
+		"stop-color"?: string;
+		"stop-opacity"?: number | string;
+		"strikethrough-position"?: number | string;
+		"strikethrough-thickness"?: number | string;
+		string?: number | string;
+		stroke?: string;
+		"stroke-dasharray"?: string | number;
+		"stroke-dashoffset"?: string | number;
+		"stroke-linecap"?: "butt" | "round" | "square" | "inherit";
+		"stroke-linejoin"?: "miter" | "round" | "bevel" | "inherit";
+		"stroke-miterlimit"?: string;
+		"stroke-opacity"?: number | string;
+		"stroke-width"?: number | string;
+		surfaceScale?: number | string;
+		systemLanguage?: number | string;
+		tableValues?: number | string;
+		targetX?: number | string;
+		targetY?: number | string;
+		"text-anchor"?: string;
+		"text-decoration"?: number | string;
+		textLength?: number | string;
+		"text-rendering"?: number | string;
+		to?: number | string;
+		transform?: string;
+		u1?: number | string;
+		u2?: number | string;
+		"underline-position"?: number | string;
+		"underline-thickness"?: number | string;
+		unicode?: number | string;
+		"unicode-bidi"?: number | string;
+		"unicode-range"?: number | string;
+		"units-per-em"?: number | string;
+		"v-alphabetic"?: number | string;
+		values?: string;
+		"vector-effect"?: number | string;
+		version?: string;
+		"vert-adv-y"?: number | string;
+		"vert-origin-x"?: number | string;
+		"vert-origin-y"?: number | string;
+		"v-hanging"?: number | string;
+		"v-ideographic"?: number | string;
+		viewBox?: string;
+		viewTarget?: number | string;
+		visibility?: number | string;
+		"v-mathematical"?: number | string;
+		widths?: number | string;
+		"word-spacing"?: number | string;
+		"writing-mode"?: number | string;
+		x1?: number | string;
+		x2?: number | string;
+		x?: number | string;
+		"x-channel-selector"?: string;
+		"x-height"?: number | string;
+		xlinkActuate?: string;
+		xlinkArcrole?: string;
+		xlinkHref?: string;
+		xlinkRole?: string;
+		xlinkShow?: string;
+		xlinkTitle?: string;
+		xlinkType?: string;
+		xmlBase?: string;
+		xmlLang?: string;
+		xmlns?: string;
+		xmlSpace?: string;
+		y1?: number | string;
+		y2?: number | string;
+		y?: number | string;
+		yChannelSelector?: string;
+		z?: number | string;
+		zoomAndPan?: string;
+	}
+	interface DOMAttributes<T> extends JSXAttributes<T> {
+		slot?: string;
+		part?: string;
+		exportparts?: string;
+		onCopy?: (event: ClipboardEvent) => void;
+		onCopyCapture?: (event: ClipboardEvent) => void;
+		onCut?: (event: ClipboardEvent) => void;
+		onCutCapture?: (event: ClipboardEvent) => void;
+		onPaste?: (event: ClipboardEvent) => void;
+		onPasteCapture?: (event: ClipboardEvent) => void;
+		onCompositionend?: (event: CompositionEvent) => void;
+		onCompositionendCapture?: (event: CompositionEvent) => void;
+		onCompositionstart?: (event: CompositionEvent) => void;
+		onCompositionstartCapture?: (event: CompositionEvent) => void;
+		onCompositionupdate?: (event: CompositionEvent) => void;
+		onCompositionupdateCapture?: (event: CompositionEvent) => void;
+		onFocus?: (event: FocusEvent) => void;
+		onFocusCapture?: (event: FocusEvent) => void;
+		onFocusin?: (event: FocusEvent) => void;
+		onFocusinCapture?: (event: FocusEvent) => void;
+		onFocusout?: (event: FocusEvent) => void;
+		onFocusoutCapture?: (event: FocusEvent) => void;
+		onBlur?: (event: FocusEvent) => void;
+		onBlurCapture?: (event: FocusEvent) => void;
+		onChange?: (event: Event) => void;
+		onChangeCapture?: (event: Event) => void;
+		onInput?: (event: InputEvent) => void;
+		onInputCapture?: (event: InputEvent) => void;
+		onReset?: (event: Event) => void;
+		onResetCapture?: (event: Event) => void;
+		onSubmit?: (event: Event) => void;
+		onSubmitCapture?: (event: Event) => void;
+		onInvalid?: (event: Event) => void;
+		onInvalidCapture?: (event: Event) => void;
+		onBeforeToggle?: (event: Event) => void;
+		onBeforeToggleCapture?: (event: Event) => void;
+		onToggle?: (event: Event) => void;
+		onToggleCapture?: (event: Event) => void;
+		onLoad?: (event: Event) => void;
+		onLoadCapture?: (event: Event) => void;
+		onError?: (event: Event) => void;
+		onErrorCapture?: (event: Event) => void;
+		onKeyDown?: (event: KeyboardEvent) => void;
+		onKeyDownCapture?: (event: KeyboardEvent) => void;
+		onKeyPress?: (event: KeyboardEvent) => void;
+		onKeyPressCapture?: (event: KeyboardEvent) => void;
+		onKeyUp?: (event: KeyboardEvent) => void;
+		onKeyUpCapture?: (event: KeyboardEvent) => void;
+		onAuxClick?: (event: MouseEvent) => void;
+		onClick?: (event: MouseEvent) => void;
+		onClickCapture?: (event: MouseEvent) => void;
+		onContextMenu?: (event: MouseEvent) => void;
+		onContextMenuCapture?: (event: MouseEvent) => void;
+		onDblClick?: (event: MouseEvent) => void;
+		onDblClickCapture?: (event: MouseEvent) => void;
+		onDrag?: (event: DragEvent) => void;
+		onDragCapture?: (event: DragEvent) => void;
+		onDragEnd?: (event: DragEvent) => void;
+		onDragEndCapture?: (event: DragEvent) => void;
+		onDragEnter?: (event: DragEvent) => void;
+		onDragEnterCapture?: (event: DragEvent) => void;
+		onDragExit?: (event: DragEvent) => void;
+		onDragExitCapture?: (event: DragEvent) => void;
+		onDragLeave?: (event: DragEvent) => void;
+		onDragLeaveCapture?: (event: DragEvent) => void;
+		onDragOver?: (event: DragEvent) => void;
+		onDragOverCapture?: (event: DragEvent) => void;
+		onDragStart?: (event: DragEvent) => void;
+		onDragStartCapture?: (event: DragEvent) => void;
+		onDrop?: (event: DragEvent) => void;
+		onDropCapture?: (event: DragEvent) => void;
+		onMouseDown?: (event: MouseEvent) => void;
+		onMouseDownCapture?: (event: MouseEvent) => void;
+		onMouseEnter?: (event: MouseEvent) => void;
+		onMouseLeave?: (event: MouseEvent) => void;
+		onMouseMove?: (event: MouseEvent) => void;
+		onMouseMoveCapture?: (event: MouseEvent) => void;
+		onMouseOut?: (event: MouseEvent) => void;
+		onMouseOutCapture?: (event: MouseEvent) => void;
+		onMouseOver?: (event: MouseEvent) => void;
+		onMouseOverCapture?: (event: MouseEvent) => void;
+		onMouseUp?: (event: MouseEvent) => void;
+		onMouseUpCapture?: (event: MouseEvent) => void;
+		onTouchCancel?: (event: TouchEvent) => void;
+		onTouchCancelCapture?: (event: TouchEvent) => void;
+		onTouchEnd?: (event: TouchEvent) => void;
+		onTouchEndCapture?: (event: TouchEvent) => void;
+		onTouchMove?: (event: TouchEvent) => void;
+		onTouchMoveCapture?: (event: TouchEvent) => void;
+		onTouchStart?: (event: TouchEvent) => void;
+		onTouchStartCapture?: (event: TouchEvent) => void;
+		onPointerDown?: (event: PointerEvent) => void;
+		onPointerDownCapture?: (event: PointerEvent) => void;
+		onPointerMove?: (event: PointerEvent) => void;
+		onPointerMoveCapture?: (event: PointerEvent) => void;
+		onPointerUp?: (event: PointerEvent) => void;
+		onPointerUpCapture?: (event: PointerEvent) => void;
+		onPointerCancel?: (event: PointerEvent) => void;
+		onPointerCancelCapture?: (event: PointerEvent) => void;
+		onPointerEnter?: (event: PointerEvent) => void;
+		onPointerEnterCapture?: (event: PointerEvent) => void;
+		onPointerLeave?: (event: PointerEvent) => void;
+		onPointerLeaveCapture?: (event: PointerEvent) => void;
+		onPointerOver?: (event: PointerEvent) => void;
+		onPointerOverCapture?: (event: PointerEvent) => void;
+		onPointerOut?: (event: PointerEvent) => void;
+		onPointerOutCapture?: (event: PointerEvent) => void;
+		onGotPointerCapture?: (event: PointerEvent) => void;
+		onGotPointerCaptureCapture?: (event: PointerEvent) => void;
+		onLostPointerCapture?: (event: PointerEvent) => void;
+		onLostPointerCaptureCapture?: (event: PointerEvent) => void;
+		onScroll?: (event: UIEvent) => void;
+		onScrollCapture?: (event: UIEvent) => void;
+		onWheel?: (event: WheelEvent) => void;
+		onWheelCapture?: (event: WheelEvent) => void;
+		onAnimationStart?: (event: AnimationEvent) => void;
+		onAnimationStartCapture?: (event: AnimationEvent) => void;
+		onAnimationEnd?: (event: AnimationEvent) => void;
+		onAnimationEndCapture?: (event: AnimationEvent) => void;
+		onAnimationIteration?: (event: AnimationEvent) => void;
+		onAnimationIterationCapture?: (event: AnimationEvent) => void;
+		onTransitionCancel?: (event: TransitionEvent) => void;
+		onTransitionCancelCapture?: (event: TransitionEvent) => void;
+		onTransitionEnd?: (event: TransitionEvent) => void;
+		onTransitionEndCapture?: (event: TransitionEvent) => void;
+		onTransitionRun?: (event: TransitionEvent) => void;
+		onTransitionRunCapture?: (event: TransitionEvent) => void;
+		onTransitionStart?: (event: TransitionEvent) => void;
+		onTransitionStartCapture?: (event: TransitionEvent) => void;
+	}
+}
+export interface JSXAttributes<T = Element> {
+	key?: string | number;
+	ref?: (elm?: T) => void;
+}
+export type SearchcraftSelectOption = {
+	label: string;
+	value: string | number;
+	selected?: boolean;
+};
+declare namespace Components {
+	/**
+	 * An inline ad meant to be rendered in a list of search results.
+	 */
+	interface SearchcraftAd {
+		"adClientResponseItem"?: AdClientResponseItem;
+		"adSource": SearchcraftAdSource;
+	}
+	/**
+	 * This web component is designed to display detailed information for a single search result.
+	 * Once a query is submitted, the component formats and presents the result.
+	 * It is consumed within the `searchcraft-base-search-results` component.
+	 */
+	interface SearchcraftBaseSearchResult {
+		/**
+		  * The relationship between the current document and the link for the button rendered when containerHref is not present.
+		 */
+		"buttonRel"?: "noreferrer" | "noopener" | "nofollow";
+		/**
+		  * Where to open the link for the button rendered when containerHref is not present.
+		 */
+		"buttonTarget": "_blank" | "_self" | "_top" | "_parent";
+		/**
+		  * The relationship between the current document and the link for the containing element.
+		 */
+		"containerRel"?: "noreferrer" | "noopener" | "nofollow";
+		/**
+		  * Where to open the link for the containing element.
+		 */
+		"containerTarget": "_blank" | "_self" | "_top" | "_parent";
+		/**
+		  * A custom styles object.
+		 */
+		"customStyles"?: string;
+		/**
+		  * The position in the document. Used with the "document_clicked" measure event.
+		 */
+		"documentPosition": number;
+		/**
+		  * The placement of the image.
+		 */
+		"imagePlacement": "left" | "right";
+		"item"?: SearchClientResponseItem;
+		"searchResultMappings"?: SearchResultMappings;
+	}
+	/**
+	 * This web component is responsible for displaying the results of a search query.
+	 * Once a query is submitted, the component formats and presents an ordered list of the results.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-base-search-results
+	 *   ad-interval="4"
+	 *   place-ad-at-start="false"
+	 *   result-image-placement="right"
+	 * />
+	 * ```
+	 * ```js
+	 * // index.js
+	 * const baseSearchResults = document.querySelector('searchcraft-base-search-results');
+	 * baseSearchResults.searchResultMappings = containerHref: {
+	 *   fieldNames: [
+	 *    {
+	 *      fieldName: 'canonical_link',
+	 *      dataType: 'text',
+	 *    },
+	 *  ],
+	 * };
+	 * baseSearchResults.addEventListener('noResults', () => {
+	 *   console.log('No search results found');
+	 * });
+	 * ```
+	 */
+	interface SearchcraftBaseSearchResults {
+		/**
+		  * The label for the button rendered when containerHref is not present for each result.
+		 */
+		"buttonLabel"?: string;
+		/**
+		  * The relationship between the current document and the link for the button rendered when containerHref is not present for each result.
+		 */
+		"buttonRel"?: "noreferrer" | "noopener" | "nofollow";
+		/**
+		  * Where to open the link for the button rendered when containerHref is not present for each result.
+		 */
+		"buttonTarget": "_blank" | "_self" | "_top" | "_parent";
+		/**
+		  * The relationship between the current document and the link for the containing element for each result.
+		 */
+		"containerRel"?: "noreferrer" | "noopener" | "nofollow";
+		/**
+		  * Where to open the link for the containing element for each result.
+		 */
+		"containerTarget": "_blank" | "_self" | "_top" | "_parent";
+		/**
+		  * A custom styles object.
+		 */
+		"customStylesForResults"?: string | Record<string, Record<string, string>>;
+		/**
+		  * The placement of the image for each result.
+		 */
+		"resultImagePlacement": "left" | "right";
+		/**
+		  * Formats the content rendered for each result.
+		 */
+		"searchResultMappings"?: SearchResultMappings;
+	}
+	/**
+	 * This web component represents a button to be consumed within the `search-input-form` component.
+	 * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.
+	 * It is consumed within the `searchcraft-input-form` component.
+	 */
+	interface SearchcraftButton {
+		/**
+		  * Whether the button is disabled.
+		 */
+		"disabled"?: boolean;
+		/**
+		  * Controls the visual representation of the button.
+		 */
+		"hierarchy"?: "primary" | "tertiary";
+		/**
+		  * The icon element.
+		 */
+		"icon"?: Element;
+		/**
+		  * Should the button only display an icon.
+		 */
+		"iconOnly"?: boolean;
+		/**
+		  * The position of the icon.
+		 */
+		"iconPosition"?: "left" | "right";
+		/**
+		  * The label for the button.
+		 */
+		"label": string;
+		/**
+		  * The type of the button.
+		 */
+		"type"?: "submit" | "reset" | "button";
+	}
+	/**
+	 * This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-error-message error-message="No search results found for query" />
+	 * ```
+	 */
+	interface SearchcraftErrorMessage {
+		/**
+		  * The error message.
+		 */
+		"errorMessage"?: string;
+	}
+	/**
+	 * This web component is designed to display facets in a search interface, allowing users to refine their search results by applying filters based on various attributes.
+	 * It is consumed within the `searchcraft-filter-panel`.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-facet-list field-name="title" />
+	 * ```
+	 * ```js
+	 * // index.js
+	 * const facetList = document.querySelector('searchcraft-facet-list');
+	 * facetList.addEventListener('facetSelectionUpdated', () => {
+	 *   console.log('Facet selection updated');
+	 * });
+	 * ```
+	 */
+	interface SearchcraftFacetList {
+		/**
+		  * The name of the field where facets are applied.
+		 */
+		"fieldName": string;
+	}
+	/**
+	 * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-filter-panel />
+	 * ```
+	 */
+	interface SearchcraftFilterPanel {
+		/**
+		  * The items to filter.
+		 */
+		"items": FilterItem[];
+	}
+	/**
+	 * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
+	 * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-input-form placeholder-value="Search here" />
+	 * ```
+	 * ```js
+	 * // index.js
+	 * const searchInputForm = document.querySelector('searchcraft-input-form');
+	 * ```
+	 */
+	interface SearchcraftInputForm {
+		/**
+		  * Whether or not to automatically submit the search term when the input changes.
+		 */
+		"autoSearch": boolean;
+		/**
+		  * The label for the submit button.
+		 */
+		"buttonLabel"?: string;
+		/**
+		  * Where to place the search button.
+		 */
+		"buttonPlacement": "left" | "right" | "none";
+		"core"?: SearchcraftCore;
+		/**
+		  * A custom styles object to be applied to the input element.
+		 */
+		"customStyles": string | Record<string, string>;
+		/**
+		  * The label rendered above the input.
+		 */
+		"inputLabel"?: string;
+		/**
+		  * The input element's placeholder value.
+		 */
+		"placeholderValue": string;
+	}
+	/**
+	 * This web component serves as the input label for the searchcraft-input-form component.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-input-label label="Search" />
+	 * ```
+	 */
+	interface SearchcraftInputLabel {
+		/**
+		  * The classname applied to the label element.
+		 */
+		"inputLabelClassName"?: string | undefined;
+		"label": string;
+	}
+	/**
+	 * This web component is designed to facilitate pagination of search results.
+	 * Once a query is submitted, calculates the number for pages.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-pagination />
+	 * ```
+	 */
+	interface SearchcraftPagination {
+		/**
+		  * The custom styles object.
+		 */
+		"customStyles"?: string;
+	}
+	/**
+	 * Renders a button which, when clicked, turns on popover visibility.
+	 */
+	interface SearchcraftPopoverButton {
+	}
+	/**
+	 * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-popover-form type="fullscreen" />
+	 * ```
+	 * ```js
+	 * // index.js
+	 * const popoverForm = document.querySelector('searchcraft-popover-form');
+	 * popoverForm.popoverResultMappings = {
+	 *  containerHref: {
+	 *   fieldNames: [
+	 *    {
+	 *      fieldName: 'canonical_link',
+	 *      dataType: 'text',
+	 *    },
+	 *  ],
+	 *  };
+	 * ```
+	 */
+	interface SearchcraftPopoverForm {
+		/**
+		  * The hotkey that activates the popover.
+		 */
+		"hotkey": string;
+		/**
+		  * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.
+		 */
+		"hotkeyModifier": "ctrl" | "meta" | "alt" | "option";
+		/**
+		  * Formats the content rendered for each result.
+		 */
+		"popoverResultMappings"?: PopoverResultMappings;
+		/**
+		  * The type of popover form to render.  - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content. - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component. - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.
+		 */
+		"type": "inline" | "fullscreen" | "modal";
+	}
+	/**
+	 * A single list item rendered in a searchcraft-popover-list-view.
+	 */
+	interface SearchcraftPopoverListItem {
+		/**
+		  * The document position relative to the search results (For Measure)
+		 */
+		"documentPosition": number;
+		"item": SearchClientResponseItem | undefined;
+		"popoverResultMappings": PopoverResultMappings | undefined;
+	}
+	/**
+	 * This web component is designed to display a list of results within a popover interface.
+	 * It is consumed within the `searchcraft-popover-form` component.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-popover-list-view />
+	 * ```
+	 */
+	interface SearchcraftPopoverListView {
+		"adClientResponseItems": AdClientResponseItem[] | undefined;
+		/**
+		  * The mappings that define how the data in the documents are mapped to the list-view-item elements.
+		 */
+		"popoverResultMappings": PopoverResultMappings | undefined;
+		/**
+		  * The items to render in the list view.
+		 */
+		"searchClientResponseItems": SearchClientResponseItem[] | undefined;
+		"searchResultsPage": number;
+		"searchResultsPerPage": number;
+	}
+	/**
+	 * This web component is designed to display the number of results returned from a search query.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <script>
+	 *  const resultsInfo = document.querySelector('searchcraft-results-info');
+	 *  resultsInfo.customFormatter = (range, count, responseTime) =>
+	 *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
+	 * </script>
+	 * <searchcraft-results-info />
+	 * ```
+	 */
+	interface SearchcraftResultsInfo {
+		/**
+		  * The custom formatter for the resulting string.
+		  * @example ```ts  resultsInfo.customFormatter = (range, count, responseTime) =>    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`; ```
+		 */
+		"customFormatter"?: (range: [
+			string,
+			string
+		], count: string, responseTime: string) => void;
+		/**
+		  * The custom styles object.
+		 */
+		"customStyles"?: string;
+	}
+	/**
+	 * This web component is designed to choose the number of search results displayed.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-search-results-per-page increment="20" />
+	 * ```
+	 */
+	interface SearchcraftSearchResultsPerPage {
+		/**
+		  * The custom styles object.
+		 */
+		"customStyles"?: string;
+		/**
+		  * The amount the options will increase (e.g. 20 = [20, 40, 60, 80, 100]). The base value is defined by the `searchResultsPerPage` option in the configuration.
+		 */
+		"increment": string | number;
+	}
+	/**
+	 * This web component is designed to allow users to select between a group of options.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-select
+	 *  inputId="searchcraft-select"
+	 *  name="searchcraft-select"
+	 *  options="[{ label: 'label', value: 'value' }]"
+	 * />
+	 * ```
+	 */
+	interface SearchcraftSelect {
+		/**
+		  * The caption displayed below the select input.
+		 */
+		"caption"?: string;
+		/**
+		  * A custom styles object.
+		 */
+		"customStyles"?: string;
+		/**
+		  * Whether the select input is disabled.
+		 */
+		"disabled"?: boolean;
+		/**
+		  * The ID for the select input.
+		 */
+		"inputId": string;
+		/**
+		  * The label of the select input.
+		 */
+		"label"?: string;
+		/**
+		  * The ID for the label of the select input.
+		 */
+		"labelId"?: string;
+		/**
+		  * The name of the select input.
+		 */
+		"name": string;
+		/**
+		  * The options for the select input.
+		 */
+		"options": SearchcraftSelectOption[] | string;
+	}
+	/**
+	 * This web component is designed to allow users to select a value from a range defined by a minimum and maximum value.
+	 * The component renders a slider interface, which can be used to visually choose a value between two boundaries.
+	 * It is consumed by the `searchcraft-filter-panel` component.
+	 */
+	interface SearchcraftSlider {
+		/**
+		  * The type of data allowed.
+		 */
+		"dataType": "number" | "date";
+		/**
+		  * The granularity that the value must adhere to.
+		 */
+		"granularity": number;
+		/**
+		  * The maximum value allowed.
+		 */
+		"max": number;
+		/**
+		  * The minimum value allowed.
+		 */
+		"min": number;
+	}
+	/**
+	 * This web component adds Searchcraft's built-in css theme to your page's <head> tag.
+	 * It does not render anything visible, its only function is to manage the css styles on the page.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-theme theme="light" custom-theme="{}" />
+	 * ```
+	 */
+	interface SearchcraftTheme {
+		/**
+		  * The custom theme configuration object.
+		 */
+		"customTheme"?: string;
+		/**
+		  * The name of the theme.
+		 */
+		"theme"?: string;
+	}
+	/**
+	 * This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.
+	 * It is consumed within the `searchcraft-filter-panel` component.
+	 */
+	interface SearchcraftToggleButton {
+		/**
+		  * The label.
+		 */
+		"label": string;
+		/**
+		  * The secondary label displayed below the main label.
+		 */
+		"subLabel": string | undefined;
+	}
+}
+export interface SearchcraftButtonCustomEvent<T> extends CustomEvent<T> {
+	detail: T;
+	target: HTMLSearchcraftButtonElement;
+}
+export interface SearchcraftFacetListCustomEvent<T> extends CustomEvent<T> {
+	detail: T;
+	target: HTMLSearchcraftFacetListElement;
+}
+export interface SearchcraftInputFormCustomEvent<T> extends CustomEvent<T> {
+	detail: T;
+	target: HTMLSearchcraftInputFormElement;
+}
+export interface SearchcraftSelectCustomEvent<T> extends CustomEvent<T> {
+	detail: T;
+	target: HTMLSearchcraftSelectElement;
+}
+export interface SearchcraftSliderCustomEvent<T> extends CustomEvent<T> {
+	detail: T;
+	target: HTMLSearchcraftSliderElement;
+}
+export interface SearchcraftToggleButtonCustomEvent<T> extends CustomEvent<T> {
+	detail: T;
+	target: HTMLSearchcraftToggleButtonElement;
+}
+declare global {
+	/**
+	 * An inline ad meant to be rendered in a list of search results.
+	 */
+	interface HTMLSearchcraftAdElement extends Components.SearchcraftAd, HTMLStencilElement {
+	}
+	var HTMLSearchcraftAdElement: {
+		prototype: HTMLSearchcraftAdElement;
+		new (): HTMLSearchcraftAdElement;
+	};
+	/**
+	 * This web component is designed to display detailed information for a single search result.
+	 * Once a query is submitted, the component formats and presents the result.
+	 * It is consumed within the `searchcraft-base-search-results` component.
+	 */
+	interface HTMLSearchcraftBaseSearchResultElement extends Components.SearchcraftBaseSearchResult, HTMLStencilElement {
+	}
+	var HTMLSearchcraftBaseSearchResultElement: {
+		prototype: HTMLSearchcraftBaseSearchResultElement;
+		new (): HTMLSearchcraftBaseSearchResultElement;
+	};
+	/**
+	 * This web component is responsible for displaying the results of a search query.
+	 * Once a query is submitted, the component formats and presents an ordered list of the results.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-base-search-results
+	 *   ad-interval="4"
+	 *   place-ad-at-start="false"
+	 *   result-image-placement="right"
+	 * />
+	 * ```
+	 * ```js
+	 * // index.js
+	 * const baseSearchResults = document.querySelector('searchcraft-base-search-results');
+	 * baseSearchResults.searchResultMappings = containerHref: {
+	 *   fieldNames: [
+	 *    {
+	 *      fieldName: 'canonical_link',
+	 *      dataType: 'text',
+	 *    },
+	 *  ],
+	 * };
+	 * baseSearchResults.addEventListener('noResults', () => {
+	 *   console.log('No search results found');
+	 * });
+	 * ```
+	 */
+	interface HTMLSearchcraftBaseSearchResultsElement extends Components.SearchcraftBaseSearchResults, HTMLStencilElement {
+	}
+	var HTMLSearchcraftBaseSearchResultsElement: {
+		prototype: HTMLSearchcraftBaseSearchResultsElement;
+		new (): HTMLSearchcraftBaseSearchResultsElement;
+	};
+	interface HTMLSearchcraftButtonElementEventMap {
+		"buttonClick": void;
+	}
+	/**
+	 * This web component represents a button to be consumed within the `search-input-form` component.
+	 * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.
+	 * It is consumed within the `searchcraft-input-form` component.
+	 */
+	interface HTMLSearchcraftButtonElement extends Components.SearchcraftButton, HTMLStencilElement {
+		addEventListener<K extends keyof HTMLSearchcraftButtonElementEventMap>(type: K, listener: (this: HTMLSearchcraftButtonElement, ev: SearchcraftButtonCustomEvent<HTMLSearchcraftButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+		removeEventListener<K extends keyof HTMLSearchcraftButtonElementEventMap>(type: K, listener: (this: HTMLSearchcraftButtonElement, ev: SearchcraftButtonCustomEvent<HTMLSearchcraftButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+	}
+	var HTMLSearchcraftButtonElement: {
+		prototype: HTMLSearchcraftButtonElement;
+		new (): HTMLSearchcraftButtonElement;
+	};
+	/**
+	 * This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-error-message error-message="No search results found for query" />
+	 * ```
+	 */
+	interface HTMLSearchcraftErrorMessageElement extends Components.SearchcraftErrorMessage, HTMLStencilElement {
+	}
+	var HTMLSearchcraftErrorMessageElement: {
+		prototype: HTMLSearchcraftErrorMessageElement;
+		new (): HTMLSearchcraftErrorMessageElement;
+	};
+	interface HTMLSearchcraftFacetListElementEventMap {
+		"facetSelectionUpdated": {
+			paths: string[];
+		};
+	}
+	/**
+	 * This web component is designed to display facets in a search interface, allowing users to refine their search results by applying filters based on various attributes.
+	 * It is consumed within the `searchcraft-filter-panel`.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-facet-list field-name="title" />
+	 * ```
+	 * ```js
+	 * // index.js
+	 * const facetList = document.querySelector('searchcraft-facet-list');
+	 * facetList.addEventListener('facetSelectionUpdated', () => {
+	 *   console.log('Facet selection updated');
+	 * });
+	 * ```
+	 */
+	interface HTMLSearchcraftFacetListElement extends Components.SearchcraftFacetList, HTMLStencilElement {
+		addEventListener<K extends keyof HTMLSearchcraftFacetListElementEventMap>(type: K, listener: (this: HTMLSearchcraftFacetListElement, ev: SearchcraftFacetListCustomEvent<HTMLSearchcraftFacetListElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+		removeEventListener<K extends keyof HTMLSearchcraftFacetListElementEventMap>(type: K, listener: (this: HTMLSearchcraftFacetListElement, ev: SearchcraftFacetListCustomEvent<HTMLSearchcraftFacetListElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+	}
+	var HTMLSearchcraftFacetListElement: {
+		prototype: HTMLSearchcraftFacetListElement;
+		new (): HTMLSearchcraftFacetListElement;
+	};
+	/**
+	 * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-filter-panel />
+	 * ```
+	 */
+	interface HTMLSearchcraftFilterPanelElement extends Components.SearchcraftFilterPanel, HTMLStencilElement {
+	}
+	var HTMLSearchcraftFilterPanelElement: {
+		prototype: HTMLSearchcraftFilterPanelElement;
+		new (): HTMLSearchcraftFilterPanelElement;
+	};
+	interface HTMLSearchcraftInputFormElementEventMap {
+		"inputFocus": void;
+		"inputBlur": void;
+		"inputInit": void;
+	}
+	/**
+	 * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
+	 * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-input-form placeholder-value="Search here" />
+	 * ```
+	 * ```js
+	 * // index.js
+	 * const searchInputForm = document.querySelector('searchcraft-input-form');
+	 * ```
+	 */
+	interface HTMLSearchcraftInputFormElement extends Components.SearchcraftInputForm, HTMLStencilElement {
+		addEventListener<K extends keyof HTMLSearchcraftInputFormElementEventMap>(type: K, listener: (this: HTMLSearchcraftInputFormElement, ev: SearchcraftInputFormCustomEvent<HTMLSearchcraftInputFormElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+		removeEventListener<K extends keyof HTMLSearchcraftInputFormElementEventMap>(type: K, listener: (this: HTMLSearchcraftInputFormElement, ev: SearchcraftInputFormCustomEvent<HTMLSearchcraftInputFormElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+	}
+	var HTMLSearchcraftInputFormElement: {
+		prototype: HTMLSearchcraftInputFormElement;
+		new (): HTMLSearchcraftInputFormElement;
+	};
+	/**
+	 * This web component serves as the input label for the searchcraft-input-form component.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-input-label label="Search" />
+	 * ```
+	 */
+	interface HTMLSearchcraftInputLabelElement extends Components.SearchcraftInputLabel, HTMLStencilElement {
+	}
+	var HTMLSearchcraftInputLabelElement: {
+		prototype: HTMLSearchcraftInputLabelElement;
+		new (): HTMLSearchcraftInputLabelElement;
+	};
+	/**
+	 * This web component is designed to facilitate pagination of search results.
+	 * Once a query is submitted, calculates the number for pages.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-pagination />
+	 * ```
+	 */
+	interface HTMLSearchcraftPaginationElement extends Components.SearchcraftPagination, HTMLStencilElement {
+	}
+	var HTMLSearchcraftPaginationElement: {
+		prototype: HTMLSearchcraftPaginationElement;
+		new (): HTMLSearchcraftPaginationElement;
+	};
+	/**
+	 * Renders a button which, when clicked, turns on popover visibility.
+	 */
+	interface HTMLSearchcraftPopoverButtonElement extends Components.SearchcraftPopoverButton, HTMLStencilElement {
+	}
+	var HTMLSearchcraftPopoverButtonElement: {
+		prototype: HTMLSearchcraftPopoverButtonElement;
+		new (): HTMLSearchcraftPopoverButtonElement;
+	};
+	/**
+	 * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-popover-form type="fullscreen" />
+	 * ```
+	 * ```js
+	 * // index.js
+	 * const popoverForm = document.querySelector('searchcraft-popover-form');
+	 * popoverForm.popoverResultMappings = {
+	 *  containerHref: {
+	 *   fieldNames: [
+	 *    {
+	 *      fieldName: 'canonical_link',
+	 *      dataType: 'text',
+	 *    },
+	 *  ],
+	 *  };
+	 * ```
+	 */
+	interface HTMLSearchcraftPopoverFormElement extends Components.SearchcraftPopoverForm, HTMLStencilElement {
+	}
+	var HTMLSearchcraftPopoverFormElement: {
+		prototype: HTMLSearchcraftPopoverFormElement;
+		new (): HTMLSearchcraftPopoverFormElement;
+	};
+	/**
+	 * A single list item rendered in a searchcraft-popover-list-view.
+	 */
+	interface HTMLSearchcraftPopoverListItemElement extends Components.SearchcraftPopoverListItem, HTMLStencilElement {
+	}
+	var HTMLSearchcraftPopoverListItemElement: {
+		prototype: HTMLSearchcraftPopoverListItemElement;
+		new (): HTMLSearchcraftPopoverListItemElement;
+	};
+	/**
+	 * This web component is designed to display a list of results within a popover interface.
+	 * It is consumed within the `searchcraft-popover-form` component.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-popover-list-view />
+	 * ```
+	 */
+	interface HTMLSearchcraftPopoverListViewElement extends Components.SearchcraftPopoverListView, HTMLStencilElement {
+	}
+	var HTMLSearchcraftPopoverListViewElement: {
+		prototype: HTMLSearchcraftPopoverListViewElement;
+		new (): HTMLSearchcraftPopoverListViewElement;
+	};
+	/**
+	 * This web component is designed to display the number of results returned from a search query.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <script>
+	 *  const resultsInfo = document.querySelector('searchcraft-results-info');
+	 *  resultsInfo.customFormatter = (range, count, responseTime) =>
+	 *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
+	 * </script>
+	 * <searchcraft-results-info />
+	 * ```
+	 */
+	interface HTMLSearchcraftResultsInfoElement extends Components.SearchcraftResultsInfo, HTMLStencilElement {
+	}
+	var HTMLSearchcraftResultsInfoElement: {
+		prototype: HTMLSearchcraftResultsInfoElement;
+		new (): HTMLSearchcraftResultsInfoElement;
+	};
+	/**
+	 * This web component is designed to choose the number of search results displayed.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-search-results-per-page increment="20" />
+	 * ```
+	 */
+	interface HTMLSearchcraftSearchResultsPerPageElement extends Components.SearchcraftSearchResultsPerPage, HTMLStencilElement {
+	}
+	var HTMLSearchcraftSearchResultsPerPageElement: {
+		prototype: HTMLSearchcraftSearchResultsPerPageElement;
+		new (): HTMLSearchcraftSearchResultsPerPageElement;
+	};
+	interface HTMLSearchcraftSelectElementEventMap {
+		"selectChange": string;
+	}
+	/**
+	 * This web component is designed to allow users to select between a group of options.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-select
+	 *  inputId="searchcraft-select"
+	 *  name="searchcraft-select"
+	 *  options="[{ label: 'label', value: 'value' }]"
+	 * />
+	 * ```
+	 */
+	interface HTMLSearchcraftSelectElement extends Components.SearchcraftSelect, HTMLStencilElement {
+		addEventListener<K extends keyof HTMLSearchcraftSelectElementEventMap>(type: K, listener: (this: HTMLSearchcraftSelectElement, ev: SearchcraftSelectCustomEvent<HTMLSearchcraftSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+		removeEventListener<K extends keyof HTMLSearchcraftSelectElementEventMap>(type: K, listener: (this: HTMLSearchcraftSelectElement, ev: SearchcraftSelectCustomEvent<HTMLSearchcraftSelectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+	}
+	var HTMLSearchcraftSelectElement: {
+		prototype: HTMLSearchcraftSelectElement;
+		new (): HTMLSearchcraftSelectElement;
+	};
+	interface HTMLSearchcraftSliderElementEventMap {
+		"rangeChanged": any;
+	}
+	/**
+	 * This web component is designed to allow users to select a value from a range defined by a minimum and maximum value.
+	 * The component renders a slider interface, which can be used to visually choose a value between two boundaries.
+	 * It is consumed by the `searchcraft-filter-panel` component.
+	 */
+	interface HTMLSearchcraftSliderElement extends Components.SearchcraftSlider, HTMLStencilElement {
+		addEventListener<K extends keyof HTMLSearchcraftSliderElementEventMap>(type: K, listener: (this: HTMLSearchcraftSliderElement, ev: SearchcraftSliderCustomEvent<HTMLSearchcraftSliderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+		removeEventListener<K extends keyof HTMLSearchcraftSliderElementEventMap>(type: K, listener: (this: HTMLSearchcraftSliderElement, ev: SearchcraftSliderCustomEvent<HTMLSearchcraftSliderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+	}
+	var HTMLSearchcraftSliderElement: {
+		prototype: HTMLSearchcraftSliderElement;
+		new (): HTMLSearchcraftSliderElement;
+	};
+	/**
+	 * This web component adds Searchcraft's built-in css theme to your page's <head> tag.
+	 * It does not render anything visible, its only function is to manage the css styles on the page.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-theme theme="light" custom-theme="{}" />
+	 * ```
+	 */
+	interface HTMLSearchcraftThemeElement extends Components.SearchcraftTheme, HTMLStencilElement {
+	}
+	var HTMLSearchcraftThemeElement: {
+		prototype: HTMLSearchcraftThemeElement;
+		new (): HTMLSearchcraftThemeElement;
+	};
+	interface HTMLSearchcraftToggleButtonElementEventMap {
+		"toggleUpdated": boolean;
+	}
+	/**
+	 * This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.
+	 * It is consumed within the `searchcraft-filter-panel` component.
+	 */
+	interface HTMLSearchcraftToggleButtonElement extends Components.SearchcraftToggleButton, HTMLStencilElement {
+		addEventListener<K extends keyof HTMLSearchcraftToggleButtonElementEventMap>(type: K, listener: (this: HTMLSearchcraftToggleButtonElement, ev: SearchcraftToggleButtonCustomEvent<HTMLSearchcraftToggleButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+		addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+		removeEventListener<K extends keyof HTMLSearchcraftToggleButtonElementEventMap>(type: K, listener: (this: HTMLSearchcraftToggleButtonElement, ev: SearchcraftToggleButtonCustomEvent<HTMLSearchcraftToggleButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+		removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+	}
+	var HTMLSearchcraftToggleButtonElement: {
+		prototype: HTMLSearchcraftToggleButtonElement;
+		new (): HTMLSearchcraftToggleButtonElement;
+	};
+	interface HTMLElementTagNameMap {
+		"searchcraft-ad": HTMLSearchcraftAdElement;
+		"searchcraft-base-search-result": HTMLSearchcraftBaseSearchResultElement;
+		"searchcraft-base-search-results": HTMLSearchcraftBaseSearchResultsElement;
+		"searchcraft-button": HTMLSearchcraftButtonElement;
+		"searchcraft-error-message": HTMLSearchcraftErrorMessageElement;
+		"searchcraft-facet-list": HTMLSearchcraftFacetListElement;
+		"searchcraft-filter-panel": HTMLSearchcraftFilterPanelElement;
+		"searchcraft-input-form": HTMLSearchcraftInputFormElement;
+		"searchcraft-input-label": HTMLSearchcraftInputLabelElement;
+		"searchcraft-pagination": HTMLSearchcraftPaginationElement;
+		"searchcraft-popover-button": HTMLSearchcraftPopoverButtonElement;
+		"searchcraft-popover-form": HTMLSearchcraftPopoverFormElement;
+		"searchcraft-popover-list-item": HTMLSearchcraftPopoverListItemElement;
+		"searchcraft-popover-list-view": HTMLSearchcraftPopoverListViewElement;
+		"searchcraft-results-info": HTMLSearchcraftResultsInfoElement;
+		"searchcraft-search-results-per-page": HTMLSearchcraftSearchResultsPerPageElement;
+		"searchcraft-select": HTMLSearchcraftSelectElement;
+		"searchcraft-slider": HTMLSearchcraftSliderElement;
+		"searchcraft-theme": HTMLSearchcraftThemeElement;
+		"searchcraft-toggle-button": HTMLSearchcraftToggleButtonElement;
+	}
+}
+declare namespace LocalJSX {
+	/**
+	 * An inline ad meant to be rendered in a list of search results.
+	 */
+	interface SearchcraftAd {
+		"adClientResponseItem"?: AdClientResponseItem;
+		"adSource"?: SearchcraftAdSource;
+	}
+	/**
+	 * This web component is designed to display detailed information for a single search result.
+	 * Once a query is submitted, the component formats and presents the result.
+	 * It is consumed within the `searchcraft-base-search-results` component.
+	 */
+	interface SearchcraftBaseSearchResult {
+		/**
+		  * The relationship between the current document and the link for the button rendered when containerHref is not present.
+		 */
+		"buttonRel"?: "noreferrer" | "noopener" | "nofollow";
+		/**
+		  * Where to open the link for the button rendered when containerHref is not present.
+		 */
+		"buttonTarget"?: "_blank" | "_self" | "_top" | "_parent";
+		/**
+		  * The relationship between the current document and the link for the containing element.
+		 */
+		"containerRel"?: "noreferrer" | "noopener" | "nofollow";
+		/**
+		  * Where to open the link for the containing element.
+		 */
+		"containerTarget"?: "_blank" | "_self" | "_top" | "_parent";
+		/**
+		  * A custom styles object.
+		 */
+		"customStyles"?: string;
+		/**
+		  * The position in the document. Used with the "document_clicked" measure event.
+		 */
+		"documentPosition"?: number;
+		/**
+		  * The placement of the image.
+		 */
+		"imagePlacement"?: "left" | "right";
+		"item"?: SearchClientResponseItem;
+		"searchResultMappings"?: SearchResultMappings;
+	}
+	/**
+	 * This web component is responsible for displaying the results of a search query.
+	 * Once a query is submitted, the component formats and presents an ordered list of the results.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-base-search-results
+	 *   ad-interval="4"
+	 *   place-ad-at-start="false"
+	 *   result-image-placement="right"
+	 * />
+	 * ```
+	 * ```js
+	 * // index.js
+	 * const baseSearchResults = document.querySelector('searchcraft-base-search-results');
+	 * baseSearchResults.searchResultMappings = containerHref: {
+	 *   fieldNames: [
+	 *    {
+	 *      fieldName: 'canonical_link',
+	 *      dataType: 'text',
+	 *    },
+	 *  ],
+	 * };
+	 * baseSearchResults.addEventListener('noResults', () => {
+	 *   console.log('No search results found');
+	 * });
+	 * ```
+	 */
+	interface SearchcraftBaseSearchResults {
+		/**
+		  * The label for the button rendered when containerHref is not present for each result.
+		 */
+		"buttonLabel"?: string;
+		/**
+		  * The relationship between the current document and the link for the button rendered when containerHref is not present for each result.
+		 */
+		"buttonRel"?: "noreferrer" | "noopener" | "nofollow";
+		/**
+		  * Where to open the link for the button rendered when containerHref is not present for each result.
+		 */
+		"buttonTarget"?: "_blank" | "_self" | "_top" | "_parent";
+		/**
+		  * The relationship between the current document and the link for the containing element for each result.
+		 */
+		"containerRel"?: "noreferrer" | "noopener" | "nofollow";
+		/**
+		  * Where to open the link for the containing element for each result.
+		 */
+		"containerTarget"?: "_blank" | "_self" | "_top" | "_parent";
+		/**
+		  * A custom styles object.
+		 */
+		"customStylesForResults"?: string | Record<string, Record<string, string>>;
+		/**
+		  * The placement of the image for each result.
+		 */
+		"resultImagePlacement"?: "left" | "right";
+		/**
+		  * Formats the content rendered for each result.
+		 */
+		"searchResultMappings"?: SearchResultMappings;
+	}
+	/**
+	 * This web component represents a button to be consumed within the `search-input-form` component.
+	 * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.
+	 * It is consumed within the `searchcraft-input-form` component.
+	 */
+	interface SearchcraftButton {
+		/**
+		  * Whether the button is disabled.
+		 */
+		"disabled"?: boolean;
+		/**
+		  * Controls the visual representation of the button.
+		 */
+		"hierarchy"?: "primary" | "tertiary";
+		/**
+		  * The icon element.
+		 */
+		"icon"?: Element;
+		/**
+		  * Should the button only display an icon.
+		 */
+		"iconOnly"?: boolean;
+		/**
+		  * The position of the icon.
+		 */
+		"iconPosition"?: "left" | "right";
+		/**
+		  * The label for the button.
+		 */
+		"label"?: string;
+		/**
+		  * The event fired when the button is clicked.
+		 */
+		"onButtonClick"?: (event: SearchcraftButtonCustomEvent<void>) => void;
+		/**
+		  * The type of the button.
+		 */
+		"type"?: "submit" | "reset" | "button";
+	}
+	/**
+	 * This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-error-message error-message="No search results found for query" />
+	 * ```
+	 */
+	interface SearchcraftErrorMessage {
+		/**
+		  * The error message.
+		 */
+		"errorMessage"?: string;
+	}
+	/**
+	 * This web component is designed to display facets in a search interface, allowing users to refine their search results by applying filters based on various attributes.
+	 * It is consumed within the `searchcraft-filter-panel`.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-facet-list field-name="title" />
+	 * ```
+	 * ```js
+	 * // index.js
+	 * const facetList = document.querySelector('searchcraft-facet-list');
+	 * facetList.addEventListener('facetSelectionUpdated', () => {
+	 *   console.log('Facet selection updated');
+	 * });
+	 * ```
+	 */
+	interface SearchcraftFacetList {
+		/**
+		  * The name of the field where facets are applied.
+		 */
+		"fieldName"?: string;
+		/**
+		  * When the facets are updated.
+		 */
+		"onFacetSelectionUpdated"?: (event: SearchcraftFacetListCustomEvent<{
+			paths: string[];
+		}>) => void;
+	}
+	/**
+	 * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-filter-panel />
+	 * ```
+	 */
+	interface SearchcraftFilterPanel {
+		/**
+		  * The items to filter.
+		 */
+		"items"?: FilterItem[];
+	}
+	/**
+	 * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
+	 * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-input-form placeholder-value="Search here" />
+	 * ```
+	 * ```js
+	 * // index.js
+	 * const searchInputForm = document.querySelector('searchcraft-input-form');
+	 * ```
+	 */
+	interface SearchcraftInputForm {
+		/**
+		  * Whether or not to automatically submit the search term when the input changes.
+		 */
+		"autoSearch"?: boolean;
+		/**
+		  * The label for the submit button.
+		 */
+		"buttonLabel"?: string;
+		/**
+		  * Where to place the search button.
+		 */
+		"buttonPlacement"?: "left" | "right" | "none";
+		"core"?: SearchcraftCore;
+		/**
+		  * A custom styles object to be applied to the input element.
+		 */
+		"customStyles"?: string | Record<string, string>;
+		/**
+		  * The label rendered above the input.
+		 */
+		"inputLabel"?: string;
+		/**
+		  * When the input becomes unfocused.
+		 */
+		"onInputBlur"?: (event: SearchcraftInputFormCustomEvent<void>) => void;
+		/**
+		  * When the input becomes focused.
+		 */
+		"onInputFocus"?: (event: SearchcraftInputFormCustomEvent<void>) => void;
+		/**
+		  * Event emitted when input initializes.
+		 */
+		"onInputInit"?: (event: SearchcraftInputFormCustomEvent<void>) => void;
+		/**
+		  * The input element's placeholder value.
+		 */
+		"placeholderValue"?: string;
+	}
+	/**
+	 * This web component serves as the input label for the searchcraft-input-form component.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-input-label label="Search" />
+	 * ```
+	 */
+	interface SearchcraftInputLabel {
+		/**
+		  * The classname applied to the label element.
+		 */
+		"inputLabelClassName"?: string | undefined;
+		"label"?: string;
+	}
+	/**
+	 * This web component is designed to facilitate pagination of search results.
+	 * Once a query is submitted, calculates the number for pages.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-pagination />
+	 * ```
+	 */
+	interface SearchcraftPagination {
+		/**
+		  * The custom styles object.
+		 */
+		"customStyles"?: string;
+	}
+	/**
+	 * Renders a button which, when clicked, turns on popover visibility.
+	 */
+	interface SearchcraftPopoverButton {
+	}
+	/**
+	 * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-popover-form type="fullscreen" />
+	 * ```
+	 * ```js
+	 * // index.js
+	 * const popoverForm = document.querySelector('searchcraft-popover-form');
+	 * popoverForm.popoverResultMappings = {
+	 *  containerHref: {
+	 *   fieldNames: [
+	 *    {
+	 *      fieldName: 'canonical_link',
+	 *      dataType: 'text',
+	 *    },
+	 *  ],
+	 *  };
+	 * ```
+	 */
+	interface SearchcraftPopoverForm {
+		/**
+		  * The hotkey that activates the popover.
+		 */
+		"hotkey"?: string;
+		/**
+		  * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.
+		 */
+		"hotkeyModifier"?: "ctrl" | "meta" | "alt" | "option";
+		/**
+		  * Formats the content rendered for each result.
+		 */
+		"popoverResultMappings"?: PopoverResultMappings;
+		/**
+		  * The type of popover form to render.  - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content. - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component. - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.
+		 */
+		"type"?: "inline" | "fullscreen" | "modal";
+	}
+	/**
+	 * A single list item rendered in a searchcraft-popover-list-view.
+	 */
+	interface SearchcraftPopoverListItem {
+		/**
+		  * The document position relative to the search results (For Measure)
+		 */
+		"documentPosition"?: number;
+		"item"?: SearchClientResponseItem | undefined;
+		"popoverResultMappings"?: PopoverResultMappings | undefined;
+	}
+	/**
+	 * This web component is designed to display a list of results within a popover interface.
+	 * It is consumed within the `searchcraft-popover-form` component.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-popover-list-view />
+	 * ```
+	 */
+	interface SearchcraftPopoverListView {
+		"adClientResponseItems"?: AdClientResponseItem[] | undefined;
+		/**
+		  * The mappings that define how the data in the documents are mapped to the list-view-item elements.
+		 */
+		"popoverResultMappings"?: PopoverResultMappings | undefined;
+		/**
+		  * The items to render in the list view.
+		 */
+		"searchClientResponseItems"?: SearchClientResponseItem[] | undefined;
+		"searchResultsPage": number;
+		"searchResultsPerPage": number;
+	}
+	/**
+	 * This web component is designed to display the number of results returned from a search query.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <script>
+	 *  const resultsInfo = document.querySelector('searchcraft-results-info');
+	 *  resultsInfo.customFormatter = (range, count, responseTime) =>
+	 *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
+	 * </script>
+	 * <searchcraft-results-info />
+	 * ```
+	 */
+	interface SearchcraftResultsInfo {
+		/**
+		  * The custom formatter for the resulting string.
+		  * @example ```ts  resultsInfo.customFormatter = (range, count, responseTime) =>    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`; ```
+		 */
+		"customFormatter"?: (range: [
+			string,
+			string
+		], count: string, responseTime: string) => void;
+		/**
+		  * The custom styles object.
+		 */
+		"customStyles"?: string;
+	}
+	/**
+	 * This web component is designed to choose the number of search results displayed.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-search-results-per-page increment="20" />
+	 * ```
+	 */
+	interface SearchcraftSearchResultsPerPage {
+		/**
+		  * The custom styles object.
+		 */
+		"customStyles"?: string;
+		/**
+		  * The amount the options will increase (e.g. 20 = [20, 40, 60, 80, 100]). The base value is defined by the `searchResultsPerPage` option in the configuration.
+		 */
+		"increment"?: string | number;
+	}
+	/**
+	 * This web component is designed to allow users to select between a group of options.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-select
+	 *  inputId="searchcraft-select"
+	 *  name="searchcraft-select"
+	 *  options="[{ label: 'label', value: 'value' }]"
+	 * />
+	 * ```
+	 */
+	interface SearchcraftSelect {
+		/**
+		  * The caption displayed below the select input.
+		 */
+		"caption"?: string;
+		/**
+		  * A custom styles object.
+		 */
+		"customStyles"?: string;
+		/**
+		  * Whether the select input is disabled.
+		 */
+		"disabled"?: boolean;
+		/**
+		  * The ID for the select input.
+		 */
+		"inputId": string;
+		/**
+		  * The label of the select input.
+		 */
+		"label"?: string;
+		/**
+		  * The ID for the label of the select input.
+		 */
+		"labelId"?: string;
+		/**
+		  * The name of the select input.
+		 */
+		"name": string;
+		/**
+		  * The event fired when the select is changed.
+		 */
+		"onSelectChange"?: (event: SearchcraftSelectCustomEvent<string>) => void;
+		/**
+		  * The options for the select input.
+		 */
+		"options"?: SearchcraftSelectOption[] | string;
+	}
+	/**
+	 * This web component is designed to allow users to select a value from a range defined by a minimum and maximum value.
+	 * The component renders a slider interface, which can be used to visually choose a value between two boundaries.
+	 * It is consumed by the `searchcraft-filter-panel` component.
+	 */
+	interface SearchcraftSlider {
+		/**
+		  * The type of data allowed.
+		 */
+		"dataType"?: "number" | "date";
+		/**
+		  * The granularity that the value must adhere to.
+		 */
+		"granularity"?: number;
+		/**
+		  * The maximum value allowed.
+		 */
+		"max"?: number;
+		/**
+		  * The minimum value allowed.
+		 */
+		"min"?: number;
+		/**
+		  * When the range has changed.
+		 */
+		"onRangeChanged"?: (event: SearchcraftSliderCustomEvent<any>) => void;
+	}
+	/**
+	 * This web component adds Searchcraft's built-in css theme to your page's <head> tag.
+	 * It does not render anything visible, its only function is to manage the css styles on the page.
+	 * ## Usage
+	 * ```html
+	 * <!-- index.html -->
+	 * <searchcraft-theme theme="light" custom-theme="{}" />
+	 * ```
+	 */
+	interface SearchcraftTheme {
+		/**
+		  * The custom theme configuration object.
+		 */
+		"customTheme"?: string;
+		/**
+		  * The name of the theme.
+		 */
+		"theme"?: string;
+	}
+	/**
+	 * This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.
+	 * It is consumed within the `searchcraft-filter-panel` component.
+	 */
+	interface SearchcraftToggleButton {
+		/**
+		  * The label.
+		 */
+		"label"?: string;
+		/**
+		  * When the toggle element is changed.
+		 */
+		"onToggleUpdated"?: (event: SearchcraftToggleButtonCustomEvent<boolean>) => void;
+		/**
+		  * The secondary label displayed below the main label.
+		 */
+		"subLabel"?: string | undefined;
+	}
+	interface IntrinsicElements {
+		"searchcraft-ad": SearchcraftAd;
+		"searchcraft-base-search-result": SearchcraftBaseSearchResult;
+		"searchcraft-base-search-results": SearchcraftBaseSearchResults;
+		"searchcraft-button": SearchcraftButton;
+		"searchcraft-error-message": SearchcraftErrorMessage;
+		"searchcraft-facet-list": SearchcraftFacetList;
+		"searchcraft-filter-panel": SearchcraftFilterPanel;
+		"searchcraft-input-form": SearchcraftInputForm;
+		"searchcraft-input-label": SearchcraftInputLabel;
+		"searchcraft-pagination": SearchcraftPagination;
+		"searchcraft-popover-button": SearchcraftPopoverButton;
+		"searchcraft-popover-form": SearchcraftPopoverForm;
+		"searchcraft-popover-list-item": SearchcraftPopoverListItem;
+		"searchcraft-popover-list-view": SearchcraftPopoverListView;
+		"searchcraft-results-info": SearchcraftResultsInfo;
+		"searchcraft-search-results-per-page": SearchcraftSearchResultsPerPage;
+		"searchcraft-select": SearchcraftSelect;
+		"searchcraft-slider": SearchcraftSlider;
+		"searchcraft-theme": SearchcraftTheme;
+		"searchcraft-toggle-button": SearchcraftToggleButton;
+	}
+}
+declare module "@stencil/core" {
+	export namespace JSX {
+		interface IntrinsicElements {
+			/**
+			 * An inline ad meant to be rendered in a list of search results.
+			 */
+			"searchcraft-ad": LocalJSX.SearchcraftAd & JSXBase.HTMLAttributes<HTMLSearchcraftAdElement>;
+			/**
+			 * This web component is designed to display detailed information for a single search result.
+			 * Once a query is submitted, the component formats and presents the result.
+			 * It is consumed within the `searchcraft-base-search-results` component.
+			 */
+			"searchcraft-base-search-result": LocalJSX.SearchcraftBaseSearchResult & JSXBase.HTMLAttributes<HTMLSearchcraftBaseSearchResultElement>;
+			/**
+			 * This web component is responsible for displaying the results of a search query.
+			 * Once a query is submitted, the component formats and presents an ordered list of the results.
+			 * ## Usage
+			 * ```html
+			 * <!-- index.html -->
+			 * <searchcraft-base-search-results
+			 *   ad-interval="4"
+			 *   place-ad-at-start="false"
+			 *   result-image-placement="right"
+			 * />
+			 * ```
+			 * ```js
+			 * // index.js
+			 * const baseSearchResults = document.querySelector('searchcraft-base-search-results');
+			 * baseSearchResults.searchResultMappings = containerHref: {
+			 *   fieldNames: [
+			 *    {
+			 *      fieldName: 'canonical_link',
+			 *      dataType: 'text',
+			 *    },
+			 *  ],
+			 * };
+			 * baseSearchResults.addEventListener('noResults', () => {
+			 *   console.log('No search results found');
+			 * });
+			 * ```
+			 */
+			"searchcraft-base-search-results": LocalJSX.SearchcraftBaseSearchResults & JSXBase.HTMLAttributes<HTMLSearchcraftBaseSearchResultsElement>;
+			/**
+			 * This web component represents a button to be consumed within the `search-input-form` component.
+			 * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.
+			 * It is consumed within the `searchcraft-input-form` component.
+			 */
+			"searchcraft-button": LocalJSX.SearchcraftButton & JSXBase.HTMLAttributes<HTMLSearchcraftButtonElement>;
+			/**
+			 * This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.
+			 * ## Usage
+			 * ```html
+			 * <!-- index.html -->
+			 * <searchcraft-error-message error-message="No search results found for query" />
+			 * ```
+			 */
+			"searchcraft-error-message": LocalJSX.SearchcraftErrorMessage & JSXBase.HTMLAttributes<HTMLSearchcraftErrorMessageElement>;
+			/**
+			 * This web component is designed to display facets in a search interface, allowing users to refine their search results by applying filters based on various attributes.
+			 * It is consumed within the `searchcraft-filter-panel`.
+			 * ## Usage
+			 * ```html
+			 * <!-- index.html -->
+			 * <searchcraft-facet-list field-name="title" />
+			 * ```
+			 * ```js
+			 * // index.js
+			 * const facetList = document.querySelector('searchcraft-facet-list');
+			 * facetList.addEventListener('facetSelectionUpdated', () => {
+			 *   console.log('Facet selection updated');
+			 * });
+			 * ```
+			 */
+			"searchcraft-facet-list": LocalJSX.SearchcraftFacetList & JSXBase.HTMLAttributes<HTMLSearchcraftFacetListElement>;
+			/**
+			 * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
+			 * ## Usage
+			 * ```html
+			 * <!-- index.html -->
+			 * <searchcraft-filter-panel />
+			 * ```
+			 */
+			"searchcraft-filter-panel": LocalJSX.SearchcraftFilterPanel & JSXBase.HTMLAttributes<HTMLSearchcraftFilterPanelElement>;
+			/**
+			 * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
+			 * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
+			 * ## Usage
+			 * ```html
+			 * <!-- index.html -->
+			 * <searchcraft-input-form placeholder-value="Search here" />
+			 * ```
+			 * ```js
+			 * // index.js
+			 * const searchInputForm = document.querySelector('searchcraft-input-form');
+			 * ```
+			 */
+			"searchcraft-input-form": LocalJSX.SearchcraftInputForm & JSXBase.HTMLAttributes<HTMLSearchcraftInputFormElement>;
+			/**
+			 * This web component serves as the input label for the searchcraft-input-form component.
+			 * ## Usage
+			 * ```html
+			 * <!-- index.html -->
+			 * <searchcraft-input-label label="Search" />
+			 * ```
+			 */
+			"searchcraft-input-label": LocalJSX.SearchcraftInputLabel & JSXBase.HTMLAttributes<HTMLSearchcraftInputLabelElement>;
+			/**
+			 * This web component is designed to facilitate pagination of search results.
+			 * Once a query is submitted, calculates the number for pages.
+			 * ## Usage
+			 * ```html
+			 * <!-- index.html -->
+			 * <searchcraft-pagination />
+			 * ```
+			 */
+			"searchcraft-pagination": LocalJSX.SearchcraftPagination & JSXBase.HTMLAttributes<HTMLSearchcraftPaginationElement>;
+			/**
+			 * Renders a button which, when clicked, turns on popover visibility.
+			 */
+			"searchcraft-popover-button": LocalJSX.SearchcraftPopoverButton & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverButtonElement>;
+			/**
+			 * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.
+			 * ## Usage
+			 * ```html
+			 * <!-- index.html -->
+			 * <searchcraft-popover-form type="fullscreen" />
+			 * ```
+			 * ```js
+			 * // index.js
+			 * const popoverForm = document.querySelector('searchcraft-popover-form');
+			 * popoverForm.popoverResultMappings = {
+			 *  containerHref: {
+			 *   fieldNames: [
+			 *    {
+			 *      fieldName: 'canonical_link',
+			 *      dataType: 'text',
+			 *    },
+			 *  ],
+			 *  };
+			 * ```
+			 */
+			"searchcraft-popover-form": LocalJSX.SearchcraftPopoverForm & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverFormElement>;
+			/**
+			 * A single list item rendered in a searchcraft-popover-list-view.
+			 */
+			"searchcraft-popover-list-item": LocalJSX.SearchcraftPopoverListItem & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverListItemElement>;
+			/**
+			 * This web component is designed to display a list of results within a popover interface.
+			 * It is consumed within the `searchcraft-popover-form` component.
+			 * ## Usage
+			 * ```html
+			 * <!-- index.html -->
+			 * <searchcraft-popover-list-view />
+			 * ```
+			 */
+			"searchcraft-popover-list-view": LocalJSX.SearchcraftPopoverListView & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverListViewElement>;
+			/**
+			 * This web component is designed to display the number of results returned from a search query.
+			 * ## Usage
+			 * ```html
+			 * <!-- index.html -->
+			 * <script>
+			 *  const resultsInfo = document.querySelector('searchcraft-results-info');
+			 *  resultsInfo.customFormatter = (range, count, responseTime) =>
+			 *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
+			 * </script>
+			 * <searchcraft-results-info />
+			 * ```
+			 */
+			"searchcraft-results-info": LocalJSX.SearchcraftResultsInfo & JSXBase.HTMLAttributes<HTMLSearchcraftResultsInfoElement>;
+			/**
+			 * This web component is designed to choose the number of search results displayed.
+			 * ## Usage
+			 * ```html
+			 * <!-- index.html -->
+			 * <searchcraft-search-results-per-page increment="20" />
+			 * ```
+			 */
+			"searchcraft-search-results-per-page": LocalJSX.SearchcraftSearchResultsPerPage & JSXBase.HTMLAttributes<HTMLSearchcraftSearchResultsPerPageElement>;
+			/**
+			 * This web component is designed to allow users to select between a group of options.
+			 * ## Usage
+			 * ```html
+			 * <!-- index.html -->
+			 * <searchcraft-select
+			 *  inputId="searchcraft-select"
+			 *  name="searchcraft-select"
+			 *  options="[{ label: 'label', value: 'value' }]"
+			 * />
+			 * ```
+			 */
+			"searchcraft-select": LocalJSX.SearchcraftSelect & JSXBase.HTMLAttributes<HTMLSearchcraftSelectElement>;
+			/**
+			 * This web component is designed to allow users to select a value from a range defined by a minimum and maximum value.
+			 * The component renders a slider interface, which can be used to visually choose a value between two boundaries.
+			 * It is consumed by the `searchcraft-filter-panel` component.
+			 */
+			"searchcraft-slider": LocalJSX.SearchcraftSlider & JSXBase.HTMLAttributes<HTMLSearchcraftSliderElement>;
+			/**
+			 * This web component adds Searchcraft's built-in css theme to your page's <head> tag.
+			 * It does not render anything visible, its only function is to manage the css styles on the page.
+			 * ## Usage
+			 * ```html
+			 * <!-- index.html -->
+			 * <searchcraft-theme theme="light" custom-theme="{}" />
+			 * ```
+			 */
+			"searchcraft-theme": LocalJSX.SearchcraftTheme & JSXBase.HTMLAttributes<HTMLSearchcraftThemeElement>;
+			/**
+			 * This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.
+			 * It is consumed within the `searchcraft-filter-panel` component.
+			 */
+			"searchcraft-toggle-button": LocalJSX.SearchcraftToggleButton & JSXBase.HTMLAttributes<HTMLSearchcraftToggleButtonElement>;
+		}
+	}
+}
+/**
+ * The props for the SearchcraftBaseSearchResults component.
+ */
+export interface SearchcraftBaseSearchResultsProps extends Components.SearchcraftBaseSearchResults {
+}
+/**
+ * A component that renders a list of search results with customizable styles, layout, and link behavior.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { SearchcraftBaseSearchResults } from '@searchcraft/react-sdk';
+ * import searchResultMappings from './searchResultMappings';
+ *
+ * const MySearchComponent = () => {
+ *   return (
+ *     <SearchcraftBaseSearchResults
+ *       searchResultMappings={searchResultMappings}
+ *       resultImagePlacement="left"
+ *       buttonLabel="View More"
+ *       buttonTarget="_blank"
+ *       buttonRel="noopener"
+ *       containerTarget="_self"
+ *       containerRel="nofollow"
+ *       onNoResults={() => console.log("No search results found")}
+ *     />
+ *   );
+ * };
+ *
+ * export default MySearchComponent;
+ * ```
+ */
+export declare const SearchcraftBaseSearchResults: FC<SearchcraftBaseSearchResultsProps>;
+/**
+ * The props for the SearchcraftFilterPanel.
+ */
+export interface SearchcraftFilterPanelProps extends Components.SearchcraftFilterPanel {
+}
+/**
+ * A component that represents a filter panel UI view, allowing users to refine and control their search queries by applying various filter criteria.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { SearchcraftFilterPanel } from '@searchcraft/react-sdk';
+ * import filterItems from './filterItems';
+ *
+ * const MyFilterComponent = () => {
+ *   return (
+ *     <SearchcraftFilterPanel items={filterItems} />
+ *   );
+ * };
+ *
+ * export default MyFilterComponent;
+ * ```
+ */
+export declare const SearchcraftFilterPanel: FC<SearchcraftFilterPanelProps>;
+/**
+ * The props for the SearchcraftInputForm.
+ */
+export interface SearchcraftInputFormProps extends Components.SearchcraftInputForm {
+}
+/**
+ * A component that provides a user-friendly interface for querying an indexed dataset,
+ * enabling users to easily search large collections of data. It abstracts the complexities
+ * of index-based searching, making it accessible to users of all technical levels.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { SearchcraftInputForm } from '@searchcraft/react-sdk';
+ * import searchcraftConfig from './searchcraftConfig';
+ *
+ * const MySearchComponent = () => {
+ *   const handleQuerySubmit = (event: CustomEvent<string>) => {
+ *     console.log("Query submitted", event.detail);
+ *   };
+ *
+ *   return (
+ *     <SearchcraftInputForm
+ *       config={searchcraftConfig}
+ *       autoSearch={true}
+ *       buttonPlacement="right"
+ *       buttonLabel="Search"
+ *       inputLabel="Search Database"
+ *       customStyles={{ border: "1px solid gray", padding: "5px" }}
+ *       placeholderValue="Search here..."
+ *       searchTerm=""
+ *       onQuerySubmit={handleQuerySubmit}
+ *       onInputCleared={() => console.log("Input cleared")}
+ *       onNoResultsReceived={() => console.log("No results found")}
+ *       onInputFocus={() => console.log("Input focused")}
+ *       onInputBlur={() => console.log("Input blurred")}
+ *       onInputInit={() => console.log("Input initialized")}
+ *     />
+ *   );
+ * };
+ *
+ * export default MySearchComponent;
+ * ```
+ */
+export declare const SearchcraftInputForm: FC<SearchcraftInputFormProps>;
+/**
+ * The props for the SearchcraftPopoverButton.
+ */
+export interface SearchcraftPopoverButtonProps extends Components.SearchcraftPopoverButton {
+}
+/**
+ * A button component that, when clicked, toggles the visibility of a popover.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { SearchcraftPopoverButton } from '@searchcraft/react-sdk';
+ *
+ * const MyPopoverTrigger = () => {
+ *   return (
+ *     <SearchcraftPopoverButton>
+ *       Open Popover
+ *     </SearchcraftPopoverButton>
+ *   );
+ * };
+ *
+ * export default MyPopoverTrigger;
+ * ```
+ */
+export declare const SearchcraftPopoverButton: FC<SearchcraftPopoverButtonProps>;
+/**
+ * The props for the SearchcraftPopoverForm component.
+ */
+export interface SearchcraftPopoverFormProps extends Components.SearchcraftPopoverForm {
+}
+/**
+ * A component that displays search results in a popover container that dynamically appears
+ * when the user interacts with a search input field, or when a popover button is clicked.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { SearchcraftPopoverForm } from '@searchcraft/react-sdk';
+ * import searchcraftConfig from './searchcraftConfig';
+ * import popoverResultMappings from './popoverResultMappings';
+ *
+ * const MyPopoverSearch = () => {
+ *   return (
+ *     <SearchcraftPopoverForm
+ *       config={searchcraftConfig}
+ *       type="fullscreen"
+ *       popoverResultMappings={popoverResultMappings}
+ *       hotkey="k"
+ *       hotkeyModifier="meta"
+ *     />
+ *   );
+ * };
+ *
+ * export default MyPopoverSearch;
+ * ```
+ */
+export declare const SearchcraftPopoverForm: FC<SearchcraftPopoverFormProps>;
+/**
+ * The Props for the SearchcraftResultsInfo component.
+ */
+export interface SearchcraftResultsInfoProps extends Components.SearchcraftResultsInfo {
+}
+/**
+ * This React component is designed to display the number of results returned from a search query.
+ *
+ * @example
+ * ```tsx
+ * import React, { useEffect, useRef } from 'react';
+ * import { SearchcraftResultsInfo } from '@searchcraft/react-sdk';
+ *
+ * const MyResultsInfo = () => {
+ *   const ref = useRef();
+ *
+ *   useEffect(() => {
+ *     ref.current.customFormatter = (range, count, responseTime) =>
+ *       `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
+ *   });
+ *
+ *   return <SearchcraftResultsInfo ref={ref} />;
+ * };
+ *
+ * export default MyResultsInfo;
+ * ```
+ */
+export declare const SearchcraftResultsInfo: FC<SearchcraftResultsInfoProps>;
+/**
+ * The Props for the SearchcraftTheme component.
+ */
+export interface SearchcraftThemeProps extends Components.SearchcraftTheme {
+}
+/**
+ * A component that applies Searchcraft's built-in CSS theme to your page.
+ * It does not render anything visible—its only function is to manage the CSS styles on the page.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { SearchcraftTheme } from '@searchcraft/react-sdk';
+ *
+ * const MyThemeProvider = () => {
+ *   return <SearchcraftTheme theme="light" customTheme={'[]'} />;
+ * };
+ *
+ * export default MyThemeProvider;
+ * ```
+ */
+export declare const SearchcraftTheme: FC<SearchcraftThemeProps>;
+/**
+ * The props for the SearchcraftPagination component.
+ */
+export interface SearchcraftPaginationProps extends Components.SearchcraftPagination {
+}
+/**
+ * This React component is designed to facilitate pagination of search results.
+ * Once a query is submitted, calculates the number for pages.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { SearchcraftPagination } from '@searchcraft/react-sdk';
+ *
+ * const MyPaginationComponent = () => {
+ *   return (
+ *     // other searchcraft components
+ *     <SearchcraftPagination />
+ *   );
+ * };
+ *
+ * export default MyPaginationComponent;
+ * ```
+ */
+export declare const SearchcraftPagination: FC<SearchcraftPaginationProps>;
+/**
+ * The Props for the SearchcraftSearchResultsPerPage component.
+ */
+export interface SearchcraftSearchResultsPerPageProps extends Components.SearchcraftSearchResultsPerPage {
+}
+/**
+ * This React component is designed to choose the number of search results displayed.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { SearchcraftSearchResultsPerPage } from '@searchcraft/react-sdk';
+ *
+ * const MyResultsPerPage = () => {
+ *   return <SearchcraftSearchResultsPerPage increment={20} />;
+ * };
+ *
+ * export default MyResultsPerPage;
+ * ```
+ */
+export declare const SearchcraftSearchResultsPerPage: FC<SearchcraftSearchResultsPerPageProps>;
+/**
+ * The consumer-facing Searchcraft class.
+ */
+export declare class Searchcraft extends SearchcraftCore {
+	constructor(config: SearchcraftConfig);
+}
+
+export {};