fluentui-svelte 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jorge Acosta
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,201 @@
+<p align="center">
+	<picture>
+  		<source media="(prefers-color-scheme: dark)" srcset="https://github.com/JLAcostaEC/fluentui-svelte/blob/main/static/images/banner-white.png?raw=true" height="130" style="margin-bottom: 20px">
+  		<img alt="Fluent UI Svelte Logo" src="https://github.com/JLAcostaEC/fluentui-svelte/blob/main/static/images/banner.png?raw=true" height="130" style="margin-bottom: 20px"/>
+	</picture>
+</p>
+
+<p align="center">
+  Modern components based on <a href="https://learn.microsoft.com/en-us/windows/apps/design/">Microsoft's Fluent UI</a> for Svelte 5.
+</p>
+
+## Features
+
+- Svelte 5 components!
+- All components are accessible following [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) standards.
+- Semantic HTML & Native Behavior Elements (Like: `<dialog></dialog>` or `<details></details>`)
+- Reduced motion supported.
+- Keyboard navigation handled by [Tabspot](https://github.com/JLAcostaEC/tabspot), so arrow keys, roving
+  tabindex and `aria-activedescendant` behave the same across every component.
+
+## Browser support
+
+> [!IMPORTANT]
+> The library relies on CSS features that, for now, ship only in Chromium-based browsers
+> (Chrome, Edge, Opera, Brave). In Firefox and Safari some styles will not render correctly.
+
+What the source actually depends on, and what it costs elsewhere:
+
+| Feature                 | Used for                              | Outside Chromium                              |
+| ----------------------- | ------------------------------------- | --------------------------------------------- |
+| `field-sizing: content` | the TextArea growing with its content | no auto-grow; the textarea keeps its set size |
+| `mask` (unprefixed)     | acrylic noise, the tooltip arrow      | needs `-webkit-mask`; overlays can look flat  |
+| `backdrop-filter`       | the acrylic blur behind flyouts       | falls back to a solid surface                 |
+| `color-mix()`, `:has()` | tokens and state-driven styling       | supported in current Firefox and Safari       |
+
+Behaviour and accessibility are unaffected — what degrades is visual. If you need those
+browsers today, treat the current release as a known limitation rather than a target.
+
+## Installation
+
+```sh
+pnpm add fluentui-svelte
+# npm install fluentui-svelte
+# yarn add fluentui-svelte
+```
+
+Svelte 5 is the only peer dependency:
+
+```sh
+pnpm add -D svelte@^5
+```
+
+## Setup
+
+### 1. Import the stylesheets
+
+The library ships its theme as plain CSS. Import it once, at the root of your app
+(`src/routes/+layout.svelte` in SvelteKit):
+
+```svelte
+<script>
+	import 'fluentui-svelte/theme.css';
+	import 'fluentui-svelte/reset.css';
+	import 'fluentui-svelte/typography.css';
+	import 'fluentui-svelte/class-darkmode.css';
+</script>
+```
+
+| Stylesheet           | What it does                                                                   |
+| -------------------- | ------------------------------------------------------------------------------ |
+| `theme.css`          | Design tokens. **Required** — every component reads its colours from here.     |
+| `reset.css`          | Opinionated reset. Optional, but the components are designed against it.       |
+| `typography.css`     | Fluent type ramp and the `.fs-*` text helpers. Optional.                       |
+| `class-darkmode.css` | Dark theme, switched by a class on `<html>`. Pick this **or** the next.        |
+| `media-darkmode.css` | Dark theme, switched by `prefers-color-scheme`. Pick this **or** the previous. |
+
+### 2. Wrap your app in the provider
+
+`FluentUISvelte` starts the keyboard-navigation engine and carries the reduced-motion and theme
+preferences. Without it the components still render, but arrow-key navigation does not work:
+
+```svelte
+<script>
+	import { FluentUISvelte } from 'fluentui-svelte';
+
+	let { children } = $props();
+</script>
+
+<FluentUISvelte>
+	{@render children()}
+</FluentUISvelte>
+```
+
+## Usage
+
+```svelte
+<script>
+	import { TextBox, Dialog, DialogTrigger, DialogSurface, DialogTitle, DialogContent } from 'fluentui-svelte';
+
+	let name = $state('');
+</script>
+
+<TextBox bind:value={name} placeholder="Your name" />
+
+<Dialog>
+	<DialogTrigger>Say hello</DialogTrigger>
+	<DialogSurface>
+		<DialogTitle>Greeting</DialogTitle>
+		<DialogContent>Hello, {name || 'stranger'}.</DialogContent>
+	</DialogSurface>
+</Dialog>
+```
+
+Every component is exported from the package root. Prop tables live next to each component in
+`src/lib/components/<name>/docs/`, and the same content is published for AI agents as
+`llms.md` inside the package.
+
+### Running the documentation site
+
+The docs site is the reference while the hosted version is being built:
+
+```sh
+pnpm install
+pnpm dev
+```
+
+## Component status
+
+The documentation site is currently in the building phase, and not every component exported by
+the library is documented yet.
+
+Any undocumented component is **considered to be in the 0.x phase of development**. It may
+receive breaking API changes, or be heavily reworked, before it is finalised. Components carry
+a status badge in the navigation — `Beta`, `Experimental`, `Prototype` and `WIP` all mean the
+API is still moving.
+
+## Bugs and feature requests
+
+- **Found a bug?** Open a [bug report](https://github.com/JLAcostaEC/fluentui-svelte/issues/new?template=bug_report.yml).
+  Please include the browser, the Svelte version, and a minimal reproduction — a
+  [SvelteLab](https://sveltelab.dev) or StackBlitz link is ideal.
+- **Want a component or a prop?** Open a
+  [feature request](https://github.com/JLAcostaEC/fluentui-svelte/issues/new?template=feature_request.yml)
+  and say which Fluent UI / WinUI control it maps to.
+- **Security issue?** Please do not open a public issue — contact the maintainer directly.
+
+Before filing, a quick search of the
+[open issues](https://github.com/JLAcostaEC/fluentui-svelte/issues) saves everyone a round trip.
+
+## Contributing
+
+This is a large project maintained by one person in their free time, so help is genuinely
+welcome — code, documentation, translations and bug reports alike. Start with
+[CONTRIBUTING.md](./CONTRIBUTING.md).
+
+```sh
+pnpm install      # install dependencies
+pnpm dev          # docs site with hot reload
+pnpm check        # svelte-check
+pnpm lint         # prettier + eslint
+pnpm test:unit    # vitest (browser mode, Chromium)
+```
+
+UI strings live in `messages/en.json` (source of truth) and `messages/es.json`. Prop tables are
+generated by [propsmith](https://www.npmjs.com/package/@jlacostaec/propsmith) — run `pnpm exec propsmith`
+after changing a prop's JSDoc rather than editing the generated tables by hand.
+
+## Resources
+
+> ### [Windows UI Kit - Figma File](https://www.figma.com/community/file/1440832812269040007)
+>
+> The Windows UI Toolkit is a resource for creating experiences on Windows. It contains a control library and examples of how those controls are used within the WinUI platform.
+
+> ### Official Gallery Docs: [WinUI 3 Gallery](https://apps.microsoft.com/detail/9p3jfpwwdzrc)
+>
+> This app demonstrates all of the Windows UI 3 library controls and styles available to make a WinUI 3 app with the Windows App SDK.
+
+> ### Documentation: [Microsoft's Fluent UI](https://learn.microsoft.com/en-us/windows/apps/design/)
+>
+> Design guidelines and UI code examples for creating Windows app experiences.
+
+> ### [Fluent UI 2 Web - Figma File](https://www.figma.com/community/file/836828295772957889)
+>
+> Explore the next evolution of Microsoft's design system with the Fluent 2 Web UI Kit.
+
+## Credits
+
+> - [Microsoft's Fluent UI](https://learn.microsoft.com/en-us/windows/apps/design/): Thank Microsoft for creating this masterpiece.
+> - [Fluent Svelte](https://github.com/Tropix126/fluent-svelte): Which was unfortunately abandoned.
+
+## Notes
+
+> [!IMPORTANT]
+> This repository is not affiliated with or connected to Microsoft in any way. It is merely an open-source package that provides their components to use with Svelte 5 applications.
+
+> [!NOTE]
+> This package is not an exact port/reimplementation of Fluent UI (React, Web or any other official/unofficial variation), many features/APIs are not the same as those described in the Fluent UI documentation.
+
+## License
+
+[MIT](./LICENSE) © Jorge Acosta

package/dist/components/auto-suggest-box/auto-suggest-box.d.ts

@@ -0,0 +1,2 @@
+import type { AutoSuggestBoxContext } from './types.ts';
+export declare const getAutoSuggestBoxContext: () => AutoSuggestBoxContext | null, setAutoSuggestBoxContext: (context: AutoSuggestBoxContext) => void;

package/dist/components/auto-suggest-box/auto-suggest-box.js

@@ -0,0 +1,2 @@
+import { createFSContext } from '../../internal/index.js';
+export const [getAutoSuggestBoxContext, setAutoSuggestBoxContext] = createFSContext();

package/dist/components/auto-suggest-box/auto-suggest-box.svelte

@@ -0,0 +1,457 @@
+<script lang="ts">
+	import { onMount, tick } from 'svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { on } from 'svelte/events';
+	import { onClickOutside } from 'runed';
+	import { PREFIX } from '../../internal/constants.js';
+	import { setAutoSuggestBoxContext } from './auto-suggest-box.js';
+	import { Flyout, TextBox, ListView, ListViewItem } from '../../index.js';
+	import {
+		clearTabspotActive,
+		setTabspotActive,
+		setTabspotAttributes,
+		tabspotVirtual,
+		type TabspotNavigationEvent,
+		type TabspotNodeOptions
+	} from 'tabspot';
+	import { getGlobalFSContext } from '../../providers/fluentui-svelte/fluentui-svelte.js';
+	import type { AutoSuggestBoxContext, AutoSuggestBoxProps, OptionType } from './types.js';
+
+	const FALLBACK_ID = $props.id();
+	const ID = `${PREFIX}autosuggestbox-${FALLBACK_ID}`;
+	const INPUT_ID = `${ID}-input`;
+
+	let {
+		placeholder,
+		hideActionButtons,
+		type = 'search',
+		open = $bindable(false),
+		multiselect,
+		ref = $bindable(),
+		value = $bindable(''),
+		inputRef = $bindable(),
+		selectOnFocus,
+		virtualizer,
+		flyoutRef = $bindable(),
+		flyoutProps,
+		listViewRef = $bindable(),
+		selectedOptions = $bindable([]),
+		listViewProps,
+		showTextualMultiselect,
+		notFoundText = 'No results found',
+		maxItemsInView = 6,
+		textChanged,
+		querySubmitted,
+		suggestionChosen,
+		children
+	}: AutoSuggestBoxProps = $props();
+
+	// svelte-ignore state_referenced_locally
+	if (selectOnFocus && multiselect) throw new Error('selectOnFocus is not supported when multiselect is true');
+
+	let items = new SvelteMap<string, OptionType>();
+
+	let lastTypedValue: string = $state('');
+
+	let roundClass = $state('bottom');
+
+	let config: AutoSuggestBoxContext['config'] = $derived({
+		selectOnFocus,
+		virtualized: virtualizer,
+		multiselect
+	});
+
+	let activeOption: OptionType | null = $state(null);
+
+	/** The arrow key behind the move Tabspot is reporting, for `selectOnFocus` to hand on. */
+	let cursorKey: KeyboardEvent | undefined;
+
+	const OPTIONS = '.fs-autosuggest-option';
+
+	const NAVIGATION: TabspotNodeOptions = {
+		root: {},
+		mover: {
+			axis: 'vertical',
+			items: OPTIONS,
+			skip: "[aria-disabled='true']",
+			activation: {
+				mode: 'activedescendant',
+				controller: `#${INPUT_ID}`,
+				mark: { attribute: 'data-active' }
+			}
+		}
+	};
+
+	const _state: AutoSuggestBoxContext['state'] = {
+		get lastTypedValue() {
+			return lastTypedValue;
+		},
+		get open() {
+			return open;
+		},
+		set open(v) {
+			open = v;
+		},
+		get textBoxRef() {
+			return inputRef;
+		},
+		get activeOption() {
+			return activeOption;
+		},
+		set activeOption(v) {
+			activeOption = v;
+		}
+	};
+
+	let methods: AutoSuggestBoxContext['methods'] = {
+		setOption: ({ id, index, value, text, disabled }) => {
+			items.set(id, { id, index, value, text, disabled });
+		},
+		deleteOption: (id: string) => {
+			items.delete(id);
+		},
+		toggleSelection: (e, id) => {
+			const item = items.get(id);
+
+			if (item) {
+				if (multiselect) {
+					if (selectedOptions?.some((opt) => opt.id === id)) {
+						selectedOptions = selectedOptions.filter((opt) => opt.id !== id);
+					} else {
+						selectedOptions = [...selectedOptions, { id, value: item.value }];
+					}
+
+					if (showTextualMultiselect) value = selectedOptions.map((opt) => opt.value).join(', ');
+				} else {
+					selectedOptions = [item];
+
+					value = item.text || item.value;
+				}
+
+				suggestionChosen?.(e, item.value);
+			}
+		}
+	};
+
+	// svelte-ignore state_referenced_locally
+	setAutoSuggestBoxContext({ config, state: _state, methods, events: null });
+
+	/**
+	 * Put the cursor on `option`, or send it home when there is none. `nearest`
+	 * covers a match nothing can land on: the cursor walks to the closest option
+	 * that can be, and only a list without one at all sends it home.
+	 */
+	function pointCursorAt(option: OptionType | null) {
+		if (!listViewRef) return;
+
+		const element = option && listViewRef.querySelector<HTMLElement>(`#${CSS.escape(option.id)}`);
+		const pointed = element && setTabspotActive(element, { nearest: true }).ok;
+
+		// Tabspot reports the move it made through `navigate`; the empty cursor is
+		// the only one this box writes itself.
+		if (pointed) return;
+
+		clearTabspotActive(listViewRef);
+		readCursor(null, false);
+	}
+
+	function bestMatch(query: string): OptionType | null {
+		const needle = query.toLowerCase();
+		let best: OptionType | null = null;
+
+		for (const option of items.values()) {
+			if (!option.value.toLowerCase().startsWith(needle) && !option.text?.toLowerCase().startsWith(needle)) continue;
+			if (!best || option.index < best.index) best = option;
+		}
+
+		return best;
+	}
+
+	function readCursor(element: HTMLElement | null, keyed: boolean) {
+		const option = element ? (items.get(element.id) ?? null) : null;
+
+		if (option?.id === activeOption?.id) return;
+
+		activeOption = option;
+
+		if (option) document.getElementById(option.id)?.scrollIntoView({ block: 'nearest' });
+
+		// selectOnFocus mirrors the option into the text box, which must not happen
+		// while the user is the one typing in it.
+		if (!selectOnFocus || !keyed || !cursorKey) return;
+
+		if (option) {
+			methods.toggleSelection(cursorKey, option.id);
+			value = option.text || option.value;
+		} else {
+			value = lastTypedValue;
+		}
+	}
+
+	/** `atEdge` means the list ran out of options: hand the query back. */
+	function navigate(event: TabspotNavigationEvent) {
+		const keyed = event.direction !== 'programmatic';
+
+		if (!event.atEdge) {
+			readCursor(event.to, keyed);
+			return;
+		}
+
+		// The list ran out: send the cursor home and give the user their query back.
+		event.preventDefault();
+
+		if (listViewRef) clearTabspotActive(listViewRef);
+
+		readCursor(null, keyed);
+	}
+
+	/** The two keys that are the box's own business rather than the list's. */
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.target !== inputRef) return;
+
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			open = false;
+			return;
+		}
+
+		if (e.key !== 'Enter') return;
+
+		e.preventDefault();
+
+		if (activeOption) {
+			methods.toggleSelection(e, activeOption.id);
+			open = false;
+		} else {
+			querySubmitted?.(e, value);
+		}
+	}
+
+	/**
+	 * Whether the next arrow would *enter* the list rather than move inside it, and
+	 * would enter it in the wrong place if left alone.
+	 */
+	function entryNeedsScrolling() {
+		return !activeOption && (!open || !!virtualizer);
+	}
+
+	/** Open, scroll to the end the key is heading for, then let Tabspot enter. */
+	async function enterList(key: 'ArrowUp' | 'ArrowDown') {
+		open = true;
+		await tick();
+
+		await (key === 'ArrowUp' ? virtualizer?.scrollToBottom?.() : virtualizer?.scrollToTop?.());
+		await tick();
+
+		// The key is replayed rather than turned into a `setTabspotActive` call on the
+		// end of the list: a second arrow pressed while this one is still in flight is
+		// a second move, and two cursor sets onto the same option would be one.
+		// Untrusted, so it passes straight through to Tabspot this time.
+		inputRef?.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+	}
+
+	async function handleTextChanged(e: InputEvent, val: string) {
+		if (val.length > 0 && !open) open = true;
+		lastTypedValue = val;
+		textChanged?.(e, val);
+
+		await tick();
+
+		// Automatic selection, per the WAI-ARIA combobox pattern: the query points the
+		// cursor at the suggestion Enter would choose.
+		pointCursorAt(val ? bestMatch(val) : null);
+	}
+
+	function handleClear() {
+		value = '';
+		lastTypedValue = '';
+		open = false;
+	}
+
+	function handlePlacementChange(newPlacement: string) {
+		roundClass = newPlacement.includes('-') ? newPlacement.split('-')[0] : newPlacement;
+	}
+
+	onClickOutside(
+		() => ref,
+		() => (open = false)
+	);
+
+	onMount(() => {
+		if (!inputRef) return;
+
+		const off = [
+			on(inputRef, 'keydown', handleKeyDown),
+			// Tabspot listens on `document` in the capture phase,
+			// `window` comes first on the capture path, to note the
+			// key that caused a move,and to hold a move back until
+			// the list can answer it correctly.
+			on(
+				window,
+				'keydown',
+				(event) => {
+					if (event.target !== inputRef || !event.isTrusted) return;
+
+					const key = event.key;
+
+					if (key !== 'ArrowUp' && key !== 'ArrowDown') return;
+
+					cursorKey = event;
+
+					if (!entryNeedsScrolling()) return;
+
+					// Keep the key from Tabspot entirely: it would enter on the wrong
+					// item, and there would be no undoing that from here.
+					event.preventDefault();
+					event.stopPropagation();
+
+					enterList(key);
+				},
+				{ capture: true }
+			)
+		];
+
+		return () => {
+			activeOption = null;
+			off.forEach((unsubscribe) => unsubscribe());
+		};
+	});
+
+	const globalContext = getGlobalFSContext();
+
+	// Closing takes the flyout down, and leaving `activeOption` behind,
+	// remove it..
+	$effect(() => {
+		if (!open) activeOption = null;
+	});
+
+	$effect(() => {
+		if (!open || !listViewRef) return;
+
+		setTabspotAttributes({ element: listViewRef, config: NAVIGATION });
+
+		const instance = globalContext?.state.tabspotInstance;
+		const detach = instance?.subscribe(listViewRef, navigate);
+
+		if (!virtualizer || !virtualizer?.scrollToIndex) return detach;
+
+		const detachVirtual = tabspotVirtual(listViewRef, {
+			count: () => virtualizer.size,
+			scrollToIndex: (index) => virtualizer.scrollToIndex?.(index),
+			tick
+		});
+
+		return () => {
+			detach?.();
+			detachVirtual();
+		};
+	});
+</script>
+
+<div
+	class={['fs-autosuggestbox', { open }]}
+	style="--max-items: {maxItemsInView}; --current-items: {items.size};"
+	bind:this={ref}
+>
+	<TextBox
+		{type}
+		{placeholder}
+		{hideActionButtons}
+		id={INPUT_ID}
+		bind:value
+		bind:ref={inputRef}
+		querySubmitted={(e) => querySubmitted?.(e, value)}
+		textChanged={(e) => handleTextChanged(e, value)}
+		onClear={handleClear}
+		role="combobox"
+		aria-expanded={open}
+		aria-autocomplete="list"
+		aria-controls={open ? `${ID}-list` : undefined}
+		aria-haspopup="listbox"
+		class="square-{roundClass}"
+	/>
+	{#if open}
+		<Flyout
+			floating
+			offset={0}
+			reference={ref}
+			bind:ref={flyoutRef}
+			roundCorners="bottom"
+			placementConfig={{ allowedPlacements: ['bottom', 'top'] }}
+			onPlacementChange={(place) => handlePlacementChange(place)}
+			class={['fs-autosuggestbox-flyout', roundClass === 'top' && 'top-shadow', flyoutProps?.class]}
+			{...flyoutProps}
+		>
+			<ListView
+				role="listbox"
+				navigationMode="items"
+				disableTabspot
+				id="{ID}-list"
+				selectedItems={Array.from(selectedOptions.values()).map((opt) => opt.value)}
+				bind:ref={listViewRef}
+				{...listViewProps as any}
+			>
+				{#if items.size === 0}
+					<ListViewItem disabled>{notFoundText}</ListViewItem>
+				{/if}
+				{@render children?.()}
+			</ListView>
+		</Flyout>
+	{/if}
+</div>
+
+<style>
+	.fs-autosuggestbox {
+		position: relative;
+		width: 100%;
+		& :global(.fs-flyout) {
+			position: absolute;
+			padding: 0;
+			top: 0;
+			left: -1px;
+			width: calc(100% + 2px);
+		}
+		&.open {
+			& :global(.fs-flyout) {
+				border-color: rgba(0, 0, 0, 0.06);
+				z-index: 10;
+				max-height: calc(var(--max-items) * 2.7rem);
+				height: calc(var(--current-items) * 2.7rem);
+				min-height: 3.4rem;
+				overflow: hidden;
+				&:global(.top-shadow) {
+					box-shadow: 0 -0.5rem 0.8rem #00000024;
+				}
+			}
+			& :global(.fs-list-view) {
+				overflow-y: auto;
+				padding: 4px;
+			}
+			& :global(.fs-textbox) {
+				&:global(.square-top) {
+					border-top-left-radius: 0;
+					border-top-right-radius: 0;
+					&::after,
+					&::before {
+						border-top-left-radius: 0;
+						border-top-right-radius: 0;
+					}
+				}
+				&:global(.square-bottom) {
+					border-bottom-left-radius: 0;
+					border-bottom-right-radius: 0;
+					&::after,
+					&::before {
+						border-bottom-left-radius: 0;
+						border-bottom-right-radius: 0;
+					}
+				}
+			}
+			& :global(.fs-textbox:after) {
+				width: calc(100% + 0.125rem);
+				left: -0.063rem;
+				background-color: var(--fs-accent-fill-default);
+			}
+		}
+	}
+</style>

package/dist/components/auto-suggest-box/auto-suggest-box.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AutoSuggestBoxProps } from './types.ts';
+declare const AutoSuggestBox: import("svelte").Component<AutoSuggestBoxProps, {}, "ref" | "value" | "open" | "inputRef" | "flyoutRef" | "listViewRef" | "selectedOptions">;
+type AutoSuggestBox = ReturnType<typeof AutoSuggestBox>;
+export default AutoSuggestBox;