// Generated by dts-bundle-generator v9.5.1

import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
import { StoreApi } from 'zustand';

export interface ADMResponse {
	partial_qt: string;
	text_ads: ADMAd[];
	product_ads: ADMAd[];
}
export interface AdClientResponseItem {
	id: string;
}
export interface ADMClientResponseItem extends AdClientResponseItem {
	admAdType: "adm-text-ad" | "adm-product-ad";
	admAd?: ADMAd;
}
export interface ADMAd {
	adv_id: number;
	adv_name: string;
	click_url?: string;
	image_url?: string;
	impression_url?: string;
	price?: number;
	price_currency?: string;
	sale_price?: number;
	term: string;
}
export type Facet = {
	/**
	 * The path of the facet. The path represents where in the facet tree structure
	 * this facet exists. There is an arbitrary number of levels in a facet tree.
	 *
	 * @example
	 *
	 * '/sports/college' - Represents that this is the facet node exists at [root] -> [sports] -> [college] in the facet tree.
	 * '/weather' - Represents that this facet exists at [root] -> [weather] in the facet tree
	 * '/news/local' - [root] -> [news] -> [local]
	 */
	path: string;
	/**
	 * The count value just represents an arbitrary `count` metadata for this facet node.
	 */
	count: number;
};
export type FacetWithChildrenArray = Facet & {
	children: FacetWithChildrenArray[] | null | undefined;
};
export type FacetWithChildrenObject = Facet & {
	children: Record<string, FacetWithChildrenObject>;
};
/**
 * A Facet object returned in a search response.
 */
export type FacetRoot = {
	[key: string]: FacetWithChildrenArray[];
};
export type FacetPrime = FacetRoot[];
/**
 * A structured Facet tree.
 *
 * A Facet tree is the root node of a "complete view" of the facet node tree.
 * Nodes are structured based on the `path` of each facet
 *
 */
export type FacetTree = FacetWithChildrenObject;
/**
 * Types of measure requests that can be sent to the /measure/event endpoint.
 */
export type MeasureEventName = "sdk_initialized" | "search_requested" | "search_response_received" | "search_completed" | "document_clicked";
/**
 * The type used for sending multiple measure events in a single network request.
 * Uses /measure/batch request.
 */
export interface BatchMeasureRequest {
	items: MeasureRequest[];
}
/**
 * The type representing a measure request.
 */
export interface MeasureRequest {
	event_name: MeasureEventName;
	properties: MeasureRequestProperties;
	user: MeasureRequestUser;
}
/**
 * Properties attached to a measure request.
 */
export interface MeasureRequestProperties {
	searchcraft_organization_id?: string;
	searchcraft_application_id?: string;
	searchcraft_index_names: string[];
	searchcraft_federation_name?: 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;
}
/**
 * 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;
	/**
	 * The locale to use when formatting dataType: `date`.
	 */
	dateFormatLocale?: string;
	/**
	 * If it's a date, the date format to apply.
	 * Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
	 */
	dateFormatOptions?: Intl.DateTimeFormatOptions;
};
/**
 * 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 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;
		exclude?: string[];
		/**
		 * Initial collapse state of the facet section.
		 * - 'open': Section is expanded by default
		 * - 'closed': Section is collapsed by default
		 * @default 'open'
		 */
		initialCollapseState?: "open" | "closed";
		/**
		 * The number of facets to show before displaying a "view more" link.
		 * Set to 0 to show all facets without a "view more" link.
		 * @default 8
		 */
		viewMoreThreshold?: number;
	};
}
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 {
	fieldName: string;
	type: "mostRecentToggle";
	options: {
		subLabel?: string;
	};
}
export type TemplateHtml = (strings: TemplateStringsArray, ...values: (string | number | undefined)[]) => string;
export type SearchResultTemplate<T> = (data: T, index: number, utils: {
	html: TemplateHtml;
	source_index?: string;
}) => string;
export type SearchResultTemplateData = any;
export type ResultsInfoTemplate = (data: {
	range: [
		number,
		number
	];
	count: number;
	responseTime: string;
}, utils: {
	html: TemplateHtml;
}) => string;
export type CustomAdTemplate = (data: {
	adContainerId: string;
	searchTerm: string;
}, utils: {
	html: TemplateHtml;
}) => string;
export type PopoverButtonTemplate = (data: {
	isPopoverVisible: boolean;
}, utils: {
	html: TemplateHtml;
}) => string;
export type ADMAdTemplate = (data: ADMAd, utils: {
	html: TemplateHtml;
}) => string;
export interface CustomAdConfig {
	/**
	 * The amount of debounce delay to add before calling the ad_container_rendered event
	 */
	adContainerRenderedDebounceDelay?: number;
	/**
	 * The number of custom ads to render at the start of the search results page.
	 */
	adStartQuantity?: number;
	/**
	 * The number of custom ads to render at the end of the search results page.
	 */
	adEndQuantity?: number;
	/**
	 * Renders a custom ad in between search results, at the specified interval.
	 */
	adInterstitialInterval?: number;
	/**
	 * Specifies the number of ads to be rendered in each interstitial in between search results.
	 */
	adInterstitialQuantity?: number;
	/**
	 * A callback function responsible for rendering the custom ad containers.
	 */
	template: CustomAdTemplate;
}
export interface NativoAdConfig {
	/**
	 * The placement id to use for Nativo ads.
	 */
	placementId?: number;
	/**
	 * The class name for nativo ad containers.
	 */
	adClassName?: string;
	/**
	 * The number of custom ads to render at the start of the search results page.
	 */
	adStartQuantity?: number;
	/**
	 * The number of custom ads to render at the end of the search results page.
	 */
	adEndQuantity?: number;
	/**
	 * Renders a custom ad in between search results, at the specified interval.
	 */
	adInterstitialInterval?: number;
	/**
	 * Specify how many normal search results to render before rendering the first interstitial ad grouping.
	 */
	adInterstialStartIndex?: number;
	/**
	 * Specifies the number of ads to be rendered in each interstitial in between search results.
	 */
	adInterstitialQuantity?: number;
}
export interface ADMAdConfig {
	/**
	 * The number of product ads to request.
	 */
	productAdQuantity?: number;
	/**
	 * The number of text ads to request.
	 */
	textAdQuantity?: number;
	/**
	 * The adm sub value.
	 */
	sub?: string;
	/**
	 * A callback function responsible for rendering the ADM ad containers.
	 */
	template?: ADMAdTemplate;
}
/**
 * The SearchcraftConfig object is used to initialize the Searchcraft JavaScript SDK in your front-end application. See the [getting started page](https://docs.searchcraft.io/sdks/javascript/getting-started/) for a guide on how and where to use this configuration object.
 */
export interface SearchcraftConfig {
	/**
	 * The read key value to use when sending Searchcraft search requests. This value needs read key-specific permissions. If you are using Searchcraft Cloud, this value can be configured in Vektron.
	 */
	readKey: string;
	/**
	 * The endpoint url of your Searchcraft cluster where your specified search index exists. If you are using Searchcraft Cloud, this value can be found within the Vektron dashboard in the Code Snippets section when configuring a search index.
	 */
	endpointURL: string;
	/**
	 * Name of the Searchcraft search index to search for results within. If you are using Searchcraft Cloud, this value can be found within the Vektron dashboard in the Code Snippets section when configuring a search index.
	 *
	 * Note: Either `indexName` or `federationName` must be provided, but not both.
	 */
	indexName?: string;
	/**
	 * Name of the Searchcraft federation to search across multiple indices. Federation search allows you to search across all indices defined in a federation with a single query.
	 *
	 * Note: Either `indexName` or `federationName` must be provided, but not both.
	 */
	federationName?: string;
	/**
	 * The initial search query to call when Searchcraft is first initialized in your front-end application. This parameter can be used when you want to populate a page with an initial set of search results based on a query.
	 *
	 * This value is a stringified Search query object. For a more in-depth reference on search queries, see the [search endpoint documentation](https://docs.searchcraft.io/api/search/).
	 */
	initialQuery?: string;
	/**
	 * The maximum number of documents to return per page of results.
	 */
	searchResultsPerPage?: number;
	/**
	 * @deprecated Summary requests now use `endpointURL` and `indexName`. This field is ignored by current SDK summary requests.
	 */
	cortexURL?: string;
	/**
	 * @deprecated Summary prompt instructions are configured server-side on the index. This field is ignored by the engine summary endpoint.
	 */
	summaryInstructionsPrompt?: string;
	/**
	 * The amount of delay, in milliseconds, to debounce summary requests. Defaults to `1000`
	 */
	summaryDebounceDelay?: number;
	/**
	 * Name of the ad source to use.
	 */
	searchDebounceDelay?: number;
	/**
	 * A unique user identifier for end users of your product. This would typically correspond to a user id
	 * in your consuming application's database. Used for data analysis and visualizations on Vektron.
	 */
	measureUserIdentifier?: string;
	/**
	 * This object allows you to configure the quantity, number, template, and positioning of custom ad containers within your search results.
	 *
	 * To see more information on how to configure custom ads, see [the custom ads guide](https://docs.searchcraft.io/sdks/javascript/custom-ads/)
	 */
	customAdConfig?: CustomAdConfig;
	nativoConfig?: NativoAdConfig;
	admAdConfig?: ADMAdConfig;
}
/**
 * Used internally by consuming packages as part of the core sdk constructor.
 */
export interface SearchcraftSDKInfo {
	sdkName: string;
	sdkVersion: string;
}
export interface FacetPathsForIndexField {
	fieldName: string;
	value: string;
}
export interface RangeValueForIndexField {
	fieldName: string;
	value: string;
}
export interface SearchClientQuery {
	occur?: "must" | "should";
	exact?: {
		ctx: string;
	};
	fuzzy?: {
		ctx: string;
	};
}
export type SearchClientRequest = {
	limit?: number;
	offset?: number;
	order_by?: string;
	sort?: "asc" | "desc";
	query: SearchClientQuery[];
};
export interface SearchClientRequestProperties {
	/**
	 * 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 | null;
	/**
	 * The search term provided by the user.
	 */
	searchTerm: string;
	/**
	 * The sort order, which can be either 'asc' or 'desc'.
	 * Optional parameter.
	 */
	sort?: "asc" | "desc" | null;
	/**
	 * The facet path value(s) specified by the `facets` filter items that the `searchcraft-filter-panel` renders.
	 * There may be multiple rendered within a single filter panel.
	 * Optional parameter.
	 */
	facetPathsForIndexFields?: Record<string, FacetPathsForIndexField>;
	/**
	 * The date range slider value(s) specified by the `dateRange` filter items that the `searchcraft-filter-panel` renders.
	 * There may be multiple rendered within a single filter panel.
	 * Optional parameter.
	 */
	rangeValueForIndexFields?: Record<string, RangeValueForIndexField>;
}
/**
 * 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?: SearchIndexHit[];
	time_taken?: number;
}
/**
 * Represents an entry in the search index returned as part of a search result.
 */
export interface SearchIndexHit {
	doc?: SearchDocument;
	document_id?: string;
	score?: number;
	source_index?: string;
}
/**
 * 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;
	source_index?: string;
}
export interface SubscriptionEventMap {
	ad_container_rendered: AdContainerRenderedSubscriptionEvent;
	ad_container_viewed: AdContainerViewedSubscriptionEvent;
	query_fetched: QueryFetchedEvent;
	query_submitted: QuerySubmittedEvent;
	initialized: InitializedEvent;
	input_cleared: InputClearedEvent;
	no_results_returned: NoResultsReturnedEvent;
}
export interface AdContainerRenderedSubscriptionEvent extends SubscriptionEvent {
	name: "ad_container_rendered";
	data: {
		adContainerId: string;
		searchTerm: string;
	};
}
export interface AdContainerViewedSubscriptionEvent extends SubscriptionEvent {
	name: "ad_container_viewed";
	data: {
		adContainerId: string;
		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 interface InitializedEvent extends SubscriptionEvent {
	name: "initialized";
}
export type SubscriptionEventName = keyof SubscriptionEventMap;
export type SubscriptionEventCallback<T extends SubscriptionEventName> = (event: SubscriptionEventMap[T]) => void;
export type UnsubscribeFunction = () => void;
export interface SubscriptionEvent {
	name: SubscriptionEventName;
}
declare class AdClient {
	config: SearchcraftConfig;
	constructor(config: SearchcraftConfig);
	getAds(_properties: SearchClientRequestProperties): Promise<AdClientResponseItem[]>;
	onQuerySubmitted(_properties: SearchClientRequestProperties): Promise<void>;
	onQueryFetched(_properties: SearchClientRequestProperties, _response: SearchcraftResponse): Promise<void>;
	onInputCleared(): Promise<void>;
	onAdContainerRendered(_data: {
		adClientResponseItem?: AdClientResponseItem;
		adContainerId: string;
		searchTerm: string;
	}): Promise<void>;
	onAdContainerViewed(_data: {
		adClientResponseItem?: AdClientResponseItem;
		adContainerId: string;
		searchTerm: string;
	}): Promise<void>;
}
declare class MeasureClient {
	private measureRequestTimeout;
	private measureRequestsBatched;
	private config;
	private sdkInfo;
	private userId;
	private userType;
	sessionId: string;
	constructor(config: SearchcraftConfig, sdkInfo: SearchcraftSDKInfo, userId: string, userType: "authenticated" | "anonymous");
	/**
	 * 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>) => Promise<void>;
}
declare class SearchClient {
	private config;
	private userId;
	private parent;
	private searchCompletedEventTimeout;
	private abortController;
	private supplementalAbortController;
	constructor(parent: SearchcraftCore, config: SearchcraftConfig, userId: string);
	/**
	 * Getter for the base url used by the /search endpoint.
	 * Supports both index and federation search endpoints.
	 */
	private get baseSearchUrl();
	/**
	 * Immediately cancels all pending search requests.
	 */
	abortRequests: () => void;
	/**
	 * Make the request to get the search results.
	 * @param {properties} properties - The properties for the search.
	 * @param isSupplemental - Whether or not this is a supplemental search request (for the purpose of getting top-level facet counts)
	 * @returns
	 */
	getSearchResponseItems: (properties: SearchClientRequestProperties | string, isSupplemental?: boolean) => Promise<SearchcraftResponse>;
	private handleGetSearchResponseItemsWithString;
	private handleGetSearchResponseItemsWithObject;
	/**
	 * Builds a query object for the SearchClient request.
	 * @param {properties} properties - The properties for the search.
	 * @returns {SearchClientQuery} - A properly formatted SearchClient query object.
	 */
	private formatParamsForRequest;
}
declare class SummaryClient {
	private set;
	private get;
	private abortController;
	private timeout;
	private hasWarnedAboutDeprecatedCortexURL;
	constructor(get: SearchcraftStore["getState"], set: SearchcraftStore["setState"]);
	streamSummaryData(requestProperties: SearchClientRequestProperties | string): void;
	private setSummaryUnavailable;
	private warnIfUsingDeprecatedCortexURL;
	private buildSearchClientRequest;
	private formatParamsForRequest;
	private processSseBuffer;
	private handleSseFrame;
	private parseSseFrame;
}
/**
 * Callable functions made available by the SearchcraftStore.
 */
export interface SearchcraftStateFunctions {
	addFacetPathsForIndexField: (field: FacetPathsForIndexField) => void;
	addRangeValueForIndexField: (field: RangeValueForIndexField) => void;
	removeFacetPathsForIndexField: (fieldName: string) => void;
	removeRangeValueForIndexField: (fieldName: string) => void;
	resetSearchValues: () => void;
	search: (options?: {
		skipSummary?: boolean;
	}) => Promise<void>;
	setFilterPanelVisibility: (isVisible: boolean) => void;
	setPopoverVisibility: (isVisible: boolean) => void;
	setSearchResultsCount: (count: number) => void;
	setSearchResultsPage: (page: number) => void;
	setSearchResultsPerPage: (perPage: number) => void;
	setSearchTerm: (searchTerm: string) => void;
	setSearchMode: (mode: "fuzzy" | "exact") => void;
	setSortOrder: (props: {
		orderByField: string | null;
		sortType: "asc" | "desc" | null;
	}) => void;
	setHotKeyAndHotKeyModifier: (hotkey?: string, hotkeyModifier?: "ctrl" | "meta" | "alt" | "option") => void;
}
/**
 * Values stored in SearchcraftStore.
 */
export interface SearchcraftStateValues {
	adClientResponseItems: AdClientResponseItem[];
	cachedAdClientResponseItems: AdClientResponseItem[];
	core: SearchcraftCore | undefined;
	hotkey: string;
	hotkeyModifier: "ctrl" | "meta" | "alt" | "option";
	facetPathsForIndexFields: Record<string, FacetPathsForIndexField>;
	isFilterPanelVisible: boolean;
	isPopoverVisible: boolean;
	isSearchInProgress: boolean;
	rangeValueForIndexFields: Record<string, RangeValueForIndexField>;
	searchMode: "fuzzy" | "exact";
	searchClientRequest?: SearchClientRequest;
	searchClientRequestProperties: SearchClientRequestProperties | string | undefined | null;
	searchClientResponseItems: SearchClientResponseItem[];
	cachedSearchClientResponseItems: SearchClientResponseItem[];
	cachedSearchResponseFacetPrime: FacetPrime | undefined | null;
	cachedSupplementalFacetPrime: FacetPrime | undefined | null;
	cachedSearchResponseTimeTaken: number | undefined;
	cachedSearchResultsCount: number | undefined;
	cachedSearchClientRequestProperties: SearchClientRequestProperties | string | undefined | null;
	searchResponseTimeTaken: number | undefined;
	searchResponseFacetPrime: FacetPrime | undefined | null;
	supplementalFacetPrime: FacetPrime | undefined | null;
	searchResultsCount: number;
	searchResultsPage: number;
	searchResultsPerPage: number;
	searchTerm: string;
	orderByField: string | undefined | null;
	sortType: "asc" | "desc" | undefined | null;
	summary: string;
	summaryErrorMessage: string;
	hasSummaryBox: boolean;
	isSummaryLoading: boolean;
	summaryClient?: SummaryClient;
	isSummaryNotEnabled: boolean;
}
export interface SearchcraftState extends SearchcraftStateFunctions, SearchcraftStateValues {
}
export type SearchcraftStore = StoreApi<SearchcraftState>;
/**
 * Javascript Class providing the functionality to interact with the Searchcraft BE
 */
export declare class SearchcraftCore {
	store: SearchcraftStore;
	config: SearchcraftConfig;
	measureClient: MeasureClient | undefined;
	searchClient: SearchClient | undefined;
	adClient: AdClient | undefined;
	userId: string;
	userType: "authenticated" | "anonymous";
	private requestTimeout;
	private subscriptionEvents;
	/**
	 * @param config The SearchcraftConfig object for this Searchcraft instance.
	 * @param sdkInfo The SDK info object for this searchcraft instance
	 * @param searchcraftId The identifier to use to reference this instance of SearchcraftCore.
	 */
	constructor(config: SearchcraftConfig, sdkInfo: SearchcraftSDKInfo, searchcraftId: string | undefined);
	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;
		searchTerm: string;
	}): void;
	/**
	 * Called when a `<searchcraft-ad>` is viewed
	 */
	handleAdContainerViewed(data: {
		adClientResponseItem?: AdClientResponseItem;
		adContainerId: string;
		searchTerm: string;
	}): void;
	/**
	 * Perform various actions when the input is cleared
	 */
	handleInputCleared(): void;
	getResponseItems: (props: {
		requestProperties: SearchClientRequestProperties | string;
		shouldCacheResultsForEmptyState: boolean;
	}) => void;
}
export type SearchcraftSelectOption = {
	label: string;
	value: string | number;
	selected?: boolean;
};
export namespace Components {
	/**
	 * An inline ad meant to be rendered in a list of search results.
	 */
	interface SearchcraftAd {
		"adClientResponseItem"?: AdClientResponseItem;
		/**
		  * @default 'Custom'
		 */
		"adSource": "Custom" | "Nativo" | "adMarketplace";
		/**
		  * Where the ad is being rendered within the search results div. Lifecycle behavior differs for ads being rendered in different positions, so we need to be able to handle all of those cases.
		  * @default 'interstitial'
		 */
		"renderPosition": "interstitial" | "top" | "bottom";
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
	}
	/**
	 * This web component represents a button.
	 * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.
	 */
	interface SearchcraftButton {
		/**
		  * Whether the button is disabled.
		  * @default false
		 */
		"disabled"?: boolean;
		/**
		  * Controls the visual representation of the button.
		  * @default 'primary'
		 */
		"hierarchy"?: "primary" | "tertiary";
		/**
		  * The icon element.
		 */
		"icon"?: Element;
		/**
		  * Should the button only display an icon.
		  * @default false
		 */
		"iconOnly"?: boolean;
		/**
		  * The position of the icon.
		  * @default 'left'
		 */
		"iconPosition"?: "left" | "right";
		/**
		  * The label for the button.
		  * @default 'Search'
		 */
		"label": string;
		/**
		  * The type of the button.
		  * @default '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.
	 * @js-example ```html
	 * <searchcraft-error-message>
	 *   No search results found for query
	 * </searchcraft-error-message>
	 * ```
	 */
	interface SearchcraftErrorMessage {
	}
	/**
	 * 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`.
	 * @js-example ```html
	 * <!-- index.html -->
	 * <!-- Basic usage -->
	 * <searchcraft-facet-list field-name="title" />
	 * <!-- With collapsible section (initially closed) and view more threshold -->
	 * <searchcraft-facet-list
	 *   field-name="category"
	 *   initial-collapse-state="closed"
	 *   view-more-threshold="5"
	 * />
	 * <!-- Show all facets without "view more" link -->
	 * <searchcraft-facet-list
	 *   field-name="brand"
	 *   view-more-threshold="0"
	 * />
	 * ```
	 * ```js
	 * // index.js
	 * const facetList = document.querySelector('searchcraft-facet-list');
	 * facetList.addEventListener('facetSelectionUpdated', () => {
	 *   console.log('Facet selection updated');
	 * });
	 * // Programmatically toggle collapse state
	 * await facetList.handleCollapseToggle();
	 * ```
	 */
	interface SearchcraftFacetList {
		/**
		  * Array of facet values to exclude from rendering.
		 */
		"exclude"?: string[];
		/**
		  * The name of the field where facets are applied.
		  * @default ''
		 */
		"fieldName": string;
		/**
		  * Returns whether the facet section is currently collapsed.
		  * @returns A promise that resolves to true if collapsed, false if expanded.
		 */
		"getIsCollapsed": () => Promise<boolean>;
		/**
		  * Toggles the collapsed state of the facet section.
		  * @returns A promise that resolves when the toggle is complete.
		 */
		"handleCollapseToggle": () => Promise<void>;
		/**
		  * Initial collapse state of the facet section.
		  * @default 'open'
		 */
		"initialCollapseState"?: "open" | "closed";
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * The number of facets to show before displaying a "view more" link. Set to 0 to show all facets without a "view more" link.
		  * @default 8
		 */
		"viewMoreThreshold"?: number;
	}
	/**
	 * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
	 * @react-import ```jsx
	 * import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-filter-panel />
	 * ```
	 * ```js
	 * // index.js
	 * const filterPanel = document.querySelector('searchcraft-filter-panel');
	 * if (filterPanel) {
	 *   filterPanel.items = [];
	 * }
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftFilterPanel items={[]} />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftFilterPanel :items="[]" />
	 * ```
	 */
	interface SearchcraftFilterPanel {
		/**
		  * The items to filter.
		  * @default []
		 */
		"items": FilterItem[];
		/**
		  * Controls whether the filter panel automatically hides/shows based on window size. - 'auto': Automatically hide/show based on window width - 'manual': User controls visibility manually
		  * @default 'auto'
		 */
		"responsiveBehavior"?: "auto" | "manual";
		/**
		  * The breakpoint (in pixels) below which the filter panel will be hidden. Defaults to 768px (--sc-breakpoint-md).
		  * @default 768
		 */
		"responsiveBreakpoint"?: number;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
	}
	/**
	 * 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.
	 * @react-import ```jsx
	 * import { SearchcraftInputForm } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <searchcraft-input-form auto-search />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftInputForm autoSearch />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftInputForm autoSearch />
	 * ```
	 */
	interface SearchcraftInputForm {
		/**
		  * Whether or not to automatically submit the search term when the input changes.
		  * @default true
		 */
		"autoSearch"?: boolean;
		/**
		  * The label for the submit button.
		 */
		"buttonLabel"?: string;
		/**
		  * Where to place the search button.
		  * @default 'none'
		 */
		"buttonPlacement"?: "left" | "right" | "none";
		/**
		  * The label rendered above the input.
		 */
		"inputLabel"?: string;
		/**
		  * The placeholder's render behavior. 'hide-on-focus' - Hide the placeholder text immediately when the input form gains focus. 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.
		 */
		"placeholderBehavior"?: "hide-on-focus" | "hide-on-text-entered";
		/**
		  * The input element's placeholder value.
		  * @default 'Enter Search'
		 */
		"placeholderValue"?: string;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * The value to display in the input field.
		 */
		"value"?: string;
	}
	/**
	 * This web component serves as the input label for the searchcraft-input-form component.
	 * @js-example ```html
	 * <searchcraft-input-label label="Search" />
	 * ```
	 */
	interface SearchcraftInputLabel {
		/**
		  * The classname applied to the label element.
		  * @default ''
		 */
		"inputLabelClassName"?: string | undefined;
		/**
		  * @default ''
		 */
		"label": string;
	}
	/**
	 * Renders a loading spinner/loading state for use in things like the summary box.
	 */
	interface SearchcraftLoading {
		"label"?: string;
	}
	/**
	 * This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
	 * @react-import ```jsx
	 * import { SearchcraftPagination } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftPagination } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <searchcraft-pagination />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftPagination />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftPagination />
	 * ```
	 */
	interface SearchcraftPagination {
		/**
		  * The URL query string parameter name used to track the current page. When a user navigates to a URL that contains this parameter, the pagination component will automatically navigate to that page.
		  * @default "p"
		 */
		"pageQueryParam": string;
		/**
		  * Whether to scroll to the top of the search results when pagination buttons are clicked.
		  * @default true
		 */
		"scrollToTop"?: boolean;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * Whether to use a query string parameter to track and restore the current page. Set to `false` to disable query string synchronisation entirely.
		  * @default true
		 */
		"usePageQueryParam": boolean;
	}
	/**
	 * Renders a button which, when clicked, turns on popover visibility.
	 * @react-import ```jsx
	 * import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
	 * ````
	 * @vue-import ```jsx
	 * import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-popover-button>
	 *   Open popover
	 * </searchcraft-popover-button>
	 * ```
	 * ```js
	 * // index.js
	 * const popoverButton = document.querySelector('searchcraft-popover-button');
	 * popoverButton.template = ({ isPopoverVisible }, { html }) => html`
	 *   <span>Click me</span>
	 * `;
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftPopoverButton
	 *   template={({ isPopoverVisible }, { html }) => html`
	 *     <span>Click me</span>
	 *   `}
	 * >
	 *   Open popover
	 * </SearchcraftPopoverButton>
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftPopoverButton
	 *   :template={({ isPopoverVisible }, { html }) => html`
	 *     <span>Click me</span>
	 *   `}
	 * >
	 *   Open popover
	 * </SearchcraftPopoverButton>
	 * ```
	 */
	interface SearchcraftPopoverButton {
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * A callback function responsible for rendering the button contents.
		 */
		"template"?: PopoverButtonTemplate;
		/**
		  * The type of popover button to render.
		 */
		"type"?: "skeuomorphic" | "magnifying-glass";
	}
	/**
	 * Renders the footer for the searchcraft-popover-form.
	 */
	interface SearchcraftPopoverFooter {
		/**
		  * The SDK variant used to render this component. Used for UTM attribution. This isn't exposed for developer consumption, it's set automatically.
		  * @default 'js'
		 */
		"sdkVariant"?: "js" | "react" | "vue";
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * Optional href for the "View all" button.
		 */
		"viewAllResultsHref"?: string;
		/**
		  * Optional label for the "View all" button.
		 */
		"viewAllResultsLabel"?: string;
	}
	/**
	 * 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.
	 * @react-import ```jsx
	 * import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-popover-form type="inline" />
	 * ```
	 * ```js
	 * // index.js
	 * const popoverForm = document.querySelector('searchcraft-popover-form');
	 * popoverForm.popoverResultMappings = {};
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftPopoverForm type="inline" popoverResultMappings={[]} />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftPopoverForm type="inline" :popoverResultMappings="[]"" />
	 * ```
	 */
	interface SearchcraftPopoverForm {
		/**
		  * The hotkey that activates the popover.
		  * @default 'k'
		 */
		"hotkey"?: string;
		/**
		  * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.
		  * @default 'meta'
		 */
		"hotkeyModifier"?: "ctrl" | "meta" | "alt" | "option";
		/**
		  * The placeholder's render behavior. 'hide-on-focus' - Hide the placeholder text immediately when the input form gains focus. 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.
		 */
		"placeholderBehavior"?: "hide-on-focus" | "hide-on-text-entered";
		/**
		  * The input element's placeholder value.
		  * @default 'Enter Search'
		 */
		"placeholderValue"?: string;
		/**
		  * Formats the content rendered for each result.
		 */
		"popoverResultMappings"?: PopoverResultMappings;
		/**
		  * The SDK variant used to render this component. Used for UTM attribution on the footer link.
		  * @default 'js'
		 */
		"sdkVariant"?: "js" | "react" | "vue";
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * Whether to display the AI generative summary box before the search results. NOTE: This requires the usage of a read key that has "SUMMARY" permissions and either a subscription to Searchcraft Cloud with AI features enabled or a self-hosted model connected.
		  * @default false
		 */
		"showSummaryBox"?: boolean;
		/**
		  * 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.
		  * @default 'inline'
		 */
		"type"?: "inline" | "fullscreen" | "modal";
		/**
		  * Base URL for the "View all" footer link. The current search term will be appended (URL encoded).  For example, in a CMS-backed site you might set this to `/?s=` so the final URL becomes `/?s=<search-term>`.
		 */
		"viewAllResultsBaseUrl"?: string;
		/**
		  * Optional label for the "View All" footer button. Defaults to "View All".
		 */
		"viewAllResultsLabel"?: string;
	}
	/**
	 * A single list item rendered in a searchcraft-popover-list-view.
	 */
	interface SearchcraftPopoverListItem {
		/**
		  * The document position relative to the search results (For Measure)
		  * @default 0
		 */
		"documentPosition": number;
		"item": SearchClientResponseItem | undefined;
		"popoverResultMappings": PopoverResultMappings | undefined;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
	}
	/**
	 * This web component is designed to display a list of results within a popover interface.
	 * It is consumed within the `searchcraft-popover-form` component.
	 * @js-example ```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;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
	}
	/**
	 * This web component is designed to display the number of results returned from a search query.
	 * @react-import ```jsx
	 * import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-results-info />
	 * ```
	 * ```js
	 * // index.js
	 * const resultsInfo = document.querySelector('searchcraft-results-info');
	 * resultsInfo.template = (info, { html }) => html`
	 *   ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
	 * `;
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftResultsInfo
	 *   template={(info, { html }) => html`
	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
	 *   `}
	 * />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftResultsInfo
	 *   :template={(info, { html }) => html`
	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
	 *   `}
	 * />
	 * ```
	 */
	interface SearchcraftResultsInfo {
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * A callback function responsible for rendering the results info.
		 */
		"template"?: ResultsInfoTemplate;
	}
	/**
	 * This component renders a results summary for RAG search result summaries.
	 * When the user makes a search, a network call is made to retrieve the summary content, which is then
	 * rendered in this box.
	 * NOTE: This component requires the usage of a read key that has "SUMMARY" permissions.
	 * @react-import ```jsx
	 * import { SearchcraftResultsSummary } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```ts
	 * import { SearchcraftResultsSummary } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <searchcraft-results-summary />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftResultsSummary />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftResultsSummary />
	 * ```
	 */
	interface SearchcraftResultsSummary {
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
	}
	/**
	 * 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.
	 */
	interface SearchcraftSearchResult {
		/**
		  * The position in the document. Used with the "document_clicked" measure event.
		  * @default 0
		 */
		"documentPosition": number;
		/**
		  * The index.
		 */
		"index": number;
		"item"?: SearchClientResponseItem;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * A callback function responsible for rendering a result.
		 */
		"template"?: SearchResultTemplate<SearchResultTemplateData>;
	}
	/**
	 * 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.
	 * @react-import ```jsx
	 * import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftSearchResults } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-search-results
	 *   ad-interval="4"
	 *   place-ad-at-start="true"
	 * />
	 * ```
	 * ```js
	 * // index.js
	 * const searchResults = document.querySelector('searchcraft-search-results');
	 * searchResults.template = (item, index, { html }) => html`
	 *  <h2>${item.title}</h2>
	 * `;
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftSearchResults
	 *   adInterval={4}
	 *   placeAdAtState={true}
	 *   template={(item, index, { html }) => html`
	 *     <h2>${item.title}</h2>
	 *   `}
	 * />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftSearchResults
	 *   adInterval={4}
	 *   placeAdAtState={true}
	 *   :template={(item, index, { html }) => html`
	 *     <h2>${item.title}</h2>
	 *   `}
	 * />
	 * ```
	 */
	interface SearchcraftSearchResults {
		/**
		  * A query that will appears when the component initializes or the search term is ''..
		 */
		"initialQuery"?: string;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * A callback function responsible for rendering a result. Passed to `searchcraft-search-result`.
		 */
		"template"?: SearchResultTemplate<SearchResultTemplateData>;
	}
	/**
	 * This web component is designed to choose the number of search results displayed.
	 * @react-import ```jsx
	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-search-results-per-page increment="20" />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftSearchResultsPerPage increment={20} />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftSearchResultsPerPage increment="20" />
	 * ```
	 */
	interface SearchcraftSearchResultsPerPage {
		/**
		  * 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.
		  * @default 20
		 */
		"increment": string | number;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
	}
	/**
	 * This web component is designed to allow users to select between a group of options.
	 * @js-example ```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;
		/**
		  * Whether the select input is disabled.
		  * @default false
		 */
		"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.
		  * @default []
		 */
		"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.
	 */
	interface SearchcraftSlider {
		/**
		  * The type of data the sliders are using.
		  * @default 'number'
		 */
		"dataType": "number" | "date";
		/**
		  * The date granularity to use. Used to format date labels.
		 */
		"dateGranularity"?: "year" | "month" | "day" | "hour";
		/**
		  * The maximum value allowed.
		  * @default 100
		 */
		"max": number;
		/**
		  * The minimum value allowed.
		  * @default 0
		 */
		"min": number;
		/**
		  * The step amount for the slider inputs.
		  * @default 1
		 */
		"step": number;
	}
	/**
	 * @deprecated Use `searchcraft-results-summary` instead.
	 * This component is deprecated and will be removed in a future version.
	 * Please update to use `searchcraft-results-summary` which has the same functionality.
	 * This component renders a summary box for RAG search result summaries.
	 * When the user makes a search, a network call is made to retrieve the summary content, which is then
	 * rendered in this box.
	 * NOTE: This component requires the usage of a read key that has "SUMMARY" permissions.
	 * @react-import ```jsx
	 * import { SearchcraftSummaryBox } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftSummaryBox } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <searchcraft-summary-box />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftSummaryBox />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftSummaryBox />
	 * ```
	 */
	interface SearchcraftSummaryBox {
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
	}
	/**
	 * This web component adds 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.'
	 * @react-import ```jsx
	 * import { SearchcraftTheme } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftTheme } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <searchcraft-theme />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftTheme />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftTheme />
	 * ```
	 */
	interface SearchcraftTheme {
	}
	/**
	 * This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.
	 */
	interface SearchcraftToggleButton {
		/**
		  * The label.
		  * @default 'Toggle'
		 */
		"label": string;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: 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;
	};
	interface HTMLSearchcraftButtonElementEventMap {
		"buttonClick": void;
	}
	/**
	 * This web component represents a button.
	 * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.
	 */
	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.
	 * @js-example ```html
	 * <searchcraft-error-message>
	 *   No search results found for query
	 * </searchcraft-error-message>
	 * ```
	 */
	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`.
	 * @js-example ```html
	 * <!-- index.html -->
	 * <!-- Basic usage -->
	 * <searchcraft-facet-list field-name="title" />
	 * <!-- With collapsible section (initially closed) and view more threshold -->
	 * <searchcraft-facet-list
	 *   field-name="category"
	 *   initial-collapse-state="closed"
	 *   view-more-threshold="5"
	 * />
	 * <!-- Show all facets without "view more" link -->
	 * <searchcraft-facet-list
	 *   field-name="brand"
	 *   view-more-threshold="0"
	 * />
	 * ```
	 * ```js
	 * // index.js
	 * const facetList = document.querySelector('searchcraft-facet-list');
	 * facetList.addEventListener('facetSelectionUpdated', () => {
	 *   console.log('Facet selection updated');
	 * });
	 * // Programmatically toggle collapse state
	 * await facetList.handleCollapseToggle();
	 * ```
	 */
	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.
	 * @react-import ```jsx
	 * import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-filter-panel />
	 * ```
	 * ```js
	 * // index.js
	 * const filterPanel = document.querySelector('searchcraft-filter-panel');
	 * if (filterPanel) {
	 *   filterPanel.items = [];
	 * }
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftFilterPanel items={[]} />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftFilterPanel :items="[]" />
	 * ```
	 */
	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.
	 * @react-import ```jsx
	 * import { SearchcraftInputForm } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <searchcraft-input-form auto-search />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftInputForm autoSearch />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftInputForm autoSearch />
	 * ```
	 */
	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.
	 * @js-example ```html
	 * <searchcraft-input-label label="Search" />
	 * ```
	 */
	interface HTMLSearchcraftInputLabelElement extends Components.SearchcraftInputLabel, HTMLStencilElement {
	}
	var HTMLSearchcraftInputLabelElement: {
		prototype: HTMLSearchcraftInputLabelElement;
		new (): HTMLSearchcraftInputLabelElement;
	};
	/**
	 * Renders a loading spinner/loading state for use in things like the summary box.
	 */
	interface HTMLSearchcraftLoadingElement extends Components.SearchcraftLoading, HTMLStencilElement {
	}
	var HTMLSearchcraftLoadingElement: {
		prototype: HTMLSearchcraftLoadingElement;
		new (): HTMLSearchcraftLoadingElement;
	};
	/**
	 * This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
	 * @react-import ```jsx
	 * import { SearchcraftPagination } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftPagination } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <searchcraft-pagination />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftPagination />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftPagination />
	 * ```
	 */
	interface HTMLSearchcraftPaginationElement extends Components.SearchcraftPagination, HTMLStencilElement {
	}
	var HTMLSearchcraftPaginationElement: {
		prototype: HTMLSearchcraftPaginationElement;
		new (): HTMLSearchcraftPaginationElement;
	};
	/**
	 * Renders a button which, when clicked, turns on popover visibility.
	 * @react-import ```jsx
	 * import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
	 * ````
	 * @vue-import ```jsx
	 * import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-popover-button>
	 *   Open popover
	 * </searchcraft-popover-button>
	 * ```
	 * ```js
	 * // index.js
	 * const popoverButton = document.querySelector('searchcraft-popover-button');
	 * popoverButton.template = ({ isPopoverVisible }, { html }) => html`
	 *   <span>Click me</span>
	 * `;
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftPopoverButton
	 *   template={({ isPopoverVisible }, { html }) => html`
	 *     <span>Click me</span>
	 *   `}
	 * >
	 *   Open popover
	 * </SearchcraftPopoverButton>
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftPopoverButton
	 *   :template={({ isPopoverVisible }, { html }) => html`
	 *     <span>Click me</span>
	 *   `}
	 * >
	 *   Open popover
	 * </SearchcraftPopoverButton>
	 * ```
	 */
	interface HTMLSearchcraftPopoverButtonElement extends Components.SearchcraftPopoverButton, HTMLStencilElement {
	}
	var HTMLSearchcraftPopoverButtonElement: {
		prototype: HTMLSearchcraftPopoverButtonElement;
		new (): HTMLSearchcraftPopoverButtonElement;
	};
	/**
	 * Renders the footer for the searchcraft-popover-form.
	 */
	interface HTMLSearchcraftPopoverFooterElement extends Components.SearchcraftPopoverFooter, HTMLStencilElement {
	}
	var HTMLSearchcraftPopoverFooterElement: {
		prototype: HTMLSearchcraftPopoverFooterElement;
		new (): HTMLSearchcraftPopoverFooterElement;
	};
	/**
	 * 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.
	 * @react-import ```jsx
	 * import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-popover-form type="inline" />
	 * ```
	 * ```js
	 * // index.js
	 * const popoverForm = document.querySelector('searchcraft-popover-form');
	 * popoverForm.popoverResultMappings = {};
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftPopoverForm type="inline" popoverResultMappings={[]} />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftPopoverForm type="inline" :popoverResultMappings="[]"" />
	 * ```
	 */
	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.
	 * @js-example ```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.
	 * @react-import ```jsx
	 * import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-results-info />
	 * ```
	 * ```js
	 * // index.js
	 * const resultsInfo = document.querySelector('searchcraft-results-info');
	 * resultsInfo.template = (info, { html }) => html`
	 *   ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
	 * `;
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftResultsInfo
	 *   template={(info, { html }) => html`
	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
	 *   `}
	 * />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftResultsInfo
	 *   :template={(info, { html }) => html`
	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
	 *   `}
	 * />
	 * ```
	 */
	interface HTMLSearchcraftResultsInfoElement extends Components.SearchcraftResultsInfo, HTMLStencilElement {
	}
	var HTMLSearchcraftResultsInfoElement: {
		prototype: HTMLSearchcraftResultsInfoElement;
		new (): HTMLSearchcraftResultsInfoElement;
	};
	/**
	 * This component renders a results summary for RAG search result summaries.
	 * When the user makes a search, a network call is made to retrieve the summary content, which is then
	 * rendered in this box.
	 * NOTE: This component requires the usage of a read key that has "SUMMARY" permissions.
	 * @react-import ```jsx
	 * import { SearchcraftResultsSummary } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```ts
	 * import { SearchcraftResultsSummary } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <searchcraft-results-summary />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftResultsSummary />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftResultsSummary />
	 * ```
	 */
	interface HTMLSearchcraftResultsSummaryElement extends Components.SearchcraftResultsSummary, HTMLStencilElement {
	}
	var HTMLSearchcraftResultsSummaryElement: {
		prototype: HTMLSearchcraftResultsSummaryElement;
		new (): HTMLSearchcraftResultsSummaryElement;
	};
	/**
	 * 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.
	 */
	interface HTMLSearchcraftSearchResultElement extends Components.SearchcraftSearchResult, HTMLStencilElement {
	}
	var HTMLSearchcraftSearchResultElement: {
		prototype: HTMLSearchcraftSearchResultElement;
		new (): HTMLSearchcraftSearchResultElement;
	};
	/**
	 * 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.
	 * @react-import ```jsx
	 * import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftSearchResults } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-search-results
	 *   ad-interval="4"
	 *   place-ad-at-start="true"
	 * />
	 * ```
	 * ```js
	 * // index.js
	 * const searchResults = document.querySelector('searchcraft-search-results');
	 * searchResults.template = (item, index, { html }) => html`
	 *  <h2>${item.title}</h2>
	 * `;
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftSearchResults
	 *   adInterval={4}
	 *   placeAdAtState={true}
	 *   template={(item, index, { html }) => html`
	 *     <h2>${item.title}</h2>
	 *   `}
	 * />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftSearchResults
	 *   adInterval={4}
	 *   placeAdAtState={true}
	 *   :template={(item, index, { html }) => html`
	 *     <h2>${item.title}</h2>
	 *   `}
	 * />
	 * ```
	 */
	interface HTMLSearchcraftSearchResultsElement extends Components.SearchcraftSearchResults, HTMLStencilElement {
	}
	var HTMLSearchcraftSearchResultsElement: {
		prototype: HTMLSearchcraftSearchResultsElement;
		new (): HTMLSearchcraftSearchResultsElement;
	};
	/**
	 * This web component is designed to choose the number of search results displayed.
	 * @react-import ```jsx
	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-search-results-per-page increment="20" />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftSearchResultsPerPage increment={20} />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftSearchResultsPerPage 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.
	 * @js-example ```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.
	 */
	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;
	};
	/**
	 * @deprecated Use `searchcraft-results-summary` instead.
	 * This component is deprecated and will be removed in a future version.
	 * Please update to use `searchcraft-results-summary` which has the same functionality.
	 * This component renders a summary box for RAG search result summaries.
	 * When the user makes a search, a network call is made to retrieve the summary content, which is then
	 * rendered in this box.
	 * NOTE: This component requires the usage of a read key that has "SUMMARY" permissions.
	 * @react-import ```jsx
	 * import { SearchcraftSummaryBox } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftSummaryBox } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <searchcraft-summary-box />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftSummaryBox />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftSummaryBox />
	 * ```
	 */
	interface HTMLSearchcraftSummaryBoxElement extends Components.SearchcraftSummaryBox, HTMLStencilElement {
	}
	var HTMLSearchcraftSummaryBoxElement: {
		prototype: HTMLSearchcraftSummaryBoxElement;
		new (): HTMLSearchcraftSummaryBoxElement;
	};
	/**
	 * This web component adds 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.'
	 * @react-import ```jsx
	 * import { SearchcraftTheme } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftTheme } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <searchcraft-theme />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftTheme />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftTheme />
	 * ```
	 */
	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.
	 */
	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-button": HTMLSearchcraftButtonElement;
		"searchcraft-error-message": HTMLSearchcraftErrorMessageElement;
		"searchcraft-facet-list": HTMLSearchcraftFacetListElement;
		"searchcraft-filter-panel": HTMLSearchcraftFilterPanelElement;
		"searchcraft-input-form": HTMLSearchcraftInputFormElement;
		"searchcraft-input-label": HTMLSearchcraftInputLabelElement;
		"searchcraft-loading": HTMLSearchcraftLoadingElement;
		"searchcraft-pagination": HTMLSearchcraftPaginationElement;
		"searchcraft-popover-button": HTMLSearchcraftPopoverButtonElement;
		"searchcraft-popover-footer": HTMLSearchcraftPopoverFooterElement;
		"searchcraft-popover-form": HTMLSearchcraftPopoverFormElement;
		"searchcraft-popover-list-item": HTMLSearchcraftPopoverListItemElement;
		"searchcraft-popover-list-view": HTMLSearchcraftPopoverListViewElement;
		"searchcraft-results-info": HTMLSearchcraftResultsInfoElement;
		"searchcraft-results-summary": HTMLSearchcraftResultsSummaryElement;
		"searchcraft-search-result": HTMLSearchcraftSearchResultElement;
		"searchcraft-search-results": HTMLSearchcraftSearchResultsElement;
		"searchcraft-search-results-per-page": HTMLSearchcraftSearchResultsPerPageElement;
		"searchcraft-select": HTMLSearchcraftSelectElement;
		"searchcraft-slider": HTMLSearchcraftSliderElement;
		"searchcraft-summary-box": HTMLSearchcraftSummaryBoxElement;
		"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;
		/**
		  * @default 'Custom'
		 */
		"adSource"?: "Custom" | "Nativo" | "adMarketplace";
		/**
		  * Where the ad is being rendered within the search results div. Lifecycle behavior differs for ads being rendered in different positions, so we need to be able to handle all of those cases.
		  * @default 'interstitial'
		 */
		"renderPosition"?: "interstitial" | "top" | "bottom";
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
	}
	/**
	 * This web component represents a button.
	 * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.
	 */
	interface SearchcraftButton {
		/**
		  * Whether the button is disabled.
		  * @default false
		 */
		"disabled"?: boolean;
		/**
		  * Controls the visual representation of the button.
		  * @default 'primary'
		 */
		"hierarchy"?: "primary" | "tertiary";
		/**
		  * The icon element.
		 */
		"icon"?: Element;
		/**
		  * Should the button only display an icon.
		  * @default false
		 */
		"iconOnly"?: boolean;
		/**
		  * The position of the icon.
		  * @default 'left'
		 */
		"iconPosition"?: "left" | "right";
		/**
		  * The label for the button.
		  * @default 'Search'
		 */
		"label"?: string;
		/**
		  * The event fired when the button is clicked.
		 */
		"onButtonClick"?: (event: SearchcraftButtonCustomEvent<void>) => void;
		/**
		  * The type of the button.
		  * @default '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.
	 * @js-example ```html
	 * <searchcraft-error-message>
	 *   No search results found for query
	 * </searchcraft-error-message>
	 * ```
	 */
	interface SearchcraftErrorMessage {
	}
	/**
	 * 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`.
	 * @js-example ```html
	 * <!-- index.html -->
	 * <!-- Basic usage -->
	 * <searchcraft-facet-list field-name="title" />
	 * <!-- With collapsible section (initially closed) and view more threshold -->
	 * <searchcraft-facet-list
	 *   field-name="category"
	 *   initial-collapse-state="closed"
	 *   view-more-threshold="5"
	 * />
	 * <!-- Show all facets without "view more" link -->
	 * <searchcraft-facet-list
	 *   field-name="brand"
	 *   view-more-threshold="0"
	 * />
	 * ```
	 * ```js
	 * // index.js
	 * const facetList = document.querySelector('searchcraft-facet-list');
	 * facetList.addEventListener('facetSelectionUpdated', () => {
	 *   console.log('Facet selection updated');
	 * });
	 * // Programmatically toggle collapse state
	 * await facetList.handleCollapseToggle();
	 * ```
	 */
	interface SearchcraftFacetList {
		/**
		  * Array of facet values to exclude from rendering.
		 */
		"exclude"?: string[];
		/**
		  * The name of the field where facets are applied.
		  * @default ''
		 */
		"fieldName"?: string;
		/**
		  * Initial collapse state of the facet section.
		  * @default 'open'
		 */
		"initialCollapseState"?: "open" | "closed";
		/**
		  * Emitted when the facets are updated.
		 */
		"onFacetSelectionUpdated"?: (event: SearchcraftFacetListCustomEvent<{
			paths: string[];
		}>) => void;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * The number of facets to show before displaying a "view more" link. Set to 0 to show all facets without a "view more" link.
		  * @default 8
		 */
		"viewMoreThreshold"?: number;
	}
	/**
	 * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
	 * @react-import ```jsx
	 * import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-filter-panel />
	 * ```
	 * ```js
	 * // index.js
	 * const filterPanel = document.querySelector('searchcraft-filter-panel');
	 * if (filterPanel) {
	 *   filterPanel.items = [];
	 * }
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftFilterPanel items={[]} />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftFilterPanel :items="[]" />
	 * ```
	 */
	interface SearchcraftFilterPanel {
		/**
		  * The items to filter.
		  * @default []
		 */
		"items"?: FilterItem[];
		/**
		  * Controls whether the filter panel automatically hides/shows based on window size. - 'auto': Automatically hide/show based on window width - 'manual': User controls visibility manually
		  * @default 'auto'
		 */
		"responsiveBehavior"?: "auto" | "manual";
		/**
		  * The breakpoint (in pixels) below which the filter panel will be hidden. Defaults to 768px (--sc-breakpoint-md).
		  * @default 768
		 */
		"responsiveBreakpoint"?: number;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
	}
	/**
	 * 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.
	 * @react-import ```jsx
	 * import { SearchcraftInputForm } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <searchcraft-input-form auto-search />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftInputForm autoSearch />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftInputForm autoSearch />
	 * ```
	 */
	interface SearchcraftInputForm {
		/**
		  * Whether or not to automatically submit the search term when the input changes.
		  * @default true
		 */
		"autoSearch"?: boolean;
		/**
		  * The label for the submit button.
		 */
		"buttonLabel"?: string;
		/**
		  * Where to place the search button.
		  * @default 'none'
		 */
		"buttonPlacement"?: "left" | "right" | "none";
		/**
		  * 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 placeholder's render behavior. 'hide-on-focus' - Hide the placeholder text immediately when the input form gains focus. 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.
		 */
		"placeholderBehavior"?: "hide-on-focus" | "hide-on-text-entered";
		/**
		  * The input element's placeholder value.
		  * @default 'Enter Search'
		 */
		"placeholderValue"?: string;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * The value to display in the input field.
		 */
		"value"?: string;
	}
	/**
	 * This web component serves as the input label for the searchcraft-input-form component.
	 * @js-example ```html
	 * <searchcraft-input-label label="Search" />
	 * ```
	 */
	interface SearchcraftInputLabel {
		/**
		  * The classname applied to the label element.
		  * @default ''
		 */
		"inputLabelClassName"?: string | undefined;
		/**
		  * @default ''
		 */
		"label"?: string;
	}
	/**
	 * Renders a loading spinner/loading state for use in things like the summary box.
	 */
	interface SearchcraftLoading {
		"label"?: string;
	}
	/**
	 * This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
	 * @react-import ```jsx
	 * import { SearchcraftPagination } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftPagination } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <searchcraft-pagination />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftPagination />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftPagination />
	 * ```
	 */
	interface SearchcraftPagination {
		/**
		  * The URL query string parameter name used to track the current page. When a user navigates to a URL that contains this parameter, the pagination component will automatically navigate to that page.
		  * @default "p"
		 */
		"pageQueryParam"?: string;
		/**
		  * Whether to scroll to the top of the search results when pagination buttons are clicked.
		  * @default true
		 */
		"scrollToTop"?: boolean;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * Whether to use a query string parameter to track and restore the current page. Set to `false` to disable query string synchronisation entirely.
		  * @default true
		 */
		"usePageQueryParam"?: boolean;
	}
	/**
	 * Renders a button which, when clicked, turns on popover visibility.
	 * @react-import ```jsx
	 * import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
	 * ````
	 * @vue-import ```jsx
	 * import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-popover-button>
	 *   Open popover
	 * </searchcraft-popover-button>
	 * ```
	 * ```js
	 * // index.js
	 * const popoverButton = document.querySelector('searchcraft-popover-button');
	 * popoverButton.template = ({ isPopoverVisible }, { html }) => html`
	 *   <span>Click me</span>
	 * `;
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftPopoverButton
	 *   template={({ isPopoverVisible }, { html }) => html`
	 *     <span>Click me</span>
	 *   `}
	 * >
	 *   Open popover
	 * </SearchcraftPopoverButton>
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftPopoverButton
	 *   :template={({ isPopoverVisible }, { html }) => html`
	 *     <span>Click me</span>
	 *   `}
	 * >
	 *   Open popover
	 * </SearchcraftPopoverButton>
	 * ```
	 */
	interface SearchcraftPopoverButton {
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * A callback function responsible for rendering the button contents.
		 */
		"template"?: PopoverButtonTemplate;
		/**
		  * The type of popover button to render.
		 */
		"type"?: "skeuomorphic" | "magnifying-glass";
	}
	/**
	 * Renders the footer for the searchcraft-popover-form.
	 */
	interface SearchcraftPopoverFooter {
		/**
		  * The SDK variant used to render this component. Used for UTM attribution. This isn't exposed for developer consumption, it's set automatically.
		  * @default 'js'
		 */
		"sdkVariant"?: "js" | "react" | "vue";
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * Optional href for the "View all" button.
		 */
		"viewAllResultsHref"?: string;
		/**
		  * Optional label for the "View all" button.
		 */
		"viewAllResultsLabel"?: string;
	}
	/**
	 * 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.
	 * @react-import ```jsx
	 * import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-popover-form type="inline" />
	 * ```
	 * ```js
	 * // index.js
	 * const popoverForm = document.querySelector('searchcraft-popover-form');
	 * popoverForm.popoverResultMappings = {};
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftPopoverForm type="inline" popoverResultMappings={[]} />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftPopoverForm type="inline" :popoverResultMappings="[]"" />
	 * ```
	 */
	interface SearchcraftPopoverForm {
		/**
		  * The hotkey that activates the popover.
		  * @default 'k'
		 */
		"hotkey"?: string;
		/**
		  * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.
		  * @default 'meta'
		 */
		"hotkeyModifier"?: "ctrl" | "meta" | "alt" | "option";
		/**
		  * The placeholder's render behavior. 'hide-on-focus' - Hide the placeholder text immediately when the input form gains focus. 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.
		 */
		"placeholderBehavior"?: "hide-on-focus" | "hide-on-text-entered";
		/**
		  * The input element's placeholder value.
		  * @default 'Enter Search'
		 */
		"placeholderValue"?: string;
		/**
		  * Formats the content rendered for each result.
		 */
		"popoverResultMappings"?: PopoverResultMappings;
		/**
		  * The SDK variant used to render this component. Used for UTM attribution on the footer link.
		  * @default 'js'
		 */
		"sdkVariant"?: "js" | "react" | "vue";
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * Whether to display the AI generative summary box before the search results. NOTE: This requires the usage of a read key that has "SUMMARY" permissions and either a subscription to Searchcraft Cloud with AI features enabled or a self-hosted model connected.
		  * @default false
		 */
		"showSummaryBox"?: boolean;
		/**
		  * 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.
		  * @default 'inline'
		 */
		"type"?: "inline" | "fullscreen" | "modal";
		/**
		  * Base URL for the "View all" footer link. The current search term will be appended (URL encoded).  For example, in a CMS-backed site you might set this to `/?s=` so the final URL becomes `/?s=<search-term>`.
		 */
		"viewAllResultsBaseUrl"?: string;
		/**
		  * Optional label for the "View All" footer button. Defaults to "View All".
		 */
		"viewAllResultsLabel"?: string;
	}
	/**
	 * A single list item rendered in a searchcraft-popover-list-view.
	 */
	interface SearchcraftPopoverListItem {
		/**
		  * The document position relative to the search results (For Measure)
		  * @default 0
		 */
		"documentPosition"?: number;
		"item"?: SearchClientResponseItem | undefined;
		"popoverResultMappings"?: PopoverResultMappings | undefined;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
	}
	/**
	 * This web component is designed to display a list of results within a popover interface.
	 * It is consumed within the `searchcraft-popover-form` component.
	 * @js-example ```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;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
	}
	/**
	 * This web component is designed to display the number of results returned from a search query.
	 * @react-import ```jsx
	 * import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-results-info />
	 * ```
	 * ```js
	 * // index.js
	 * const resultsInfo = document.querySelector('searchcraft-results-info');
	 * resultsInfo.template = (info, { html }) => html`
	 *   ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
	 * `;
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftResultsInfo
	 *   template={(info, { html }) => html`
	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
	 *   `}
	 * />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftResultsInfo
	 *   :template={(info, { html }) => html`
	 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
	 *   `}
	 * />
	 * ```
	 */
	interface SearchcraftResultsInfo {
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * A callback function responsible for rendering the results info.
		 */
		"template"?: ResultsInfoTemplate;
	}
	/**
	 * This component renders a results summary for RAG search result summaries.
	 * When the user makes a search, a network call is made to retrieve the summary content, which is then
	 * rendered in this box.
	 * NOTE: This component requires the usage of a read key that has "SUMMARY" permissions.
	 * @react-import ```jsx
	 * import { SearchcraftResultsSummary } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```ts
	 * import { SearchcraftResultsSummary } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <searchcraft-results-summary />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftResultsSummary />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftResultsSummary />
	 * ```
	 */
	interface SearchcraftResultsSummary {
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
	}
	/**
	 * 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.
	 */
	interface SearchcraftSearchResult {
		/**
		  * The position in the document. Used with the "document_clicked" measure event.
		  * @default 0
		 */
		"documentPosition"?: number;
		/**
		  * The index.
		 */
		"index": number;
		"item"?: SearchClientResponseItem;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * A callback function responsible for rendering a result.
		 */
		"template"?: SearchResultTemplate<SearchResultTemplateData>;
	}
	/**
	 * 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.
	 * @react-import ```jsx
	 * import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftSearchResults } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-search-results
	 *   ad-interval="4"
	 *   place-ad-at-start="true"
	 * />
	 * ```
	 * ```js
	 * // index.js
	 * const searchResults = document.querySelector('searchcraft-search-results');
	 * searchResults.template = (item, index, { html }) => html`
	 *  <h2>${item.title}</h2>
	 * `;
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftSearchResults
	 *   adInterval={4}
	 *   placeAdAtState={true}
	 *   template={(item, index, { html }) => html`
	 *     <h2>${item.title}</h2>
	 *   `}
	 * />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftSearchResults
	 *   adInterval={4}
	 *   placeAdAtState={true}
	 *   :template={(item, index, { html }) => html`
	 *     <h2>${item.title}</h2>
	 *   `}
	 * />
	 * ```
	 */
	interface SearchcraftSearchResults {
		/**
		  * A query that will appears when the component initializes or the search term is ''..
		 */
		"initialQuery"?: string;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * A callback function responsible for rendering a result. Passed to `searchcraft-search-result`.
		 */
		"template"?: SearchResultTemplate<SearchResultTemplateData>;
	}
	/**
	 * This web component is designed to choose the number of search results displayed.
	 * @react-import ```jsx
	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <!-- index.html -->
	 * <searchcraft-search-results-per-page increment="20" />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftSearchResultsPerPage increment={20} />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftSearchResultsPerPage increment="20" />
	 * ```
	 */
	interface SearchcraftSearchResultsPerPage {
		/**
		  * 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.
		  * @default 20
		 */
		"increment"?: string | number;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
	}
	/**
	 * This web component is designed to allow users to select between a group of options.
	 * @js-example ```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;
		/**
		  * Whether the select input is disabled.
		  * @default false
		 */
		"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.
		  * @default []
		 */
		"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.
	 */
	interface SearchcraftSlider {
		/**
		  * The type of data the sliders are using.
		  * @default 'number'
		 */
		"dataType"?: "number" | "date";
		/**
		  * The date granularity to use. Used to format date labels.
		 */
		"dateGranularity"?: "year" | "month" | "day" | "hour";
		/**
		  * The maximum value allowed.
		  * @default 100
		 */
		"max"?: number;
		/**
		  * The minimum value allowed.
		  * @default 0
		 */
		"min"?: number;
		/**
		  * When the range has changed.
		 */
		"onRangeChanged"?: (event: SearchcraftSliderCustomEvent<any>) => void;
		/**
		  * The step amount for the slider inputs.
		  * @default 1
		 */
		"step"?: number;
	}
	/**
	 * @deprecated Use `searchcraft-results-summary` instead.
	 * This component is deprecated and will be removed in a future version.
	 * Please update to use `searchcraft-results-summary` which has the same functionality.
	 * This component renders a summary box for RAG search result summaries.
	 * When the user makes a search, a network call is made to retrieve the summary content, which is then
	 * rendered in this box.
	 * NOTE: This component requires the usage of a read key that has "SUMMARY" permissions.
	 * @react-import ```jsx
	 * import { SearchcraftSummaryBox } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftSummaryBox } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <searchcraft-summary-box />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftSummaryBox />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftSummaryBox />
	 * ```
	 */
	interface SearchcraftSummaryBox {
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
	}
	/**
	 * This web component adds 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.'
	 * @react-import ```jsx
	 * import { SearchcraftTheme } from "@searchcraft/react-sdk";
	 * ```
	 * @vue-import ```jsx
	 * import { SearchcraftTheme } from "@searchcraft/vue-sdk";
	 * ```
	 * @js-example ```html
	 * <searchcraft-theme />
	 * ```
	 * @react-example ```jsx
	 * <SearchcraftTheme />
	 * ```
	 * @vue-example ```jsx
	 * <SearchcraftTheme />
	 * ```
	 */
	interface SearchcraftTheme {
	}
	/**
	 * This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.
	 */
	interface SearchcraftToggleButton {
		/**
		  * The label.
		  * @default 'Toggle'
		 */
		"label"?: string;
		/**
		  * When the toggle element is changed.
		 */
		"onToggleUpdated"?: (event: SearchcraftToggleButtonCustomEvent<boolean>) => void;
		/**
		  * The id of the Searchcraft instance that this component should use.
		 */
		"searchcraftId"?: string;
		/**
		  * The secondary label displayed below the main label.
		 */
		"subLabel"?: string | undefined;
	}
	interface IntrinsicElements {
		"searchcraft-ad": SearchcraftAd;
		"searchcraft-button": SearchcraftButton;
		"searchcraft-error-message": SearchcraftErrorMessage;
		"searchcraft-facet-list": SearchcraftFacetList;
		"searchcraft-filter-panel": SearchcraftFilterPanel;
		"searchcraft-input-form": SearchcraftInputForm;
		"searchcraft-input-label": SearchcraftInputLabel;
		"searchcraft-loading": SearchcraftLoading;
		"searchcraft-pagination": SearchcraftPagination;
		"searchcraft-popover-button": SearchcraftPopoverButton;
		"searchcraft-popover-footer": SearchcraftPopoverFooter;
		"searchcraft-popover-form": SearchcraftPopoverForm;
		"searchcraft-popover-list-item": SearchcraftPopoverListItem;
		"searchcraft-popover-list-view": SearchcraftPopoverListView;
		"searchcraft-results-info": SearchcraftResultsInfo;
		"searchcraft-results-summary": SearchcraftResultsSummary;
		"searchcraft-search-result": SearchcraftSearchResult;
		"searchcraft-search-results": SearchcraftSearchResults;
		"searchcraft-search-results-per-page": SearchcraftSearchResultsPerPage;
		"searchcraft-select": SearchcraftSelect;
		"searchcraft-slider": SearchcraftSlider;
		"searchcraft-summary-box": SearchcraftSummaryBox;
		"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 represents a button.
			 * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.
			 */
			"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.
			 * @js-example ```html
			 * <searchcraft-error-message>
			 *   No search results found for query
			 * </searchcraft-error-message>
			 * ```
			 */
			"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`.
			 * @js-example ```html
			 * <!-- index.html -->
			 * <!-- Basic usage -->
			 * <searchcraft-facet-list field-name="title" />
			 * <!-- With collapsible section (initially closed) and view more threshold -->
			 * <searchcraft-facet-list
			 *   field-name="category"
			 *   initial-collapse-state="closed"
			 *   view-more-threshold="5"
			 * />
			 * <!-- Show all facets without "view more" link -->
			 * <searchcraft-facet-list
			 *   field-name="brand"
			 *   view-more-threshold="0"
			 * />
			 * ```
			 * ```js
			 * // index.js
			 * const facetList = document.querySelector('searchcraft-facet-list');
			 * facetList.addEventListener('facetSelectionUpdated', () => {
			 *   console.log('Facet selection updated');
			 * });
			 * // Programmatically toggle collapse state
			 * await facetList.handleCollapseToggle();
			 * ```
			 */
			"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.
			 * @react-import ```jsx
			 * import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
			 * ```
			 * @vue-import ```jsx
			 * import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
			 * ```
			 * @js-example ```html
			 * <!-- index.html -->
			 * <searchcraft-filter-panel />
			 * ```
			 * ```js
			 * // index.js
			 * const filterPanel = document.querySelector('searchcraft-filter-panel');
			 * if (filterPanel) {
			 *   filterPanel.items = [];
			 * }
			 * ```
			 * @react-example ```jsx
			 * <SearchcraftFilterPanel items={[]} />
			 * ```
			 * @vue-example ```jsx
			 * <SearchcraftFilterPanel :items="[]" />
			 * ```
			 */
			"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.
			 * @react-import ```jsx
			 * import { SearchcraftInputForm } from "@searchcraft/react-sdk";
			 * ```
			 * @vue-import ```jsx
			 * import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
			 * ```
			 * @js-example ```html
			 * <searchcraft-input-form auto-search />
			 * ```
			 * @react-example ```jsx
			 * <SearchcraftInputForm autoSearch />
			 * ```
			 * @vue-example ```jsx
			 * <SearchcraftInputForm autoSearch />
			 * ```
			 */
			"searchcraft-input-form": LocalJSX.SearchcraftInputForm & JSXBase.HTMLAttributes<HTMLSearchcraftInputFormElement>;
			/**
			 * This web component serves as the input label for the searchcraft-input-form component.
			 * @js-example ```html
			 * <searchcraft-input-label label="Search" />
			 * ```
			 */
			"searchcraft-input-label": LocalJSX.SearchcraftInputLabel & JSXBase.HTMLAttributes<HTMLSearchcraftInputLabelElement>;
			/**
			 * Renders a loading spinner/loading state for use in things like the summary box.
			 */
			"searchcraft-loading": LocalJSX.SearchcraftLoading & JSXBase.HTMLAttributes<HTMLSearchcraftLoadingElement>;
			/**
			 * This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
			 * @react-import ```jsx
			 * import { SearchcraftPagination } from "@searchcraft/react-sdk";
			 * ```
			 * @vue-import ```jsx
			 * import { SearchcraftPagination } from "@searchcraft/vue-sdk";
			 * ```
			 * @js-example ```html
			 * <searchcraft-pagination />
			 * ```
			 * @react-example ```jsx
			 * <SearchcraftPagination />
			 * ```
			 * @vue-example ```jsx
			 * <SearchcraftPagination />
			 * ```
			 */
			"searchcraft-pagination": LocalJSX.SearchcraftPagination & JSXBase.HTMLAttributes<HTMLSearchcraftPaginationElement>;
			/**
			 * Renders a button which, when clicked, turns on popover visibility.
			 * @react-import ```jsx
			 * import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
			 * ````
			 * @vue-import ```jsx
			 * import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
			 * ```
			 * @js-example ```html
			 * <!-- index.html -->
			 * <searchcraft-popover-button>
			 *   Open popover
			 * </searchcraft-popover-button>
			 * ```
			 * ```js
			 * // index.js
			 * const popoverButton = document.querySelector('searchcraft-popover-button');
			 * popoverButton.template = ({ isPopoverVisible }, { html }) => html`
			 *   <span>Click me</span>
			 * `;
			 * ```
			 * @react-example ```jsx
			 * <SearchcraftPopoverButton
			 *   template={({ isPopoverVisible }, { html }) => html`
			 *     <span>Click me</span>
			 *   `}
			 * >
			 *   Open popover
			 * </SearchcraftPopoverButton>
			 * ```
			 * @vue-example ```jsx
			 * <SearchcraftPopoverButton
			 *   :template={({ isPopoverVisible }, { html }) => html`
			 *     <span>Click me</span>
			 *   `}
			 * >
			 *   Open popover
			 * </SearchcraftPopoverButton>
			 * ```
			 */
			"searchcraft-popover-button": LocalJSX.SearchcraftPopoverButton & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverButtonElement>;
			/**
			 * Renders the footer for the searchcraft-popover-form.
			 */
			"searchcraft-popover-footer": LocalJSX.SearchcraftPopoverFooter & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverFooterElement>;
			/**
			 * 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.
			 * @react-import ```jsx
			 * import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
			 * ```
			 * @vue-import ```jsx
			 * import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
			 * ```
			 * @js-example ```html
			 * <!-- index.html -->
			 * <searchcraft-popover-form type="inline" />
			 * ```
			 * ```js
			 * // index.js
			 * const popoverForm = document.querySelector('searchcraft-popover-form');
			 * popoverForm.popoverResultMappings = {};
			 * ```
			 * @react-example ```jsx
			 * <SearchcraftPopoverForm type="inline" popoverResultMappings={[]} />
			 * ```
			 * @vue-example ```jsx
			 * <SearchcraftPopoverForm type="inline" :popoverResultMappings="[]"" />
			 * ```
			 */
			"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.
			 * @js-example ```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.
			 * @react-import ```jsx
			 * import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
			 * ```
			 * @vue-import ```jsx
			 * import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
			 * ```
			 * @js-example ```html
			 * <!-- index.html -->
			 * <searchcraft-results-info />
			 * ```
			 * ```js
			 * // index.js
			 * const resultsInfo = document.querySelector('searchcraft-results-info');
			 * resultsInfo.template = (info, { html }) => html`
			 *   ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
			 * `;
			 * ```
			 * @react-example ```jsx
			 * <SearchcraftResultsInfo
			 *   template={(info, { html }) => html`
			 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
			 *   `}
			 * />
			 * ```
			 * @vue-example ```jsx
			 * <SearchcraftResultsInfo
			 *   :template={(info, { html }) => html`
			 *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
			 *   `}
			 * />
			 * ```
			 */
			"searchcraft-results-info": LocalJSX.SearchcraftResultsInfo & JSXBase.HTMLAttributes<HTMLSearchcraftResultsInfoElement>;
			/**
			 * This component renders a results summary for RAG search result summaries.
			 * When the user makes a search, a network call is made to retrieve the summary content, which is then
			 * rendered in this box.
			 * NOTE: This component requires the usage of a read key that has "SUMMARY" permissions.
			 * @react-import ```jsx
			 * import { SearchcraftResultsSummary } from "@searchcraft/react-sdk";
			 * ```
			 * @vue-import ```ts
			 * import { SearchcraftResultsSummary } from "@searchcraft/vue-sdk";
			 * ```
			 * @js-example ```html
			 * <searchcraft-results-summary />
			 * ```
			 * @react-example ```jsx
			 * <SearchcraftResultsSummary />
			 * ```
			 * @vue-example ```jsx
			 * <SearchcraftResultsSummary />
			 * ```
			 */
			"searchcraft-results-summary": LocalJSX.SearchcraftResultsSummary & JSXBase.HTMLAttributes<HTMLSearchcraftResultsSummaryElement>;
			/**
			 * 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.
			 */
			"searchcraft-search-result": LocalJSX.SearchcraftSearchResult & JSXBase.HTMLAttributes<HTMLSearchcraftSearchResultElement>;
			/**
			 * 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.
			 * @react-import ```jsx
			 * import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
			 * ```
			 * @vue-import ```jsx
			 * import { SearchcraftSearchResults } from "@searchcraft/vue-sdk";
			 * ```
			 * @js-example ```html
			 * <!-- index.html -->
			 * <searchcraft-search-results
			 *   ad-interval="4"
			 *   place-ad-at-start="true"
			 * />
			 * ```
			 * ```js
			 * // index.js
			 * const searchResults = document.querySelector('searchcraft-search-results');
			 * searchResults.template = (item, index, { html }) => html`
			 *  <h2>${item.title}</h2>
			 * `;
			 * ```
			 * @react-example ```jsx
			 * <SearchcraftSearchResults
			 *   adInterval={4}
			 *   placeAdAtState={true}
			 *   template={(item, index, { html }) => html`
			 *     <h2>${item.title}</h2>
			 *   `}
			 * />
			 * ```
			 * @vue-example ```jsx
			 * <SearchcraftSearchResults
			 *   adInterval={4}
			 *   placeAdAtState={true}
			 *   :template={(item, index, { html }) => html`
			 *     <h2>${item.title}</h2>
			 *   `}
			 * />
			 * ```
			 */
			"searchcraft-search-results": LocalJSX.SearchcraftSearchResults & JSXBase.HTMLAttributes<HTMLSearchcraftSearchResultsElement>;
			/**
			 * This web component is designed to choose the number of search results displayed.
			 * @react-import ```jsx
			 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
			 * ```
			 * @vue-import ```jsx
			 * import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
			 * ```
			 * @js-example ```html
			 * <!-- index.html -->
			 * <searchcraft-search-results-per-page increment="20" />
			 * ```
			 * @react-example ```jsx
			 * <SearchcraftSearchResultsPerPage increment={20} />
			 * ```
			 * @vue-example ```jsx
			 * <SearchcraftSearchResultsPerPage 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.
			 * @js-example ```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.
			 */
			"searchcraft-slider": LocalJSX.SearchcraftSlider & JSXBase.HTMLAttributes<HTMLSearchcraftSliderElement>;
			/**
			 * @deprecated Use `searchcraft-results-summary` instead.
			 * This component is deprecated and will be removed in a future version.
			 * Please update to use `searchcraft-results-summary` which has the same functionality.
			 * This component renders a summary box for RAG search result summaries.
			 * When the user makes a search, a network call is made to retrieve the summary content, which is then
			 * rendered in this box.
			 * NOTE: This component requires the usage of a read key that has "SUMMARY" permissions.
			 * @react-import ```jsx
			 * import { SearchcraftSummaryBox } from "@searchcraft/react-sdk";
			 * ```
			 * @vue-import ```jsx
			 * import { SearchcraftSummaryBox } from "@searchcraft/vue-sdk";
			 * ```
			 * @js-example ```html
			 * <searchcraft-summary-box />
			 * ```
			 * @react-example ```jsx
			 * <SearchcraftSummaryBox />
			 * ```
			 * @vue-example ```jsx
			 * <SearchcraftSummaryBox />
			 * ```
			 */
			"searchcraft-summary-box": LocalJSX.SearchcraftSummaryBox & JSXBase.HTMLAttributes<HTMLSearchcraftSummaryBoxElement>;
			/**
			 * This web component adds 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.'
			 * @react-import ```jsx
			 * import { SearchcraftTheme } from "@searchcraft/react-sdk";
			 * ```
			 * @vue-import ```jsx
			 * import { SearchcraftTheme } from "@searchcraft/vue-sdk";
			 * ```
			 * @js-example ```html
			 * <searchcraft-theme />
			 * ```
			 * @react-example ```jsx
			 * <SearchcraftTheme />
			 * ```
			 * @vue-example ```jsx
			 * <SearchcraftTheme />
			 * ```
			 */
			"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.
			 */
			"searchcraft-toggle-button": LocalJSX.SearchcraftToggleButton & JSXBase.HTMLAttributes<HTMLSearchcraftToggleButtonElement>;
		}
	}
}
/**
 * @fileoverview entry point for your component library
 *
 * This is the entry point for your component library. Use this file to export utilities,
 * constants or data structure that accompany your components.
 *
 * DO NOT use this file to export your components. Instead, use the recommended approaches
 * to consume components of this package as outlined in the `README.md`.
 */
/**
 * The consumer-facing `Searchcraft` class.
 */
export declare class Searchcraft extends SearchcraftCore {
	constructor(config: SearchcraftConfig, searchcraftId?: string | undefined);
}

export {
	LocalJSX as JSX,
};

export {};

export declare const defineCustomElements: () => void;