@povio/ui 5.0.0-rc.13 → 5.0.0-rc.15

package/dist/{ComponentGallery-COqEqqN6.js → ComponentGallery-C_rXFvUY.js}

@@ -1,55 +1,29 @@
+import { n as __exportAll } from "./logger-CW24po62.js";
 import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
-import { o as inspectTokens } from "./UIConfigurator-DekPXjv9.js";
 import { n as ArrowLeft } from "./DropdownMenu-5jmtgLXd.js";
-import { i as ArrowRight } from "./DropdownMenuDesktop-Cl9gZVq0.js";
-import { n as Italic, r as Bold, t as Underline } from "./underline-66hmELxa.js";
-import { s as Calendar, t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
 import { t as Check } from "./check-DYMBkp_Z.js";
-import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
-import { t as ChevronUp } from "./chevron-up-D_Gqpb5M.js";
 import { t as FileUpload } from "./FileUpload-Cx98L1jz.js";
 import { t as PasswordInput } from "./PasswordInput-DYwUZ4-k.js";
-import { t as Table } from "./Table-piX1SWvN.js";
-import { t as Info } from "./info-iUmX3uDk.js";
+import { t as Table } from "./Table-CgG02oHQ.js";
+import { t as demos } from "./demos-DIwj5vc0.js";
 import { i as Search } from "./selectDesktop.cva-CHAMxhfO.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
 import { t as Breadcrumbs } from "./Breadcrumbs-FF8hMfXd.js";
 import { t as Checkbox } from "./Checkbox-D3f2Plbc.js";
-import { t as Slider } from "./Slider-CMg0BXJO.js";
-import { t as Accordion } from "./Accordion-BzwO4_ml.js";
-import { t as RadioGroup } from "./RadioGroup-efBKgTYA.js";
 import { t as Switch } from "./Switch-CqnGEdeD.js";
-import { t as TextArea } from "./TextArea-uPffb457.js";
-import { i as menuPopoverWrapperDefinition, n as menuItemDefinition, r as menuPopoverDefinition, t as dropdownMenuDefinition } from "./dropdownMenu.cva-DvEmX0bs.js";
-import { i as tooltipTextDefinition, n as tooltipPointerHorizontalDefinition, t as tooltipDefinition } from "./tooltip.cva-BIzlOXHH.js";
-import { t as Typography } from "./Typography-LU4z2pR1.js";
-import { t as Spinner } from "./Spinner-BeVTUzzx.js";
+import { t as TextArea } from "./TextArea-DuvFUjts.js";
+import { n as menuItemDefinition, t as dropdownMenuDefinition } from "./dropdownMenu.cva-DvEmX0bs.js";
 import { t as Button } from "./Button-C5rv4Cr2.js";
 import { IconButton } from "./components/icon-button.js";
-import { BadgeButton } from "./components/badge-button.js";
-import { SplitButton } from "./components/split-button.js";
-import { TextButton } from "./components/text-button.js";
-import { ToggleButton } from "./components/toggle-button.js";
 import { t as Tag } from "./Tag-DPg5sL1Z.js";
-import { t as popoverDefinition } from "./popover.cva-Bhud1wnp.js";
 import { Input } from "./components/input.js";
-import { Autocomplete } from "./components/autocomplete.js";
-import { CheckboxGroup } from "./components/checkbox-group.js";
-import { t as TimePicker } from "./TimePicker-DN-i98z5.js";
-import { t as ToggleGroup } from "./ToggleGroup-DmVPNWok.js";
-import { t as DatePicker } from "./DatePicker-xDEqzNJv.js";
-import { t as Select } from "./Select-CgIhoWgk.js";
+import { t as Select } from "./Select-tNlFSbAC.js";
 import { t as Progress } from "./Progress-B3mY9rIP.js";
-import { NumberField } from "./components/number-field.js";
-import { t as Stepper } from "./Stepper-Cp5vbL5g.js";
-import { n as dialogMainDefinition, t as dialogContentDefinition } from "./dialog.cva-COhDZaVl.js";
 import { t as Dialog } from "./Dialog-9manOgMA.js";
 import { Pagination } from "./components/pagination.js";
-import { t as Alert } from "./Alert-CnvEb1D_.js";
-import { t as Toast } from "./Toast-DtG3pA61.js";
 import { Link } from "./components/link.js";
 import { Badge } from "./components/badge.js";
-import { n as galleryGroups } from "./groups-oQmSeqXn.js";
+import { t as inspectTokens } from "./token-classes-BqLWiy6O.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -61,7 +35,7 @@ import { UNSAFE_PortalProvider } from "react-aria";
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$9 = {
+const __iconData$6 = {
 	name: "bell",
 	size: 24,
 	node: [["path", {
@@ -72,8 +46,8 @@ const __iconData$9 = {
 		key: "11g9vi"
 	}]]
 };
-__iconData$9.node;
-const Bell = createLucideIcon(__iconData$9);
+__iconData$6.node;
+const Bell = createLucideIcon(__iconData$6);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/credit-card.mjs
 /**
@@ -82,7 +56,7 @@ const Bell = createLucideIcon(__iconData$9);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$8 = {
+const __iconData$5 = {
 	name: "credit-card",
 	size: 24,
 	node: [["rect", {
@@ -100,30 +74,8 @@ const __iconData$8 = {
 		key: "1b3vmo"
 	}]]
 };
-__iconData$8.node;
-const CreditCard = createLucideIcon(__iconData$8);
-//#endregion
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/house.mjs
-/**
-* @license lucide-react v1.43.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const __iconData$7 = {
-	name: "house",
-	size: 24,
-	node: [["path", {
-		d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8",
-		key: "5wwlr5"
-	}], ["path", {
-		d: "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z",
-		key: "r6nss1"
-	}]],
-	aliases: ["home"]
-};
-__iconData$7.node;
-const House = createLucideIcon(__iconData$7);
+__iconData$5.node;
+const CreditCard = createLucideIcon(__iconData$5);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/maximize-2.mjs
 /**
@@ -132,7 +84,7 @@ const House = createLucideIcon(__iconData$7);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$6 = {
+const __iconData$4 = {
 	name: "maximize-2",
 	size: 24,
 	node: [
@@ -154,8 +106,8 @@ const __iconData$6 = {
 		}]
 	]
 };
-__iconData$6.node;
-const Maximize2 = createLucideIcon(__iconData$6);
+__iconData$4.node;
+const Maximize2 = createLucideIcon(__iconData$4);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/minimize-2.mjs
 /**
@@ -164,7 +116,7 @@ const Maximize2 = createLucideIcon(__iconData$6);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$5 = {
+const __iconData$3 = {
 	name: "minimize-2",
 	size: 24,
 	node: [
@@ -186,52 +138,8 @@ const __iconData$5 = {
 		}]
 	]
 };
-__iconData$5.node;
-const Minimize2 = createLucideIcon(__iconData$5);
-//#endregion
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/send.mjs
-/**
-* @license lucide-react v1.43.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const __iconData$4 = {
-	name: "send",
-	size: 24,
-	node: [["path", {
-		d: "M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z",
-		key: "1ffxy3"
-	}], ["path", {
-		d: "m21.854 2.147-10.94 10.939",
-		key: "12cjpa"
-	}]]
-};
-__iconData$4.node;
-const Send = createLucideIcon(__iconData$4);
-//#endregion
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/settings.mjs
-/**
-* @license lucide-react v1.43.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const __iconData$3 = {
-	name: "settings",
-	size: 24,
-	node: [["path", {
-		d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915",
-		key: "1i5ecw"
-	}], ["circle", {
-		cx: "12",
-		cy: "12",
-		r: "3",
-		key: "1v7zrd"
-	}]]
-};
 __iconData$3.node;
-const Settings = createLucideIcon(__iconData$3);
+const Minimize2 = createLucideIcon(__iconData$3);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/shield-check.mjs
 /**
@@ -341,1626 +249,203 @@ function Inspector({ isKnown, describe, onSelect, revision, children }) {
 			top: px(style.borderTopWidth) * scale,
 			right: px(style.borderRightWidth) * scale,
 			bottom: px(style.borderBottomWidth) * scale,
-			left: px(style.borderLeftWidth) * scale
-		};
-		const pad = {
-			top: px(style.paddingTop) * scale,
-			right: px(style.paddingRight) * scale,
-			bottom: px(style.paddingBottom) * scale,
-			left: px(style.paddingLeft) * scale
-		};
-		const inner = {
-			x: left + border.left,
-			y: top + border.top,
-			width: box.width - border.left - border.right,
-			height: box.height - border.top - border.bottom
-		};
-		const next = [];
-		const add = (kind, token, key, x, y, width, height) => {
-			if (token && width > .5 && height > .5) next.push({
-				key,
-				kind,
-				token,
-				label: describe(token),
-				x,
-				y,
-				width,
-				height
-			});
-		};
-		add("padding", tokens.padding.top, "pt", inner.x, inner.y, inner.width, pad.top);
-		add("padding", tokens.padding.bottom, "pb", inner.x, inner.y + inner.height - pad.bottom, inner.width, pad.bottom);
-		add("padding", tokens.padding.left, "pl", inner.x, inner.y + pad.top, pad.left, inner.height - pad.top - pad.bottom);
-		add("padding", tokens.padding.right, "pr", inner.x + inner.width - pad.right, inner.y + pad.top, pad.right, inner.height - pad.top - pad.bottom);
-		if (tokens.gap.row || tokens.gap.column) {
-			const children_0 = [...target.children].map((child) => child.getBoundingClientRect()).filter((rect) => rect.width > 0 && rect.height > 0);
-			const contentTop = inner.y + pad.top;
-			const contentHeight = inner.height - pad.top - pad.bottom;
-			const contentLeft = inner.x + pad.left;
-			const contentWidth = inner.width - pad.left - pad.right;
-			children_0.slice(1).forEach((rect_0, index) => {
-				const previous = children_0[index];
-				if (rect_0.left >= previous.right - .5) add("gap", tokens.gap.column, `gx${index}`, previous.right - origin.left, contentTop, rect_0.left - previous.right, contentHeight);
-				else if (rect_0.top >= previous.bottom - .5) add("gap", tokens.gap.row, `gy${index}`, contentLeft, previous.bottom - origin.top, contentWidth, rect_0.top - previous.bottom);
-			});
-		}
-		if (tokens.radius && px(style.borderTopLeftRadius) > 0) {
-			const size = Math.min(12, box.width / 3, box.height / 3);
-			add("radius", tokens.radius, "r-tl", left, top, size, size);
-			add("radius", tokens.radius, "r-tr", left + box.width - size, top, size, size);
-			add("radius", tokens.radius, "r-bl", left, top + box.height - size, size, size);
-			add("radius", tokens.radius, "r-br", left + box.width - size, top + box.height - size, size, size);
-		}
-		setRegions(next);
-		setOutline({
-			x: left,
-			y: top,
-			width: box.width,
-			height: box.height
-		});
-	}, [
-		target,
-		tokensOf,
-		describe
-	]);
-	useLayoutEffect(measure, [measure, revision]);
-	useEffect(() => {
-		const stage_0 = stageRef.current;
-		const ownerWindow = stage_0?.ownerDocument.defaultView;
-		if (!stage_0 || !ownerWindow) return;
-		let frame = 0;
-		const schedule = () => {
-			ownerWindow.cancelAnimationFrame(frame);
-			frame = ownerWindow.requestAnimationFrame(measure);
-		};
-		const observer = new ResizeObserver(schedule);
-		observer.observe(stage_0);
-		if (target) observer.observe(target);
-		ownerWindow.addEventListener("scroll", schedule, true);
-		return () => {
-			ownerWindow.cancelAnimationFrame(frame);
-			observer.disconnect();
-			ownerWindow.removeEventListener("scroll", schedule, true);
-		};
-	}, [measure, target]);
-	const onPointerMove = (event) => {
-		if (event.target.closest(".studio-inspect-region")) return;
-		const content = contentRef.current;
-		if (!content) return;
-		const hit = content.ownerDocument.elementsFromPoint(event.clientX, event.clientY).find((element_0) => content.contains(element_0) && hasTokens(tokensOf(element_0)));
-		if (hit && hit !== target) setTarget(hit);
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		ref: stageRef,
-		className: "studio-inspect-stage",
-		onPointerMove,
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				ref: contentRef,
-				className: "studio-inspect-content",
-				children
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "studio-inspect-layer",
-				"aria-label": "Token inspector",
-				children: [
-					outline && /* @__PURE__ */ jsx("div", {
-						className: "studio-inspect-outline",
-						style: {
-							left: outline.x,
-							top: outline.y,
-							width: outline.width,
-							height: outline.height
-						}
-					}),
-					regions.map((region) => /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: `studio-inspect-region is-${region.kind} ${active === region.token ? "is-active" : ""}`,
-						style: {
-							left: region.x,
-							top: region.y,
-							width: region.width,
-							height: region.height
-						},
-						"aria-label": `Edit ${region.kind} ${region.label}`,
-						title: region.label,
-						onPointerEnter: () => setActive(region.token),
-						onPointerLeave: () => setActive(null),
-						onClick: (event_0) => {
-							event_0.stopPropagation();
-							onSelect(region.token);
-						}
-					}, region.key)),
-					active && regions.some((region_1) => region_1.token === active) && /* @__PURE__ */ jsx(InspectLabel, {
-						region: regions.find((region_0) => region_0.token === active),
-						stageWidth: stageRef.current?.clientWidth ?? 0
-					})
-				]
-			}),
-			!target && /* @__PURE__ */ jsx("p", {
-				className: "studio-inspect-hint",
-				children: "Hover the component to see its paddings, gaps and radius."
-			})
-		]
-	});
-}
-function InspectLabel(t0) {
-	const $ = c(10);
-	const { region, stageWidth } = t0;
-	const left = Math.max(4, Math.min(region.x, stageWidth - 220));
-	const t1 = `studio-inspect-label is-${region.kind}`;
-	const t2 = Math.max(0, region.y - 24);
-	let t3;
-	if ($[0] !== left || $[1] !== t2) {
-		t3 = {
-			left,
-			top: t2
-		};
-		$[0] = left;
-		$[1] = t2;
-		$[2] = t3;
-	} else t3 = $[2];
-	let t4;
-	if ($[3] !== region.kind) {
-		t4 = /* @__PURE__ */ jsx("strong", { children: region.kind });
-		$[3] = region.kind;
-		$[4] = t4;
-	} else t4 = $[4];
-	let t5;
-	if ($[5] !== region.label || $[6] !== t1 || $[7] !== t3 || $[8] !== t4) {
-		t5 = /* @__PURE__ */ jsxs("div", {
-			className: t1,
-			style: t3,
-			children: [
-				t4,
-				" ",
-				region.label
-			]
-		});
-		$[5] = region.label;
-		$[6] = t1;
-		$[7] = t3;
-		$[8] = t4;
-		$[9] = t5;
-	} else t5 = $[9];
-	return t5;
-}
-//#endregion
-//#region src/configurator/gallery/demos.tsx
-const noop = () => {};
-const menuItems = [
-	{
-		label: "Edit",
-		onAction: noop
-	},
-	{
-		label: "Duplicate",
-		onAction: noop
-	},
-	{
-		label: "Archive",
-		isDisabled: true,
-		onAction: noop
-	}
-];
-const eventItems = [
-	{
-		id: "1",
-		label: "Roundtable"
-	},
-	{
-		id: "2",
-		label: "Conference"
-	},
-	{
-		id: "3",
-		label: "Meeting"
-	},
-	{
-		id: "4",
-		label: "Party"
-	},
-	{
-		id: "5",
-		label: "Disabled item",
-		isDisabled: true
-	}
-];
-const airportItems = Array.from({ length: 12 }, (_, index) => ({
-	id: `airport-${index + 1}`,
-	label: `Airport ${String(index + 1).padStart(3, "0")}`
-}));
-const groupOptions = [
-	{
-		label: "Option 1",
-		value: "option-1"
-	},
-	{
-		label: "Option 2",
-		value: "option-2"
-	},
-	{
-		label: "Option 3",
-		value: "option-3"
-	}
-];
-const accordionContent = /* @__PURE__ */ jsx("p", {
-	className: "text-text-default-2",
-	children: "This is the content of the accordion item. It can contain any React elements."
-});
-const accordionItems = [
-	{
-		id: "item1",
-		heading: "What is your refund policy?",
-		subheading: "Returns & exchanges",
-		icon: Info,
-		children: accordionContent
-	},
-	{
-		id: "item2",
-		heading: "How do I track my order?",
-		subheading: "Shipping info",
-		icon: Info,
-		children: accordionContent
-	},
-	{
-		id: "item3",
-		heading: "Do you offer international shipping?",
-		subheading: "Global delivery",
-		icon: Info,
-		children: accordionContent
-	}
-];
-const steps = [
-	{
-		id: "1",
-		title: "Account",
-		subtext: "Create your account"
-	},
-	{
-		id: "2",
-		title: "Profile",
-		subtext: "Tell us about yourself"
-	},
-	{
-		id: "3",
-		title: "Review",
-		subtext: "Review your details"
-	}
-];
-const tableRows = [
-	{
-		name: "Ada Lovelace",
-		email: "ada@example.com",
-		role: "Admin"
-	},
-	{
-		name: "Alan Turing",
-		email: "alan@example.com",
-		role: "Editor"
-	},
-	{
-		name: "Grace Hopper",
-		email: "grace@example.com",
-		role: "Viewer"
-	},
-	{
-		name: "Linus Torvalds",
-		email: "linus@example.com",
-		role: "Editor"
-	}
-];
-const tableColumns = [
-	{
-		accessorKey: "name",
-		header: "Name",
-		enableSorting: false
-	},
-	{
-		accessorKey: "email",
-		header: "Email",
-		enableSorting: false
-	},
-	{
-		accessorKey: "role",
-		header: "Role",
-		enableSorting: false
-	}
-];
-function ToggleGroupDemo() {
-	const $ = c(11);
-	const [value, setValue] = useState("option1");
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = ["bold"];
-		$[0] = t0;
-	} else t0 = $[0];
-	const [format, setFormat] = useState(t0);
-	let t1;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = [
-			{
-				id: "option1",
-				label: "Option 1"
-			},
-			{
-				id: "option2",
-				label: "Option 2"
-			},
-			{
-				id: "option3",
-				label: "Option 3"
-			}
-		];
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== value) {
-		t2 = /* @__PURE__ */ jsx(ToggleGroup, {
-			"aria-label": "View",
-			items: t1,
-			value,
-			onChange: setValue
-		});
-		$[2] = value;
-		$[3] = t2;
-	} else t2 = $[3];
-	let t3;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsx(ToggleGroup, {
-			"aria-label": "Send options",
-			items: [{
-				id: "calendar",
-				label: "Calendar",
-				icon: Calendar
-			}, {
-				id: "send",
-				label: "Send",
-				icon: Send
-			}],
-			defaultValue: "calendar"
-		});
-		$[4] = t3;
-	} else t3 = $[4];
-	let t4;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = [
-			{
-				id: "bold",
-				label: "Bold",
-				icon: Bold,
-				iconOnly: true
-			},
-			{
-				id: "italic",
-				label: "Italic",
-				icon: Italic,
-				iconOnly: true
-			},
-			{
-				id: "underline",
-				label: "Underline",
-				icon: Underline,
-				iconOnly: true
-			}
-		];
-		$[5] = t4;
-	} else t4 = $[5];
-	let t5;
-	if ($[6] !== format) {
-		t5 = /* @__PURE__ */ jsx(ToggleGroup, {
-			"aria-label": "Formatting",
-			selectionMode: "multiple",
-			items: t4,
-			value: format,
-			onChange: setFormat
-		});
-		$[6] = format;
-		$[7] = t5;
-	} else t5 = $[7];
-	let t6;
-	if ($[8] !== t2 || $[9] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col items-start gap-3",
-			children: [
-				t2,
-				t3,
-				t5
-			]
-		});
-		$[8] = t2;
-		$[9] = t5;
-		$[10] = t6;
-	} else t6 = $[10];
-	return t6;
-}
-function CheckboxGroupDemo() {
-	const $ = c(3);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = ["option-2"];
-		$[0] = t0;
-	} else t0 = $[0];
-	const [value, setValue] = useState(t0);
-	let t1;
-	if ($[1] !== value) {
-		t1 = /* @__PURE__ */ jsx(CheckboxGroup, {
-			label: "Checkbox group",
-			options: groupOptions,
-			value,
-			onChange: setValue
-		});
-		$[1] = value;
-		$[2] = t1;
-	} else t1 = $[2];
-	return t1;
-}
-function RadioGroupDemo() {
-	const $ = c(2);
-	const [value, setValue] = useState("option-1");
-	let t0;
-	if ($[0] !== value) {
-		t0 = /* @__PURE__ */ jsx(RadioGroup, {
-			label: "Radio group",
-			options: groupOptions,
-			value,
-			onChange: setValue
-		});
-		$[0] = value;
-		$[1] = t0;
-	} else t0 = $[1];
-	return t0;
-}
-function SelectDemo() {
-	const $ = c(8);
-	const [value, setValue] = useState("2");
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = ["1", "3"];
-		$[0] = t0;
-	} else t0 = $[0];
-	const [multi, setMulti] = useState(t0);
-	let t1;
-	if ($[1] !== value) {
-		t1 = /* @__PURE__ */ jsx(Select, {
-			label: "Event type",
-			placeholder: "Ex.: Roundtable",
-			items: eventItems,
-			value,
-			onChange: setValue
-		});
-		$[1] = value;
-		$[2] = t1;
-	} else t1 = $[2];
-	let t2;
-	if ($[3] !== multi) {
-		t2 = /* @__PURE__ */ jsx(Select, {
-			label: "Event types",
-			placeholder: "Select several",
-			selectionMode: "multiple",
-			items: eventItems,
-			value: multi,
-			onChange: setMulti
-		});
-		$[3] = multi;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== t1 || $[6] !== t2) {
-		t3 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-4",
-			children: [t1, t2]
-		});
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
-	return t3;
-}
-function AutocompleteDemo() {
-	const $ = c(2);
-	const [value, setValue] = useState(null);
-	let t0;
-	if ($[0] !== value) {
-		t0 = /* @__PURE__ */ jsx(Autocomplete, {
-			label: "Airport",
-			placeholder: "Choose an airport",
-			items: airportItems,
-			value,
-			onChange: setValue
-		});
-		$[0] = value;
-		$[1] = t0;
-	} else t0 = $[1];
-	return t0;
-}
-function DatePickerDemo() {
-	const $ = c(2);
-	const [value, setValue] = useState(null);
-	let t0;
-	if ($[0] !== value) {
-		t0 = /* @__PURE__ */ jsx(DatePicker, {
-			label: "Date",
-			value,
-			onChange: setValue
-		});
-		$[0] = value;
-		$[1] = t0;
-	} else t0 = $[1];
-	return t0;
-}
-function TimePickerDemo() {
-	const $ = c(2);
-	const [value, setValue] = useState(null);
-	let t0;
-	if ($[0] !== value) {
-		t0 = /* @__PURE__ */ jsx(TimePicker, {
-			label: "Time",
-			value,
-			onChange: setValue
-		});
-		$[0] = value;
-		$[1] = t0;
-	} else t0 = $[1];
-	return t0;
-}
-function PaginationDemo() {
-	const $ = c(4);
-	const [page, setPage] = useState(1);
-	const [pageSize, setPageSize] = useState(10);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = (size) => {
-			setPageSize(size);
-			setPage(1);
-		};
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] !== page || $[2] !== pageSize) {
-		t1 = /* @__PURE__ */ jsx(Pagination, {
-			page,
-			pageSize,
-			totalItems: 100,
-			hideFirstLast: true,
-			onPageChange: setPage,
-			onPageSizeChange: t0
-		});
-		$[1] = page;
-		$[2] = pageSize;
-		$[3] = t1;
-	} else t1 = $[3];
-	return t1;
-}
-function DialogDemo() {
-	const $ = c(19);
-	const ui = UIConfig.useConfig();
-	const dialogMainCva = UIOverrides.useCva("dialog.mainCva", dialogMainDefinition);
-	const dialogContentCva = UIOverrides.useCva("dialog.contentCva", dialogContentDefinition);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx(Button, { children: "Open dialog" });
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] !== dialogMainCva) {
-		t1 = dialogMainCva({});
-		$[1] = dialogMainCva;
-		$[2] = t1;
-	} else t1 = $[2];
-	let t2;
-	if ($[3] !== dialogContentCva) {
-		t2 = dialogContentCva({});
-		$[3] = dialogContentCva;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== ui.alertDialog.titleTypography) {
-		t3 = /* @__PURE__ */ jsx(Typography, {
-			...ui.alertDialog.titleTypography,
-			as: "h2",
-			className: "text-surface-default-card-foreground",
-			children: "Delete project?"
-		});
-		$[5] = ui.alertDialog.titleTypography;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== ui.alertDialog.descriptionTypography) {
-		t4 = /* @__PURE__ */ jsx(Typography, {
-			...ui.alertDialog.descriptionTypography,
-			className: "text-surface-default-card-foreground",
-			children: "This will permanently remove the project and all of its files. This action cannot be undone."
-		});
-		$[7] = ui.alertDialog.descriptionTypography;
-		$[8] = t4;
-	} else t4 = $[8];
-	let t5;
-	if ($[9] !== t3 || $[10] !== t4) {
-		t5 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-modal-gap-text",
-			children: [t3, t4]
-		});
-		$[9] = t3;
-		$[10] = t4;
-		$[11] = t5;
-	} else t5 = $[11];
-	let t6;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsxs("div", {
-			className: "flex w-full flex-wrap gap-modal-gap-buttons pt-1",
-			children: [/* @__PURE__ */ jsx(Button, {
-				color: "secondary",
-				width: "fill",
-				className: "min-w-40 flex-1 shrink-0",
-				children: "Cancel"
-			}), /* @__PURE__ */ jsx(Button, {
-				width: "fill",
-				className: "min-w-40 flex-1 shrink-0",
-				children: "Delete"
-			})]
-		});
-		$[12] = t6;
-	} else t6 = $[12];
-	let t7;
-	if ($[13] !== t2 || $[14] !== t5) {
-		t7 = /* @__PURE__ */ jsxs("div", {
-			"aria-label": "Delete project",
-			className: t2,
-			children: [t5, t6]
-		});
-		$[13] = t2;
-		$[14] = t5;
-		$[15] = t7;
-	} else t7 = $[15];
-	let t8;
-	if ($[16] !== t1 || $[17] !== t7) {
-		t8 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col items-start gap-3",
-			children: [t0, /* @__PURE__ */ jsx("div", {
-				className: t1,
-				children: t7
-			})]
-		});
-		$[16] = t1;
-		$[17] = t7;
-		$[18] = t8;
-	} else t8 = $[18];
-	return t8;
-}
-function PopoverDemo() {
-	const $ = c(6);
-	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx(Button, {
-			endIcon: ChevronDown,
-			children: "Open popover"
-		});
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] !== popoverCva) {
-		t1 = popoverCva({});
-		$[1] = popoverCva;
-		$[2] = t1;
-	} else t1 = $[2];
-	const t2 = `${t1} overflow-hidden p-2`;
-	let t3;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-2",
-			children: [
-				/* @__PURE__ */ jsx(Typography, {
-					size: "body",
-					className: "font-bold",
-					children: "Popover title"
-				}),
-				/* @__PURE__ */ jsx(Typography, {
-					size: "small",
-					children: "Popovers show rich content anchored to a trigger element."
-				}),
-				/* @__PURE__ */ jsx(TextButton, {
-					size: "sm",
-					children: "Learn more"
-				})
-			]
-		});
-		$[3] = t3;
-	} else t3 = $[3];
-	let t4;
-	if ($[4] !== t2) {
-		t4 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col items-start",
-			children: [t0, /* @__PURE__ */ jsx("div", {
-				className: "my-4 w-72 outline-none",
-				children: /* @__PURE__ */ jsx("div", {
-					"aria-label": "Popover",
-					className: "outline-none",
-					children: /* @__PURE__ */ jsx("div", {
-						className: t2,
-						children: t3
-					})
-				})
-			})]
-		});
-		$[4] = t2;
-		$[5] = t4;
-	} else t4 = $[5];
-	return t4;
-}
-function DropdownMenuDemo() {
-	const $ = c(19);
-	const menuPopoverCva = UIOverrides.useCva("dropdownMenu.popoverCva", menuPopoverDefinition);
-	const menuPopoverWrapperCva = UIOverrides.useCva("dropdownMenu.popoverWrapperCva", menuPopoverWrapperDefinition);
-	const menuCva = UIOverrides.useCva("dropdownMenu.cva", dropdownMenuDefinition);
-	const menuItemCva = UIOverrides.useCva("dropdownMenu.itemCva", menuItemDefinition);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = [
-			{ label: "Profile" },
-			{ label: "Settings" },
-			{
-				label: "More options",
-				submenu: true
-			},
-			{
-				label: "Disabled item",
-				disabled: true
-			}
-		];
-		$[0] = t0;
-	} else t0 = $[0];
-	const items = t0;
-	let t1;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx(BadgeButton, {
-			icon: Settings,
-			children: "Open menu"
-		});
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== menuPopoverCva) {
-		t2 = menuPopoverCva({});
-		$[2] = menuPopoverCva;
-		$[3] = t2;
-	} else t2 = $[3];
-	const t3 = `${t2} w-56`;
-	let t4;
-	if ($[4] !== menuPopoverWrapperCva) {
-		t4 = menuPopoverWrapperCva({});
-		$[4] = menuPopoverWrapperCva;
-		$[5] = t4;
-	} else t4 = $[5];
-	let t5;
-	if ($[6] !== menuCva) {
-		t5 = menuCva({ isMobile: false });
-		$[6] = menuCva;
-		$[7] = t5;
-	} else t5 = $[7];
-	let t6;
-	if ($[8] !== menuItemCva) {
-		t6 = items.map((item) => /* @__PURE__ */ jsxs("div", {
-			"aria-disabled": item.disabled || void 0,
-			"data-disabled": item.disabled || void 0,
-			"data-has-submenu": item.submenu || void 0,
-			className: menuItemCva({ isMobile: false }),
-			children: [item.label, item.submenu && /* @__PURE__ */ jsx(ArrowRight, { className: "size-6" })]
-		}, item.label));
-		$[8] = menuItemCva;
-		$[9] = t6;
-	} else t6 = $[9];
-	let t7;
-	if ($[10] !== t5 || $[11] !== t6) {
-		t7 = /* @__PURE__ */ jsx("div", {
-			className: t5,
-			children: t6
-		});
-		$[10] = t5;
-		$[11] = t6;
-		$[12] = t7;
-	} else t7 = $[12];
-	let t8;
-	if ($[13] !== t4 || $[14] !== t7) {
-		t8 = /* @__PURE__ */ jsx("div", {
-			className: t4,
-			children: t7
-		});
-		$[13] = t4;
-		$[14] = t7;
-		$[15] = t8;
-	} else t8 = $[15];
-	let t9;
-	if ($[16] !== t3 || $[17] !== t8) {
-		t9 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col items-start",
-			children: [t1, /* @__PURE__ */ jsx("div", {
-				className: t3,
-				children: t8
-			})]
-		});
-		$[16] = t3;
-		$[17] = t8;
-		$[18] = t9;
-	} else t9 = $[18];
-	return t9;
-}
-function TooltipDemo() {
-	const $ = c(19);
-	const tooltipCva = UIOverrides.useCva("tooltip.cva", tooltipDefinition);
-	const tooltipPointerCva = UIOverrides.useCva("tooltip.pointerHorizontalCva", tooltipPointerHorizontalDefinition);
-	const tooltipTextCva = UIOverrides.useCva("tooltip.textCva", tooltipTextDefinition);
-	let t0;
-	if ($[0] !== tooltipCva) {
-		t0 = tooltipCva({});
-		$[0] = tooltipCva;
-		$[1] = t0;
-	} else t0 = $[1];
-	let t1;
-	if ($[2] !== tooltipTextCva) {
-		t1 = tooltipTextCva({});
-		$[2] = tooltipTextCva;
-		$[3] = t1;
-	} else t1 = $[3];
-	const t2 = `${t1} font-bold`;
-	let t3;
-	if ($[4] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Typography, {
-			size: "small",
-			className: t2,
-			children: "Tooltip text"
-		});
-		$[4] = t2;
-		$[5] = t3;
-	} else t3 = $[5];
-	let t4;
-	if ($[6] !== t0 || $[7] !== t3) {
-		t4 = /* @__PURE__ */ jsx("div", {
-			className: t0,
-			children: t3
-		});
-		$[6] = t0;
-		$[7] = t3;
-		$[8] = t4;
-	} else t4 = $[8];
-	let t5;
-	if ($[9] !== tooltipPointerCva) {
-		t5 = tooltipPointerCva({});
-		$[9] = tooltipPointerCva;
-		$[10] = t5;
-	} else t5 = $[10];
-	let t6;
-	if ($[11] !== t5) {
-		t6 = /* @__PURE__ */ jsx(ChevronUp, {
-			className: t5,
-			fill: "currentColor",
-			strokeWidth: 0,
-			"aria-hidden": "true"
-		});
-		$[11] = t5;
-		$[12] = t6;
-	} else t6 = $[12];
-	let t7;
-	if ($[13] !== t4 || $[14] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("div", {
-			className: "group flex flex-col items-center",
-			"data-placement": "top",
-			children: [t4, t6]
-		});
-		$[13] = t4;
-		$[14] = t6;
-		$[15] = t7;
-	} else t7 = $[15];
-	let t8;
-	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsx(Button, {
-			variant: "outlined",
-			children: "Hover me"
-		});
-		$[16] = t8;
-	} else t8 = $[16];
-	let t9;
-	if ($[17] !== t7) {
-		t9 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col items-center",
-			children: [t7, t8]
-		});
-		$[17] = t7;
-		$[18] = t9;
-	} else t9 = $[18];
-	return t9;
-}
-const demos = [
-	{
-		id: "button",
-		title: "Button",
-		group: "Buttons",
-		render: () => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-3",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-wrap items-center gap-2",
-					children: [
-						/* @__PURE__ */ jsx(Button, { children: "Contained" }),
-						/* @__PURE__ */ jsx(Button, {
-							variant: "outlined",
-							children: "Outlined"
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							variant: "subtle",
-							children: "Subtle"
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							variant: "ghost",
-							children: "Ghost"
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							variant: "text",
-							children: "Text"
-						})
-					]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-wrap items-center gap-2",
-					children: [
-						/* @__PURE__ */ jsx(Button, {
-							color: "secondary",
-							children: "Secondary"
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							color: "error",
-							children: "Error"
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							startIcon: Calendar,
-							children: "With icon"
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							isLoading: true,
-							children: "Loading"
-						})
-					]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-wrap items-center gap-2",
-					children: [
-						/* @__PURE__ */ jsx(Button, {
-							size: "sm",
-							children: "Small"
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							size: "default",
-							children: "Default"
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							isDisabled: true,
-							children: "Disabled"
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							variant: "outlined",
-							isDisabled: true,
-							children: "Disabled"
-						})
-					]
-				})
-			]
-		})
-	},
-	{
-		id: "icon-button",
-		title: "IconButton",
-		group: "Buttons",
-		render: () => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-2",
-			children: [
-				/* @__PURE__ */ jsx(IconButton, {
-					icon: Calendar,
-					label: "Calendar"
-				}),
-				/* @__PURE__ */ jsx(IconButton, {
-					icon: Calendar,
-					label: "Calendar",
-					variant: "outlined"
-				}),
-				/* @__PURE__ */ jsx(IconButton, {
-					icon: Calendar,
-					label: "Calendar",
-					variant: "subtle"
-				}),
-				/* @__PURE__ */ jsx(IconButton, {
-					icon: Calendar,
-					label: "Calendar",
-					color: "secondary"
-				}),
-				/* @__PURE__ */ jsx(IconButton, {
-					icon: Calendar,
-					label: "Calendar",
-					size: "sm"
-				}),
-				/* @__PURE__ */ jsx(IconButton, {
-					icon: Calendar,
-					label: "Calendar",
-					isDisabled: true
-				})
-			]
-		})
-	},
-	{
-		id: "text-button",
-		title: "TextButton",
-		group: "Buttons",
-		render: () => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-4",
-			children: [
-				/* @__PURE__ */ jsx(TextButton, { children: "Log in" }),
-				/* @__PURE__ */ jsx(TextButton, {
-					icon: Calendar,
-					children: "With icon"
-				}),
-				/* @__PURE__ */ jsx(TextButton, {
-					color: "secondary",
-					children: "Secondary"
-				}),
-				/* @__PURE__ */ jsx(TextButton, {
-					color: "error",
-					children: "Error"
-				}),
-				/* @__PURE__ */ jsx(TextButton, {
-					isDisabled: true,
-					children: "Disabled"
-				})
-			]
-		})
-	},
-	{
-		id: "toggle-button",
-		title: "ToggleButton",
-		group: "Buttons",
-		render: () => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-2",
-			children: [
-				/* @__PURE__ */ jsx(ToggleButton, { children: "Toggle me" }),
-				/* @__PURE__ */ jsx(ToggleButton, {
-					defaultSelected: true,
-					children: "Selected"
-				}),
-				/* @__PURE__ */ jsx(ToggleButton, {
-					isDisabled: true,
-					children: "Disabled"
-				})
-			]
-		})
-	},
-	{
-		id: "split-button",
-		title: "SplitButton",
-		group: "Buttons",
-		render: () => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-3",
-			children: [/* @__PURE__ */ jsx(SplitButton, {
-				label: "Save",
-				labelRight: "More",
-				items: menuItems
-			}), /* @__PURE__ */ jsx(SplitButton, {
-				label: "Save",
-				labelRight: "More",
-				variant: "outlined",
-				items: menuItems
-			})]
-		})
-	},
-	{
-		id: "badge-button",
-		title: "BadgeButton",
-		group: "Buttons",
-		render: () => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-2",
-			children: [
-				/* @__PURE__ */ jsx(BadgeButton, { children: "Badge" }),
-				/* @__PURE__ */ jsx(BadgeButton, {
-					icon: Calendar,
-					children: "With icon"
-				}),
-				/* @__PURE__ */ jsx(BadgeButton, {
-					dismissable: true,
-					children: "Dismissable"
-				}),
-				/* @__PURE__ */ jsx(BadgeButton, {
-					toggle: true,
-					defaultSelected: true,
-					children: "Selected"
-				}),
-				/* @__PURE__ */ jsx(BadgeButton, {
-					isDisabled: true,
-					children: "Disabled"
-				})
-			]
-		})
-	},
-	{
-		id: "toggle-group",
-		title: "ToggleGroup",
-		group: "Buttons",
-		render: () => /* @__PURE__ */ jsx(ToggleGroupDemo, {})
-	},
-	{
-		id: "input",
-		title: "Input",
-		group: "Inputs",
-		render: () => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-4",
-			children: [
-				/* @__PURE__ */ jsx(Input, {
-					label: "First name",
-					placeholder: "Enter your name"
-				}),
-				/* @__PURE__ */ jsx(Input, {
-					label: "Email",
-					placeholder: "name@example.com",
-					helperText: "We will never share your email.",
-					isRequired: true
-				}),
-				/* @__PURE__ */ jsx(Input, {
-					label: "Username",
-					defaultValue: "admin",
-					error: "This username is already taken."
-				}),
-				/* @__PURE__ */ jsx(Input, {
-					label: "Disabled",
-					defaultValue: "Read only value",
-					isDisabled: true
-				})
-			]
-		})
-	},
-	{
-		id: "text-area",
-		title: "TextArea",
-		group: "Inputs",
-		render: () => /* @__PURE__ */ jsx(TextArea, {
-			label: "Description",
-			placeholder: "Tell us more",
-			helperText: "Maximum 500 characters"
-		})
-	},
-	{
-		id: "password-input",
-		title: "PasswordInput",
-		group: "Inputs",
-		render: () => /* @__PURE__ */ jsx(PasswordInput, {
-			label: "Password",
-			defaultValue: "supersecret",
-			isRequired: true
-		})
-	},
-	{
-		id: "number-field",
-		title: "NumberField",
-		group: "Inputs",
-		render: () => /* @__PURE__ */ jsx(NumberField, {
-			label: "Quantity",
-			defaultValue: 3
-		})
-	},
-	{
-		id: "checkbox",
-		title: "Checkbox",
-		group: "Inputs",
-		render: () => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-2",
-			children: [
-				/* @__PURE__ */ jsx(Checkbox, { children: "Unchecked" }),
-				/* @__PURE__ */ jsx(Checkbox, {
-					defaultSelected: true,
-					children: "Checked"
-				}),
-				/* @__PURE__ */ jsx(Checkbox, {
-					isIndeterminate: true,
-					children: "Indeterminate"
-				}),
-				/* @__PURE__ */ jsx(Checkbox, {
-					isDisabled: true,
-					children: "Disabled"
-				}),
-				/* @__PURE__ */ jsx(Checkbox, {
-					error: "This is an error message",
-					children: "With error"
-				})
-			]
-		})
-	},
-	{
-		id: "checkbox-group",
-		title: "CheckboxGroup",
-		group: "Inputs",
-		render: () => /* @__PURE__ */ jsx(CheckboxGroupDemo, {})
-	},
-	{
-		id: "radio-group",
-		title: "RadioGroup",
-		group: "Inputs",
-		render: () => /* @__PURE__ */ jsx(RadioGroupDemo, {})
-	},
-	{
-		id: "switch",
-		title: "Switch",
-		group: "Inputs",
-		render: () => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-2",
-			children: [
-				/* @__PURE__ */ jsx(Switch, { children: "Off" }),
-				/* @__PURE__ */ jsx(Switch, {
-					defaultSelected: true,
-					children: "On"
-				}),
-				/* @__PURE__ */ jsx(Switch, {
-					isDisabled: true,
-					children: "Disabled"
-				}),
-				/* @__PURE__ */ jsx(Switch, {
-					defaultSelected: true,
-					isDisabled: true,
-					children: "Selected disabled"
-				})
-			]
-		})
-	},
-	{
-		id: "slider",
-		title: "Slider",
-		group: "Inputs",
-		render: () => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-4",
-			children: [/* @__PURE__ */ jsx(Slider, {
-				label: "Percentage",
-				defaultValue: 40,
-				unit: "%"
-			}), /* @__PURE__ */ jsx(Slider, {
-				label: "Range",
-				isRange: true,
-				defaultValue: [25, 75]
-			})]
-		})
-	},
-	{
-		id: "select",
-		title: "Select",
-		group: "Selection",
-		render: () => /* @__PURE__ */ jsx(SelectDemo, {})
-	},
-	{
-		id: "autocomplete",
-		title: "Autocomplete",
-		group: "Selection",
-		render: () => /* @__PURE__ */ jsx(AutocompleteDemo, {})
-	},
-	{
-		id: "date-picker",
-		title: "DatePicker",
-		group: "Selection",
-		render: () => /* @__PURE__ */ jsx(DatePickerDemo, {})
-	},
-	{
-		id: "time-picker",
-		title: "TimePicker",
-		group: "Selection",
-		render: () => /* @__PURE__ */ jsx(TimePickerDemo, {})
-	},
-	{
-		id: "file-upload",
-		title: "FileUpload",
-		group: "Files",
-		render: () => /* @__PURE__ */ jsx(FileUpload, {
-			label: "Upload file",
-			helperText: "Upload images (JPEG, PNG, WEBP)",
-			acceptedFileTypes: [
-				"image/jpeg",
-				"image/png",
-				"image/webp"
-			]
-		})
-	},
-	{
-		id: "alert",
-		title: "Alert",
-		group: "Feedback",
-		render: () => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-3",
-			children: [
-				/* @__PURE__ */ jsx(Alert, {
-					text: "This is a neutral alert with some helpful information.",
-					icon: Info
-				}),
-				/* @__PURE__ */ jsx(Alert, {
-					color: "success",
-					text: "Your changes have been saved.",
-					icon: Check
-				}),
-				/* @__PURE__ */ jsx(Alert, {
-					color: "warning",
-					text: "Your trial ends in 3 days.",
-					icon: Info
-				}),
-				/* @__PURE__ */ jsx(Alert, {
-					variant: "contained",
-					color: "error",
-					text: "Something went wrong. Please try again.",
-					icon: Info
-				})
-			]
-		})
-	},
-	{
-		id: "toast",
-		title: "Toast",
-		group: "Feedback",
-		render: () => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-3",
-			children: [/* @__PURE__ */ jsx(Toast, {
-				variant: "outlined",
-				color: "neutral",
-				text: "This is a toast notification.",
-				icon: Check,
-				actions: [{
-					text: "Undo",
-					onPress: noop
-				}, {
-					text: "Dismiss",
-					onPress: noop
-				}]
-			}), /* @__PURE__ */ jsx(Toast, {
-				variant: "contained",
-				color: "success",
-				text: "File uploaded successfully.",
-				icon: Check
-			})]
-		})
-	},
-	{
-		id: "progress",
-		title: "Progress",
-		group: "Feedback",
-		render: () => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-4",
-			children: [
-				/* @__PURE__ */ jsx(Progress, {
-					progress: 50,
-					valueLabel: "trailing"
-				}),
-				/* @__PURE__ */ jsx(Progress, {
-					progress: 30,
-					valueLabel: "leading"
-				}),
-				/* @__PURE__ */ jsx(Progress, {
-					progress: 75,
-					valueLabel: "none"
-				})
-			]
-		})
-	},
-	{
-		id: "spinner",
-		title: "Spinner",
-		group: "Feedback",
-		render: () => /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-6",
-			children: [/* @__PURE__ */ jsx(Spinner, { size: "default" }), /* @__PURE__ */ jsx(Spinner, { size: "l" })]
-		})
-	},
-	{
-		id: "badge",
-		title: "Badge",
-		group: "Text",
-		render: () => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-2",
-			children: [
-				/* @__PURE__ */ jsx(Badge, {
-					color: "primary",
-					children: "Primary"
-				}),
-				/* @__PURE__ */ jsx(Badge, {
-					color: "secondary",
-					children: "Secondary"
-				}),
-				/* @__PURE__ */ jsx(Badge, {
-					color: "error",
-					children: "Error"
-				}),
-				/* @__PURE__ */ jsx(Badge, {
-					variant: "outlined",
-					color: "primary",
-					children: "Outlined"
-				}),
-				/* @__PURE__ */ jsx(Badge, {
-					color: "primary",
-					dismissable: true,
-					onDismiss: noop,
-					children: "Dismissable"
-				})
-			]
-		})
-	},
-	{
-		id: "tag",
-		title: "Tag",
-		group: "Text",
-		render: () => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-2",
-			children: [
-				/* @__PURE__ */ jsx(Tag, {
-					color: "primary",
-					children: "Primary"
-				}),
-				/* @__PURE__ */ jsx(Tag, {
-					color: "secondary",
-					children: "Secondary"
-				}),
-				/* @__PURE__ */ jsx(Tag, {
-					color: "success",
-					children: "Success"
-				}),
-				/* @__PURE__ */ jsx(Tag, {
-					color: "warning",
-					children: "Warning"
-				}),
-				/* @__PURE__ */ jsx(Tag, {
-					color: "error",
-					children: "Error"
-				}),
-				/* @__PURE__ */ jsx(Tag, {
-					color: "primary",
-					dismissable: true,
-					onDismiss: noop,
-					children: "Dismissable"
-				})
-			]
-		})
-	},
-	{
-		id: "link",
-		title: "Link",
-		group: "Text",
-		render: () => /* @__PURE__ */ jsxs(Typography, {
-			size: "body",
-			children: [
-				"Read the ",
-				/* @__PURE__ */ jsx(Link, {
-					href: "#",
-					children: "documentation"
-				}),
-				" or visit the ",
-				/* @__PURE__ */ jsx(Link, {
-					href: "#",
-					children: "help center"
-				}),
-				"."
-			]
-		})
-	},
-	{
-		id: "typography",
-		title: "Typography",
-		group: "Text",
-		render: () => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-2",
+			left: px(style.borderLeftWidth) * scale
+		};
+		const pad = {
+			top: px(style.paddingTop) * scale,
+			right: px(style.paddingRight) * scale,
+			bottom: px(style.paddingBottom) * scale,
+			left: px(style.paddingLeft) * scale
+		};
+		const inner = {
+			x: left + border.left,
+			y: top + border.top,
+			width: box.width - border.left - border.right,
+			height: box.height - border.top - border.bottom
+		};
+		const next = [];
+		const add = (kind, token, key, x, y, width, height) => {
+			if (token && width > .5 && height > .5) next.push({
+				key,
+				kind,
+				token,
+				label: describe(token),
+				x,
+				y,
+				width,
+				height
+			});
+		};
+		add("padding", tokens.padding.top, "pt", inner.x, inner.y, inner.width, pad.top);
+		add("padding", tokens.padding.bottom, "pb", inner.x, inner.y + inner.height - pad.bottom, inner.width, pad.bottom);
+		add("padding", tokens.padding.left, "pl", inner.x, inner.y + pad.top, pad.left, inner.height - pad.top - pad.bottom);
+		add("padding", tokens.padding.right, "pr", inner.x + inner.width - pad.right, inner.y + pad.top, pad.right, inner.height - pad.top - pad.bottom);
+		if (tokens.gap.row || tokens.gap.column) {
+			const children_0 = [...target.children].map((child) => child.getBoundingClientRect()).filter((rect) => rect.width > 0 && rect.height > 0);
+			const contentTop = inner.y + pad.top;
+			const contentHeight = inner.height - pad.top - pad.bottom;
+			const contentLeft = inner.x + pad.left;
+			const contentWidth = inner.width - pad.left - pad.right;
+			children_0.slice(1).forEach((rect_0, index) => {
+				const previous = children_0[index];
+				if (rect_0.left >= previous.right - .5) add("gap", tokens.gap.column, `gx${index}`, previous.right - origin.left, contentTop, rect_0.left - previous.right, contentHeight);
+				else if (rect_0.top >= previous.bottom - .5) add("gap", tokens.gap.row, `gy${index}`, contentLeft, previous.bottom - origin.top, contentWidth, rect_0.top - previous.bottom);
+			});
+		}
+		if (tokens.radius && px(style.borderTopLeftRadius) > 0) {
+			const size = Math.min(12, box.width / 3, box.height / 3);
+			add("radius", tokens.radius, "r-tl", left, top, size, size);
+			add("radius", tokens.radius, "r-tr", left + box.width - size, top, size, size);
+			add("radius", tokens.radius, "r-bl", left, top + box.height - size, size, size);
+			add("radius", tokens.radius, "r-br", left + box.width - size, top + box.height - size, size, size);
+		}
+		setRegions(next);
+		setOutline({
+			x: left,
+			y: top,
+			width: box.width,
+			height: box.height
+		});
+	}, [
+		target,
+		tokensOf,
+		describe
+	]);
+	useLayoutEffect(measure, [measure, revision]);
+	useEffect(() => {
+		const stage_0 = stageRef.current;
+		const ownerWindow = stage_0?.ownerDocument.defaultView;
+		if (!stage_0 || !ownerWindow) return;
+		let frame = 0;
+		const schedule = () => {
+			ownerWindow.cancelAnimationFrame(frame);
+			frame = ownerWindow.requestAnimationFrame(measure);
+		};
+		const observer = new ResizeObserver(schedule);
+		observer.observe(stage_0);
+		if (target) observer.observe(target);
+		ownerWindow.addEventListener("scroll", schedule, true);
+		return () => {
+			ownerWindow.cancelAnimationFrame(frame);
+			observer.disconnect();
+			ownerWindow.removeEventListener("scroll", schedule, true);
+		};
+	}, [measure, target]);
+	const onPointerMove = (event) => {
+		if (event.target.closest(".studio-inspect-region")) return;
+		const content = contentRef.current;
+		if (!content) return;
+		const hit = content.ownerDocument.elementsFromPoint(event.clientX, event.clientY).find((element_0) => content.contains(element_0) && hasTokens(tokensOf(element_0)));
+		if (hit && hit !== target) setTarget(hit);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: stageRef,
+		className: "studio-inspect-stage",
+		onPointerMove,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: contentRef,
+				className: "studio-inspect-content",
+				children
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "studio-inspect-layer",
+				"aria-label": "Token inspector",
+				children: [
+					outline && /* @__PURE__ */ jsx("div", {
+						className: "studio-inspect-outline",
+						style: {
+							left: outline.x,
+							top: outline.y,
+							width: outline.width,
+							height: outline.height
+						}
+					}),
+					regions.map((region) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: `studio-inspect-region is-${region.kind} ${active === region.token ? "is-active" : ""}`,
+						style: {
+							left: region.x,
+							top: region.y,
+							width: region.width,
+							height: region.height
+						},
+						"aria-label": `Edit ${region.kind} ${region.label}`,
+						title: region.label,
+						onPointerEnter: () => setActive(region.token),
+						onPointerLeave: () => setActive(null),
+						onClick: (event_0) => {
+							event_0.stopPropagation();
+							onSelect(region.token);
+						}
+					}, region.key)),
+					active && regions.some((region_1) => region_1.token === active) && /* @__PURE__ */ jsx(InspectLabel, {
+						region: regions.find((region_0) => region_0.token === active),
+						stageWidth: stageRef.current?.clientWidth ?? 0
+					})
+				]
+			}),
+			!target && /* @__PURE__ */ jsx("p", {
+				className: "studio-inspect-hint",
+				children: "Hover the component to see its paddings, gaps and radius."
+			})
+		]
+	});
+}
+function InspectLabel(t0) {
+	const $ = c(10);
+	const { region, stageWidth } = t0;
+	const left = Math.max(4, Math.min(region.x, stageWidth - 220));
+	const t1 = `studio-inspect-label is-${region.kind}`;
+	const t2 = Math.max(0, region.y - 24);
+	let t3;
+	if ($[0] !== left || $[1] !== t2) {
+		t3 = {
+			left,
+			top: t2
+		};
+		$[0] = left;
+		$[1] = t2;
+		$[2] = t3;
+	} else t3 = $[2];
+	let t4;
+	if ($[3] !== region.kind) {
+		t4 = /* @__PURE__ */ jsx("strong", { children: region.kind });
+		$[3] = region.kind;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== region.label || $[6] !== t1 || $[7] !== t3 || $[8] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: t1,
+			style: t3,
 			children: [
-				/* @__PURE__ */ jsx(Typography, {
-					size: "h1",
-					as: "h1",
-					children: "Heading 1"
-				}),
-				/* @__PURE__ */ jsx(Typography, {
-					size: "h2",
-					as: "h2",
-					children: "Heading 2"
-				}),
-				/* @__PURE__ */ jsx(Typography, {
-					size: "h3",
-					as: "h3",
-					children: "Heading 3"
-				}),
-				/* @__PURE__ */ jsx(Typography, {
-					size: "lead",
-					children: "Lead paragraph text."
-				}),
-				/* @__PURE__ */ jsx(Typography, {
-					size: "body",
-					children: "Body text for general content and descriptions."
-				}),
-				/* @__PURE__ */ jsx(Typography, {
-					size: "small",
-					children: "Small text for captions and metadata."
-				})
+				t4,
+				" ",
+				region.label
 			]
-		})
-	},
-	{
-		id: "accordion",
-		title: "Accordion",
-		group: "Navigation",
-		render: () => /* @__PURE__ */ jsx(Accordion, {
-			items: accordionItems,
-			defaultExpandedKeys: ["item1"]
-		})
-	},
-	{
-		id: "stepper",
-		wide: true,
-		title: "Stepper",
-		group: "Navigation",
-		render: () => /* @__PURE__ */ jsx(Stepper, {
-			steps,
-			currentStep: 1
-		})
-	},
-	{
-		id: "breadcrumbs",
-		title: "Breadcrumbs",
-		group: "Navigation",
-		render: () => /* @__PURE__ */ jsx(Breadcrumbs, { items: [
-			{
-				id: "home",
-				label: "Home",
-				link: { href: "#" },
-				icon: House
-			},
-			{
-				id: "products",
-				label: "Products",
-				link: { href: "#" }
-			},
-			{
-				id: "current",
-				label: "Product details"
-			}
-		] })
-	},
-	{
-		id: "pagination",
-		wide: true,
-		title: "Pagination",
-		group: "Navigation",
-		render: () => /* @__PURE__ */ jsx(PaginationDemo, {})
-	},
-	{
-		id: "dialog",
-		title: "Dialog",
-		group: "Overlays",
-		overlay: true,
-		render: () => /* @__PURE__ */ jsx(DialogDemo, {})
-	},
-	{
-		id: "popover",
-		title: "Popover",
-		group: "Overlays",
-		overlay: true,
-		render: () => /* @__PURE__ */ jsx(PopoverDemo, {})
-	},
-	{
-		id: "tooltip",
-		title: "Tooltip",
-		group: "Overlays",
-		overlay: true,
-		render: () => /* @__PURE__ */ jsx(TooltipDemo, {})
-	},
-	{
-		id: "dropdown-menu",
-		title: "DropdownMenu",
-		group: "Overlays",
-		overlay: true,
-		render: () => /* @__PURE__ */ jsx(DropdownMenuDemo, {})
-	},
-	{
-		id: "table",
-		wide: true,
-		title: "Table",
-		group: "Data",
-		render: () => /* @__PURE__ */ jsx(Table, {
-			items: tableRows,
-			columns: tableColumns
-		})
-	}
+		});
+		$[5] = region.label;
+		$[6] = t1;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+}
+//#endregion
+//#region src/configurator/gallery/groups.ts
+/** Gallery sections, kept apart from the demos so a host can list them without loading every component. */
+const galleryGroups = [
+	"Buttons",
+	"Inputs",
+	"Selection",
+	"Files",
+	"Feedback",
+	"Text",
+	"Navigation",
+	"Overlays",
+	"Data"
 ];
 //#endregion
 //#region src/configurator/gallery/LayoutPreview.tsx
@@ -2239,7 +724,7 @@ function DashboardScreen() {
 	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = /* @__PURE__ */ jsx("div", {
 			className: "studio-layout-stats",
-			children: stats.map(_temp$1)
+			children: stats.map(_temp)
 		});
 		t4 = /* @__PURE__ */ jsx(Table, {
 			items: projects,
@@ -2285,7 +770,7 @@ function DashboardScreen() {
 	return t6;
 }
 /** A sign-in screen: centered form with email, password, remember me, a primary and a secondary action. */
-function _temp$1(t0) {
+function _temp(t0) {
 	const { label, value, trend } = t0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "studio-layout-stat",
@@ -3256,6 +1741,10 @@ function LayoutPreview() {
 }
 //#endregion
 //#region src/configurator/gallery/ComponentGallery.tsx
+var ComponentGallery_exports = /* @__PURE__ */ __exportAll({
+	ComponentDemoArtboard: () => ComponentDemoArtboard,
+	default: () => ComponentGallery
+});
 /** Keeps portaled overlays (tooltips, popovers) inside the card so they inherit preview tokens and stay in place. */
 function PortalHere(t0) {
 	const $ = c(7);
@@ -3390,76 +1879,40 @@ function ZoomedDemo(t0) {
 	} else t10 = $[21];
 	return t10;
 }
-/** One gallery section on its own, live and uninspected, for an App Canvas artboard. */
-function ComponentArtboard(t0) {
-	const $ = c(13);
-	const { group } = t0;
-	if (group === "Layouts") {
-		let t1;
-		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-			t1 = /* @__PURE__ */ jsx(LayoutPreview, {});
-			$[0] = t1;
-		} else t1 = $[0];
-		return t1;
-	}
+/** One component on its own, live and uninspected, for an App Canvas artboard. */
+function ComponentDemoArtboard(t0) {
+	const $ = c(5);
+	const { id } = t0;
 	let t1;
-	let t2;
-	let t3;
-	let t4;
-	if ($[1] !== group) {
-		const items = demos.filter((demo) => demo.group === group);
-		t3 = "studio-gallery-group";
-		t4 = group;
-		t1 = "studio-gallery-grid";
-		t2 = items.map(_temp);
-		$[1] = group;
-		$[2] = t1;
-		$[3] = t2;
-		$[4] = t3;
-		$[5] = t4;
-	} else {
-		t1 = $[2];
-		t2 = $[3];
-		t3 = $[4];
-		t4 = $[5];
+	if ($[0] !== id) {
+		t1 = demos.find((item) => item.id === id);
+		$[0] = id;
+		$[1] = t1;
+	} else t1 = $[1];
+	const demo = t1;
+	if (!demo) {
+		let t2;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = /* @__PURE__ */ jsx("p", {
+				className: "studio-gallery-loading",
+				children: "This component is no longer in the gallery."
+			});
+			$[2] = t2;
+		} else t2 = $[2];
+		return t2;
 	}
-	let t5;
-	if ($[6] !== t1 || $[7] !== t2) {
-		t5 = /* @__PURE__ */ jsx("div", {
-			className: t1,
-			children: t2
-		});
-		$[6] = t1;
-		$[7] = t2;
-		$[8] = t5;
-	} else t5 = $[8];
-	let t6;
-	if ($[9] !== t3 || $[10] !== t4 || $[11] !== t5) {
-		t6 = /* @__PURE__ */ jsx("section", {
-			className: t3,
-			"aria-label": t4,
-			children: t5
-		});
-		$[9] = t3;
-		$[10] = t4;
-		$[11] = t5;
-		$[12] = t6;
-	} else t6 = $[12];
-	return t6;
-}
-function _temp(demo_0) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: `studio-gallery-card ${demo_0.wide ? "is-wide" : ""}`,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "studio-gallery-card-title",
-			children: demo_0.title
-		}), /* @__PURE__ */ jsx(PortalHere, { children: (portalRef) => /* @__PURE__ */ jsx("div", {
+	let t2;
+	if ($[3] !== demo) {
+		t2 = /* @__PURE__ */ jsx(PortalHere, { children: (portalRef) => /* @__PURE__ */ jsx("div", {
 			ref: portalRef,
 			className: "studio-gallery-demo",
-			"data-inspector-name": demo_0.title,
-			children: demo_0.render()
-		}) })]
-	}, demo_0.id);
+			"data-inspector-name": demo.title,
+			children: demo.render()
+		}) });
+		$[3] = demo;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
 }
 /** Every Povio UI component in one scrollable list; clicking a card zooms it into the token inspector. */
 function ComponentGallery(t0) {
@@ -3571,4 +2024,4 @@ function ComponentGallery(t0) {
 	return t7;
 }
 //#endregion
-export { ComponentArtboard, ComponentGallery as default };
+export { ComponentGallery_exports as n, ComponentDemoArtboard as t };