@datatechsolutions/tympan 0.3.0 → 0.4.0

package/dist/elements-react.js

@@ -0,0 +1,3639 @@
+"use client";
+import { t as defineTympanElements } from "./elements-DCGBSGS8.js";
+import { createElement, forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
+//#region src/elements/react/TyActionMenu.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$37 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$37 = (v) => truthy$37(v) ? String(v) : void 0;
+const filled$20 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$36 = {
+	mode: "trigger",
+	triggerLabel: "More actions"
+};
+const TyActionMenu = forwardRef(function TyActionMenu(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		const listeners = [["ty-action", (event) => handlers.current.onAction?.(event.detail)], ["ty-open-change", (event) => handlers.current.onOpenChange?.(event.detail)]];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return () => {
+			for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		};
+	}, []);
+	const p = {
+		open: props.open,
+		mode: props.mode ?? DEFAULTS$36.mode,
+		label: props.label,
+		triggerLabel: props.triggerLabel ?? DEFAULTS$36.triggerLabel,
+		items: props.items,
+		position: props.position
+	};
+	const slots = { "trigger": filled$20(props.trigger) };
+	return createElement("ty-action-menu", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"open": truthy$37(p.open) ? true : void 0,
+		"mode": text$37(p.mode),
+		"label": text$37(p.label),
+		"trigger-label": text$37(p.triggerLabel),
+		"items": text$37(p.items),
+		"position": text$37(p.position)
+	}, createElement("span", {
+		className: "ty-action-menu__target",
+		"data-mode": p.mode
+	}, !slots["trigger"] && p.mode === "trigger" ? createElement("button", {
+		className: "ty-button ty-action-menu__trigger",
+		type: "button",
+		"aria-label": p.triggerLabel,
+		"aria-haspopup": "menu",
+		"data-variant": "quiet",
+		"data-icon-only": ""
+	}, createElement("span", {
+		className: "ty-button__icon",
+		"aria-hidden": "true"
+	}, createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("circle", {
+		className: "ty-action-menu__glyph",
+		cx: "12",
+		cy: "12",
+		r: "1"
+	}), createElement("circle", {
+		className: "ty-action-menu__glyph",
+		cx: "19",
+		cy: "12",
+		r: "1"
+	}), createElement("circle", {
+		className: "ty-action-menu__glyph",
+		cx: "5",
+		cy: "12",
+		r: "1"
+	})))) : null, slots["trigger"] ? props.trigger : null, createElement("div", {
+		className: "ty-action-menu",
+		hidden: !truthy$37(p.open) ? true : void 0,
+		"data-mode": p.mode
+	}, createElement("div", {
+		className: "ty-action-menu__menu",
+		id: `${instance}-menu`,
+		role: "menu",
+		"aria-label": p.label,
+		"aria-orientation": "vertical",
+		tabIndex: "-1"
+	}))));
+});
+//#endregion
+//#region src/elements/react/TyAvatar.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$36 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$36 = (v) => truthy$36(v) ? String(v) : void 0;
+const DEFAULTS$35 = {
+	actorKind: "person",
+	size: "regular",
+	tint: "accent",
+	actionLabel: "Open profile of {name}"
+};
+const TyAvatar = forwardRef(function TyAvatar(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		src: props.src,
+		fallbackText: props.fallbackText,
+		name: props.name,
+		decorative: props.decorative,
+		actorKind: props.actorKind ?? DEFAULTS$35.actorKind,
+		size: props.size ?? DEFAULTS$35.size,
+		tint: props.tint ?? DEFAULTS$35.tint,
+		pressable: props.pressable,
+		href: props.href,
+		actionLabel: props.actionLabel ?? DEFAULTS$35.actionLabel
+	};
+	return createElement("ty-avatar", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"src": text$36(p.src),
+		"fallback-text": text$36(p.fallbackText),
+		"name": text$36(p.name),
+		"decorative": truthy$36(p.decorative) ? true : void 0,
+		"actor-kind": text$36(p.actorKind),
+		"size": text$36(p.size),
+		"tint": text$36(p.tint),
+		"pressable": truthy$36(p.pressable) ? true : void 0,
+		"href": text$36(p.href),
+		"action-label": text$36(p.actionLabel)
+	}, createElement("span", { className: "ty-avatar-root" }, !truthy$36(p.pressable) && !truthy$36(p.href) ? createElement("span", {
+		className: "ty-avatar",
+		"data-kind": p.actorKind,
+		"data-size": p.size,
+		"data-tint": p.tint,
+		"data-image": truthy$36(p.src) ? "" : void 0,
+		"aria-hidden": truthy$36(p.decorative) ? "true" : void 0,
+		role: !truthy$36(p.decorative) && !truthy$36(p.src) ? "img" : void 0,
+		"aria-label": !truthy$36(p.decorative) && !truthy$36(p.src) ? p.name : void 0
+	}, truthy$36(p.src) && (truthy$36(p.decorative) || truthy$36(p.pressable) || truthy$36(p.href)) ? createElement("img", {
+		className: "ty-avatar__image",
+		src: p.src,
+		alt: ""
+	}) : null, truthy$36(p.src) && !truthy$36(p.decorative) && !truthy$36(p.pressable) && !truthy$36(p.href) ? createElement("img", {
+		className: "ty-avatar__image",
+		src: p.src,
+		alt: p.name
+	}) : null, createElement("span", {
+		className: "ty-avatar__fallback",
+		hidden: truthy$36(p.src) ? true : void 0
+	}, p.actorKind === "agent" ? createElement("svg", {
+		className: "ty-avatar__icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M12 8V4H8"
+	}), createElement("rect", {
+		className: "ty-avatar__glyph",
+		width: "16",
+		height: "12",
+		x: "4",
+		y: "8",
+		rx: "2"
+	}), createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M2 14h2"
+	}), createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M20 14h2"
+	}), createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M15 13v2"
+	}), createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M9 13v2"
+	})) : null, p.actorKind === "person" && truthy$36(p.fallbackText) ? createElement("span", {
+		className: "ty-avatar__initials",
+		"aria-hidden": "true"
+	}, text$36(p.fallbackText)) : null, p.actorKind === "person" && !truthy$36(p.fallbackText) ? createElement("svg", {
+		className: "ty-avatar__icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+	}), createElement("circle", {
+		className: "ty-avatar__glyph",
+		cx: "12",
+		cy: "7",
+		r: "4"
+	})) : null)) : null, truthy$36(p.href) ? createElement("a", {
+		className: "ty-avatar-control",
+		href: p.href,
+		"data-size": p.size,
+		onPress: (event) => handlers.current.onPress?.(event)
+	}, createElement("span", {
+		className: "ty-avatar",
+		"data-kind": p.actorKind,
+		"data-size": p.size,
+		"data-tint": p.tint,
+		"data-image": truthy$36(p.src) ? "" : void 0,
+		"aria-hidden": "true"
+	}, truthy$36(p.src) && (truthy$36(p.decorative) || truthy$36(p.pressable) || truthy$36(p.href)) ? createElement("img", {
+		className: "ty-avatar__image",
+		src: p.src,
+		alt: ""
+	}) : null, truthy$36(p.src) && !truthy$36(p.decorative) && !truthy$36(p.pressable) && !truthy$36(p.href) ? createElement("img", {
+		className: "ty-avatar__image",
+		src: p.src,
+		alt: p.name
+	}) : null, createElement("span", {
+		className: "ty-avatar__fallback",
+		hidden: truthy$36(p.src) ? true : void 0
+	}, p.actorKind === "agent" ? createElement("svg", {
+		className: "ty-avatar__icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M12 8V4H8"
+	}), createElement("rect", {
+		className: "ty-avatar__glyph",
+		width: "16",
+		height: "12",
+		x: "4",
+		y: "8",
+		rx: "2"
+	}), createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M2 14h2"
+	}), createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M20 14h2"
+	}), createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M15 13v2"
+	}), createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M9 13v2"
+	})) : null, p.actorKind === "person" && truthy$36(p.fallbackText) ? createElement("span", {
+		className: "ty-avatar__initials",
+		"aria-hidden": "true"
+	}, text$36(p.fallbackText)) : null, p.actorKind === "person" && !truthy$36(p.fallbackText) ? createElement("svg", {
+		className: "ty-avatar__icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+	}), createElement("circle", {
+		className: "ty-avatar__glyph",
+		cx: "12",
+		cy: "7",
+		r: "4"
+	})) : null))) : null, !truthy$36(p.href) && truthy$36(p.pressable) ? createElement("button", {
+		className: "ty-avatar-control",
+		type: "button",
+		"data-size": p.size,
+		onPress: (event) => handlers.current.onPress?.(event)
+	}, createElement("span", {
+		className: "ty-avatar",
+		"data-kind": p.actorKind,
+		"data-size": p.size,
+		"data-tint": p.tint,
+		"data-image": truthy$36(p.src) ? "" : void 0,
+		"aria-hidden": "true"
+	}, truthy$36(p.src) && (truthy$36(p.decorative) || truthy$36(p.pressable) || truthy$36(p.href)) ? createElement("img", {
+		className: "ty-avatar__image",
+		src: p.src,
+		alt: ""
+	}) : null, truthy$36(p.src) && !truthy$36(p.decorative) && !truthy$36(p.pressable) && !truthy$36(p.href) ? createElement("img", {
+		className: "ty-avatar__image",
+		src: p.src,
+		alt: p.name
+	}) : null, createElement("span", {
+		className: "ty-avatar__fallback",
+		hidden: truthy$36(p.src) ? true : void 0
+	}, p.actorKind === "agent" ? createElement("svg", {
+		className: "ty-avatar__icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M12 8V4H8"
+	}), createElement("rect", {
+		className: "ty-avatar__glyph",
+		width: "16",
+		height: "12",
+		x: "4",
+		y: "8",
+		rx: "2"
+	}), createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M2 14h2"
+	}), createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M20 14h2"
+	}), createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M15 13v2"
+	}), createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M9 13v2"
+	})) : null, p.actorKind === "person" && truthy$36(p.fallbackText) ? createElement("span", {
+		className: "ty-avatar__initials",
+		"aria-hidden": "true"
+	}, text$36(p.fallbackText)) : null, p.actorKind === "person" && !truthy$36(p.fallbackText) ? createElement("svg", {
+		className: "ty-avatar__icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-avatar__glyph",
+		d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+	}), createElement("circle", {
+		className: "ty-avatar__glyph",
+		cx: "12",
+		cy: "7",
+		r: "4"
+	})) : null))) : null));
+});
+//#endregion
+//#region src/elements/react/TyBrandWordmark.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$35 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$35 = (v) => truthy$35(v) ? String(v) : void 0;
+const DEFAULTS$34 = { size: "medium" };
+const TyBrandWordmark = forwardRef(function TyBrandWordmark(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		text: props.text,
+		accent: props.accent,
+		size: props.size ?? DEFAULTS$34.size,
+		label: props.label,
+		testId: props.testId
+	};
+	return createElement("ty-brand-wordmark", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"text": text$35(p.text),
+		"accent": text$35(p.accent),
+		"size": text$35(p.size),
+		"label": text$35(p.label),
+		"test-id": text$35(p.testId)
+	}, createElement("span", {
+		className: "ty-brand-wordmark",
+		role: truthy$35(p.label) ? "img" : void 0,
+		"aria-label": p.label,
+		"data-size": p.size,
+		"data-testid": p.testId
+	}, truthy$35(p.text) ? createElement("span", { className: "ty-brand-wordmark__text" }, text$35(p.text)) : null, truthy$35(p.accent) ? createElement("span", { className: "ty-brand-wordmark__accent" }, text$35(p.accent)) : null));
+});
+//#endregion
+//#region src/elements/react/TyBreadcrumbs.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$34 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$34 = (v) => truthy$34(v) ? String(v) : void 0;
+const filled$19 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$33 = {
+	label: "Breadcrumb",
+	mode: "auto",
+	backLabel: "Back to {parent}",
+	overflowLabel: "Show hidden levels"
+};
+const TyBreadcrumbs = forwardRef(function TyBreadcrumbs(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		const listeners = [["ty-navigate", (event) => handlers.current.onNavigate?.(event.detail)]];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return () => {
+			for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		};
+	}, []);
+	const p = {
+		items: props.items,
+		label: props.label ?? DEFAULTS$33.label,
+		mode: props.mode ?? DEFAULTS$33.mode,
+		rootHref: props.rootHref,
+		rootLabel: props.rootLabel,
+		maxVisible: props.maxVisible,
+		backLabel: props.backLabel ?? DEFAULTS$33.backLabel,
+		overflowLabel: props.overflowLabel ?? DEFAULTS$33.overflowLabel
+	};
+	const slots = {
+		"center": filled$19(props.center),
+		"actions": filled$19(props.actions)
+	};
+	return createElement("ty-breadcrumbs", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"items": text$34(p.items),
+		"label": text$34(p.label),
+		"mode": text$34(p.mode),
+		"root-href": text$34(p.rootHref),
+		"root-label": text$34(p.rootLabel),
+		"max-visible": text$34(p.maxVisible),
+		"back-label": text$34(p.backLabel),
+		"overflow-label": text$34(p.overflowLabel)
+	}, createElement("nav", {
+		className: "ty-breadcrumbs",
+		"aria-label": p.label,
+		"data-mode": p.mode
+	}, !(p.mode === "compact") ? createElement("ol", { className: "ty-breadcrumbs__list" }) : null, p.mode === "compact" || p.mode === "auto" ? createElement("div", { className: "ty-breadcrumbs__bar" }, createElement("div", { className: "ty-breadcrumbs__back" }), slots["center"] || slots["actions"] ? createElement("div", { className: "ty-breadcrumbs__center" }, slots["center"] ? props.center : null, !slots["center"] ? createElement("span", {
+		className: "ty-breadcrumbs__title",
+		"aria-current": "page"
+	}) : null) : null, slots["actions"] ? createElement("div", { className: "ty-breadcrumbs__actions" }, props.actions) : null) : null));
+});
+//#endregion
+//#region src/elements/react/TyCommandPalette.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$33 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$33 = (v) => truthy$33(v) ? String(v) : void 0;
+const DEFAULTS$32 = {
+	recentVisible: 5,
+	recentKeep: 12,
+	label: "Search and commands",
+	placeholder: "Search or type a command",
+	emptyLabel: "Type to search records, sources and screens.",
+	noResultsLabel: "Nothing matches “{query}”.",
+	loadingLabel: "Loading results",
+	removeScopeLabel: "Remove scope {scope}",
+	actionsForLabel: "Actions for {label}",
+	recentLabel: "Recent",
+	resultsLabel: "{count} results",
+	scopesLabel: "Scopes",
+	fallbackLabel: "Other actions",
+	hintNavigate: "move",
+	hintSelect: "open",
+	hintActions: "actions",
+	hintBack: "back",
+	hintClose: "close"
+};
+const TyCommandPalette = forwardRef(function TyCommandPalette(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		const listeners = [
+			["ty-select", (event) => handlers.current.onSelect?.(event.detail)],
+			["ty-scope-change", (event) => handlers.current.onScopeChange?.(event.detail)],
+			["ty-close", () => handlers.current.onClose?.()]
+		];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return () => {
+			for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		};
+	}, []);
+	const p = {
+		open: props.open,
+		groups: props.groups,
+		scopes: props.scopes,
+		activeScope: props.activeScope,
+		loading: props.loading,
+		fallbackActions: props.fallbackActions,
+		recentKey: props.recentKey,
+		recentVisible: props.recentVisible ?? DEFAULTS$32.recentVisible,
+		recentKeep: props.recentKeep ?? DEFAULTS$32.recentKeep,
+		label: props.label ?? DEFAULTS$32.label,
+		placeholder: props.placeholder ?? DEFAULTS$32.placeholder,
+		emptyLabel: props.emptyLabel ?? DEFAULTS$32.emptyLabel,
+		noResultsLabel: props.noResultsLabel ?? DEFAULTS$32.noResultsLabel,
+		loadingLabel: props.loadingLabel ?? DEFAULTS$32.loadingLabel,
+		removeScopeLabel: props.removeScopeLabel ?? DEFAULTS$32.removeScopeLabel,
+		actionsForLabel: props.actionsForLabel ?? DEFAULTS$32.actionsForLabel,
+		recentLabel: props.recentLabel ?? DEFAULTS$32.recentLabel,
+		resultsLabel: props.resultsLabel ?? DEFAULTS$32.resultsLabel,
+		scopesLabel: props.scopesLabel ?? DEFAULTS$32.scopesLabel,
+		fallbackLabel: props.fallbackLabel ?? DEFAULTS$32.fallbackLabel,
+		hintNavigate: props.hintNavigate ?? DEFAULTS$32.hintNavigate,
+		hintSelect: props.hintSelect ?? DEFAULTS$32.hintSelect,
+		hintActions: props.hintActions ?? DEFAULTS$32.hintActions,
+		hintBack: props.hintBack ?? DEFAULTS$32.hintBack,
+		hintClose: props.hintClose ?? DEFAULTS$32.hintClose
+	};
+	return createElement("ty-command-palette", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"open": truthy$33(p.open) ? true : void 0,
+		"groups": text$33(p.groups),
+		"scopes": text$33(p.scopes),
+		"active-scope": text$33(p.activeScope),
+		"loading": truthy$33(p.loading) ? true : void 0,
+		"fallback-actions": text$33(p.fallbackActions),
+		"recent-key": text$33(p.recentKey),
+		"recent-visible": text$33(p.recentVisible),
+		"recent-keep": text$33(p.recentKeep),
+		"label": text$33(p.label),
+		"placeholder": text$33(p.placeholder),
+		"empty-label": text$33(p.emptyLabel),
+		"no-results-label": text$33(p.noResultsLabel),
+		"loading-label": text$33(p.loadingLabel),
+		"remove-scope-label": text$33(p.removeScopeLabel),
+		"actions-for-label": text$33(p.actionsForLabel),
+		"recent-label": text$33(p.recentLabel),
+		"results-label": text$33(p.resultsLabel),
+		"scopes-label": text$33(p.scopesLabel),
+		"fallback-label": text$33(p.fallbackLabel),
+		"hint-navigate": text$33(p.hintNavigate),
+		"hint-select": text$33(p.hintSelect),
+		"hint-actions": text$33(p.hintActions),
+		"hint-back": text$33(p.hintBack),
+		"hint-close": text$33(p.hintClose)
+	});
+});
+//#endregion
+//#region src/elements/react/TyCurrencyField.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$32 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$32 = (v) => truthy$32(v) ? String(v) : void 0;
+const filled$18 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$31 = {
+	decimals: 2,
+	size: "medium",
+	currencyLabel: "Currency: {currency}"
+};
+const TyCurrencyField = forwardRef(function TyCurrencyField(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		const listeners = [["ty-value-change", (event) => handlers.current.onValueChange?.(event.detail)]];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return () => {
+			for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		};
+	}, []);
+	const p = {
+		value: props.value,
+		defaultValue: props.defaultValue,
+		currency: props.currency,
+		decimals: props.decimals ?? DEFAULTS$31.decimals,
+		locale: props.locale,
+		size: props.size ?? DEFAULTS$31.size,
+		currencyLabel: props.currencyLabel ?? DEFAULTS$31.currencyLabel,
+		required: props.required,
+		disabled: props.disabled,
+		readOnly: props.readOnly,
+		invalid: props.invalid,
+		name: props.name,
+		placeholder: props.placeholder,
+		accessibleLabel: props.accessibleLabel,
+		labelledBy: props.labelledBy,
+		describedBy: props.describedBy,
+		controlId: props.controlId,
+		testId: props.testId
+	};
+	const slots = {
+		"label": filled$18(props.label),
+		"hint": filled$18(props.hint),
+		"error": filled$18(props.error)
+	};
+	return createElement("ty-currency-field", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"value": text$32(p.value),
+		"default-value": text$32(p.defaultValue),
+		"currency": text$32(p.currency),
+		"decimals": text$32(p.decimals),
+		"locale": text$32(p.locale),
+		"size": text$32(p.size),
+		"currency-label": text$32(p.currencyLabel),
+		"required": truthy$32(p.required) ? true : void 0,
+		"disabled": truthy$32(p.disabled) ? true : void 0,
+		"read-only": truthy$32(p.readOnly) ? true : void 0,
+		"invalid": truthy$32(p.invalid) ? true : void 0,
+		"name": text$32(p.name),
+		"placeholder": text$32(p.placeholder),
+		"accessible-label": text$32(p.accessibleLabel),
+		"labelled-by": text$32(p.labelledBy),
+		"described-by": text$32(p.describedBy),
+		"control-id": text$32(p.controlId),
+		"test-id": text$32(p.testId)
+	}, createElement("div", {
+		className: "ty-currency-field",
+		"data-size": p.size,
+		"data-invalid": truthy$32(p.invalid) || slots["error"] ? "" : void 0,
+		"data-readonly": truthy$32(p.readOnly) ? "" : void 0,
+		"data-disabled": truthy$32(p.disabled) ? "" : void 0,
+		"data-testid": p.testId
+	}, createElement("div", { className: "ty-currency-field__field" }, slots["label"] ? createElement("label", {
+		className: "ty-fb-line",
+		"data-line": "label",
+		htmlFor: text$32(p.controlId) ?? `${instance}-input`
+	}, props.label) : null, slots["hint"] ? createElement("p", {
+		className: "ty-fb-line",
+		"data-line": "hint",
+		id: `${instance}-hint`
+	}, props.hint) : null, createElement("div", { className: "ty-currency-field__box" }, truthy$32(p.currency) ? createElement("span", {
+		className: "ty-currency-field__symbol",
+		"aria-hidden": "true"
+	}) : null, createElement("input", {
+		className: "ty-currency-field__input",
+		id: text$32(p.controlId) ?? `${instance}-input`,
+		type: "text",
+		name: p.name,
+		placeholder: p.placeholder,
+		autoComplete: "off",
+		disabled: truthy$32(p.disabled) || void 0,
+		readOnly: truthy$32(p.readOnly) || void 0,
+		required: truthy$32(p.required) || void 0,
+		"aria-label": !slots["label"] ? p.accessibleLabel : void 0,
+		"aria-labelledby": !slots["label"] && !truthy$32(p.accessibleLabel) ? p.labelledBy : void 0,
+		"aria-describedby": [
+			text$32(p.describedBy) ?? "",
+			slots["hint"] ? `${instance}-hint` : "",
+			truthy$32(p.currency) ? `${instance}-currency` : "",
+			slots["error"] ? `${instance}-error` : ""
+		].filter(Boolean).join(" ") || void 0,
+		"aria-invalid": truthy$32(p.invalid) || slots["error"] ? "true" : void 0
+	})), truthy$32(p.currency) ? createElement("span", {
+		className: "ty-visually-hidden ty-currency-field__currency",
+		id: `${instance}-currency`
+	}) : null, slots["error"] ? createElement("p", {
+		className: "ty-fb-line",
+		"data-line": "error",
+		id: `${instance}-error`
+	}, createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("circle", {
+		className: "ty-currency-field__glyph",
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), createElement("line", {
+		className: "ty-currency-field__glyph",
+		x1: "12",
+		y1: "8",
+		x2: "12",
+		y2: "12"
+	}), createElement("line", {
+		className: "ty-currency-field__glyph",
+		x1: "12",
+		y1: "16",
+		x2: "12.01",
+		y2: "16"
+	})), createElement("span", { className: "ty-currency-field__error-text" }, props.error)) : null)));
+});
+//#endregion
+//#region src/elements/react/TyDataTable.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$31 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$31 = (v) => truthy$31(v) ? String(v) : void 0;
+const DEFAULTS$30 = {
+	density: "standard",
+	selectionMode: "none",
+	loadingRowCount: 10,
+	loadingLabel: "Loading the list",
+	emptyLabel: "No rows to show",
+	selectAllLabel: "Select all rows",
+	selectRowLabel: "Select {label}"
+};
+const TyDataTable = forwardRef(function TyDataTable(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		const listeners = [
+			["ty-sort-change", (event) => handlers.current.onSortChange?.(event.detail)],
+			["ty-selection-change", (event) => handlers.current.onSelectionChange?.(event.detail)],
+			["ty-row-action", (event) => handlers.current.onRowAction?.(event.detail)]
+		];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return () => {
+			for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		};
+	}, []);
+	const p = {
+		caption: props.caption,
+		captionVisible: props.captionVisible,
+		columns: props.columns,
+		rows: props.rows,
+		density: props.density ?? DEFAULTS$30.density,
+		sortColumn: props.sortColumn,
+		sortDirection: props.sortDirection,
+		selectionMode: props.selectionMode ?? DEFAULTS$30.selectionMode,
+		selectedKeys: props.selectedKeys,
+		loading: props.loading,
+		loadingRowCount: props.loadingRowCount ?? DEFAULTS$30.loadingRowCount,
+		loadingLabel: props.loadingLabel ?? DEFAULTS$30.loadingLabel,
+		emptyLabel: props.emptyLabel ?? DEFAULTS$30.emptyLabel,
+		emptyDescription: props.emptyDescription,
+		selectAllLabel: props.selectAllLabel ?? DEFAULTS$30.selectAllLabel,
+		selectRowLabel: props.selectRowLabel ?? DEFAULTS$30.selectRowLabel,
+		actionable: props.actionable,
+		stickyFirstColumn: props.stickyFirstColumn,
+		showColumnLines: props.showColumnLines,
+		maxBlockSize: props.maxBlockSize
+	};
+	return createElement("ty-data-table", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"caption": text$31(p.caption),
+		"caption-visible": truthy$31(p.captionVisible) ? true : void 0,
+		"columns": text$31(p.columns),
+		"rows": text$31(p.rows),
+		"density": text$31(p.density),
+		"sort-column": text$31(p.sortColumn),
+		"sort-direction": text$31(p.sortDirection),
+		"selection-mode": text$31(p.selectionMode),
+		"selected-keys": text$31(p.selectedKeys),
+		"loading": truthy$31(p.loading) ? true : void 0,
+		"loading-row-count": text$31(p.loadingRowCount),
+		"loading-label": text$31(p.loadingLabel),
+		"empty-label": text$31(p.emptyLabel),
+		"empty-description": text$31(p.emptyDescription),
+		"select-all-label": text$31(p.selectAllLabel),
+		"select-row-label": text$31(p.selectRowLabel),
+		"actionable": truthy$31(p.actionable) ? true : void 0,
+		"sticky-first-column": text$31(p.stickyFirstColumn),
+		"show-column-lines": truthy$31(p.showColumnLines) ? true : void 0,
+		"max-block-size": text$31(p.maxBlockSize)
+	});
+});
+//#endregion
+//#region src/elements/react/TyHeading.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$30 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$30 = (v) => truthy$30(v) ? String(v) : void 0;
+const DEFAULTS$29 = { level: "1" };
+const TyHeading = forwardRef(function TyHeading(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		level: props.level ?? DEFAULTS$29.level,
+		appearance: props.appearance,
+		eyebrow: props.eyebrow,
+		headingId: props.headingId
+	};
+	return createElement("ty-heading", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"level": text$30(p.level),
+		"appearance": text$30(p.appearance),
+		"eyebrow": text$30(p.eyebrow),
+		"heading-id": text$30(p.headingId)
+	}, createElement("div", { className: "ty-heading-group" }, truthy$30(p.eyebrow) ? createElement("p", { className: "ty-heading__eyebrow" }, text$30(p.eyebrow)) : null, p.level === "1" ? createElement("h1", {
+		className: "ty-heading",
+		id: text$30(p.headingId) ?? `${instance}-heading`,
+		"data-appearance": truthy$30(p.appearance) ? {
+			"display": "display",
+			"h1": "h1",
+			"h2": "h2",
+			"h3": "h3",
+			"label": "label"
+		}[String(p.appearance)] : {
+			"1": "h1",
+			"2": "h2",
+			"3": "h3",
+			"4": "h3",
+			"5": "h3",
+			"6": "h3"
+		}[String(p.level)]
+	}, props.children) : null, p.level === "2" ? createElement("h2", {
+		className: "ty-heading",
+		id: text$30(p.headingId) ?? `${instance}-heading`,
+		"data-appearance": truthy$30(p.appearance) ? {
+			"display": "display",
+			"h1": "h1",
+			"h2": "h2",
+			"h3": "h3",
+			"label": "label"
+		}[String(p.appearance)] : {
+			"1": "h1",
+			"2": "h2",
+			"3": "h3",
+			"4": "h3",
+			"5": "h3",
+			"6": "h3"
+		}[String(p.level)]
+	}, props.children) : null, p.level === "3" ? createElement("h3", {
+		className: "ty-heading",
+		id: text$30(p.headingId) ?? `${instance}-heading`,
+		"data-appearance": truthy$30(p.appearance) ? {
+			"display": "display",
+			"h1": "h1",
+			"h2": "h2",
+			"h3": "h3",
+			"label": "label"
+		}[String(p.appearance)] : {
+			"1": "h1",
+			"2": "h2",
+			"3": "h3",
+			"4": "h3",
+			"5": "h3",
+			"6": "h3"
+		}[String(p.level)]
+	}, props.children) : null, p.level === "4" ? createElement("h4", {
+		className: "ty-heading",
+		id: text$30(p.headingId) ?? `${instance}-heading`,
+		"data-appearance": truthy$30(p.appearance) ? {
+			"display": "display",
+			"h1": "h1",
+			"h2": "h2",
+			"h3": "h3",
+			"label": "label"
+		}[String(p.appearance)] : {
+			"1": "h1",
+			"2": "h2",
+			"3": "h3",
+			"4": "h3",
+			"5": "h3",
+			"6": "h3"
+		}[String(p.level)]
+	}, props.children) : null, p.level === "5" ? createElement("h5", {
+		className: "ty-heading",
+		id: text$30(p.headingId) ?? `${instance}-heading`,
+		"data-appearance": truthy$30(p.appearance) ? {
+			"display": "display",
+			"h1": "h1",
+			"h2": "h2",
+			"h3": "h3",
+			"label": "label"
+		}[String(p.appearance)] : {
+			"1": "h1",
+			"2": "h2",
+			"3": "h3",
+			"4": "h3",
+			"5": "h3",
+			"6": "h3"
+		}[String(p.level)]
+	}, props.children) : null, p.level === "6" ? createElement("h6", {
+		className: "ty-heading",
+		id: text$30(p.headingId) ?? `${instance}-heading`,
+		"data-appearance": truthy$30(p.appearance) ? {
+			"display": "display",
+			"h1": "h1",
+			"h2": "h2",
+			"h3": "h3",
+			"label": "label"
+		}[String(p.appearance)] : {
+			"1": "h1",
+			"2": "h2",
+			"3": "h3",
+			"4": "h3",
+			"5": "h3",
+			"6": "h3"
+		}[String(p.level)]
+	}, props.children) : null));
+});
+//#endregion
+//#region src/elements/react/TyMarkdownView.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$29 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$29 = (v) => truthy$29(v) ? String(v) : void 0;
+const DEFAULTS$28 = {
+	headingBase: 3,
+	density: "regular",
+	codeBlockLabel: "Code block",
+	codeBlockLanguageLabel: "Code block, {language}",
+	newTabLabel: "(opens in a new tab)"
+};
+const TyMarkdownView = forwardRef(function TyMarkdownView(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		text: props.text,
+		headingBase: props.headingBase ?? DEFAULTS$28.headingBase,
+		density: props.density ?? DEFAULTS$28.density,
+		codeBlockLabel: props.codeBlockLabel ?? DEFAULTS$28.codeBlockLabel,
+		codeBlockLanguageLabel: props.codeBlockLanguageLabel ?? DEFAULTS$28.codeBlockLanguageLabel,
+		newTabLabel: props.newTabLabel ?? DEFAULTS$28.newTabLabel
+	};
+	return createElement("ty-markdown-view", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"text": text$29(p.text),
+		"heading-base": text$29(p.headingBase),
+		"density": text$29(p.density),
+		"code-block-label": text$29(p.codeBlockLabel),
+		"code-block-language-label": text$29(p.codeBlockLanguageLabel),
+		"new-tab-label": text$29(p.newTabLabel)
+	});
+});
+//#endregion
+//#region src/elements/react/TyNotificationCenter.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$28 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$28 = (v) => truthy$28(v) ? String(v) : void 0;
+const DEFAULTS$27 = {
+	historyLimit: 50,
+	bellLabel: "Notifications",
+	unreadLabel: "{count} unread",
+	titleLabel: "Notifications",
+	clearAllLabel: "Clear all",
+	closeLabel: "Close",
+	dismissLabel: "Dismiss, {title}",
+	emptyLabel: "There are no notifications in this session.",
+	clearedLabel: "Notifications cleared",
+	toneSuccess: "Success",
+	toneError: "Error",
+	toneWarning: "Warning",
+	toneInfo: "Information",
+	timeJustNow: "just now",
+	timeMinutesAgo: "{count} minutes ago",
+	timeHoursAgo: "{count} hours ago",
+	timeDaysAgo: "{count} days ago"
+};
+const TyNotificationCenter = forwardRef(function TyNotificationCenter(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		const listeners = [
+			["ty-open-change", (event) => handlers.current.onOpenChange?.(event.detail)],
+			["ty-dismiss", (event) => handlers.current.onDismiss?.(event.detail)],
+			["ty-clear", () => handlers.current.onClear?.()]
+		];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return () => {
+			for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		};
+	}, []);
+	const p = {
+		open: props.open,
+		notices: props.notices,
+		historyLimit: props.historyLimit ?? DEFAULTS$27.historyLimit,
+		bellLabel: props.bellLabel ?? DEFAULTS$27.bellLabel,
+		unreadLabel: props.unreadLabel ?? DEFAULTS$27.unreadLabel,
+		titleLabel: props.titleLabel ?? DEFAULTS$27.titleLabel,
+		clearAllLabel: props.clearAllLabel ?? DEFAULTS$27.clearAllLabel,
+		closeLabel: props.closeLabel ?? DEFAULTS$27.closeLabel,
+		dismissLabel: props.dismissLabel ?? DEFAULTS$27.dismissLabel,
+		emptyLabel: props.emptyLabel ?? DEFAULTS$27.emptyLabel,
+		clearedLabel: props.clearedLabel ?? DEFAULTS$27.clearedLabel,
+		toneSuccess: props.toneSuccess ?? DEFAULTS$27.toneSuccess,
+		toneError: props.toneError ?? DEFAULTS$27.toneError,
+		toneWarning: props.toneWarning ?? DEFAULTS$27.toneWarning,
+		toneInfo: props.toneInfo ?? DEFAULTS$27.toneInfo,
+		timeJustNow: props.timeJustNow ?? DEFAULTS$27.timeJustNow,
+		timeMinutesAgo: props.timeMinutesAgo ?? DEFAULTS$27.timeMinutesAgo,
+		timeHoursAgo: props.timeHoursAgo ?? DEFAULTS$27.timeHoursAgo,
+		timeDaysAgo: props.timeDaysAgo ?? DEFAULTS$27.timeDaysAgo
+	};
+	return createElement("ty-notification-center", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"open": truthy$28(p.open) ? true : void 0,
+		"notices": text$28(p.notices),
+		"history-limit": text$28(p.historyLimit),
+		"bell-label": text$28(p.bellLabel),
+		"unread-label": text$28(p.unreadLabel),
+		"title-label": text$28(p.titleLabel),
+		"clear-all-label": text$28(p.clearAllLabel),
+		"close-label": text$28(p.closeLabel),
+		"dismiss-label": text$28(p.dismissLabel),
+		"empty-label": text$28(p.emptyLabel),
+		"cleared-label": text$28(p.clearedLabel),
+		"tone-success": text$28(p.toneSuccess),
+		"tone-error": text$28(p.toneError),
+		"tone-warning": text$28(p.toneWarning),
+		"tone-info": text$28(p.toneInfo),
+		"time-just-now": text$28(p.timeJustNow),
+		"time-minutes-ago": text$28(p.timeMinutesAgo),
+		"time-hours-ago": text$28(p.timeHoursAgo),
+		"time-days-ago": text$28(p.timeDaysAgo)
+	}, createElement("span", { className: "ty-notification-center" }, createElement("span", { className: "ty-notification-center__bell" }, createElement("button", {
+		className: "ty-button ty-notification-center__trigger",
+		type: "button",
+		"aria-label": p.bellLabel,
+		"aria-haspopup": "dialog",
+		"aria-expanded": truthy$28(p.open) ? "true" : void 0,
+		"aria-controls": `${instance}-dialog`,
+		"data-variant": "quiet",
+		"data-icon-only": ""
+	}, createElement("span", {
+		className: "ty-button__icon",
+		"aria-hidden": "true"
+	}, createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-notification-center__glyph",
+		d: "M10.268 21a2 2 0 0 0 3.464 0"
+	}), createElement("path", {
+		className: "ty-notification-center__glyph",
+		d: "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
+	}))))), createElement("div", {
+		className: "ty-notification-center__backdrop",
+		hidden: !truthy$28(p.open) ? true : void 0
+	}, createElement("div", { className: "ty-notification-center__drawer" }, createElement("div", {
+		className: "ty-notification-center__dialog",
+		role: "dialog",
+		"aria-modal": "true",
+		tabIndex: "-1",
+		id: `${instance}-dialog`,
+		"aria-labelledby": `${instance}-title`
+	}, createElement("header", { className: "ty-notification-center__head" }, createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-notification-center__glyph",
+		d: "M10.268 21a2 2 0 0 0 3.464 0"
+	}), createElement("path", {
+		className: "ty-notification-center__glyph",
+		d: "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
+	})), createElement("h2", {
+		className: "ty-notification-center__heading",
+		id: `${instance}-title`,
+		tabIndex: "-1"
+	}, text$28(p.titleLabel)), createElement("button", {
+		className: "ty-button ty-notification-center__clear",
+		type: "button",
+		hidden: !truthy$28(p.notices) ? true : void 0,
+		"data-variant": "quiet",
+		"data-size": "compact"
+	}, text$28(p.clearAllLabel)), createElement("button", {
+		className: "ty-button ty-notification-center__close",
+		type: "button",
+		"aria-label": p.closeLabel,
+		title: p.closeLabel,
+		"data-variant": "quiet",
+		"data-size": "compact",
+		"data-shape": "circle",
+		"data-icon-only": ""
+	}, createElement("span", {
+		className: "ty-button__icon",
+		"aria-hidden": "true"
+	}, createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-notification-center__glyph",
+		d: "M18 6 6 18"
+	}), createElement("path", {
+		className: "ty-notification-center__glyph",
+		d: "m6 6 12 12"
+	}))))), createElement("div", {
+		className: "ty-notification-center__empty",
+		hidden: truthy$28(p.notices) ? true : void 0
+	}, createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-notification-center__glyph",
+		d: "M10.268 21a2 2 0 0 0 3.464 0"
+	}), createElement("path", {
+		className: "ty-notification-center__glyph",
+		d: "M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742"
+	}), createElement("path", {
+		className: "ty-notification-center__glyph",
+		d: "m2 2 20 20"
+	}), createElement("path", {
+		className: "ty-notification-center__glyph",
+		d: "M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05"
+	})), createElement("p", { className: "ty-notification-center__empty-text" }, text$28(p.emptyLabel))), createElement("ul", {
+		className: "ty-notification-center__list",
+		hidden: !truthy$28(p.notices) ? true : void 0
+	})))), createElement("span", {
+		className: "ty-visually-hidden ty-notification-center__status",
+		role: "status"
+	})));
+});
+//#endregion
+//#region src/elements/react/TyPageHeader.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$27 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$27 = (v) => truthy$27(v) ? String(v) : void 0;
+const filled$17 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$26 = {
+	headingLevel: "1",
+	scale: "page",
+	titleLabel: "Page title"
+};
+const TyPageHeader = forwardRef(function TyPageHeader(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		title: props.title,
+		headingLevel: props.headingLevel ?? DEFAULTS$26.headingLevel,
+		scale: props.scale ?? DEFAULTS$26.scale,
+		eyebrow: props.eyebrow,
+		summary: props.summary,
+		editable: props.editable,
+		value: props.value,
+		titlePlaceholder: props.titlePlaceholder,
+		titleLabel: props.titleLabel ?? DEFAULTS$26.titleLabel,
+		headingId: props.headingId
+	};
+	const slots = {
+		"breadcrumbs": filled$17(props.breadcrumbs),
+		"icon": filled$17(props.icon),
+		"meta": filled$17(props.meta),
+		"actions": filled$17(props.actions),
+		"error": filled$17(props.error),
+		"default": filled$17(props.children)
+	};
+	return createElement("ty-page-header", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"title": text$27(p.title),
+		"heading-level": text$27(p.headingLevel),
+		"scale": text$27(p.scale),
+		"eyebrow": text$27(p.eyebrow),
+		"summary": text$27(p.summary),
+		"editable": truthy$27(p.editable) ? true : void 0,
+		"value": text$27(p.value),
+		"title-placeholder": text$27(p.titlePlaceholder),
+		"title-label": text$27(p.titleLabel),
+		"heading-id": text$27(p.headingId)
+	}, createElement("div", {
+		className: "ty-page-header",
+		"data-scale": p.scale
+	}, slots["breadcrumbs"] ? createElement("div", { className: "ty-page-header__breadcrumbs" }, props.breadcrumbs) : null, createElement("div", { className: "ty-page-header__row" }, slots["icon"] ? createElement("span", {
+		className: "ty-page-header__icon",
+		"aria-hidden": "true"
+	}, props.icon) : null, createElement("div", { className: "ty-page-header__text" }, truthy$27(p.eyebrow) ? createElement("p", { className: "ty-page-header__eyebrow" }, text$27(p.eyebrow)) : null, !truthy$27(p.editable) && p.headingLevel === "1" ? createElement("h1", {
+		className: "ty-page-header__title",
+		id: text$27(p.headingId) ?? `${instance}-title`
+	}, text$27(p.title)) : null, !truthy$27(p.editable) && p.headingLevel === "2" ? createElement("h2", {
+		className: "ty-page-header__title",
+		id: text$27(p.headingId) ?? `${instance}-title`
+	}, text$27(p.title)) : null, !truthy$27(p.editable) && p.headingLevel === "3" ? createElement("h3", {
+		className: "ty-page-header__title",
+		id: text$27(p.headingId) ?? `${instance}-title`
+	}, text$27(p.title)) : null, truthy$27(p.editable) && p.headingLevel === "1" ? createElement("h1", {
+		className: "ty-heading ty-visually-hidden",
+		id: text$27(p.headingId) ?? `${instance}-title`
+	}, truthy$27(p.value) ? text$27(p.value) : null, !truthy$27(p.value) ? text$27(p.titlePlaceholder) : null) : null, truthy$27(p.editable) && p.headingLevel === "2" ? createElement("h2", {
+		className: "ty-heading ty-visually-hidden",
+		id: text$27(p.headingId) ?? `${instance}-title`
+	}, truthy$27(p.value) ? text$27(p.value) : null, !truthy$27(p.value) ? text$27(p.titlePlaceholder) : null) : null, truthy$27(p.editable) && p.headingLevel === "3" ? createElement("h3", {
+		className: "ty-heading ty-visually-hidden",
+		id: text$27(p.headingId) ?? `${instance}-title`
+	}, truthy$27(p.value) ? text$27(p.value) : null, !truthy$27(p.value) ? text$27(p.titlePlaceholder) : null) : null, truthy$27(p.editable) ? createElement("input", {
+		className: "ty-page-header__title-input ty-page-header__title",
+		"aria-label": p.titleLabel,
+		placeholder: p.titlePlaceholder,
+		"aria-invalid": slots["error"] ? "true" : void 0,
+		"aria-describedby": [slots["error"] ? `${instance}-error` : ""].filter(Boolean).join(" ") || void 0,
+		"data-invalid": slots["error"] ? "" : void 0,
+		onTitleChange: (event) => handlers.current.onTitleChange?.({ value: event.currentTarget.value }, event)
+	}) : null, truthy$27(p.editable) && slots["error"] ? createElement("p", {
+		className: "ty-page-header__error",
+		id: `${instance}-error`
+	}, props.error) : null, truthy$27(p.summary) ? createElement("p", { className: "ty-page-header__summary" }, text$27(p.summary)) : null, slots["meta"] ? createElement("ul", { className: "ty-page-header__meta" }, props.meta) : null), slots["actions"] ? createElement("div", { className: "ty-page-header__actions" }, props.actions) : null), slots["default"] ? createElement("div", { className: "ty-page-header__extra" }, props.children) : null));
+});
+//#endregion
+//#region src/elements/react/TyProgressBar.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$26 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$26 = (v) => truthy$26(v) ? String(v) : void 0;
+const DEFAULTS$25 = {
+	value: 0,
+	minValue: 0,
+	maxValue: 100,
+	inProgressLabel: "In progress",
+	tone: "accent",
+	size: "regular"
+};
+const TyProgressBar = forwardRef(function TyProgressBar(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		value: props.value ?? DEFAULTS$25.value,
+		minValue: props.minValue ?? DEFAULTS$25.minValue,
+		maxValue: props.maxValue ?? DEFAULTS$25.maxValue,
+		label: props.label,
+		accessibleLabel: props.accessibleLabel,
+		valueLabel: props.valueLabel,
+		showValue: props.showValue,
+		indeterminate: props.indeterminate,
+		inProgressLabel: props.inProgressLabel ?? DEFAULTS$25.inProgressLabel,
+		tone: props.tone ?? DEFAULTS$25.tone,
+		size: props.size ?? DEFAULTS$25.size
+	};
+	return createElement("ty-progress-bar", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"value": text$26(p.value),
+		"min-value": text$26(p.minValue),
+		"max-value": text$26(p.maxValue),
+		"label": text$26(p.label),
+		"accessible-label": text$26(p.accessibleLabel),
+		"value-label": text$26(p.valueLabel),
+		"show-value": text$26(p.showValue),
+		"indeterminate": truthy$26(p.indeterminate) ? true : void 0,
+		"in-progress-label": text$26(p.inProgressLabel),
+		"tone": text$26(p.tone),
+		"size": text$26(p.size)
+	}, createElement("div", {
+		className: "ty-progress",
+		role: "progressbar",
+		"aria-labelledby": truthy$26(p.label) ? `${instance}-label` : void 0,
+		"aria-label": !truthy$26(p.label) ? p.accessibleLabel : void 0,
+		"aria-valuemin": p.minValue,
+		"aria-valuemax": p.maxValue,
+		"aria-valuenow": !truthy$26(p.indeterminate) ? p.value : void 0,
+		"aria-valuetext": !truthy$26(p.indeterminate) ? p.valueLabel : void 0,
+		"data-tone": p.tone,
+		"data-size": p.size,
+		"data-indeterminate": truthy$26(p.indeterminate) ? "" : void 0
+	}, truthy$26(p.label) || truthy$26(p.indeterminate) || !(p.showValue === "false") ? createElement("div", { className: "ty-progress__header" }, truthy$26(p.label) ? createElement("span", {
+		className: "ty-progress__label",
+		id: `${instance}-label`
+	}, text$26(p.label)) : null, truthy$26(p.indeterminate) || !(p.showValue === "false") ? createElement("span", { className: "ty-progress__value" }) : null) : null, createElement("div", {
+		className: "ty-progress__track",
+		"aria-hidden": "true"
+	}, createElement("div", { className: "ty-progress__fill" }))));
+});
+//#endregion
+//#region src/elements/react/TySectionHeading.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$25 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$25 = (v) => truthy$25(v) ? String(v) : void 0;
+const filled$16 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$24 = { level: "2" };
+const TySectionHeading = forwardRef(function TySectionHeading(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		title: props.title,
+		level: props.level ?? DEFAULTS$24.level,
+		subtitle: props.subtitle,
+		truncate: props.truncate,
+		headingId: props.headingId
+	};
+	const slots = {
+		"icon": filled$16(props.icon),
+		"trailing": filled$16(props.trailing),
+		"default": filled$16(props.children)
+	};
+	return createElement("ty-section-heading", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"title": text$25(p.title),
+		"level": text$25(p.level),
+		"subtitle": text$25(p.subtitle),
+		"truncate": truthy$25(p.truncate) ? true : void 0,
+		"heading-id": text$25(p.headingId)
+	}, createElement("div", {
+		className: "ty-section-heading",
+		"data-level": p.level
+	}, createElement("div", { className: "ty-section-heading__row" }, slots["icon"] ? createElement("span", {
+		className: "ty-section-heading__icon",
+		"aria-hidden": "true"
+	}, props.icon) : null, createElement("div", { className: "ty-section-heading__text" }, p.level === "2" ? createElement("h2", {
+		className: "ty-section-heading__title",
+		id: text$25(p.headingId) ?? `${instance}-heading`,
+		"data-truncate": truthy$25(p.truncate) ? "" : void 0,
+		title: truthy$25(p.truncate) ? p.title : void 0
+	}, text$25(p.title)) : null, p.level === "3" ? createElement("h3", {
+		className: "ty-section-heading__title",
+		id: text$25(p.headingId) ?? `${instance}-heading`,
+		"data-truncate": truthy$25(p.truncate) ? "" : void 0,
+		title: truthy$25(p.truncate) ? p.title : void 0
+	}, text$25(p.title)) : null, p.level === "4" ? createElement("h4", {
+		className: "ty-section-heading__title",
+		id: text$25(p.headingId) ?? `${instance}-heading`,
+		"data-truncate": truthy$25(p.truncate) ? "" : void 0,
+		title: truthy$25(p.truncate) ? p.title : void 0
+	}, text$25(p.title)) : null, truthy$25(p.subtitle) ? createElement("p", { className: "ty-section-heading__subtitle" }, text$25(p.subtitle)) : null), slots["trailing"] ? createElement("div", { className: "ty-section-heading__trailing" }, props.trailing) : null), slots["default"] ? createElement("div", { className: "ty-section-heading__extra" }, props.children) : null));
+});
+//#endregion
+//#region src/elements/react/TySegmentedControl.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$24 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$24 = (v) => truthy$24(v) ? String(v) : void 0;
+const DEFAULTS$23 = { size: "regular" };
+const TySegmentedControl = forwardRef(function TySegmentedControl(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		const listeners = [["ty-change", (event) => handlers.current.onChange?.(event.detail)]];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return () => {
+			for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		};
+	}, []);
+	const p = {
+		options: props.options,
+		value: props.value,
+		defaultValue: props.defaultValue,
+		label: props.label,
+		size: props.size ?? DEFAULTS$23.size,
+		fullWidth: props.fullWidth,
+		disabled: props.disabled,
+		iconOnly: props.iconOnly
+	};
+	return createElement("ty-segmented-control", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"options": text$24(p.options),
+		"value": text$24(p.value),
+		"default-value": text$24(p.defaultValue),
+		"label": text$24(p.label),
+		"size": text$24(p.size),
+		"full-width": truthy$24(p.fullWidth) ? true : void 0,
+		"disabled": truthy$24(p.disabled) ? true : void 0,
+		"icon-only": truthy$24(p.iconOnly) ? true : void 0
+	}, createElement("div", {
+		className: "ty-segmented-control",
+		role: "radiogroup",
+		"aria-label": p.label,
+		"aria-disabled": truthy$24(p.disabled) ? "true" : void 0,
+		"data-size": p.size,
+		"data-full-width": truthy$24(p.fullWidth) ? "" : void 0,
+		"data-icon-only": truthy$24(p.iconOnly) ? "" : void 0,
+		"data-disabled": truthy$24(p.disabled) ? "" : void 0
+	}));
+});
+//#endregion
+//#region src/elements/react/TySkipLink.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$23 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$23 = (v) => truthy$23(v) ? String(v) : void 0;
+const DEFAULTS$22 = {
+	targetId: "main-content",
+	label: "Skip to main content"
+};
+const TySkipLink = forwardRef(function TySkipLink(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		targetId: props.targetId ?? DEFAULTS$22.targetId,
+		label: props.label ?? DEFAULTS$22.label
+	};
+	return createElement("ty-skip-link", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"target-id": text$23(p.targetId),
+		"label": text$23(p.label)
+	}, createElement("a", {
+		className: "ty-skip-link",
+		onClick: (event) => handlers.current.onClick?.(event)
+	}, text$23(p.label)));
+});
+//#endregion
+//#region src/elements/react/TyTabs.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$22 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$22 = (v) => truthy$22(v) ? String(v) : void 0;
+const DEFAULTS$21 = {
+	orientation: "horizontal",
+	activation: "automatic"
+};
+const TyTabs = forwardRef(function TyTabs(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		const listeners = [["ty-selection-change", (event) => handlers.current.onSelectionChange?.(event.detail)]];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return () => {
+			for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		};
+	}, []);
+	const p = {
+		selectedKey: props.selectedKey,
+		defaultSelectedKey: props.defaultSelectedKey,
+		orientation: props.orientation ?? DEFAULTS$21.orientation,
+		activation: props.activation ?? DEFAULTS$21.activation,
+		label: props.label,
+		tabs: props.tabs,
+		keepMounted: props.keepMounted
+	};
+	return createElement("ty-tabs", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"selected-key": text$22(p.selectedKey),
+		"default-selected-key": text$22(p.defaultSelectedKey),
+		"orientation": text$22(p.orientation),
+		"activation": text$22(p.activation),
+		"label": text$22(p.label),
+		"tabs": text$22(p.tabs),
+		"keep-mounted": truthy$22(p.keepMounted) ? true : void 0
+	}, createElement("div", {
+		className: "ty-tabs",
+		"data-orientation": p.orientation
+	}, createElement("div", {
+		className: "ty-tabs__list",
+		role: "tablist",
+		"aria-label": p.label,
+		"aria-orientation": p.orientation,
+		"data-orientation": p.orientation
+	}), props.children));
+});
+//#endregion
+//#region src/elements/react/TyTagField.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$21 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$21 = (v) => truthy$21(v) ? String(v) : void 0;
+const DEFAULTS$20 = {
+	tone: "neutral",
+	removeLabel: "Remove {value}",
+	chosenLabel: "{field}: chosen values",
+	suggestionsLabel: "Suggestions"
+};
+const TyTagField = forwardRef(function TyTagField(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		const listeners = [["ty-change", (event) => handlers.current.onChange?.(event.detail)]];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return () => {
+			for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		};
+	}, []);
+	const p = {
+		value: props.value,
+		suggestions: props.suggestions,
+		suggestionLabels: props.suggestionLabels,
+		allowFreeText: props.allowFreeText,
+		max: props.max,
+		disabled: props.disabled,
+		tone: props.tone ?? DEFAULTS$20.tone,
+		categoryIndex: props.categoryIndex,
+		label: props.label,
+		accessibleLabel: props.accessibleLabel,
+		placeholder: props.placeholder,
+		helperText: props.helperText,
+		errorText: props.errorText,
+		removeLabel: props.removeLabel ?? DEFAULTS$20.removeLabel,
+		chosenLabel: props.chosenLabel ?? DEFAULTS$20.chosenLabel,
+		suggestionsLabel: props.suggestionsLabel ?? DEFAULTS$20.suggestionsLabel,
+		testId: props.testId
+	};
+	return createElement("ty-tag-field", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"value": text$21(p.value),
+		"suggestions": text$21(p.suggestions),
+		"suggestion-labels": text$21(p.suggestionLabels),
+		"allow-free-text": text$21(p.allowFreeText),
+		"max": text$21(p.max),
+		"disabled": truthy$21(p.disabled) ? true : void 0,
+		"tone": text$21(p.tone),
+		"category-index": text$21(p.categoryIndex),
+		"label": text$21(p.label),
+		"accessible-label": text$21(p.accessibleLabel),
+		"placeholder": text$21(p.placeholder),
+		"helper-text": text$21(p.helperText),
+		"error-text": text$21(p.errorText),
+		"remove-label": text$21(p.removeLabel),
+		"chosen-label": text$21(p.chosenLabel),
+		"suggestions-label": text$21(p.suggestionsLabel),
+		"test-id": text$21(p.testId)
+	});
+});
+//#endregion
+//#region src/elements/react/TyToast.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$20 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$20 = (v) => truthy$20(v) ? String(v) : void 0;
+const DEFAULTS$19 = {
+	placement: "top-end",
+	maxVisible: 3,
+	historyLimit: 50,
+	regionLabel: "Notifications",
+	dismissLabel: "Dismiss notification"
+};
+const TyToast = forwardRef(function TyToast(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		const listeners = [["ty-toast-dismiss", (event) => handlers.current.onDismiss?.(event.detail)], ["ty-toast-action", (event) => handlers.current.onAction?.(event.detail)]];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return () => {
+			for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		};
+	}, []);
+	const p = {
+		placement: props.placement ?? DEFAULTS$19.placement,
+		maxVisible: props.maxVisible ?? DEFAULTS$19.maxVisible,
+		historyLimit: props.historyLimit ?? DEFAULTS$19.historyLimit,
+		regionLabel: props.regionLabel ?? DEFAULTS$19.regionLabel,
+		dismissLabel: props.dismissLabel ?? DEFAULTS$19.dismissLabel
+	};
+	return createElement("ty-toast", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"placement": text$20(p.placement),
+		"max-visible": text$20(p.maxVisible),
+		"history-limit": text$20(p.historyLimit),
+		"region-label": text$20(p.regionLabel),
+		"dismiss-label": text$20(p.dismissLabel)
+	});
+});
+//#endregion
+//#region src/elements/react/TyWheelPicker.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$19 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$19 = (v) => truthy$19(v) ? String(v) : void 0;
+const DEFAULTS$18 = { visibleRows: 5 };
+const TyWheelPicker = forwardRef(function TyWheelPicker(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		const listeners = [["ty-change", (event) => handlers.current.onChange?.(event.detail)]];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return () => {
+			for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		};
+	}, []);
+	const p = {
+		options: props.options,
+		value: props.value,
+		label: props.label,
+		visibleRows: props.visibleRows ?? DEFAULTS$18.visibleRows,
+		disabled: props.disabled,
+		columns: props.columns,
+		testId: props.testId
+	};
+	return createElement("ty-wheel-picker", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"options": text$19(p.options),
+		"value": text$19(p.value),
+		"label": text$19(p.label),
+		"visible-rows": text$19(p.visibleRows),
+		"disabled": truthy$19(p.disabled) ? true : void 0,
+		"columns": text$19(p.columns),
+		"test-id": text$19(p.testId)
+	});
+});
+//#endregion
+//#region src/elements/react/TyButton.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$18 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$18 = (v) => truthy$18(v) ? String(v) : void 0;
+const filled$15 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$17 = {
+	variant: "secondary",
+	size: "regular",
+	shape: "rounded",
+	type: "button"
+};
+const TyButton = forwardRef(function TyButton(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		variant: props.variant ?? DEFAULTS$17.variant,
+		size: props.size ?? DEFAULTS$17.size,
+		shape: props.shape ?? DEFAULTS$17.shape,
+		iconOnly: props.iconOnly,
+		fullWidth: props.fullWidth,
+		busy: props.busy,
+		disabled: props.disabled,
+		type: props.type ?? DEFAULTS$17.type,
+		name: props.name,
+		value: props.value,
+		accessibleLabel: props.accessibleLabel,
+		pressed: props.pressed,
+		expanded: props.expanded,
+		controls: props.controls,
+		haspopup: props.haspopup,
+		testId: props.testId
+	};
+	const slots = {
+		"default": filled$15(props.children),
+		"icon": filled$15(props.icon),
+		"trailing-icon": filled$15(props.trailingIcon)
+	};
+	return createElement("ty-button", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"variant": text$18(p.variant),
+		"size": text$18(p.size),
+		"shape": text$18(p.shape),
+		"icon-only": truthy$18(p.iconOnly) ? true : void 0,
+		"full-width": truthy$18(p.fullWidth) ? true : void 0,
+		"busy": truthy$18(p.busy) ? true : void 0,
+		"disabled": truthy$18(p.disabled) ? true : void 0,
+		"type": text$18(p.type),
+		"name": text$18(p.name),
+		"value": text$18(p.value),
+		"accessible-label": text$18(p.accessibleLabel),
+		"pressed": text$18(p.pressed),
+		"expanded": text$18(p.expanded),
+		"controls": text$18(p.controls),
+		"haspopup": text$18(p.haspopup),
+		"test-id": text$18(p.testId)
+	}, createElement("button", {
+		className: "ty-button",
+		type: p.type,
+		name: p.name,
+		value: p.value,
+		disabled: truthy$18(p.disabled) || void 0,
+		"aria-busy": truthy$18(p.busy) ? "true" : void 0,
+		"aria-disabled": truthy$18(p.busy) ? "true" : void 0,
+		"aria-label": p.accessibleLabel,
+		"aria-pressed": p.pressed,
+		"aria-expanded": p.expanded,
+		"aria-controls": p.controls,
+		"aria-haspopup": p.haspopup,
+		"data-testid": p.testId,
+		title: truthy$18(p.iconOnly) ? p.accessibleLabel : void 0,
+		"data-variant": p.variant,
+		"data-size": p.size,
+		"data-shape": p.shape,
+		"data-icon-only": truthy$18(p.iconOnly) ? "" : void 0,
+		"data-full-width": truthy$18(p.fullWidth) ? "" : void 0,
+		"data-busy": truthy$18(p.busy) ? "" : void 0,
+		onClick: (event) => handlers.current.onClick?.(event)
+	}, truthy$18(p.busy) ? createElement("span", {
+		className: "ty-button__busy",
+		"aria-hidden": "true"
+	}) : null, !truthy$18(p.busy) && slots["icon"] ? createElement("span", {
+		className: "ty-button__icon",
+		"aria-hidden": "true"
+	}, props.icon) : null, !truthy$18(p.iconOnly) ? createElement("span", { className: "ty-button__label" }, props.children) : null, !truthy$18(p.iconOnly) && slots["trailing-icon"] ? createElement("span", {
+		className: "ty-button__icon",
+		"aria-hidden": "true"
+	}, props.trailingIcon) : null));
+});
+//#endregion
+//#region src/elements/react/TyCheckbox.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$17 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$17 = (v) => truthy$17(v) ? String(v) : void 0;
+const filled$14 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$16 = { appearance: "tile" };
+const TyCheckbox = forwardRef(function TyCheckbox(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		checked: props.checked,
+		indeterminate: props.indeterminate,
+		disabled: props.disabled,
+		required: props.required,
+		name: props.name,
+		value: props.value,
+		appearance: props.appearance ?? DEFAULTS$16.appearance,
+		accessibleLabel: props.accessibleLabel,
+		testId: props.testId
+	};
+	const slots = {
+		"default": filled$14(props.children),
+		"description": filled$14(props.description),
+		"error": filled$14(props.error)
+	};
+	return createElement("ty-checkbox", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"checked": truthy$17(p.checked) ? true : void 0,
+		"indeterminate": truthy$17(p.indeterminate) ? true : void 0,
+		"disabled": truthy$17(p.disabled) ? true : void 0,
+		"required": truthy$17(p.required) ? true : void 0,
+		"name": text$17(p.name),
+		"value": text$17(p.value),
+		"appearance": text$17(p.appearance),
+		"accessible-label": text$17(p.accessibleLabel),
+		"test-id": text$17(p.testId)
+	}, createElement("div", {
+		className: "ty-checkbox",
+		"data-appearance": p.appearance
+	}, createElement("label", {
+		className: "ty-checkbox__row",
+		"data-selected": truthy$17(p.checked) ? "" : void 0,
+		"data-indeterminate": truthy$17(p.indeterminate) ? "" : void 0,
+		"data-disabled": truthy$17(p.disabled) ? "" : void 0
+	}, createElement("input", {
+		className: "ty-visually-hidden",
+		type: "checkbox",
+		name: p.name,
+		value: p.value,
+		checked: Boolean(p.checked),
+		disabled: truthy$17(p.disabled) || void 0,
+		required: truthy$17(p.required) || void 0,
+		"aria-label": !slots["default"] ? p.accessibleLabel : void 0,
+		"aria-labelledby": slots["default"] ? `${instance}-label` : void 0,
+		"aria-describedby": slots["description"] ? `${instance}-description` : void 0,
+		"aria-invalid": slots["error"] ? "true" : void 0,
+		"aria-errormessage": slots["error"] ? `${instance}-error` : void 0,
+		"data-testid": p.testId,
+		onChange: (event) => handlers.current.onChange?.({ checked: event.currentTarget.checked }, event)
+	}), createElement("span", {
+		className: "ty-checkbox__indicator",
+		"aria-hidden": "true"
+	}, createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-checkbox__check",
+		d: "M20 6 9 17l-5-5"
+	}), createElement("path", {
+		className: "ty-checkbox__minus",
+		d: "M5 12h14"
+	}))), slots["default"] || slots["description"] ? createElement("span", { className: "ty-checkbox__text" }, slots["default"] ? createElement("span", {
+		className: "ty-checkbox__label",
+		id: `${instance}-label`
+	}, props.children) : null, slots["description"] ? createElement("span", {
+		className: "ty-checkbox__description",
+		id: `${instance}-description`
+	}, props.description) : null) : null), slots["error"] ? createElement("p", {
+		className: "ty-checkbox__error",
+		id: `${instance}-error`,
+		"aria-live": "polite"
+	}, createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-checkbox__error-glyph",
+		d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20ZM12 8v4M12 16h.01"
+	})), createElement("span", { className: "ty-checkbox__error-text" }, props.error)) : null));
+});
+//#endregion
+//#region src/elements/react/TyDrawer.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$16 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$16 = (v) => truthy$16(v) ? String(v) : void 0;
+const filled$13 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$15 = {
+	placement: "bottom",
+	width: "medium",
+	closeLabel: "Close"
+};
+const TyDrawer = forwardRef(function TyDrawer(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		const listeners = [["ty-open-change", (event) => handlers.current.onOpenChange?.(event.detail)]];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return () => {
+			for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		};
+	}, []);
+	const p = {
+		open: props.open,
+		placement: props.placement ?? DEFAULTS$15.placement,
+		width: props.width ?? DEFAULTS$15.width,
+		maxHeight: props.maxHeight,
+		showHandle: props.showHandle,
+		dismissible: props.dismissible,
+		closeLabel: props.closeLabel ?? DEFAULTS$15.closeLabel,
+		accessibleLabel: props.accessibleLabel,
+		panelTestId: props.panelTestId,
+		backdropTestId: props.backdropTestId
+	};
+	const slots = {
+		"title": filled$13(props.title),
+		"default": filled$13(props.children)
+	};
+	return createElement("ty-drawer", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"open": truthy$16(p.open) ? true : void 0,
+		"placement": text$16(p.placement),
+		"width": text$16(p.width),
+		"max-height": text$16(p.maxHeight),
+		"show-handle": text$16(p.showHandle),
+		"dismissible": text$16(p.dismissible),
+		"close-label": text$16(p.closeLabel),
+		"accessible-label": text$16(p.accessibleLabel),
+		"panel-test-id": text$16(p.panelTestId),
+		"backdrop-test-id": text$16(p.backdropTestId)
+	}, createElement("div", {
+		className: "ty-drawer__backdrop",
+		hidden: !truthy$16(p.open) ? true : void 0,
+		"data-placement": p.placement,
+		"data-testid": p.backdropTestId
+	}, createElement("div", {
+		className: "ty-drawer",
+		"data-placement": p.placement,
+		"data-width": p.width
+	}, createElement("div", {
+		className: "ty-drawer__dialog",
+		role: "dialog",
+		"aria-modal": "true",
+		tabIndex: "-1",
+		"aria-labelledby": slots["title"] ? `${instance}-title` : void 0,
+		"aria-label": !slots["title"] ? p.accessibleLabel : void 0,
+		"data-testid": p.panelTestId
+	}, createElement("header", { className: "ty-drawer__header" }, p.placement === "bottom" && !(p.showHandle === "false") ? createElement("span", {
+		className: "ty-drawer__handle",
+		"aria-hidden": "true"
+	}) : null, slots["title"] ? createElement("h2", {
+		className: "ty-drawer__title",
+		id: `${instance}-title`
+	}, props.title) : null, createElement("button", {
+		className: "ty-button ty-drawer__close",
+		type: "button",
+		"aria-label": p.closeLabel,
+		title: p.closeLabel,
+		"data-variant": "quiet",
+		"data-size": "compact",
+		"data-shape": "circle",
+		"data-icon-only": ""
+	}, createElement("span", {
+		className: "ty-button__icon",
+		"aria-hidden": "true"
+	}, createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-drawer__glyph",
+		d: "M18 6 6 18"
+	}), createElement("path", {
+		className: "ty-drawer__glyph",
+		d: "m6 6 12 12"
+	}))))), slots["default"] ? createElement("div", { className: "ty-drawer__body" }, props.children) : null, p.placement === "bottom" ? createElement("div", {
+		className: "ty-drawer__inset",
+		"aria-hidden": "true"
+	}) : null))));
+});
+//#endregion
+//#region src/elements/react/TyGradientMark.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$15 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$15 = (v) => truthy$15(v) ? String(v) : void 0;
+const filled$12 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$14 = { size: "medium" };
+const TyGradientMark = forwardRef(function TyGradientMark(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		label: props.label,
+		size: props.size ?? DEFAULTS$14.size,
+		gradient: props.gradient,
+		radius: props.radius,
+		testId: props.testId
+	};
+	const slots = { "default": filled$12(props.children) };
+	return createElement("ty-gradient-mark", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"label": text$15(p.label),
+		"size": text$15(p.size),
+		"gradient": text$15(p.gradient),
+		"radius": text$15(p.radius),
+		"test-id": text$15(p.testId)
+	}, createElement("span", {
+		className: "ty-gradient-mark",
+		role: truthy$15(p.label) ? "img" : void 0,
+		"aria-label": p.label,
+		"aria-hidden": !truthy$15(p.label) ? "true" : void 0,
+		"data-size": p.size,
+		"data-testid": p.testId
+	}, slots["default"] ? createElement("span", {
+		className: "ty-gradient-mark__glyph",
+		"aria-hidden": "true"
+	}, props.children) : null));
+});
+//#endregion
+//#region src/elements/react/TyInlineNotice.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$14 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$14 = (v) => truthy$14(v) ? String(v) : void 0;
+const filled$11 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$13 = {
+	tone: "info",
+	align: "start",
+	titleAs: "p",
+	dismissLabel: "Dismiss",
+	toneWordDanger: "Error: ",
+	toneWordWarning: "Warning: ",
+	toneWordInfo: "Information: ",
+	toneWordSuccess: "Success: "
+};
+const TyInlineNotice = forwardRef(function TyInlineNotice(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		const listeners = [["ty-dismiss", () => handlers.current.onDismiss?.()]];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return () => {
+			for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		};
+	}, []);
+	const p = {
+		tone: props.tone ?? DEFAULTS$13.tone,
+		align: props.align ?? DEFAULTS$13.align,
+		urgency: props.urgency,
+		titleAs: props.titleAs ?? DEFAULTS$13.titleAs,
+		dismissible: props.dismissible,
+		dismissLabel: props.dismissLabel ?? DEFAULTS$13.dismissLabel,
+		toneWordDanger: props.toneWordDanger ?? DEFAULTS$13.toneWordDanger,
+		toneWordWarning: props.toneWordWarning ?? DEFAULTS$13.toneWordWarning,
+		toneWordInfo: props.toneWordInfo ?? DEFAULTS$13.toneWordInfo,
+		toneWordSuccess: props.toneWordSuccess ?? DEFAULTS$13.toneWordSuccess
+	};
+	const slots = {
+		"default": filled$11(props.children),
+		"title": filled$11(props.title),
+		"icon": filled$11(props.icon),
+		"actions": filled$11(props.actions)
+	};
+	return createElement("ty-inline-notice", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"tone": text$14(p.tone),
+		"align": text$14(p.align),
+		"urgency": text$14(p.urgency),
+		"title-as": text$14(p.titleAs),
+		"dismissible": truthy$14(p.dismissible) ? true : void 0,
+		"dismiss-label": text$14(p.dismissLabel),
+		"tone-word-danger": text$14(p.toneWordDanger),
+		"tone-word-warning": text$14(p.toneWordWarning),
+		"tone-word-info": text$14(p.toneWordInfo),
+		"tone-word-success": text$14(p.toneWordSuccess)
+	}, createElement("div", {
+		className: "ty-notice",
+		role: truthy$14(p.urgency) ? {
+			"assertive": "alert",
+			"polite": "status"
+		}[String(p.urgency)] : {
+			"danger": "alert",
+			"warning": "alert",
+			"info": "status",
+			"success": "status"
+		}[String(p.tone)],
+		"data-tone": p.tone,
+		"data-align": p.align
+	}, createElement("span", {
+		className: "ty-notice__icon",
+		"aria-hidden": "true"
+	}, !slots["icon"] && p.tone === "danger" ? createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("circle", {
+		className: "ty-notice__glyph",
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), createElement("line", {
+		className: "ty-notice__glyph",
+		x1: "12",
+		x2: "12",
+		y1: "8",
+		y2: "12"
+	}), createElement("line", {
+		className: "ty-notice__glyph",
+		x1: "12",
+		x2: "12.01",
+		y1: "16",
+		y2: "16"
+	})) : null, !slots["icon"] && p.tone === "warning" ? createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-notice__glyph",
+		d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+	}), createElement("path", {
+		className: "ty-notice__glyph",
+		d: "M12 9v4"
+	}), createElement("path", {
+		className: "ty-notice__glyph",
+		d: "M12 17h.01"
+	})) : null, !slots["icon"] && p.tone === "info" ? createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("circle", {
+		className: "ty-notice__glyph",
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), createElement("path", {
+		className: "ty-notice__glyph",
+		d: "M12 16v-4"
+	}), createElement("path", {
+		className: "ty-notice__glyph",
+		d: "M12 8h.01"
+	})) : null, !slots["icon"] && p.tone === "success" ? createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("circle", {
+		className: "ty-notice__glyph",
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), createElement("path", {
+		className: "ty-notice__glyph",
+		d: "m16 9-5.5 5.5L8 12"
+	})) : null, slots["icon"] ? props.icon : null), createElement("div", { className: "ty-notice__body" }, slots["title"] && p.titleAs === "p" ? createElement("p", { className: "ty-notice__title" }, p.tone === "danger" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordDanger)) : null, p.tone === "warning" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordWarning)) : null, p.tone === "info" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordInfo)) : null, p.tone === "success" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordSuccess)) : null, props.title) : null, slots["title"] && p.titleAs === "h2" ? createElement("h2", { className: "ty-notice__title" }, p.tone === "danger" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordDanger)) : null, p.tone === "warning" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordWarning)) : null, p.tone === "info" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordInfo)) : null, p.tone === "success" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordSuccess)) : null, props.title) : null, slots["title"] && p.titleAs === "h3" ? createElement("h3", { className: "ty-notice__title" }, p.tone === "danger" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordDanger)) : null, p.tone === "warning" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordWarning)) : null, p.tone === "info" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordInfo)) : null, p.tone === "success" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordSuccess)) : null, props.title) : null, slots["title"] && p.titleAs === "h4" ? createElement("h4", { className: "ty-notice__title" }, p.tone === "danger" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordDanger)) : null, p.tone === "warning" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordWarning)) : null, p.tone === "info" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordInfo)) : null, p.tone === "success" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordSuccess)) : null, props.title) : null, createElement("div", { className: "ty-notice__message" }, !slots["title"] && p.tone === "danger" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordDanger)) : null, !slots["title"] && p.tone === "warning" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordWarning)) : null, !slots["title"] && p.tone === "info" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordInfo)) : null, !slots["title"] && p.tone === "success" ? createElement("span", { className: "ty-visually-hidden" }, text$14(p.toneWordSuccess)) : null, props.children), slots["actions"] ? createElement("div", { className: "ty-notice__actions" }, props.actions) : null), truthy$14(p.dismissible) ? createElement("button", {
+		className: "ty-button ty-notice__dismiss",
+		type: "button",
+		"data-variant": "quiet",
+		"data-size": "compact",
+		"data-icon-only": "",
+		"aria-label": p.dismissLabel
+	}, createElement("span", {
+		className: "ty-button__icon",
+		"aria-hidden": "true"
+	}, createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-notice__glyph",
+		d: "M18 6 6 18"
+	}), createElement("path", {
+		className: "ty-notice__glyph",
+		d: "m6 6 12 12"
+	})))) : null));
+});
+//#endregion
+//#region src/elements/react/TyLink.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$13 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$13 = (v) => truthy$13(v) ? String(v) : void 0;
+const DEFAULTS$12 = {
+	emphasis: "underlined",
+	newTabLabel: "(opens in a new tab)"
+};
+const TyLink = forwardRef(function TyLink(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		href: props.href,
+		emphasis: props.emphasis ?? DEFAULTS$12.emphasis,
+		external: props.external,
+		current: props.current,
+		standalone: props.standalone,
+		newTabLabel: props.newTabLabel ?? DEFAULTS$12.newTabLabel,
+		accessibleLabel: props.accessibleLabel,
+		describedBy: props.describedBy
+	};
+	return createElement("ty-link", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"href": text$13(p.href),
+		"emphasis": text$13(p.emphasis),
+		"external": truthy$13(p.external) ? true : void 0,
+		"current": truthy$13(p.current) ? true : void 0,
+		"standalone": truthy$13(p.standalone) ? true : void 0,
+		"new-tab-label": text$13(p.newTabLabel),
+		"accessible-label": text$13(p.accessibleLabel),
+		"described-by": text$13(p.describedBy)
+	}, createElement("a", {
+		className: "ty-link",
+		href: p.href,
+		target: truthy$13(p.external) ? "_blank" : void 0,
+		rel: truthy$13(p.external) ? "noopener noreferrer" : void 0,
+		"aria-current": truthy$13(p.current) ? "page" : void 0,
+		"aria-label": p.accessibleLabel,
+		"aria-describedby": p.describedBy,
+		"data-emphasis": p.emphasis,
+		"data-standalone": truthy$13(p.standalone) ? "" : void 0,
+		onClick: (event) => handlers.current.onClick?.(event)
+	}, props.children, truthy$13(p.external) ? createElement("svg", {
+		className: "ty-icon ty-mirror-rtl ty-link__external",
+		"aria-hidden": "true",
+		focusable: "false",
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	}, createElement("path", { d: "M15 3h6v6" }), createElement("path", { d: "M10 14 21 3" }), createElement("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })) : null, truthy$13(p.external) ? createElement("span", { className: "ty-visually-hidden ty-link__hint" }) : null));
+});
+//#endregion
+//#region src/elements/react/TyModal.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$12 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$12 = (v) => truthy$12(v) ? String(v) : void 0;
+const filled$10 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$11 = {
+	width: "regular",
+	role: "dialog",
+	initialFocus: "first",
+	closeLabel: "Close"
+};
+const TyModal = forwardRef(function TyModal(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		const listeners = [["ty-open-change", (event) => handlers.current.onOpenChange?.(event.detail)]];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return () => {
+			for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		};
+	}, []);
+	const p = {
+		isOpen: props.isOpen,
+		width: props.width ?? DEFAULTS$11.width,
+		role: props.role ?? DEFAULTS$11.role,
+		dismissOnBackdrop: props.dismissOnBackdrop,
+		showCloseButton: props.showCloseButton,
+		initialFocus: props.initialFocus ?? DEFAULTS$11.initialFocus,
+		busy: props.busy,
+		closeLabel: props.closeLabel ?? DEFAULTS$11.closeLabel,
+		accessibleLabel: props.accessibleLabel,
+		labelledBy: props.labelledBy,
+		describedBy: props.describedBy,
+		panelTestId: props.panelTestId,
+		backdropTestId: props.backdropTestId
+	};
+	const slots = {
+		"title": filled$10(props.title),
+		"description": filled$10(props.description),
+		"default": filled$10(props.children),
+		"actions": filled$10(props.actions)
+	};
+	return createElement("ty-modal", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"open": truthy$12(p.isOpen) ? true : void 0,
+		"width": text$12(p.width),
+		"dialog-role": text$12(p.role),
+		"dismiss-on-backdrop": text$12(p.dismissOnBackdrop),
+		"show-close-button": text$12(p.showCloseButton),
+		"initial-focus": text$12(p.initialFocus),
+		"busy": truthy$12(p.busy) ? true : void 0,
+		"close-label": text$12(p.closeLabel),
+		"accessible-label": text$12(p.accessibleLabel),
+		"labelled-by": text$12(p.labelledBy),
+		"described-by": text$12(p.describedBy),
+		"panel-test-id": text$12(p.panelTestId),
+		"backdrop-test-id": text$12(p.backdropTestId)
+	}, createElement("div", {
+		className: "ty-modal-dialog__backdrop",
+		hidden: !truthy$12(p.isOpen) ? true : void 0,
+		"data-testid": p.backdropTestId
+	}, createElement("div", {
+		className: "ty-modal-dialog",
+		"data-width": p.width
+	}, createElement("div", {
+		className: "ty-modal-dialog__panel",
+		role: p.role,
+		"aria-modal": "true",
+		tabIndex: "-1",
+		"aria-labelledby": [text$12(p.labelledBy) ?? "", slots["title"] ? `${instance}-title` : ""].filter(Boolean).join(" ") || void 0,
+		"aria-describedby": [text$12(p.describedBy) ?? "", slots["description"] ? `${instance}-description` : ""].filter(Boolean).join(" ") || void 0,
+		"aria-label": !slots["title"] && !truthy$12(p.labelledBy) ? p.accessibleLabel : void 0,
+		"data-busy": truthy$12(p.busy) ? "" : void 0,
+		"data-testid": p.panelTestId
+	}, createElement("div", {
+		className: "ty-modal-dialog__inner",
+		"aria-busy": truthy$12(p.busy) ? "true" : void 0
+	}, (slots["title"] || p.showCloseButton === "true" || !(p.role === "alertdialog")) && (slots["title"] || !(p.showCloseButton === "false")) ? createElement("header", { className: "ty-modal-dialog__header" }, slots["title"] ? createElement("h2", {
+		className: "ty-modal-dialog__title",
+		id: `${instance}-title`,
+		tabIndex: "-1"
+	}, props.title) : null, !(p.showCloseButton === "false") && (p.showCloseButton === "true" || !(p.role === "alertdialog")) ? createElement("button", {
+		className: "ty-button ty-modal-dialog__close",
+		type: "button",
+		"aria-label": p.closeLabel,
+		title: p.closeLabel,
+		disabled: truthy$12(p.busy) || void 0,
+		"data-variant": "quiet",
+		"data-size": "compact",
+		"data-shape": "circle",
+		"data-icon-only": ""
+	}, createElement("span", {
+		className: "ty-button__icon",
+		"aria-hidden": "true"
+	}, createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-modal-dialog__glyph",
+		d: "M18 6 6 18"
+	}), createElement("path", {
+		className: "ty-modal-dialog__glyph",
+		d: "m6 6 12 12"
+	})))) : null) : null, slots["description"] ? createElement("p", {
+		className: "ty-modal-dialog__description",
+		id: `${instance}-description`
+	}, props.description) : null, slots["default"] ? createElement("div", { className: "ty-modal-dialog__body" }, props.children) : null, slots["actions"] ? createElement("footer", { className: "ty-modal-dialog__actions" }, props.actions) : null)))));
+});
+//#endregion
+//#region src/elements/react/TyNativeSelect.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$11 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$11 = (v) => truthy$11(v) ? String(v) : void 0;
+const filled$9 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const TyNativeSelect = forwardRef(function TyNativeSelect(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		value: props.value,
+		placeholder: props.placeholder,
+		name: props.name,
+		required: props.required,
+		disabled: props.disabled,
+		invalid: props.invalid,
+		accessibleLabel: props.accessibleLabel,
+		labelledBy: props.labelledBy,
+		describedBy: props.describedBy,
+		controlId: props.controlId,
+		testId: props.testId
+	};
+	const slots = {
+		"default": filled$9(props.children),
+		"label": filled$9(props.label),
+		"hint": filled$9(props.hint),
+		"error": filled$9(props.error)
+	};
+	return createElement("ty-native-select", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"value": text$11(p.value),
+		"placeholder": text$11(p.placeholder),
+		"name": text$11(p.name),
+		"required": truthy$11(p.required) ? true : void 0,
+		"disabled": truthy$11(p.disabled) ? true : void 0,
+		"invalid": truthy$11(p.invalid) ? true : void 0,
+		"accessible-label": text$11(p.accessibleLabel),
+		"labelled-by": text$11(p.labelledBy),
+		"described-by": text$11(p.describedBy),
+		"control-id": text$11(p.controlId),
+		"test-id": text$11(p.testId)
+	}, createElement("div", {
+		className: "ty-native-select",
+		"data-invalid": truthy$11(p.invalid) || slots["error"] ? "" : void 0,
+		"data-disabled": truthy$11(p.disabled) ? "" : void 0
+	}, slots["label"] ? createElement("label", {
+		className: "ty-native-select__label",
+		htmlFor: text$11(p.controlId) ?? `${instance}-control`
+	}, props.label) : null, slots["hint"] ? createElement("p", {
+		className: "ty-native-select__hint",
+		id: `${instance}-hint`
+	}, props.hint) : null, createElement("div", { className: "ty-native-select__frame" }, createElement("select", {
+		className: "ty-native-select__control",
+		id: text$11(p.controlId) ?? `${instance}-control`,
+		name: p.name,
+		required: truthy$11(p.required) || void 0,
+		disabled: truthy$11(p.disabled) || void 0,
+		"aria-label": !slots["label"] ? p.accessibleLabel : void 0,
+		"aria-labelledby": !slots["label"] && !truthy$11(p.accessibleLabel) ? p.labelledBy : void 0,
+		"aria-describedby": [
+			text$11(p.describedBy) ?? "",
+			slots["hint"] ? `${instance}-hint` : "",
+			slots["error"] ? `${instance}-error` : ""
+		].filter(Boolean).join(" ") || void 0,
+		"aria-invalid": truthy$11(p.invalid) || slots["error"] ? "true" : void 0,
+		"data-testid": p.testId,
+		onChange: (event) => handlers.current.onChange?.({ value: event.currentTarget.value }, event)
+	}, truthy$11(p.placeholder) ? createElement("option", {
+		className: "ty-native-select__placeholder",
+		label: p.placeholder,
+		value: "",
+		disabled: true
+	}) : null, props.children), createElement("svg", {
+		className: "ty-icon ty-native-select__chevron",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-native-select__chevron-path",
+		d: "m6 9 6 6 6-6"
+	}))), slots["error"] ? createElement("p", {
+		className: "ty-native-select__error",
+		id: `${instance}-error`,
+		role: "alert"
+	}, createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-native-select__error-glyph",
+		d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20ZM12 8v4M12 16h.01"
+	})), createElement("span", { className: "ty-native-select__error-text" }, props.error)) : null));
+});
+//#endregion
+//#region src/elements/react/TyPopover.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$10 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$10 = (v) => truthy$10(v) ? String(v) : void 0;
+const filled$8 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$10 = {
+	placement: "bottom",
+	align: "center",
+	offset: "2"
+};
+const TyPopover = forwardRef(function TyPopover(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		const listeners = [["ty-open-change", (event) => handlers.current.onOpenChange?.(event.detail)]];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return () => {
+			for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		};
+	}, []);
+	const p = {
+		open: props.open,
+		triggerLabel: props.triggerLabel,
+		title: props.title,
+		placement: props.placement ?? DEFAULTS$10.placement,
+		align: props.align ?? DEFAULTS$10.align,
+		offset: props.offset ?? DEFAULTS$10.offset,
+		showArrow: props.showArrow,
+		panelTestId: props.panelTestId,
+		accessibleLabel: props.accessibleLabel
+	};
+	const slots = {
+		"trigger": filled$8(props.trigger),
+		"default": filled$8(props.children)
+	};
+	return createElement("ty-popover", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"open": truthy$10(p.open) ? true : void 0,
+		"trigger-label": text$10(p.triggerLabel),
+		"title": text$10(p.title),
+		"placement": text$10(p.placement),
+		"align": text$10(p.align),
+		"offset": text$10(p.offset),
+		"show-arrow": text$10(p.showArrow),
+		"panel-test-id": text$10(p.panelTestId),
+		"accessible-label": text$10(p.accessibleLabel)
+	}, createElement("div", { className: "ty-popover__anchor" }, !slots["trigger"] ? createElement("button", {
+		className: "ty-button ty-popover__trigger",
+		type: "button",
+		"aria-label": p.triggerLabel,
+		"aria-haspopup": "dialog",
+		"data-variant": "quiet",
+		"data-size": "compact",
+		"data-shape": "circle",
+		"data-icon-only": ""
+	}, createElement("span", {
+		className: "ty-button__icon",
+		"aria-hidden": "true"
+	}, createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("circle", {
+		className: "ty-popover__glyph",
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), createElement("path", {
+		className: "ty-popover__glyph",
+		d: "M12 16v-4"
+	}), createElement("path", {
+		className: "ty-popover__glyph",
+		d: "M12 8h.01"
+	})))) : null, slots["trigger"] ? props.trigger : null, createElement("div", {
+		className: "ty-popover",
+		hidden: !truthy$10(p.open) ? true : void 0,
+		role: "dialog",
+		"data-placement": p.placement,
+		"data-testid": p.panelTestId
+	}, !(p.showArrow === "false") ? createElement("div", {
+		className: "ty-popover__arrow",
+		"aria-hidden": "true"
+	}) : null, createElement("div", { className: "ty-popover__dialog" }, truthy$10(p.title) ? createElement("h3", { className: "ty-popover__title" }, text$10(p.title)) : null, slots["default"] ? createElement("div", { className: "ty-popover__content" }, props.children) : null))));
+});
+//#endregion
+//#region src/elements/react/TySeparator.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$9 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$9 = (v) => truthy$9(v) ? String(v) : void 0;
+const filled$7 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$9 = {
+	orientation: "horizontal",
+	emphasis: "regular",
+	spacing: "regular"
+};
+const TySeparator = forwardRef(function TySeparator(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		orientation: props.orientation ?? DEFAULTS$9.orientation,
+		emphasis: props.emphasis ?? DEFAULTS$9.emphasis,
+		semantic: props.semantic,
+		spacing: props.spacing ?? DEFAULTS$9.spacing
+	};
+	const slots = { "caption": filled$7(props.caption) };
+	return createElement("ty-separator", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"orientation": text$9(p.orientation),
+		"emphasis": text$9(p.emphasis),
+		"semantic": truthy$9(p.semantic) ? true : void 0,
+		"spacing": text$9(p.spacing)
+	}, createElement("div", {
+		className: "ty-separator",
+		role: truthy$9(p.semantic) && !slots["caption"] ? "separator" : void 0,
+		"aria-orientation": truthy$9(p.semantic) && !slots["caption"] ? p.orientation : void 0,
+		"aria-hidden": !truthy$9(p.semantic) && !slots["caption"] ? "true" : void 0,
+		"data-orientation": p.orientation,
+		"data-emphasis": p.emphasis,
+		"data-spacing": p.spacing,
+		"data-captioned": slots["caption"] ? "" : void 0
+	}, slots["caption"] ? createElement("span", {
+		className: "ty-separator__line",
+		"aria-hidden": "true"
+	}) : null, slots["caption"] ? createElement("span", { className: "ty-separator__caption" }, props.caption) : null, slots["caption"] ? createElement("span", {
+		className: "ty-separator__line",
+		"aria-hidden": "true"
+	}) : null));
+});
+//#endregion
+//#region src/elements/react/TySkeleton.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$8 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$8 = (v) => truthy$8(v) ? String(v) : void 0;
+const DEFAULTS$8 = {
+	shape: "line",
+	lines: 1
+};
+const TySkeleton = forwardRef(function TySkeleton(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		shape: props.shape ?? DEFAULTS$8.shape,
+		width: props.width,
+		lines: props.lines ?? DEFAULTS$8.lines,
+		preset: props.preset,
+		count: props.count,
+		columns: props.columns,
+		label: props.label
+	};
+	return createElement("ty-skeleton", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"shape": text$8(p.shape),
+		"width": text$8(p.width),
+		"lines": text$8(p.lines),
+		"preset": text$8(p.preset),
+		"count": text$8(p.count),
+		"columns": text$8(p.columns),
+		"label": text$8(p.label)
+	}, createElement("span", {
+		className: "ty-skeleton-root",
+		"aria-busy": truthy$8(p.label) ? "true" : void 0
+	}, createElement("span", {
+		className: "ty-skeleton-content",
+		"aria-hidden": "true"
+	}, !truthy$8(p.preset) && (p.shape === "line" || p.shape === "heading") ? createElement("span", { className: "ty-skeleton-lines" }, createElement("span", {
+		className: "ty-skeleton",
+		"data-shape": p.shape,
+		"data-width": p.width
+	})) : null, !truthy$8(p.preset) && (p.shape === "circle" || p.shape === "rect") ? createElement("span", {
+		className: "ty-skeleton",
+		"data-shape": p.shape,
+		"data-width": p.width
+	}) : null, truthy$8(p.preset) ? createElement("span", {
+		className: "ty-skeleton-preset",
+		"data-preset": p.preset
+	}) : null), truthy$8(p.label) ? createElement("span", {
+		className: "ty-visually-hidden",
+		role: "status"
+	}, text$8(p.label)) : null));
+});
+//#endregion
+//#region src/elements/react/TySpinner.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$7 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$7 = (v) => truthy$7(v) ? String(v) : void 0;
+const filled$6 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$7 = {
+	label: "Loading",
+	size: "medium",
+	shape: "ring",
+	tone: "inherit"
+};
+const TySpinner = forwardRef(function TySpinner(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		label: props.label ?? DEFAULTS$7.label,
+		size: props.size ?? DEFAULTS$7.size,
+		shape: props.shape ?? DEFAULTS$7.shape,
+		tone: props.tone ?? DEFAULTS$7.tone
+	};
+	const slots = { "default": filled$6(props.children) };
+	return createElement("ty-spinner", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"label": text$7(p.label),
+		"size": text$7(p.size),
+		"shape": text$7(p.shape),
+		"tone": text$7(p.tone)
+	}, createElement("span", {
+		className: "ty-spinner",
+		role: "progressbar",
+		"aria-label": p.label,
+		"data-size": p.size,
+		"data-shape": p.shape,
+		"data-tone": p.tone
+	}, p.shape === "ring" ? createElement("span", {
+		className: "ty-spinner__ring",
+		"aria-hidden": "true"
+	}) : null, p.shape === "dots" ? createElement("span", {
+		className: "ty-spinner__dots",
+		"aria-hidden": "true"
+	}, createElement("span", { className: "ty-spinner__dot" }), createElement("span", { className: "ty-spinner__dot" }), createElement("span", { className: "ty-spinner__dot" })) : null, slots["default"] ? createElement("span", {
+		className: "ty-spinner__label",
+		"aria-hidden": "true"
+	}, props.children) : null));
+});
+//#endregion
+//#region src/elements/react/TyStatusPill.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$6 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$6 = (v) => truthy$6(v) ? String(v) : void 0;
+const filled$5 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$6 = { size: "regular" };
+const TyStatusPill = forwardRef(function TyStatusPill(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		status: props.status,
+		tone: props.tone,
+		size: props.size ?? DEFAULTS$6.size,
+		busy: props.busy,
+		announce: props.announce,
+		label: props.label,
+		accessibleLabel: props.accessibleLabel,
+		testId: props.testId
+	};
+	const slots = {
+		"default": filled$5(props.children),
+		"icon": filled$5(props.icon)
+	};
+	return createElement("ty-status-pill", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"status": text$6(p.status),
+		"tone": text$6(p.tone),
+		"size": text$6(p.size),
+		"busy": truthy$6(p.busy) ? true : void 0,
+		"announce": truthy$6(p.announce) ? true : void 0,
+		"label": text$6(p.label),
+		"accessible-label": text$6(p.accessibleLabel),
+		"test-id": text$6(p.testId)
+	}, createElement("span", {
+		className: "ty-status",
+		role: truthy$6(p.announce) ? "status" : void 0,
+		"aria-label": p.accessibleLabel,
+		"data-tone": p.tone,
+		"data-size": p.size,
+		"data-busy": truthy$6(p.busy) ? "" : void 0,
+		"data-status": p.status,
+		"data-testid": p.testId
+	}, slots["icon"] ? createElement("span", {
+		className: "ty-status__icon",
+		"aria-hidden": "true"
+	}, props.icon) : null, createElement("span", { className: "ty-status__label" }, props.children)));
+});
+//#endregion
+//#region src/elements/react/TySurface.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$5 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$5 = (v) => truthy$5(v) ? String(v) : void 0;
+const filled$4 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$5 = {
+	elevation: "sheet",
+	padding: "regular",
+	titleLevel: "h3"
+};
+const TySurface = forwardRef(function TySurface(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		elevation: props.elevation ?? DEFAULTS$5.elevation,
+		padding: props.padding ?? DEFAULTS$5.padding,
+		titleLevel: props.titleLevel ?? DEFAULTS$5.titleLevel,
+		pressable: props.pressable,
+		href: props.href,
+		selected: props.selected,
+		disabled: props.disabled,
+		accessibleLabel: props.accessibleLabel
+	};
+	const slots = {
+		"default": filled$4(props.children),
+		"title": filled$4(props.title),
+		"description": filled$4(props.description),
+		"footer": filled$4(props.footer)
+	};
+	return createElement("ty-surface", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"elevation": text$5(p.elevation),
+		"padding": text$5(p.padding),
+		"title-level": text$5(p.titleLevel),
+		"pressable": truthy$5(p.pressable) ? true : void 0,
+		"href": text$5(p.href),
+		"selected": truthy$5(p.selected) ? true : void 0,
+		"disabled": truthy$5(p.disabled) ? true : void 0,
+		"accessible-label": text$5(p.accessibleLabel)
+	}, createElement("section", {
+		className: "ty-surface",
+		"aria-labelledby": slots["title"] ? `${instance}-title` : void 0,
+		"aria-label": !slots["title"] ? p.accessibleLabel : void 0,
+		"data-elevation": p.elevation,
+		"data-padding": p.padding,
+		"data-pressable": truthy$5(p.pressable) || truthy$5(p.href) ? "" : void 0,
+		"data-selected": truthy$5(p.selected) ? "" : void 0,
+		"data-disabled": (truthy$5(p.pressable) || truthy$5(p.href)) && truthy$5(p.disabled) ? "" : void 0
+	}, slots["title"] || slots["description"] ? createElement("header", { className: "ty-surface__header" }, slots["title"] && p.titleLevel === "h2" ? createElement("h2", {
+		className: "ty-surface__title",
+		id: `${instance}-title`
+	}, truthy$5(p.href) ? createElement("a", {
+		className: "ty-surface__primary",
+		href: !truthy$5(p.disabled) ? p.href : void 0,
+		"aria-disabled": truthy$5(p.disabled) ? "true" : void 0,
+		onClick: (event) => handlers.current.onClick?.(event)
+	}, props.title) : null, !truthy$5(p.href) && truthy$5(p.pressable) ? createElement("button", {
+		className: "ty-surface__primary",
+		type: "button",
+		disabled: truthy$5(p.disabled) || void 0,
+		onClick: (event) => handlers.current.onClick?.(event)
+	}, props.title) : null, !truthy$5(p.href) && !truthy$5(p.pressable) ? props.title : null) : null, slots["title"] && p.titleLevel === "h3" ? createElement("h3", {
+		className: "ty-surface__title",
+		id: `${instance}-title`
+	}, truthy$5(p.href) ? createElement("a", {
+		className: "ty-surface__primary",
+		href: !truthy$5(p.disabled) ? p.href : void 0,
+		"aria-disabled": truthy$5(p.disabled) ? "true" : void 0,
+		onClick: (event) => handlers.current.onClick?.(event)
+	}, props.title) : null, !truthy$5(p.href) && truthy$5(p.pressable) ? createElement("button", {
+		className: "ty-surface__primary",
+		type: "button",
+		disabled: truthy$5(p.disabled) || void 0,
+		onClick: (event) => handlers.current.onClick?.(event)
+	}, props.title) : null, !truthy$5(p.href) && !truthy$5(p.pressable) ? props.title : null) : null, slots["title"] && p.titleLevel === "h4" ? createElement("h4", {
+		className: "ty-surface__title",
+		id: `${instance}-title`
+	}, truthy$5(p.href) ? createElement("a", {
+		className: "ty-surface__primary",
+		href: !truthy$5(p.disabled) ? p.href : void 0,
+		"aria-disabled": truthy$5(p.disabled) ? "true" : void 0,
+		onClick: (event) => handlers.current.onClick?.(event)
+	}, props.title) : null, !truthy$5(p.href) && truthy$5(p.pressable) ? createElement("button", {
+		className: "ty-surface__primary",
+		type: "button",
+		disabled: truthy$5(p.disabled) || void 0,
+		onClick: (event) => handlers.current.onClick?.(event)
+	}, props.title) : null, !truthy$5(p.href) && !truthy$5(p.pressable) ? props.title : null) : null, slots["description"] ? createElement("div", { className: "ty-surface__description" }, props.description) : null) : null, slots["default"] ? createElement("div", { className: "ty-surface__body" }, props.children) : null, slots["footer"] ? createElement("footer", { className: "ty-surface__footer" }, props.footer) : null));
+});
+//#endregion
+//#region src/elements/react/TySwitch.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$4 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$4 = (v) => truthy$4(v) ? String(v) : void 0;
+const filled$3 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$4 = {
+	size: "regular",
+	layout: "inline"
+};
+const TySwitch = forwardRef(function TySwitch(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		checked: props.checked,
+		disabled: props.disabled,
+		readOnly: props.readOnly,
+		name: props.name,
+		value: props.value,
+		size: props.size ?? DEFAULTS$4.size,
+		layout: props.layout ?? DEFAULTS$4.layout,
+		accessibleLabel: props.accessibleLabel,
+		testId: props.testId
+	};
+	const slots = {
+		"default": filled$3(props.children),
+		"description": filled$3(props.description)
+	};
+	return createElement("ty-switch", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"checked": truthy$4(p.checked) ? true : void 0,
+		"disabled": truthy$4(p.disabled) ? true : void 0,
+		"read-only": truthy$4(p.readOnly) ? true : void 0,
+		"name": text$4(p.name),
+		"value": text$4(p.value),
+		"size": text$4(p.size),
+		"layout": text$4(p.layout),
+		"accessible-label": text$4(p.accessibleLabel),
+		"test-id": text$4(p.testId)
+	}, createElement("label", {
+		className: "ty-switch",
+		"data-layout": p.layout,
+		"data-size": p.size,
+		"data-selected": truthy$4(p.checked) ? "" : void 0,
+		"data-disabled": truthy$4(p.disabled) ? "" : void 0,
+		"data-readonly": truthy$4(p.readOnly) ? "" : void 0
+	}, createElement("input", {
+		className: "ty-visually-hidden",
+		type: "checkbox",
+		role: "switch",
+		name: p.name,
+		value: p.value,
+		checked: Boolean(p.checked),
+		disabled: truthy$4(p.disabled) || void 0,
+		"aria-readonly": truthy$4(p.readOnly) ? "true" : void 0,
+		"aria-label": !slots["default"] ? p.accessibleLabel : void 0,
+		"aria-labelledby": slots["default"] ? `${instance}-label` : void 0,
+		"aria-describedby": slots["description"] ? `${instance}-description` : void 0,
+		"data-testid": p.testId,
+		onChange: (event) => handlers.current.onChange?.({ checked: event.currentTarget.checked }, event)
+	}), createElement("span", {
+		className: "ty-switch__track",
+		"aria-hidden": "true"
+	}, createElement("span", { className: "ty-switch__thumb" })), slots["default"] || slots["description"] ? createElement("span", { className: "ty-switch__text" }, slots["default"] ? createElement("span", {
+		className: "ty-switch__label",
+		id: `${instance}-label`
+	}, props.children) : null, slots["description"] ? createElement("span", {
+		className: "ty-switch__description",
+		id: `${instance}-description`
+	}, props.description) : null) : null));
+});
+//#endregion
+//#region src/elements/react/TyTag.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$3 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$3 = (v) => truthy$3(v) ? String(v) : void 0;
+const filled$2 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$3 = {
+	tone: "neutral",
+	size: "regular"
+};
+const TyTag = forwardRef(function TyTag(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		tone: props.tone ?? DEFAULTS$3.tone,
+		categoryIndex: props.categoryIndex,
+		size: props.size ?? DEFAULTS$3.size,
+		removable: props.removable,
+		removeLabel: props.removeLabel,
+		live: props.live,
+		testId: props.testId
+	};
+	const slots = {
+		"default": filled$2(props.children),
+		"icon": filled$2(props.icon)
+	};
+	return createElement("ty-tag", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"tone": text$3(p.tone),
+		"category-index": text$3(p.categoryIndex),
+		"size": text$3(p.size),
+		"removable": truthy$3(p.removable) ? true : void 0,
+		"remove-label": text$3(p.removeLabel),
+		"live": truthy$3(p.live) ? true : void 0,
+		"test-id": text$3(p.testId)
+	}, createElement("span", {
+		className: "ty-tag",
+		role: truthy$3(p.live) ? "status" : void 0,
+		"aria-live": truthy$3(p.live) ? "polite" : void 0,
+		"data-tone": p.tone,
+		"data-size": p.size,
+		"data-removable": truthy$3(p.removable) ? "" : void 0,
+		"data-testid": p.testId
+	}, slots["icon"] ? createElement("span", {
+		className: "ty-tag__icon",
+		"aria-hidden": "true"
+	}, props.icon) : null, !slots["icon"] && truthy$3(p.categoryIndex) ? createElement("span", {
+		className: "ty-tag__swatch",
+		"aria-hidden": "true",
+		"data-category": p.categoryIndex
+	}) : null, createElement("span", { className: "ty-tag__text" }, props.children), truthy$3(p.removable) ? createElement("button", {
+		className: "ty-tag__remove",
+		type: "button",
+		"aria-label": p.removeLabel,
+		onClick: (event) => handlers.current.onClick?.(event)
+	}, createElement("svg", {
+		className: "ty-icon",
+		"aria-hidden": "true",
+		focusable: "false",
+		viewBox: "0 0 12 12",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round"
+	}, createElement("path", { d: "M2.5 2.5l7 7M9.5 2.5l-7 7" }))) : null));
+});
+//#endregion
+//#region src/elements/react/TyTextArea.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$2 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$2 = (v) => truthy$2(v) ? String(v) : void 0;
+const filled$1 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$2 = {
+	rows: 3,
+	resize: "vertical",
+	counterLabel: "{count} of {max} characters",
+	overLimitLabel: "{count} of {max} characters, {over} over the limit"
+};
+const TyTextArea = forwardRef(function TyTextArea(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	const p = {
+		value: props.value,
+		defaultValue: props.defaultValue,
+		rows: props.rows ?? DEFAULTS$2.rows,
+		autoGrow: props.autoGrow,
+		maxRows: props.maxRows,
+		resize: props.resize ?? DEFAULTS$2.resize,
+		maxLength: props.maxLength,
+		showCounter: props.showCounter,
+		counterLabel: props.counterLabel ?? DEFAULTS$2.counterLabel,
+		overLimitLabel: props.overLimitLabel ?? DEFAULTS$2.overLimitLabel,
+		monospace: props.monospace,
+		required: props.required,
+		disabled: props.disabled,
+		readOnly: props.readOnly,
+		invalid: props.invalid,
+		name: props.name,
+		placeholder: props.placeholder,
+		accessibleLabel: props.accessibleLabel,
+		labelledBy: props.labelledBy,
+		describedBy: props.describedBy,
+		controlId: props.controlId,
+		testId: props.testId
+	};
+	const slots = {
+		"label": filled$1(props.label),
+		"hint": filled$1(props.hint),
+		"error": filled$1(props.error)
+	};
+	return createElement("ty-text-area", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"value": text$2(p.value),
+		"default-value": text$2(p.defaultValue),
+		"rows": text$2(p.rows),
+		"auto-grow": truthy$2(p.autoGrow) ? true : void 0,
+		"max-rows": text$2(p.maxRows),
+		"resize": text$2(p.resize),
+		"max-length": text$2(p.maxLength),
+		"show-counter": truthy$2(p.showCounter) ? true : void 0,
+		"counter-label": text$2(p.counterLabel),
+		"over-limit-label": text$2(p.overLimitLabel),
+		"monospace": truthy$2(p.monospace) ? true : void 0,
+		"required": truthy$2(p.required) ? true : void 0,
+		"disabled": truthy$2(p.disabled) ? true : void 0,
+		"read-only": truthy$2(p.readOnly) ? true : void 0,
+		"invalid": truthy$2(p.invalid) ? true : void 0,
+		"name": text$2(p.name),
+		"placeholder": text$2(p.placeholder),
+		"accessible-label": text$2(p.accessibleLabel),
+		"labelled-by": text$2(p.labelledBy),
+		"described-by": text$2(p.describedBy),
+		"control-id": text$2(p.controlId),
+		"test-id": text$2(p.testId)
+	}, createElement("div", {
+		className: "ty-text-area",
+		"data-resize": p.resize,
+		"data-monospace": truthy$2(p.monospace) ? "" : void 0,
+		"data-auto-grow": truthy$2(p.autoGrow) ? "" : void 0,
+		"data-invalid": truthy$2(p.invalid) || slots["error"] ? "" : void 0,
+		"data-readonly": truthy$2(p.readOnly) ? "" : void 0,
+		"data-disabled": truthy$2(p.disabled) ? "" : void 0,
+		"data-testid": p.testId
+	}, slots["label"] ? createElement("label", {
+		className: "ty-text-area__label",
+		htmlFor: text$2(p.controlId) ?? `${instance}-input`
+	}, props.label) : null, slots["hint"] ? createElement("p", {
+		className: "ty-text-area__hint",
+		id: `${instance}-hint`
+	}, props.hint) : null, createElement("textarea", {
+		className: "ty-text-area__input",
+		id: text$2(p.controlId) ?? `${instance}-input`,
+		rows: p.rows,
+		name: p.name,
+		placeholder: p.placeholder,
+		disabled: truthy$2(p.disabled) || void 0,
+		readOnly: truthy$2(p.readOnly) || void 0,
+		required: truthy$2(p.required) || void 0,
+		"aria-label": !slots["label"] ? p.accessibleLabel : void 0,
+		"aria-labelledby": !slots["label"] && !truthy$2(p.accessibleLabel) ? p.labelledBy : void 0,
+		"aria-describedby": [
+			text$2(p.describedBy) ?? "",
+			slots["hint"] ? `${instance}-hint` : "",
+			slots["error"] ? `${instance}-error` : "",
+			truthy$2(p.showCounter) && truthy$2(p.maxLength) ? `${instance}-counter` : ""
+		].filter(Boolean).join(" ") || void 0,
+		"aria-invalid": truthy$2(p.invalid) || slots["error"] ? "true" : void 0,
+		onChange: (event) => handlers.current.onChange?.({ value: event.currentTarget.value }, event)
+	}), slots["error"] ? createElement("p", {
+		className: "ty-text-area__error",
+		id: `${instance}-error`
+	}, createElement("svg", {
+		className: "ty-icon",
+		"aria-hidden": "true",
+		focusable: "false",
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	}, createElement("circle", {
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), createElement("line", {
+		x1: "12",
+		y1: "8",
+		x2: "12",
+		y2: "12"
+	}), createElement("line", {
+		x1: "12",
+		y1: "16",
+		x2: "12.01",
+		y2: "16"
+	})), createElement("span", {}, props.error)) : null, truthy$2(p.showCounter) && truthy$2(p.maxLength) ? createElement("p", {
+		className: "ty-text-area__counter",
+		id: `${instance}-counter`
+	}) : null));
+});
+//#endregion
+//#region src/elements/react/TyTextField.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy$1 = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text$1 = (v) => truthy$1(v) ? String(v) : void 0;
+const filled = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const DEFAULTS$1 = {
+	mode: "text",
+	appearance: "outlined",
+	clearLabel: "Clear",
+	showPasswordLabel: "Show password",
+	hidePasswordLabel: "Hide password",
+	counterLabel: "{count} of {max} characters",
+	overLimitLabel: "{count} of {max} characters, {over} over the limit"
+};
+const TyTextField = forwardRef(function TyTextField(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		const listeners = [["ty-clear", () => handlers.current.onClear?.()]];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return () => {
+			for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		};
+	}, []);
+	const p = {
+		mode: props.mode ?? DEFAULTS$1.mode,
+		inputType: props.inputType,
+		value: props.value,
+		defaultValue: props.defaultValue,
+		appearance: props.appearance ?? DEFAULTS$1.appearance,
+		clearable: props.clearable,
+		clearLabel: props.clearLabel ?? DEFAULTS$1.clearLabel,
+		showPasswordLabel: props.showPasswordLabel ?? DEFAULTS$1.showPasswordLabel,
+		hidePasswordLabel: props.hidePasswordLabel ?? DEFAULTS$1.hidePasswordLabel,
+		maxLength: props.maxLength,
+		showCounter: props.showCounter,
+		counterLabel: props.counterLabel ?? DEFAULTS$1.counterLabel,
+		overLimitLabel: props.overLimitLabel ?? DEFAULTS$1.overLimitLabel,
+		required: props.required,
+		disabled: props.disabled,
+		readOnly: props.readOnly,
+		invalid: props.invalid,
+		name: props.name,
+		placeholder: props.placeholder,
+		autoComplete: props.autoComplete,
+		accessibleLabel: props.accessibleLabel,
+		labelledBy: props.labelledBy,
+		describedBy: props.describedBy,
+		controlId: props.controlId,
+		testId: props.testId
+	};
+	const slots = {
+		"label": filled(props.label),
+		"hint": filled(props.hint),
+		"error": filled(props.error),
+		"success": filled(props.success),
+		"leading": filled(props.leading)
+	};
+	return createElement("ty-text-field", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"mode": text$1(p.mode),
+		"input-type": text$1(p.inputType),
+		"value": text$1(p.value),
+		"default-value": text$1(p.defaultValue),
+		"appearance": text$1(p.appearance),
+		"clearable": truthy$1(p.clearable) ? true : void 0,
+		"clear-label": text$1(p.clearLabel),
+		"show-password-label": text$1(p.showPasswordLabel),
+		"hide-password-label": text$1(p.hidePasswordLabel),
+		"max-length": text$1(p.maxLength),
+		"show-counter": truthy$1(p.showCounter) ? true : void 0,
+		"counter-label": text$1(p.counterLabel),
+		"over-limit-label": text$1(p.overLimitLabel),
+		"required": truthy$1(p.required) ? true : void 0,
+		"disabled": truthy$1(p.disabled) ? true : void 0,
+		"read-only": truthy$1(p.readOnly) ? true : void 0,
+		"invalid": truthy$1(p.invalid) ? true : void 0,
+		"name": text$1(p.name),
+		"placeholder": text$1(p.placeholder),
+		"autocomplete": text$1(p.autoComplete),
+		"accessible-label": text$1(p.accessibleLabel),
+		"labelled-by": text$1(p.labelledBy),
+		"described-by": text$1(p.describedBy),
+		"control-id": text$1(p.controlId),
+		"test-id": text$1(p.testId)
+	}, createElement("div", {
+		className: "ty-text-field",
+		"data-appearance": p.appearance,
+		"data-mode": p.mode,
+		"data-invalid": truthy$1(p.invalid) || slots["error"] ? "" : void 0,
+		"data-readonly": truthy$1(p.readOnly) ? "" : void 0,
+		"data-disabled": truthy$1(p.disabled) ? "" : void 0,
+		"data-testid": p.testId
+	}, slots["label"] ? createElement("label", {
+		className: "ty-text-field__label",
+		htmlFor: text$1(p.controlId) ?? `${instance}-input`
+	}, props.label) : null, slots["hint"] ? createElement("p", {
+		className: "ty-text-field__hint",
+		id: `${instance}-hint`
+	}, props.hint) : null, createElement("div", { className: "ty-text-field__group" }, slots["leading"] ? createElement("span", {
+		className: "ty-text-field__leading",
+		"aria-hidden": "true"
+	}, props.leading) : null, p.mode === "search" && !slots["leading"] ? createElement("span", {
+		className: "ty-text-field__leading",
+		"aria-hidden": "true"
+	}, createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("circle", {
+		className: "ty-text-field__glyph",
+		cx: "11",
+		cy: "11",
+		r: "8"
+	}), createElement("path", {
+		className: "ty-text-field__glyph",
+		d: "m21 21-4.34-4.34"
+	}))) : null, createElement("input", {
+		className: "ty-text-field__input",
+		id: text$1(p.controlId) ?? `${instance}-input`,
+		type: truthy$1(p.inputType) ? {
+			"text": "text",
+			"email": "email",
+			"url": "url",
+			"tel": "tel",
+			"number": "number"
+		}[String(p.inputType)] : {
+			"text": "text",
+			"search": "search",
+			"password": "password"
+		}[String(p.mode)],
+		name: p.name,
+		placeholder: p.placeholder,
+		autoComplete: p.autoComplete,
+		disabled: truthy$1(p.disabled) || void 0,
+		readOnly: truthy$1(p.readOnly) || void 0,
+		required: truthy$1(p.required) || void 0,
+		"aria-label": !slots["label"] ? p.accessibleLabel : void 0,
+		"aria-labelledby": !slots["label"] && !truthy$1(p.accessibleLabel) ? p.labelledBy : void 0,
+		"aria-describedby": [
+			text$1(p.describedBy) ?? "",
+			slots["hint"] ? `${instance}-hint` : "",
+			slots["error"] ? `${instance}-error` : "",
+			slots["success"] && !slots["error"] ? `${instance}-success` : "",
+			truthy$1(p.showCounter) && truthy$1(p.maxLength) ? `${instance}-counter` : ""
+		].filter(Boolean).join(" ") || void 0,
+		"aria-invalid": truthy$1(p.invalid) || slots["error"] ? "true" : void 0,
+		onChange: (event) => handlers.current.onChange?.({ value: event.currentTarget.value }, event)
+	}), truthy$1(p.clearable) || p.mode === "search" ? createElement("button", {
+		className: "ty-text-field__clear ty-text-field__action",
+		type: "button",
+		"aria-label": p.clearLabel
+	}, createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("path", {
+		className: "ty-text-field__glyph",
+		d: "M18 6 6 18"
+	}), createElement("path", {
+		className: "ty-text-field__glyph",
+		d: "m6 6 12 12"
+	}))) : null, p.mode === "password" ? createElement("button", {
+		className: "ty-text-field__reveal ty-text-field__action",
+		type: "button",
+		"aria-label": p.showPasswordLabel,
+		"aria-pressed": "false",
+		disabled: truthy$1(p.disabled) || void 0
+	}, createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("g", { className: "ty-text-field__eye" }, createElement("path", {
+		className: "ty-text-field__glyph",
+		d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+	}), createElement("circle", {
+		className: "ty-text-field__glyph",
+		cx: "12",
+		cy: "12",
+		r: "3"
+	})), createElement("g", { className: "ty-text-field__eye-off" }, createElement("path", {
+		className: "ty-text-field__glyph",
+		d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"
+	}), createElement("path", {
+		className: "ty-text-field__glyph",
+		d: "M14.084 14.158a3 3 0 0 1-4.242-4.242"
+	}), createElement("path", {
+		className: "ty-text-field__glyph",
+		d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"
+	}), createElement("path", {
+		className: "ty-text-field__glyph",
+		d: "m2 2 20 20"
+	})))) : null, slots["success"] && !slots["error"] ? createElement("svg", {
+		className: "ty-icon ty-text-field__success-mark",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("circle", {
+		className: "ty-text-field__glyph",
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), createElement("path", {
+		className: "ty-text-field__glyph",
+		d: "m16 9-5.5 5.5L8 12"
+	})) : null), slots["error"] ? createElement("p", {
+		className: "ty-text-field__error",
+		id: `${instance}-error`
+	}, createElement("svg", {
+		className: "ty-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, createElement("circle", {
+		className: "ty-text-field__glyph",
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), createElement("line", {
+		className: "ty-text-field__glyph",
+		x1: "12",
+		y1: "8",
+		x2: "12",
+		y2: "12"
+	}), createElement("line", {
+		className: "ty-text-field__glyph",
+		x1: "12",
+		y1: "16",
+		x2: "12.01",
+		y2: "16"
+	})), createElement("span", { className: "ty-text-field__error-text" }, props.error)) : null, slots["success"] && !slots["error"] ? createElement("p", {
+		className: "ty-text-field__success",
+		id: `${instance}-success`
+	}, props.success) : null, truthy$1(p.showCounter) && truthy$1(p.maxLength) ? createElement("p", {
+		className: "ty-text-field__counter",
+		id: `${instance}-counter`
+	}) : null));
+});
+//#endregion
+//#region src/elements/react/TyThemePalette.ts
+if (typeof window !== "undefined") defineTympanElements();
+const truthy = (v) => v !== void 0 && v !== null && v !== false && v !== "";
+const text = (v) => truthy(v) ? String(v) : void 0;
+const DEFAULTS = {
+	storageKey: "ty-theme",
+	defaultTheme: "tympan",
+	defaultMode: "system",
+	defaultDensity: "default",
+	label: "Appearance",
+	placeholder: "Search themes, modes and densities",
+	emptyLabel: "No matches",
+	resultsLabel: "{count} results",
+	groupPresets: "Themes",
+	groupPrint: "Print styles",
+	groupMode: "Mode",
+	groupDensity: "Density",
+	modeSystem: "System",
+	modeLight: "Light",
+	modeDark: "Dark",
+	densityCompact: "Compact",
+	densityDefault: "Default",
+	densityComfortable: "Comfortable",
+	currentLabel: "Current",
+	hintNavigate: "move",
+	hintSelect: "choose",
+	hintClose: "close"
+};
+const TyThemePalette = forwardRef(function TyThemePalette(props, ref) {
+	const instance = `ty${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const handlers = useRef(props);
+	handlers.current = props;
+	const host = useRef(null);
+	useImperativeHandle(ref, () => host.current);
+	useEffect(() => {
+		const element = host.current;
+		if (!element) return;
+		const listeners = [["ty-theme-change", (event) => handlers.current.onThemeChange?.(event.detail)], ["ty-close", () => handlers.current.onClose?.()]];
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		return () => {
+			for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+		};
+	}, []);
+	const p = {
+		open: props.open,
+		apply: props.apply,
+		storageKey: props.storageKey ?? DEFAULTS.storageKey,
+		defaultTheme: props.defaultTheme ?? DEFAULTS.defaultTheme,
+		defaultMode: props.defaultMode ?? DEFAULTS.defaultMode,
+		defaultDensity: props.defaultDensity ?? DEFAULTS.defaultDensity,
+		themes: props.themes,
+		printStylesheet: props.printStylesheet,
+		loadFonts: props.loadFonts,
+		themeLabels: props.themeLabels,
+		label: props.label ?? DEFAULTS.label,
+		placeholder: props.placeholder ?? DEFAULTS.placeholder,
+		emptyLabel: props.emptyLabel ?? DEFAULTS.emptyLabel,
+		resultsLabel: props.resultsLabel ?? DEFAULTS.resultsLabel,
+		groupPresets: props.groupPresets ?? DEFAULTS.groupPresets,
+		groupPrint: props.groupPrint ?? DEFAULTS.groupPrint,
+		groupMode: props.groupMode ?? DEFAULTS.groupMode,
+		groupDensity: props.groupDensity ?? DEFAULTS.groupDensity,
+		modeSystem: props.modeSystem ?? DEFAULTS.modeSystem,
+		modeLight: props.modeLight ?? DEFAULTS.modeLight,
+		modeDark: props.modeDark ?? DEFAULTS.modeDark,
+		densityCompact: props.densityCompact ?? DEFAULTS.densityCompact,
+		densityDefault: props.densityDefault ?? DEFAULTS.densityDefault,
+		densityComfortable: props.densityComfortable ?? DEFAULTS.densityComfortable,
+		currentLabel: props.currentLabel ?? DEFAULTS.currentLabel,
+		hintNavigate: props.hintNavigate ?? DEFAULTS.hintNavigate,
+		hintSelect: props.hintSelect ?? DEFAULTS.hintSelect,
+		hintClose: props.hintClose ?? DEFAULTS.hintClose
+	};
+	return createElement("ty-theme-palette", {
+		ref: host,
+		id: props.id,
+		className: props.className,
+		"data-ty-instance": instance,
+		"open": truthy(p.open) ? true : void 0,
+		"apply": truthy(p.apply) ? true : void 0,
+		"storage-key": text(p.storageKey),
+		"default-theme": text(p.defaultTheme),
+		"default-mode": text(p.defaultMode),
+		"default-density": text(p.defaultDensity),
+		"themes": text(p.themes),
+		"print-stylesheet": text(p.printStylesheet),
+		"load-fonts": truthy(p.loadFonts) ? true : void 0,
+		"theme-labels": text(p.themeLabels),
+		"label": text(p.label),
+		"placeholder": text(p.placeholder),
+		"empty-label": text(p.emptyLabel),
+		"results-label": text(p.resultsLabel),
+		"group-presets": text(p.groupPresets),
+		"group-print": text(p.groupPrint),
+		"group-mode": text(p.groupMode),
+		"group-density": text(p.groupDensity),
+		"mode-system": text(p.modeSystem),
+		"mode-light": text(p.modeLight),
+		"mode-dark": text(p.modeDark),
+		"density-compact": text(p.densityCompact),
+		"density-default": text(p.densityDefault),
+		"density-comfortable": text(p.densityComfortable),
+		"current-label": text(p.currentLabel),
+		"hint-navigate": text(p.hintNavigate),
+		"hint-select": text(p.hintSelect),
+		"hint-close": text(p.hintClose)
+	});
+});
+//#endregion
+export { TyActionMenu, TyAvatar, TyBrandWordmark, TyBreadcrumbs, TyButton, TyCheckbox, TyCommandPalette, TyCurrencyField, TyDataTable, TyDrawer, TyGradientMark, TyHeading, TyInlineNotice, TyLink, TyMarkdownView, TyModal, TyNativeSelect, TyNotificationCenter, TyPageHeader, TyPopover, TyProgressBar, TySectionHeading, TySegmentedControl, TySeparator, TySkeleton, TySkipLink, TySpinner, TyStatusPill, TySurface, TySwitch, TyTabs, TyTag, TyTagField, TyTextArea, TyTextField, TyThemePalette, TyToast, TyWheelPicker };
+
+//# sourceMappingURL=elements-react.js.map