@povio/ui 5.0.0-rc.9 → 6.0.0-rc.2

package/dist/ComponentGallery-C6exitZN.js

@@ -1,3513 +0,0 @@
-import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
-import { i as inspectTokens } from "./UIConfigurator-BwLRfe-a.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--7ub3EZO.js";
-import { t as PasswordInput } from "./PasswordInput-DYwUZ4-k.js";
-import { t as Info } from "./info-iUmX3uDk.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-CV1ILXXO.js";
-import { t as Slider } from "./Slider-CzEmKYBF.js";
-import { t as Accordion } from "./Accordion-BzwO4_ml.js";
-import { t as RadioGroup } from "./RadioGroup-DOw3PRoX.js";
-import { t as Switch } from "./Switch-CqnGEdeD.js";
-import { t as TextArea } from "./TextArea-D8WkKsGn.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 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-C4taAOFQ.js";
-import { t as ToggleGroup } from "./ToggleGroup-DOk27fgI.js";
-import { t as DatePicker } from "./DatePicker-DOLL7mkc.js";
-import { t as Select } from "./Select-UR0ec2Ux.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 { t as Table } from "./Table-BN2_J_Ne.js";
-import { Link } from "./components/link.js";
-import { Badge } from "./components/badge.js";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { UNSAFE_PortalProvider } from "react-aria";
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/bell.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$9 = {
-	name: "bell",
-	size: 24,
-	node: [["path", {
-		d: "M10.268 21a2 2 0 0 0 3.464 0",
-		key: "vwvbt9"
-	}], ["path", {
-		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",
-		key: "11g9vi"
-	}]]
-};
-__iconData$9.node;
-const Bell = createLucideIcon(__iconData$9);
-//#endregion
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/credit-card.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$8 = {
-	name: "credit-card",
-	size: 24,
-	node: [["rect", {
-		width: "20",
-		height: "14",
-		x: "2",
-		y: "5",
-		rx: "2",
-		key: "ynyp8z"
-	}], ["line", {
-		x1: "2",
-		x2: "22",
-		y1: "10",
-		y2: "10",
-		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);
-//#endregion
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/maximize-2.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$6 = {
-	name: "maximize-2",
-	size: 24,
-	node: [
-		["path", {
-			d: "M15 3h6v6",
-			key: "1q9fwt"
-		}],
-		["path", {
-			d: "m21 3-7 7",
-			key: "1l2asr"
-		}],
-		["path", {
-			d: "m3 21 7-7",
-			key: "tjx5ai"
-		}],
-		["path", {
-			d: "M9 21H3v-6",
-			key: "wtvkvv"
-		}]
-	]
-};
-__iconData$6.node;
-const Maximize2 = createLucideIcon(__iconData$6);
-//#endregion
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/minimize-2.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$5 = {
-	name: "minimize-2",
-	size: 24,
-	node: [
-		["path", {
-			d: "m14 10 7-7",
-			key: "oa77jy"
-		}],
-		["path", {
-			d: "M20 10h-6V4",
-			key: "mjg0md"
-		}],
-		["path", {
-			d: "m3 21 7-7",
-			key: "tjx5ai"
-		}],
-		["path", {
-			d: "M4 14h6v6",
-			key: "rmj7iw"
-		}]
-	]
-};
-__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);
-//#endregion
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/shield-check.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$2 = {
-	name: "shield-check",
-	size: 24,
-	node: [["path", {
-		d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z",
-		key: "oel41y"
-	}], ["path", {
-		d: "m9 12 2 2 4-4",
-		key: "dzmm74"
-	}]]
-};
-__iconData$2.node;
-const ShieldCheck = createLucideIcon(__iconData$2);
-//#endregion
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/user.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$1 = {
-	name: "user",
-	size: 24,
-	node: [["path", {
-		d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2",
-		key: "975kel"
-	}], ["circle", {
-		cx: "12",
-		cy: "7",
-		r: "4",
-		key: "17ys0d"
-	}]]
-};
-__iconData$1.node;
-const User = createLucideIcon(__iconData$1);
-//#endregion
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/users.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 = {
-	name: "users",
-	size: 24,
-	node: [
-		["path", {
-			d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2",
-			key: "1yyitq"
-		}],
-		["path", {
-			d: "M16 3.128a4 4 0 0 1 0 7.744",
-			key: "16gr8j"
-		}],
-		["path", {
-			d: "M22 21v-2a4 4 0 0 0-3-3.87",
-			key: "kshegd"
-		}],
-		["circle", {
-			cx: "9",
-			cy: "7",
-			r: "4",
-			key: "nufk8"
-		}]
-	]
-};
-__iconData.node;
-const Users = createLucideIcon(__iconData);
-//#endregion
-//#region src/configurator/inspector/Inspector.tsx
-const px = (value) => parseFloat(value) || 0;
-const hasTokens = (tokens) => !!(tokens.radius || tokens.gap.row || tokens.gap.column || Object.keys(tokens.padding).length);
-/** Devtools-style overlay: hover an element to see its token-driven padding, gaps and radius, click one to edit it. */
-function Inspector({ isKnown, describe, onSelect, revision, children }) {
-	const stageRef = useRef(null);
-	const contentRef = useRef(null);
-	const [target, setTarget] = useState(null);
-	const [regions, setRegions] = useState([]);
-	const [outline, setOutline] = useState(null);
-	const [active, setActive] = useState(null);
-	const tokensOf = useCallback((element) => inspectTokens(typeof element.className === "string" ? element.className : "", isKnown, element.ownerDocument.defaultView?.innerWidth ?? 0, px(element.ownerDocument.defaultView?.getComputedStyle(element.ownerDocument.documentElement).fontSize ?? "16") || 16), [isKnown]);
-	const measure = useCallback(() => {
-		const stage = stageRef.current;
-		if (!stage || !target || !target.isConnected) {
-			setRegions([]);
-			setOutline(null);
-			return;
-		}
-		const origin = stage.getBoundingClientRect();
-		const box = target.getBoundingClientRect();
-		const scale = target.offsetWidth ? box.width / target.offsetWidth : 1;
-		const style = target.ownerDocument.defaultView.getComputedStyle(target);
-		const tokens = tokensOf(target);
-		const left = box.left - origin.left;
-		const top = box.top - origin.top;
-		const border = {
-			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 galleryGroups = [
-	"Buttons",
-	"Inputs",
-	"Selection",
-	"Files",
-	"Feedback",
-	"Text",
-	"Navigation",
-	"Overlays",
-	"Data"
-];
-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",
-			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."
-				})
-			]
-		})
-	},
-	{
-		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
-		})
-	}
-];
-//#endregion
-//#region src/configurator/gallery/LayoutPreview.tsx
-/** Daily active users for the stats card; the last day is highlighted as today. */
-const week = [
-	{
-		day: "M",
-		value: 58
-	},
-	{
-		day: "T",
-		value: 72
-	},
-	{
-		day: "W",
-		value: 64
-	},
-	{
-		day: "T",
-		value: 80
-	},
-	{
-		day: "F",
-		value: 70
-	},
-	{
-		day: "S",
-		value: 44
-	},
-	{
-		day: "S",
-		value: 90
-	}
-];
-const team = [
-	"AK",
-	"MS",
-	"LP"
-];
-const features = [
-	"Unlimited projects",
-	"Shared design tokens",
-	"Priority support"
-];
-const teamSizes = [
-	{
-		id: "small",
-		label: "1–10 people"
-	},
-	{
-		id: "medium",
-		label: "11–50 people"
-	},
-	{
-		id: "large",
-		label: "51+ people"
-	}
-];
-const navLinks = [
-	"Dashboard",
-	"Projects",
-	"Team",
-	"Settings"
-];
-/** The app's top navigation: brand, page links, search, notifications and the signed-in user. */
-function NavigationBar(t0) {
-	const $ = c(8);
-	const { active } = t0;
-	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsxs("span", {
-			className: "studio-layout-brand",
-			children: [/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				children: "A"
-			}), "Acme"]
-		});
-		$[0] = t1;
-	} else t1 = $[0];
-	let t2;
-	if ($[1] !== active) {
-		t2 = navLinks.map((link) => /* @__PURE__ */ jsx(Button, {
-			size: "s",
-			variant: link === active ? "subtle" : "ghost",
-			"aria-current": link === active ? "page" : void 0,
-			children: link
-		}, link));
-		$[1] = active;
-		$[2] = t2;
-	} else t2 = $[2];
-	let t3;
-	if ($[3] !== t2) {
-		t3 = /* @__PURE__ */ jsx("nav", {
-			"aria-label": "Main",
-			className: "studio-layout-nav-links",
-			children: t2
-		});
-		$[3] = t2;
-		$[4] = t3;
-	} else t3 = $[4];
-	let t4;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsxs("div", {
-			className: "studio-layout-nav-actions",
-			children: [
-				/* @__PURE__ */ jsx(Input, {
-					label: "Search",
-					hideLabel: true,
-					placeholder: "Search",
-					size: "small",
-					leadingIcon: Search
-				}),
-				/* @__PURE__ */ jsx(IconButton, {
-					icon: Bell,
-					label: "Notifications",
-					variant: "subtle",
-					size: "sm"
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "studio-layout-nav-avatar",
-					"aria-label": "Jane Doe",
-					children: "JD"
-				})
-			]
-		});
-		$[5] = t4;
-	} else t4 = $[5];
-	let t5;
-	if ($[6] !== t3) {
-		t5 = /* @__PURE__ */ jsxs("header", {
-			className: "studio-layout-nav",
-			children: [
-				t1,
-				t3,
-				t4
-			]
-		});
-		$[6] = t3;
-		$[7] = t5;
-	} else t5 = $[7];
-	return t5;
-}
-const stats = [
-	{
-		label: "Revenue",
-		value: "€48,200",
-		trend: "+8.2%"
-	},
-	{
-		label: "Active projects",
-		value: "24",
-		trend: "+3"
-	},
-	{
-		label: "New sign-ups",
-		value: "312",
-		trend: "+12%"
-	},
-	{
-		label: "Churn",
-		value: "1.8%",
-		trend: "−0.4%"
-	}
-];
-const projects = [
-	{
-		name: "Onboarding redesign",
-		owner: "Ada Lovelace",
-		status: "Active",
-		updated: "2 hours ago",
-		budget: "€12,400"
-	},
-	{
-		name: "Billing migration",
-		owner: "Alan Turing",
-		status: "Review",
-		updated: "Yesterday",
-		budget: "€8,900"
-	},
-	{
-		name: "Mobile app 2.0",
-		owner: "Grace Hopper",
-		status: "Active",
-		updated: "3 days ago",
-		budget: "€21,000"
-	},
-	{
-		name: "Design tokens",
-		owner: "Linus Torvalds",
-		status: "Blocked",
-		updated: "Last week",
-		budget: "€4,300"
-	},
-	{
-		name: "Analytics dashboard",
-		owner: "Margaret Hamilton",
-		status: "Review",
-		updated: "Last week",
-		budget: "€9,750"
-	}
-];
-const statusColor = {
-	Active: "primary",
-	Review: "secondary",
-	Blocked: "error"
-};
-const projectColumns = [
-	{
-		accessorKey: "name",
-		header: "Project",
-		enableSorting: false
-	},
-	{
-		accessorKey: "owner",
-		header: "Owner",
-		enableSorting: false
-	},
-	{
-		accessorKey: "status",
-		header: "Status",
-		enableSorting: false,
-		cell: ({ row }) => /* @__PURE__ */ jsx(Badge, {
-			color: statusColor[row.original.status],
-			children: row.original.status
-		})
-	},
-	{
-		accessorKey: "updated",
-		header: "Updated",
-		enableSorting: false
-	},
-	{
-		accessorKey: "budget",
-		header: "Budget",
-		enableSorting: false
-	}
-];
-/** A dashboard: navigation, KPI tiles, a project table with status badges and pagination. */
-function DashboardScreen() {
-	const $ = c(9);
-	const [page, setPage] = useState(1);
-	const [pageSize, setPageSize] = useState(10);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx(NavigationBar, { active: "Dashboard" });
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", { children: "Dashboard" }), /* @__PURE__ */ jsx("p", {
-			className: "studio-layout-muted",
-			children: "An overview of your team's projects this month."
-		})] });
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsxs("div", {
-			className: "studio-layout-screen-heading",
-			children: [t1, /* @__PURE__ */ jsxs("div", {
-				className: "studio-layout-form-actions",
-				children: [/* @__PURE__ */ jsx(Button, {
-					size: "default",
-					variant: "outlined",
-					children: "Default button"
-				}), /* @__PURE__ */ jsx(Button, {
-					size: "default",
-					children: "Default button"
-				})]
-			})]
-		});
-		$[2] = t2;
-	} else t2 = $[2];
-	let t3;
-	let t4;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsx("div", {
-			className: "studio-layout-stats",
-			children: stats.map(_temp)
-		});
-		t4 = /* @__PURE__ */ jsx(Table, {
-			items: projects,
-			columns: projectColumns
-		});
-		$[3] = t3;
-		$[4] = t4;
-	} else {
-		t3 = $[3];
-		t4 = $[4];
-	}
-	let t5;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = (size) => {
-			setPageSize(size);
-			setPage(1);
-		};
-		$[5] = t5;
-	} else t5 = $[5];
-	let t6;
-	if ($[6] !== page || $[7] !== pageSize) {
-		t6 = /* @__PURE__ */ jsxs("article", {
-			className: "studio-layout-card is-screen",
-			children: [
-				t0,
-				t2,
-				t3,
-				t4,
-				/* @__PURE__ */ jsx(Pagination, {
-					page,
-					pageSize,
-					totalItems: 42,
-					hideFirstLast: true,
-					onPageChange: setPage,
-					onPageSizeChange: t5
-				})
-			]
-		});
-		$[6] = page;
-		$[7] = pageSize;
-		$[8] = t6;
-	} else t6 = $[8];
-	return t6;
-}
-/** A sign-in screen: centered form with email, password, remember me, a primary and a secondary action. */
-function _temp(t0) {
-	const { label, value, trend } = t0;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "studio-layout-stat",
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "studio-layout-label",
-				children: label
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "studio-layout-amount",
-				children: value
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "studio-layout-trend",
-				children: trend
-			})
-		]
-	}, label);
-}
-function LoginScreen() {
-	const $ = c(9);
-	let t0;
-	let t1;
-	let t2;
-	let t3;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsxs("span", {
-			className: "studio-layout-brand",
-			children: [/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				children: "A"
-			}), "Acme"]
-		});
-		t1 = /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", { children: "Sign in to your account" }), /* @__PURE__ */ jsx("p", {
-			className: "studio-layout-muted",
-			children: "Welcome back. Enter your details to continue."
-		})] });
-		t2 = /* @__PURE__ */ jsx(Input, {
-			label: "Email",
-			placeholder: "jane@company.com",
-			type: "email",
-			size: "default"
-		});
-		t3 = /* @__PURE__ */ jsx(PasswordInput, {
-			label: "Password",
-			placeholder: "••••••••",
-			size: "default"
-		});
-		$[0] = t0;
-		$[1] = t1;
-		$[2] = t2;
-		$[3] = t3;
-	} else {
-		t0 = $[0];
-		t1 = $[1];
-		t2 = $[2];
-		t3 = $[3];
-	}
-	let t4;
-	let t5;
-	let t6;
-	let t7;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsxs("div", {
-			className: "studio-layout-login-row",
-			children: [/* @__PURE__ */ jsx(Checkbox, { children: "Remember me" }), /* @__PURE__ */ jsx(Link, {
-				href: "#",
-				children: "Forgot password?"
-			})]
-		});
-		t5 = /* @__PURE__ */ jsx(Button, {
-			size: "default",
-			type: "submit",
-			fullWidth: true,
-			children: "Default button"
-		});
-		t6 = /* @__PURE__ */ jsx("span", {
-			className: "studio-layout-login-divider",
-			children: "or"
-		});
-		t7 = /* @__PURE__ */ jsx(Button, {
-			size: "default",
-			variant: "outlined",
-			fullWidth: true,
-			children: "Default button"
-		});
-		$[4] = t4;
-		$[5] = t5;
-		$[6] = t6;
-		$[7] = t7;
-	} else {
-		t4 = $[4];
-		t5 = $[5];
-		t6 = $[6];
-		t7 = $[7];
-	}
-	let t8;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsx("article", {
-			className: "studio-layout-card is-screen is-login",
-			children: /* @__PURE__ */ jsxs("form", {
-				className: "studio-layout-login",
-				onSubmit: _temp2,
-				children: [
-					t0,
-					t1,
-					t2,
-					t3,
-					t4,
-					t5,
-					t6,
-					t7,
-					/* @__PURE__ */ jsxs("p", {
-						className: "studio-layout-muted studio-layout-login-footer",
-						children: ["Don't have an account? ", /* @__PURE__ */ jsx(Link, {
-							href: "#",
-							children: "Sign up"
-						})]
-					})
-				]
-			})
-		});
-		$[8] = t8;
-	} else t8 = $[8];
-	return t8;
-}
-function _temp2(event) {
-	return event.preventDefault();
-}
-const settingsMenu = [
-	{
-		label: "Profile",
-		icon: User,
-		active: true
-	},
-	{
-		label: "Team",
-		icon: Users
-	},
-	{
-		label: "Notifications",
-		icon: Bell
-	},
-	{
-		label: "Billing",
-		icon: CreditCard
-	},
-	{
-		label: "Security",
-		icon: ShieldCheck
-	}
-];
-const roles = [
-	{
-		id: "designer",
-		label: "Designer"
-	},
-	{
-		id: "developer",
-		label: "Developer"
-	},
-	{
-		id: "manager",
-		label: "Product manager"
-	}
-];
-/**
-* A settings page: a navigation menu built from the dropdown menu's item classes (so list tokens apply) beside a
-* profile form with an image drop zone, text fields, a select, a switch and default buttons.
-*/
-function SettingsPage() {
-	const $ = c(25);
-	const menuCva = UIOverrides.useCva("dropdownMenu.cva", dropdownMenuDefinition);
-	const menuItemCva = UIOverrides.useCva("dropdownMenu.itemCva", menuItemDefinition);
-	const [role, setRole] = useState("designer");
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx(NavigationBar, { active: "Settings" });
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = {
-			id: "home",
-			label: "Home",
-			link: { href: "#" }
-		};
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(Breadcrumbs, { items: [
-			t1,
-			{
-				id: "settings",
-				label: "Settings",
-				link: { href: "#" }
-			},
-			{
-				id: "profile",
-				label: "Profile"
-			}
-		] });
-		$[2] = t2;
-	} else t2 = $[2];
-	let t3;
-	if ($[3] !== menuCva) {
-		t3 = menuCva({ isMobile: false });
-		$[3] = menuCva;
-		$[4] = t3;
-	} else t3 = $[4];
-	const t4 = `studio-layout-menu ${t3}`;
-	let t5;
-	if ($[5] !== menuItemCva) {
-		t5 = settingsMenu.map((t6) => {
-			const { label, icon: Icon, active } = t6;
-			return /* @__PURE__ */ jsx("button", {
-				type: "button",
-				"aria-current": active ? "page" : void 0,
-				className: menuItemCva({ isMobile: false }),
-				children: /* @__PURE__ */ jsxs("span", {
-					className: "studio-layout-menu-label",
-					children: [/* @__PURE__ */ jsx(Icon, {
-						size: 16,
-						"aria-hidden": "true"
-					}), label]
-				})
-			}, label);
-		});
-		$[5] = menuItemCva;
-		$[6] = t5;
-	} else t5 = $[6];
-	let t6;
-	if ($[7] !== t4 || $[8] !== t5) {
-		t6 = /* @__PURE__ */ jsx("nav", {
-			"aria-label": "Settings",
-			className: t4,
-			children: t5
-		});
-		$[7] = t4;
-		$[8] = t5;
-		$[9] = t6;
-	} else t6 = $[9];
-	let t7;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = /* @__PURE__ */ jsxs("div", {
-			className: "studio-layout-form-wide",
-			children: [/* @__PURE__ */ jsx("h4", { children: "Profile" }), /* @__PURE__ */ jsx("p", {
-				className: "studio-layout-muted",
-				children: "This is how others see you across shared projects."
-			})]
-		});
-		$[10] = t7;
-	} else t7 = $[10];
-	let t10;
-	let t8;
-	let t9;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsx("div", {
-			className: "studio-layout-form-wide",
-			children: /* @__PURE__ */ jsx(FileUpload, {
-				label: "Profile photo",
-				helperText: "Drop an image here (JPEG, PNG, WEBP), up to 5 MB.",
-				acceptedFileTypes: [
-					"image/jpeg",
-					"image/png",
-					"image/webp"
-				],
-				variant: "horizontal"
-			})
-		});
-		t9 = /* @__PURE__ */ jsx(Input, {
-			label: "Display name",
-			placeholder: "Jane Doe"
-		});
-		t10 = /* @__PURE__ */ jsx(Input, {
-			label: "Email",
-			placeholder: "jane@company.com",
-			type: "email"
-		});
-		$[11] = t10;
-		$[12] = t8;
-		$[13] = t9;
-	} else {
-		t10 = $[11];
-		t8 = $[12];
-		t9 = $[13];
-	}
-	let t11;
-	if ($[14] !== role) {
-		t11 = /* @__PURE__ */ jsx(Select, {
-			label: "Role",
-			items: roles,
-			value: role,
-			onChange: setRole
-		});
-		$[14] = role;
-		$[15] = t11;
-	} else t11 = $[15];
-	let t12;
-	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = /* @__PURE__ */ jsx(Input, {
-			label: "Location",
-			placeholder: "Ljubljana, Slovenia"
-		});
-		$[16] = t12;
-	} else t12 = $[16];
-	let t13;
-	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = /* @__PURE__ */ jsx("div", {
-			className: "studio-layout-form-wide",
-			children: /* @__PURE__ */ jsx(TextArea, {
-				label: "Bio",
-				placeholder: "A few words about you",
-				helperText: "Shown on your public profile."
-			})
-		});
-		$[17] = t13;
-	} else t13 = $[17];
-	let t14;
-	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = /* @__PURE__ */ jsx(Switch, {
-			defaultSelected: true,
-			children: "Public profile"
-		});
-		$[18] = t14;
-	} else t14 = $[18];
-	let t15;
-	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-		t15 = /* @__PURE__ */ jsxs("div", {
-			className: "studio-layout-form-footer",
-			children: [t14, /* @__PURE__ */ jsxs("div", {
-				className: "studio-layout-form-actions",
-				children: [/* @__PURE__ */ jsx(Button, {
-					size: "default",
-					variant: "outlined",
-					children: "Default button"
-				}), /* @__PURE__ */ jsx(Button, {
-					size: "default",
-					type: "submit",
-					children: "Default button"
-				})]
-			})]
-		});
-		$[19] = t15;
-	} else t15 = $[19];
-	let t16;
-	if ($[20] !== t11) {
-		t16 = /* @__PURE__ */ jsxs("form", {
-			className: "studio-layout-form",
-			onSubmit: _temp3,
-			children: [
-				t7,
-				t8,
-				t9,
-				t10,
-				t11,
-				t12,
-				t13,
-				t15
-			]
-		});
-		$[20] = t11;
-		$[21] = t16;
-	} else t16 = $[21];
-	let t17;
-	if ($[22] !== t16 || $[23] !== t6) {
-		t17 = /* @__PURE__ */ jsxs("article", {
-			className: "studio-layout-card is-settings",
-			children: [
-				t0,
-				t2,
-				/* @__PURE__ */ jsxs("div", {
-					className: "studio-layout-settings",
-					children: [t6, t16]
-				})
-			]
-		});
-		$[22] = t16;
-		$[23] = t6;
-		$[24] = t17;
-	} else t17 = $[24];
-	return t17;
-}
-/**
-* Opens a real Dialog, so its enter and exit animation can be judged. It is portaled into the preview rather than the
-* page body, so it uses the draft tokens and the preview's color mode.
-*/
-function _temp3(event) {
-	return event.preventDefault();
-}
-function ModalCard() {
-	const $ = c(10);
-	const [isOpen, setIsOpen] = useState(false);
-	const portalRef = useRef(null);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", { children: "Modal" }), /* @__PURE__ */ jsx("p", {
-			className: "studio-layout-muted",
-			children: "Opens a real dialog with its enter and exit animation."
-		})] });
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	let t2;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx(Button, {
-			size: "default",
-			onPress: () => setIsOpen(true),
-			children: "Open modal"
-		});
-		t2 = /* @__PURE__ */ jsx("div", { ref: portalRef });
-		$[1] = t1;
-		$[2] = t2;
-	} else {
-		t1 = $[1];
-		t2 = $[2];
-	}
-	let t3;
-	let t4;
-	let t5;
-	let t6;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = (event) => {
-			event.preventDefault();
-			setIsOpen(false);
-		};
-		t4 = /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", { children: "Create project" }), /* @__PURE__ */ jsx("p", {
-			className: "studio-layout-muted",
-			children: "Projects group tasks, files and people around one goal."
-		})] });
-		t5 = /* @__PURE__ */ jsx(Input, {
-			label: "Project name",
-			placeholder: "Website relaunch",
-			size: "default"
-		});
-		t6 = /* @__PURE__ */ jsx(TextArea, {
-			label: "Description",
-			placeholder: "What is this project about?"
-		});
-		$[3] = t3;
-		$[4] = t4;
-		$[5] = t5;
-		$[6] = t6;
-	} else {
-		t3 = $[3];
-		t4 = $[4];
-		t5 = $[5];
-		t6 = $[6];
-	}
-	let t7;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = /* @__PURE__ */ jsxs("form", {
-			className: "studio-layout-modal",
-			onSubmit: t3,
-			children: [
-				t4,
-				t5,
-				t6,
-				/* @__PURE__ */ jsxs("div", {
-					className: "studio-layout-modal-actions",
-					children: [/* @__PURE__ */ jsx(Button, {
-						size: "default",
-						variant: "outlined",
-						onPress: () => setIsOpen(false),
-						children: "Default button"
-					}), /* @__PURE__ */ jsx(Button, {
-						size: "default",
-						type: "submit",
-						children: "Default button"
-					})]
-				})
-			]
-		});
-		$[7] = t7;
-	} else t7 = $[7];
-	let t8;
-	if ($[8] !== isOpen) {
-		t8 = /* @__PURE__ */ jsxs("article", {
-			className: "studio-layout-card is-modal",
-			children: [
-				t0,
-				t1,
-				t2,
-				/* @__PURE__ */ jsx(Dialog, {
-					isOpen,
-					onOpenChange: setIsOpen,
-					portalContainerRef: portalRef,
-					showCloseIcon: true,
-					"aria-label": "Create project",
-					children: t7
-				})
-			]
-		});
-		$[8] = isOpen;
-		$[9] = t8;
-	} else t8 = $[9];
-	return t8;
-}
-/** Default-size inputs and buttons side by side, so control heights can be compared while sizing changes. */
-function InviteCard() {
-	const $ = c(3);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", { children: "Invite your team" }), /* @__PURE__ */ jsx("p", {
-			className: "studio-layout-muted",
-			children: "Teammates get access to every shared project."
-		})] });
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsxs("form", {
-			className: "studio-layout-invite",
-			onSubmit: _temp4,
-			children: [/* @__PURE__ */ jsx(Input, {
-				label: "Email address",
-				placeholder: "name@company.com",
-				type: "email",
-				size: "default"
-			}), /* @__PURE__ */ jsx(Button, {
-				size: "default",
-				type: "submit",
-				children: "Default button"
-			})]
-		});
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsxs("article", {
-			className: "studio-layout-card is-invite",
-			children: [
-				t0,
-				t1,
-				/* @__PURE__ */ jsxs("div", {
-					className: "studio-layout-invite-actions",
-					children: [/* @__PURE__ */ jsx(Button, {
-						size: "default",
-						variant: "outlined",
-						children: "Default button"
-					}), /* @__PURE__ */ jsx(Button, {
-						size: "default",
-						variant: "ghost",
-						children: "Default button"
-					})]
-				})
-			]
-		});
-		$[2] = t2;
-	} else t2 = $[2];
-	return t2;
-}
-/** A basic form, so input, label, helper text and focus styles can be judged in context. */
-function _temp4(event) {
-	return event.preventDefault();
-}
-function DemoRequestForm() {
-	const $ = c(10);
-	const [teamSize, setTeamSize] = useState("medium");
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", { children: "Request a demo" }), /* @__PURE__ */ jsx("p", {
-			className: "studio-layout-muted",
-			children: "We will get back to you within one business day."
-		})] });
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	let t2;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx(Input, {
-			label: "Full name",
-			placeholder: "Jane Doe"
-		});
-		t2 = /* @__PURE__ */ jsx(Input, {
-			label: "Work email",
-			placeholder: "jane@company.com",
-			isRequired: true
-		});
-		$[1] = t1;
-		$[2] = t2;
-	} else {
-		t1 = $[1];
-		t2 = $[2];
-	}
-	let t3;
-	if ($[3] !== teamSize) {
-		t3 = /* @__PURE__ */ jsx(Select, {
-			label: "Team size",
-			placeholder: "Select team size",
-			items: teamSizes,
-			value: teamSize,
-			onChange: setTeamSize
-		});
-		$[3] = teamSize;
-		$[4] = t3;
-	} else t3 = $[4];
-	let t4;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsx("div", {
-			className: "studio-layout-form-wide",
-			children: /* @__PURE__ */ jsx(TextArea, {
-				label: "Message",
-				placeholder: "What would you like to see?",
-				helperText: "Optional, up to 500 characters."
-			})
-		});
-		$[5] = t4;
-	} else t4 = $[5];
-	let t5;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx(Checkbox, {
-			defaultSelected: true,
-			children: "Send me product updates"
-		});
-		$[6] = t5;
-	} else t5 = $[6];
-	let t6;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsxs("div", {
-			className: "studio-layout-form-footer",
-			children: [t5, /* @__PURE__ */ jsxs("div", {
-				className: "studio-layout-form-actions",
-				children: [/* @__PURE__ */ jsx(Button, {
-					size: "s",
-					variant: "ghost",
-					children: "Small button"
-				}), /* @__PURE__ */ jsx(Button, {
-					size: "s",
-					type: "submit",
-					children: "Small button"
-				})]
-			})]
-		});
-		$[7] = t6;
-	} else t6 = $[7];
-	let t7;
-	if ($[8] !== t3) {
-		t7 = /* @__PURE__ */ jsxs("article", {
-			className: "studio-layout-card is-form",
-			children: [t0, /* @__PURE__ */ jsxs("form", {
-				className: "studio-layout-form",
-				onSubmit: _temp5,
-				children: [
-					t1,
-					t2,
-					t3,
-					t4,
-					t6
-				]
-			})]
-		});
-		$[8] = t3;
-		$[9] = t7;
-	} else t7 = $[9];
-	return t7;
-}
-/**
-* Small product cards built only from theme tokens and Povio UI components, so palette, typography, radius and
-* component changes can be judged in a realistic composition rather than component by component.
-*/
-function _temp5(event) {
-	return event.preventDefault();
-}
-function LayoutCards() {
-	const $ = c(12);
-	let t0;
-	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("p", {
-			className: "studio-layout-label",
-			children: "Sprint 24"
-		});
-		t1 = /* @__PURE__ */ jsx("h4", { children: "Redesign onboarding flow" });
-		$[0] = t0;
-		$[1] = t1;
-	} else {
-		t0 = $[0];
-		t1 = $[1];
-	}
-	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsxs("div", {
-			className: "studio-layout-tags",
-			children: [/* @__PURE__ */ jsx(Tag, { children: "Design" }), /* @__PURE__ */ jsx(Tag, { children: "Research" })]
-		});
-		$[2] = t2;
-	} else t2 = $[2];
-	let t3;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsxs("div", {
-			className: "studio-layout-progress",
-			children: [/* @__PURE__ */ jsx("span", { children: "12 of 18 tasks" }), /* @__PURE__ */ jsx(Progress, { progress: 65 })]
-		});
-		$[3] = t3;
-	} else t3 = $[3];
-	let t4;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsxs("article", {
-			className: "studio-layout-card is-soft",
-			children: [
-				t0,
-				t1,
-				t2,
-				t3,
-				/* @__PURE__ */ jsxs("div", {
-					className: "studio-layout-footer",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "studio-layout-avatars",
-						"aria-label": `${team.length} team members`,
-						children: team.map(_temp6)
-					}), /* @__PURE__ */ jsx(Button, {
-						size: "s",
-						children: "Small button"
-					})]
-				})
-			]
-		});
-		$[4] = t4;
-	} else t4 = $[4];
-	let t5;
-	let t6;
-	let t7;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx("p", {
-			className: "studio-layout-label",
-			children: "Weekly active users"
-		});
-		t6 = /* @__PURE__ */ jsx("p", {
-			className: "studio-layout-amount",
-			children: "8,420"
-		});
-		t7 = /* @__PURE__ */ jsx("p", {
-			className: "studio-layout-trend",
-			children: "+12% vs last week"
-		});
-		$[5] = t5;
-		$[6] = t6;
-		$[7] = t7;
-	} else {
-		t5 = $[5];
-		t6 = $[6];
-		t7 = $[7];
-	}
-	let t8;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsxs("article", {
-			className: "studio-layout-card is-stats",
-			children: [
-				t5,
-				t6,
-				t7,
-				/* @__PURE__ */ jsx("div", {
-					className: "studio-layout-chart",
-					role: "img",
-					"aria-label": "Daily active users for the last seven days",
-					children: week.map(_temp7)
-				})
-			]
-		});
-		$[8] = t8;
-	} else t8 = $[8];
-	let t9;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ jsx("p", {
-			className: "studio-layout-label",
-			children: "Pro plan"
-		});
-		$[9] = t9;
-	} else t9 = $[9];
-	let t10;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = /* @__PURE__ */ jsxs("p", {
-			className: "studio-layout-price",
-			children: ["€24", /* @__PURE__ */ jsx("span", { children: "/month" })]
-		});
-		$[10] = t10;
-	} else t10 = $[10];
-	let t11;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = /* @__PURE__ */ jsxs("div", {
-			className: "studio-layout-grid",
-			children: [
-				t4,
-				t8,
-				/* @__PURE__ */ jsxs("article", {
-					className: "studio-layout-card is-bold",
-					children: [
-						t9,
-						t10,
-						/* @__PURE__ */ jsx("ul", {
-							className: "studio-layout-features",
-							children: features.map(_temp8)
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							size: "s",
-							className: "studio-layout-cta",
-							children: "Small button"
-						})
-					]
-				}),
-				/* @__PURE__ */ jsx(InviteCard, {}),
-				/* @__PURE__ */ jsx(DemoRequestForm, {}),
-				/* @__PURE__ */ jsx(SettingsPage, {}),
-				/* @__PURE__ */ jsx(DashboardScreen, {}),
-				/* @__PURE__ */ jsx(LoginScreen, {}),
-				/* @__PURE__ */ jsx(ModalCard, {})
-			]
-		});
-		$[11] = t11;
-	} else t11 = $[11];
-	return t11;
-}
-/** The layouts at an app's real width, filling the window, so sizes can be judged as they would ship. */
-function _temp8(feature) {
-	return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx(Check, {
-		size: 13,
-		"aria-hidden": "true"
-	}), feature] }, feature);
-}
-function _temp7(t0, index) {
-	const { day, value } = t0;
-	return /* @__PURE__ */ jsxs("div", {
-		className: `studio-layout-bar ${index === week.length - 1 ? "is-today" : ""}`,
-		children: [/* @__PURE__ */ jsx("span", { style: { height: `${value}%` } }), /* @__PURE__ */ jsx("span", {
-			className: "studio-layout-day",
-			children: day
-		})]
-	}, `${day}-${value}`);
-}
-function _temp6(initials) {
-	return /* @__PURE__ */ jsx("span", { children: initials }, initials);
-}
-function FullScreenLayouts(t0) {
-	const $ = c(12);
-	const { onClose } = t0;
-	const closeRef = useRef(null);
-	let t1;
-	let t2;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = () => closeRef.current?.focus();
-		t2 = [];
-		$[0] = t1;
-		$[1] = t2;
-	} else {
-		t1 = $[0];
-		t2 = $[1];
-	}
-	useEffect(t1, t2);
-	let t3;
-	if ($[2] !== onClose) {
-		t3 = (event) => {
-			if (event.key !== "Escape") return;
-			event.stopPropagation();
-			onClose();
-		};
-		$[2] = onClose;
-		$[3] = t3;
-	} else t3 = $[3];
-	let t4;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsx("span", { children: "Layouts · actual size" });
-		$[4] = t4;
-	} else t4 = $[4];
-	let t5;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx(Minimize2, {
-			size: 13,
-			"aria-hidden": "true"
-		});
-		$[5] = t5;
-	} else t5 = $[5];
-	let t6;
-	if ($[6] !== onClose) {
-		t6 = /* @__PURE__ */ jsxs("div", {
-			className: "studio-layout-fullscreen-bar",
-			children: [t4, /* @__PURE__ */ jsxs("button", {
-				ref: closeRef,
-				type: "button",
-				className: "studio-gallery-back",
-				onClick: onClose,
-				children: [t5, "Exit full screen"]
-			})]
-		});
-		$[6] = onClose;
-		$[7] = t6;
-	} else t6 = $[7];
-	let t7;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = /* @__PURE__ */ jsx("div", {
-			className: "studio-layout-fullscreen-stage",
-			children: /* @__PURE__ */ jsx(LayoutCards, {})
-		});
-		$[8] = t7;
-	} else t7 = $[8];
-	let t8;
-	if ($[9] !== t3 || $[10] !== t6) {
-		t8 = /* @__PURE__ */ jsxs("div", {
-			className: "studio-layout-fullscreen",
-			role: "dialog",
-			"aria-label": "Layouts at full size",
-			onKeyDown: t3,
-			children: [t6, t7]
-		});
-		$[9] = t3;
-		$[10] = t6;
-		$[11] = t8;
-	} else t8 = $[11];
-	return t8;
-}
-function LayoutPreview() {
-	const $ = c(7);
-	const [fullScreen, setFullScreen] = useState(false);
-	const openRef = useRef(null);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("h3", { children: "Layouts" });
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	let t2;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsxs("div", {
-			className: "studio-layout-heading",
-			children: [t0, /* @__PURE__ */ jsxs("button", {
-				ref: openRef,
-				type: "button",
-				className: "studio-gallery-back",
-				onClick: () => setFullScreen(true),
-				children: [/* @__PURE__ */ jsx(Maximize2, {
-					size: 13,
-					"aria-hidden": "true"
-				}), "Full screen"]
-			})]
-		});
-		t2 = /* @__PURE__ */ jsx(LayoutCards, {});
-		$[1] = t1;
-		$[2] = t2;
-	} else {
-		t1 = $[1];
-		t2 = $[2];
-	}
-	let t3;
-	if ($[3] !== fullScreen) {
-		t3 = fullScreen && /* @__PURE__ */ jsx(FullScreenLayouts, { onClose: () => {
-			setFullScreen(false);
-			openRef.current?.focus();
-		} });
-		$[3] = fullScreen;
-		$[4] = t3;
-	} else t3 = $[4];
-	let t4;
-	if ($[5] !== t3) {
-		t4 = /* @__PURE__ */ jsxs("section", {
-			className: "studio-gallery-group",
-			"aria-label": "Layouts",
-			children: [
-				t1,
-				t2,
-				t3
-			]
-		});
-		$[5] = t3;
-		$[6] = t4;
-	} else t4 = $[6];
-	return t4;
-}
-//#endregion
-//#region src/configurator/gallery/ComponentGallery.tsx
-/** Keeps portaled overlays (tooltips, popovers) inside the card so they inherit preview tokens and stay in place. */
-function PortalHere(t0) {
-	const $ = c(7);
-	const { children } = t0;
-	const [container, setContainer] = useState(null);
-	let t1;
-	if ($[0] !== container) {
-		t1 = () => container ?? document.body;
-		$[0] = container;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== children) {
-		t2 = children(setContainer);
-		$[2] = children;
-		$[3] = t2;
-	} else t2 = $[3];
-	let t3;
-	if ($[4] !== t1 || $[5] !== t2) {
-		t3 = /* @__PURE__ */ jsx(UNSAFE_PortalProvider, {
-			getContainer: t1,
-			children: t2
-		});
-		$[4] = t1;
-		$[5] = t2;
-		$[6] = t3;
-	} else t3 = $[6];
-	return t3;
-}
-function ZoomedDemo(t0) {
-	const $ = c(22);
-	const { demo, width, onBack, inspector } = t0;
-	const backRef = useRef(null);
-	let t1;
-	let t2;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = () => backRef.current?.focus();
-		t2 = [];
-		$[0] = t1;
-		$[1] = t2;
-	} else {
-		t1 = $[0];
-		t2 = $[1];
-	}
-	useEffect(t1, t2);
-	let t3;
-	if ($[2] !== onBack) {
-		t3 = (event) => {
-			if (event.key !== "Escape") return;
-			event.stopPropagation();
-			onBack();
-		};
-		$[2] = onBack;
-		$[3] = t3;
-	} else t3 = $[3];
-	let t4;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsx(ArrowLeft, {
-			size: 13,
-			"aria-hidden": "true"
-		});
-		$[4] = t4;
-	} else t4 = $[4];
-	let t5;
-	if ($[5] !== onBack) {
-		t5 = /* @__PURE__ */ jsxs("button", {
-			ref: backRef,
-			type: "button",
-			className: "studio-gallery-back",
-			onClick: onBack,
-			children: [t4, "All components"]
-		});
-		$[5] = onBack;
-		$[6] = t5;
-	} else t5 = $[6];
-	let t6;
-	if ($[7] !== demo.title) {
-		t6 = /* @__PURE__ */ jsx("span", { children: demo.title });
-		$[7] = demo.title;
-		$[8] = t6;
-	} else t6 = $[8];
-	let t7;
-	if ($[9] !== t5 || $[10] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("div", {
-			className: "studio-gallery-zoom-bar",
-			children: [t5, t6]
-		});
-		$[9] = t5;
-		$[10] = t6;
-		$[11] = t7;
-	} else t7 = $[11];
-	let t8;
-	if ($[12] !== demo || $[13] !== width) {
-		t8 = /* @__PURE__ */ jsx(PortalHere, { children: (portalRef) => /* @__PURE__ */ jsx("div", {
-			ref: portalRef,
-			className: "studio-gallery-demo",
-			"data-inspector-name": demo.title,
-			style: {
-				width,
-				maxWidth: "100%"
-			},
-			children: demo.render()
-		}) });
-		$[12] = demo;
-		$[13] = width;
-		$[14] = t8;
-	} else t8 = $[14];
-	let t9;
-	if ($[15] !== inspector || $[16] !== t8) {
-		t9 = /* @__PURE__ */ jsx("div", {
-			className: "studio-gallery-zoom-stage",
-			children: /* @__PURE__ */ jsx(Inspector, {
-				...inspector,
-				children: t8
-			})
-		});
-		$[15] = inspector;
-		$[16] = t8;
-		$[17] = t9;
-	} else t9 = $[17];
-	let t10;
-	if ($[18] !== t3 || $[19] !== t7 || $[20] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("div", {
-			className: "studio-gallery-zoom",
-			onKeyDown: t3,
-			children: [t7, t9]
-		});
-		$[18] = t3;
-		$[19] = t7;
-		$[20] = t9;
-		$[21] = t10;
-	} else t10 = $[21];
-	return t10;
-}
-/** Every Povio UI component in one scrollable list; clicking a card zooms it into the token inspector. */
-function ComponentGallery(t0) {
-	const $ = c(14);
-	const { inspector } = t0;
-	const galleryRef = useRef(null);
-	const [zoomed, setZoomed] = useState(null);
-	const [zoomedWidth, setZoomedWidth] = useState();
-	const open = (id) => {
-		setZoomedWidth(galleryRef.current?.querySelector(`#gallery-card-${id} .studio-gallery-demo`)?.offsetWidth);
-		setZoomed(id);
-	};
-	let t1;
-	if ($[0] !== zoomed) {
-		t1 = demos.find((demo) => demo.id === zoomed);
-		$[0] = zoomed;
-		$[1] = t1;
-	} else t1 = $[1];
-	const zoomedDemo = t1;
-	const lastZoomed = useRef(null);
-	let t2;
-	let t3;
-	if ($[2] !== zoomed) {
-		t2 = () => {
-			if (zoomed) lastZoomed.current = zoomed;
-			else if (lastZoomed.current) galleryRef.current?.querySelector(`#gallery-card-${lastZoomed.current} .studio-gallery-card-hit`)?.focus();
-		};
-		t3 = [zoomed];
-		$[2] = zoomed;
-		$[3] = t2;
-		$[4] = t3;
-	} else {
-		t2 = $[3];
-		t3 = $[4];
-	}
-	useEffect(t2, t3);
-	if (zoomedDemo) {
-		let t4;
-		if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-			t4 = () => setZoomed(null);
-			$[5] = t4;
-		} else t4 = $[5];
-		let t5;
-		if ($[6] !== inspector || $[7] !== zoomedDemo || $[8] !== zoomedWidth) {
-			t5 = /* @__PURE__ */ jsx(ZoomedDemo, {
-				demo: zoomedDemo,
-				width: zoomedWidth,
-				inspector,
-				onBack: t4
-			}, zoomedDemo.id);
-			$[6] = inspector;
-			$[7] = zoomedDemo;
-			$[8] = zoomedWidth;
-			$[9] = t5;
-		} else t5 = $[9];
-		return t5;
-	}
-	const t4 = "studio-gallery";
-	let t5;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx(LayoutPreview, {});
-		$[10] = t5;
-	} else t5 = $[10];
-	const t6 = galleryGroups.map((group) => {
-		const items = demos.filter((demo_0) => demo_0.group === group);
-		if (!items.length) return null;
-		return /* @__PURE__ */ jsxs("section", {
-			className: "studio-gallery-group",
-			"aria-label": group,
-			children: [/* @__PURE__ */ jsx("h3", { children: group }), /* @__PURE__ */ jsx("div", {
-				className: "studio-gallery-grid",
-				children: items.map((demo_1) => /* @__PURE__ */ jsxs("div", {
-					id: `gallery-card-${demo_1.id}`,
-					className: `studio-gallery-card ${demo_1.wide ? "is-wide" : ""}`,
-					children: [
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: "studio-gallery-card-hit",
-							"aria-label": `Inspect ${demo_1.title}`,
-							onClick: () => open(demo_1.id)
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "studio-gallery-card-title",
-							children: demo_1.title
-						}),
-						/* @__PURE__ */ jsx(PortalHere, { children: (portalRef) => /* @__PURE__ */ jsx("div", {
-							ref: portalRef,
-							className: "studio-gallery-demo",
-							"data-inspector-name": demo_1.title,
-							inert: true,
-							children: demo_1.render()
-						}) })
-					]
-				}, demo_1.id))
-			})]
-		}, group);
-	});
-	let t7;
-	if ($[11] !== t5 || $[12] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("div", {
-			ref: galleryRef,
-			className: t4,
-			children: [t5, t6]
-		});
-		$[11] = t5;
-		$[12] = t6;
-		$[13] = t7;
-	} else t7 = $[13];
-	return t7;
-}
-//#endregion
-export { ComponentGallery as default };