@povio/ui 5.0.0-rc.2 → 5.0.0-rc.4

package/dist/config/ui-configurator.js

@@ -0,0 +1,4555 @@
+import { t as createLucideIcon } from "../createLucideIcon-LcezOE4z.js";
+import { 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 ChevronRight } from "../chevron-right-3nKJR5Bb.js";
+import { t as Info } from "../info-iUmX3uDk.js";
+import { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition, u as Minus } from "../CheckboxCheckmark-CpC3wlMs.js";
+import { i as Search, n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "../selectDesktop.cva-CHAMxhfO.js";
+import { t as Upload } from "../upload-CXU83BJ4.js";
+import { t as clsx } from "../clsx-CnD0nOiA.js";
+import { n as StyleMergeUtils, r as cva, t as UIOverrides } from "../uiOverrides.context-BTCH9y5a.js";
+import { c as $7230ffa83bc0c2cf$export$ef03459518577ad4, i as $7230ffa83bc0c2cf$export$9d4c57ee4c6ffdd8, l as $7230ffa83bc0c2cf$export$fabf2dc03a41866e, n as $7230ffa83bc0c2cf$export$29f1550f4b0d4415, r as $7230ffa83bc0c2cf$export$4d86445c2cf5e3, s as $7230ffa83bc0c2cf$export$df3a06d6289f983e, t as $7230ffa83bc0c2cf$export$2881499e37b75b9a } from "../utils-Czcqspm7.js";
+import { c as $542a13ca2fa5b484$export$5b6b19405a83ff9d, d as $53e61d82d8b8611d$export$8b251419efc915eb, l as $542a13ca2fa5b484$export$9b9a0cd73afb7ca4, n as $f2ff30fde7b014be$export$3ddf2d174ce01153, r as $f2ff30fde7b014be$export$d2f961adcb0afbe } from "../Dialog-CKLkS00H.js";
+import { t as $43a3b93638fe5db9$export$75b6ee27786ba447 } from "../Label-B2-B-uFY.js";
+import { n as $7705c033048f6da7$export$353f5b6fc5456de1, t as $7705c033048f6da7$export$24d547caef80ccd1 } from "../Button-D6KlWSFL.js";
+import { t as $2ec61d1d4f780267$export$a8a3e93435678ff9 } from "../Heading-nI1_VOaE.js";
+import { t as $efe09c6d1c304b50$export$9afb8bc826b033ea } from "../Text-D2MPZ3sY.js";
+import { n as $1f3c3b1a70cec653$export$ff05c3ac10437e03, t as $cdaed739b1139372$export$c24727297075ec6a } from "../Form-DlQcyN1f.js";
+import { t as Checkbox } from "../Checkbox-CV1ILXXO.js";
+import { a as $928221da08ecbc62$export$dca12b0bb56e4fc, i as $928221da08ecbc62$export$a11e76429ed99b4, n as $928221da08ecbc62$export$7c5906fe4f1f2af2, r as $928221da08ecbc62$export$7ff8f37d2d81a48d, t as $928221da08ecbc62$export$41f133550aa26f48 } from "../ListBox-CL8Ar4Q_.js";
+import { n as $8b8d26808cb8cb53$export$8948f78d83984c69, t as $8b8d26808cb8cb53$export$2b77a92f1a5ad772 } from "../Modal-w60dVQcb.js";
+import { i as radioDefinition, n as radioContentRowDefinition, r as radioContentWrapperDefinition, t as RadioGroup } from "../RadioGroup-DOw3PRoX.js";
+import { n as switchDefinition, t as Switch } from "../Switch-CqnGEdeD.js";
+import { n as textAreaWrapperDefinition, t as TextArea } from "../TextArea-D8WkKsGn.js";
+import { a as breadcrumbsDefinition, i as breadcrumbSegmentDefinition, n as breadcrumbIconDefinition, r as breadcrumbItemDefinition, t as breadcrumbChevronDefinition } from "../breadcrumbs.cva-7zzdDhVR.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, r as tooltipPointerVerticalDefinition, t as tooltipDefinition } from "../tooltip.cva-BIzlOXHH.js";
+import { t as typographyDefinition } from "../typography.cva-iD15k56p.js";
+import { a as buttonSizeDefinition, i as buttonIconSizeDefinition, n as buttonContentDefinition, r as buttonDefinition, t as Button } from "../Button-C5rv4Cr2.js";
+import { r as badgeButtonDefinition } from "../badgeButton.cva-CvN4CTx5.js";
+import { BadgeButton } from "../components/badge-button.js";
+import { n as formFieldErrorDefinition } from "../FormFieldError-DeOHHLo2.js";
+import { a as formFieldHeaderDefinition, i as labelDefinition, n as formFieldHelperDefinition } from "../FormField-B99dLt8o.js";
+import { n as tagDefinition, t as Tag } from "../Tag-DPg5sL1Z.js";
+import { a as inputSizeDefinition, i as inputSideDefinition, n as inputClearClassDefinition, r as inputContentWrapperDefinition, t as inputBaseDefinition } from "../input.cva-DJA8ovm_.js";
+import { t as popoverDefinition } from "../popover.cva-Bhud1wnp.js";
+import { Input } from "../components/input.js";
+import { t as datePickerInputContentRowDefinition } from "../datePickerInput.cva-Cd7UUN61.js";
+import { a as progressTrackWrapperDefinition, i as progressTrackDefinition, n as progressDefinition, o as progressValueDefinition, r as progressFillDefinition, t as Progress } from "../Progress-B3mY9rIP.js";
+import { t as fileUploadDropZoneDefinition } from "../fileUpload.cva-ujmStxB1.js";
+import { n as toggleGroupItemDefinition, t as toggleGroupDefinition } from "../toggleGroup.cva-MbpaEBg1.js";
+import { a as accordionHeadingTitleDefinition, c as accordionPanelContentDefinition, i as accordionHeadingSubtitleDefinition, l as accordionPanelDefinition, n as accordionDefinition, o as accordionIconDefinition, r as accordionHeadingDefinition, s as accordionItemDefinition, t as accordionChevronDefinition, u as accordionTriggerDefinition } from "../accordion.cva-CL1bVscW.js";
+import { a as stepperSeparatorDefinition, i as stepperNumberDefinition, n as stepperIconDefinition, o as stepperSubtextDefinition, r as stepperItemDefinition, s as stepperTitleDefinition, t as stepperDefinition } from "../stepper.cva-CZ0Kj-s7.js";
+import { i as dialogOverlayDefinition, n as dialogMainDefinition, t as dialogContentDefinition } from "../dialog.cva-COhDZaVl.js";
+import { i as alertDefinition, n as statusIconDefinition, r as statusSeparatorDefinition, t as Alert } from "../Alert-CnvEb1D_.js";
+import { a as toastDefinition, i as toastContainerDefinition } from "../toast.cva-C_L_RffH.js";
+import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, s as theadDefinition, t as tableCellTextDefinition } from "../table.cva-DlMT-zLD.js";
+import { t as linkDefinition } from "../link.cva-DMTHZiJG.js";
+import { t as tooltipWrapperTriggerDefinition } from "../tooltipWrapper.cva-BBQ4ic3D.js";
+import { C as validToken, S as toRgb, _ as parseThemeCss, a as generateShades, b as spacingLevels, c as isFontSizeToken, d as layoutKindFor, f as layoutKinds, g as listedLayoutToken, h as linkedLayoutTokens, i as exportCss, l as isRgb, m as layoutScales, n as controlHeightCounterpart, o as groupFor, p as layoutLevelFor, r as emptyTheme, s as groups, t as baseColorNames, u as labelFor, v as previewTokens, x as toHex, y as runtimeCss } from "../theme-model-DtYPxNvH.js";
+import $ahdqC$react, { Suspense, createContext, lazy, use, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "react-aria/mergeProps";
+import { CollectionBuilder } from "react-aria/CollectionBuilder";
+import { filterDOMProps } from "react-aria/filterDOMProps";
+import { useFocusRing } from "react-aria/useFocusRing";
+import { createHideableComponent } from "react-aria/private/collections/Hidden";
+import "react-aria/useLocalizedStringFormatter";
+import "react-aria/useListFormatter";
+import { HiddenSelect, useSelect } from "react-aria/useSelect";
+import { useSelectState } from "react-stately/useSelectState";
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/arrow-down-to-line.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: "arrow-down-to-line",
+	size: 24,
+	node: [
+		["path", {
+			d: "M12 17V3",
+			key: "1cwfxf"
+		}],
+		["path", {
+			d: "m6 11 6 6 6-6",
+			key: "12ii2o"
+		}],
+		["path", {
+			d: "M19 21H5",
+			key: "150jfl"
+		}]
+	]
+};
+__iconData$5.node;
+const ArrowDownToLine = createLucideIcon(__iconData$5);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.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: "chevrons-up-down",
+	size: 24,
+	node: [["path", {
+		d: "m7 15 5 5 5-5",
+		key: "1hf1tw"
+	}], ["path", {
+		d: "m7 9 5-5 5 5",
+		key: "sgt6xg"
+	}]]
+};
+__iconData$4.node;
+const ChevronsUpDown = createLucideIcon(__iconData$4);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/moon.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: "moon",
+	size: 24,
+	node: [["path", {
+		d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401",
+		key: "kfwtm"
+	}]]
+};
+__iconData$3.node;
+const Moon = createLucideIcon(__iconData$3);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/plus.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: "plus",
+	size: 24,
+	node: [["path", {
+		d: "M5 12h14",
+		key: "1ays0h"
+	}], ["path", {
+		d: "M12 5v14",
+		key: "s699le"
+	}]]
+};
+__iconData$2.node;
+const Plus = createLucideIcon(__iconData$2);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/rotate-ccw.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: "rotate-ccw",
+	size: 24,
+	node: [["path", {
+		d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
+		key: "1357e3"
+	}], ["path", {
+		d: "M3 3v5h5",
+		key: "1xhq8a"
+	}]]
+};
+__iconData$1.node;
+const RotateCcw = createLucideIcon(__iconData$1);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/sun.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: "sun",
+	size: 24,
+	node: [
+		["circle", {
+			cx: "12",
+			cy: "12",
+			r: "4",
+			key: "4exip2"
+		}],
+		["path", {
+			d: "M12 2v2",
+			key: "tus03m"
+		}],
+		["path", {
+			d: "M12 20v2",
+			key: "1lh1kg"
+		}],
+		["path", {
+			d: "m4.93 4.93 1.41 1.41",
+			key: "149t6j"
+		}],
+		["path", {
+			d: "m17.66 17.66 1.41 1.41",
+			key: "ptbguv"
+		}],
+		["path", {
+			d: "M2 12h2",
+			key: "1t8f8n"
+		}],
+		["path", {
+			d: "M20 12h2",
+			key: "1q8mjw"
+		}],
+		["path", {
+			d: "m6.34 17.66-1.41 1.41",
+			key: "1m8zz5"
+		}],
+		["path", {
+			d: "m19.07 4.93-1.41 1.41",
+			key: "1shlcs"
+		}]
+	]
+};
+__iconData.node;
+const Sun = createLucideIcon(__iconData);
+//#endregion
+//#region ../../node_modules/.bun/react-aria-components@1.21.1+67f6792bdf102c28/node_modules/react-aria-components/dist/private/Select.mjs
+const $c8bb816105474884$export$7540cee5be7dc19b = /*#__PURE__*/ createContext(null);
+const $c8bb816105474884$export$ef445b55be0601bd = /*#__PURE__*/ createContext(null);
+const $c8bb816105474884$export$ef9b1a59e592288f = /*#__PURE__*/ createHideableComponent(function Select(props, ref) {
+	[props, ref] = $7230ffa83bc0c2cf$export$29f1550f4b0d4415(props, ref, $c8bb816105474884$export$7540cee5be7dc19b);
+	let { children, isDisabled = false, isInvalid = false, isRequired = false } = props;
+	let content = useMemo(() => typeof children === "function" ? children({
+		isOpen: false,
+		isDisabled,
+		isInvalid,
+		isRequired,
+		isFocused: false,
+		isFocusVisible: false,
+		defaultChildren: null
+	}) : children, [
+		children,
+		isDisabled,
+		isInvalid,
+		isRequired
+	]);
+	return /*#__PURE__*/ $ahdqC$react.createElement(CollectionBuilder, { content }, (collection) => /*#__PURE__*/ $ahdqC$react.createElement($c8bb816105474884$var$SelectInner, {
+		props,
+		collection,
+		selectRef: ref
+	}));
+});
+const $c8bb816105474884$var$CLEAR_CONTEXTS = [
+	$43a3b93638fe5db9$export$75b6ee27786ba447,
+	$7705c033048f6da7$export$24d547caef80ccd1,
+	$efe09c6d1c304b50$export$9afb8bc826b033ea
+];
+function $c8bb816105474884$var$SelectInner({ props, selectRef: ref, collection }) {
+	let { validationBehavior: formValidationBehavior } = $7230ffa83bc0c2cf$export$fabf2dc03a41866e($cdaed739b1139372$export$c24727297075ec6a) || {};
+	let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "native";
+	let state = useSelectState({
+		...props,
+		collection,
+		children: void 0,
+		validationBehavior
+	});
+	let { isFocusVisible, focusProps } = useFocusRing({ within: true });
+	let buttonRef = useRef(null);
+	let [labelRef, label] = $7230ffa83bc0c2cf$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
+	let { labelProps, triggerProps, valueProps, menuProps, descriptionProps, errorMessageProps, hiddenSelectProps, ...validation } = useSelect({
+		...$7230ffa83bc0c2cf$export$ef03459518577ad4(props),
+		label,
+		validationBehavior
+	}, state, buttonRef);
+	let renderPropsState = useMemo(() => ({
+		isOpen: state.isOpen,
+		isFocused: state.isFocused,
+		isFocusVisible,
+		isDisabled: props.isDisabled || false,
+		isInvalid: validation.isInvalid || false,
+		isRequired: props.isRequired || false
+	}), [
+		state.isOpen,
+		state.isFocused,
+		isFocusVisible,
+		props.isDisabled,
+		validation.isInvalid,
+		props.isRequired
+	]);
+	let renderProps = $7230ffa83bc0c2cf$export$4d86445c2cf5e3({
+		...props,
+		values: renderPropsState,
+		defaultClassName: "react-aria-Select"
+	});
+	let DOMProps = filterDOMProps(props, { global: true });
+	delete DOMProps.id;
+	let scrollRef = useRef(null);
+	return /*#__PURE__*/ $ahdqC$react.createElement($7230ffa83bc0c2cf$export$2881499e37b75b9a, { values: [
+		[$c8bb816105474884$export$7540cee5be7dc19b, props],
+		[$c8bb816105474884$export$ef445b55be0601bd, state],
+		[$c8bb816105474884$export$f8f745c04421623f, valueProps],
+		[$43a3b93638fe5db9$export$75b6ee27786ba447, {
+			...labelProps,
+			ref: labelRef,
+			elementType: "span"
+		}],
+		[$7705c033048f6da7$export$24d547caef80ccd1, {
+			...triggerProps,
+			ref: buttonRef,
+			isPressed: state.isOpen,
+			autoFocus: props.autoFocus
+		}],
+		[$f2ff30fde7b014be$export$d2f961adcb0afbe, state],
+		[$542a13ca2fa5b484$export$9b9a0cd73afb7ca4, {
+			trigger: "Select",
+			triggerRef: buttonRef,
+			scrollRef,
+			placement: "bottom start",
+			"aria-labelledby": menuProps["aria-labelledby"],
+			clearContexts: $c8bb816105474884$var$CLEAR_CONTEXTS
+		}],
+		[$928221da08ecbc62$export$7ff8f37d2d81a48d, {
+			...menuProps,
+			ref: scrollRef
+		}],
+		[$928221da08ecbc62$export$7c5906fe4f1f2af2, state],
+		[$efe09c6d1c304b50$export$9afb8bc826b033ea, { slots: {
+			description: descriptionProps,
+			errorMessage: errorMessageProps
+		} }],
+		[$1f3c3b1a70cec653$export$ff05c3ac10437e03, validation]
+	] }, /*#__PURE__*/ $ahdqC$react.createElement($7230ffa83bc0c2cf$export$df3a06d6289f983e.div, {
+		...mergeProps(DOMProps, renderProps, focusProps),
+		ref,
+		slot: props.slot || void 0,
+		"data-focused": state.isFocused || void 0,
+		"data-focus-visible": isFocusVisible || void 0,
+		"data-open": state.isOpen || void 0,
+		"data-disabled": props.isDisabled || void 0,
+		"data-invalid": validation.isInvalid || void 0,
+		"data-required": props.isRequired || void 0
+	}, renderProps.children, /*#__PURE__*/ $ahdqC$react.createElement(HiddenSelect, {
+		...hiddenSelectProps,
+		autoComplete: props.autoComplete
+	})));
+}
+const $c8bb816105474884$export$f8f745c04421623f = /*#__PURE__*/ createContext(null);
+//#endregion
+//#region src/configurator/cva-definitions.ts
+const cvaDefinitions = {
+	"datePickerInput.contentRowCva": datePickerInputContentRowDefinition,
+	"select.tagsContentWrapperCva": selectInputTagsContentWrapperDefinition,
+	"tooltip.pointerHorizontalCva": tooltipPointerHorizontalDefinition,
+	"accordion.chevronCva": accordionChevronDefinition,
+	"accordion.cva": accordionDefinition,
+	"accordion.headingCva": accordionHeadingDefinition,
+	"accordion.headingSubtitleCva": accordionHeadingSubtitleDefinition,
+	"accordion.headingTitleCva": accordionHeadingTitleDefinition,
+	"accordion.iconCva": accordionIconDefinition,
+	"accordion.itemCva": accordionItemDefinition,
+	"accordion.panelContentCva": accordionPanelContentDefinition,
+	"accordion.panelCva": accordionPanelDefinition,
+	"accordion.triggerCva": accordionTriggerDefinition,
+	"alert.cva": alertDefinition,
+	"breadcrumbs.chevronCva": breadcrumbChevronDefinition,
+	"breadcrumbs.cva": breadcrumbsDefinition,
+	"breadcrumbs.iconCva": breadcrumbIconDefinition,
+	"breadcrumbs.itemCva": breadcrumbItemDefinition,
+	"breadcrumbs.segmentCva": breadcrumbSegmentDefinition,
+	"button.contentCva": buttonContentDefinition,
+	"button.cva": buttonDefinition,
+	"button.iconSize": buttonIconSizeDefinition,
+	"button.sizeCva": buttonSizeDefinition,
+	"checkbox.contentRowCva": checkboxContentRowDefinition,
+	"checkbox.contentWrapperCva": checkboxContentWrapperDefinition,
+	"checkbox.cva": checkboxDefinition,
+	"checkbox.groupLabelCva": checkboxGroupLabelDefinition,
+	"checkbox.iconCva": checkboxIconDefinition,
+	"dialog.contentCva": dialogContentDefinition,
+	"dialog.mainCva": dialogMainDefinition,
+	"dialog.overlayCva": dialogOverlayDefinition,
+	"dropdownMenu.cva": dropdownMenuDefinition,
+	"dropdownMenu.itemCva": menuItemDefinition,
+	"dropdownMenu.popoverCva": menuPopoverDefinition,
+	"dropdownMenu.popoverWrapperCva": menuPopoverWrapperDefinition,
+	"fileUpload.dropZoneCva": fileUploadDropZoneDefinition,
+	"formField.errorLabelCva": formFieldErrorDefinition,
+	"formField.headerCva": formFieldHeaderDefinition,
+	"formField.helperLabelCva": formFieldHelperDefinition,
+	"input.baseCva": inputBaseDefinition,
+	"input.clearClassCva": inputClearClassDefinition,
+	"input.contentWrapperCva": inputContentWrapperDefinition,
+	"input.sideCva": inputSideDefinition,
+	"input.sizeCva": inputSizeDefinition,
+	"label.cva": labelDefinition,
+	"link.cva": linkDefinition,
+	"badgeButton.cva": badgeButtonDefinition,
+	"popover.cva": popoverDefinition,
+	"progress.cva": progressDefinition,
+	"progress.fillCva": progressFillDefinition,
+	"progress.trackCva": progressTrackDefinition,
+	"progress.trackWrapperCva": progressTrackWrapperDefinition,
+	"progress.valueCva": progressValueDefinition,
+	"radio.contentRowCva": radioContentRowDefinition,
+	"radio.contentWrapperCva": radioContentWrapperDefinition,
+	"radio.cva": radioDefinition,
+	"select.listBoxItemCva": selectListBoxItemDefinition,
+	"select.popoverCva": selectPopoverDefinition,
+	"status.iconCva": statusIconDefinition,
+	"status.separatorCva": statusSeparatorDefinition,
+	"stepper.cva": stepperDefinition,
+	"stepper.iconCva": stepperIconDefinition,
+	"stepper.itemCva": stepperItemDefinition,
+	"stepper.numberCva": stepperNumberDefinition,
+	"stepper.separatorCva": stepperSeparatorDefinition,
+	"stepper.subtextCva": stepperSubtextDefinition,
+	"stepper.titleCva": stepperTitleDefinition,
+	"switch.cva": switchDefinition,
+	"table.cellTextCva": tableCellTextDefinition,
+	"table.dataCva": tableDataDefinition,
+	"table.headDataCva": tableHeadDataDefinition,
+	"table.headRowCva": tableHeadRowDefinition,
+	"table.headerTextCva": tableHeaderTextDefinition,
+	"table.rowCva": tableRowDefinition,
+	"table.theadCva": theadDefinition,
+	"tag.cva": tagDefinition,
+	"textArea.wrapperCva": textAreaWrapperDefinition,
+	"toast.containerCva": toastContainerDefinition,
+	"toast.cva": toastDefinition,
+	"toggleGroup.cva": toggleGroupDefinition,
+	"toggleGroup.itemCva": toggleGroupItemDefinition,
+	"tooltip.cva": tooltipDefinition,
+	"tooltip.pointerVerticalCva": tooltipPointerVerticalDefinition,
+	"tooltip.textCva": tooltipTextDefinition,
+	"tooltipWrapper.triggerCva": tooltipWrapperTriggerDefinition,
+	"typography.cva": typographyDefinition
+};
+//#endregion
+//#region src/configurator/cva-model.ts
+function resolveCvaDefinition(slot, inherited) {
+	const [component, part] = slot.split(".");
+	const override = (inherited?.[component])?.[part];
+	if (typeof override === "function") return null;
+	const fallback = cvaDefinitions[slot];
+	const definition = override && typeof override === "object" && "mode" in override ? StyleMergeUtils.mergeCvaDefinition(fallback, override) : fallback;
+	const config = definition.config;
+	return {
+		base: [...definition.base],
+		config: {
+			variants: Object.fromEntries(Object.entries(config?.variants ?? {}).map(([name, options]) => [name, Object.fromEntries(Object.entries(options).map(([value, classes]) => [value, clsx(classes)]))])),
+			defaultVariants: config?.defaultVariants ?? {},
+			compoundVariants: (config?.compoundVariants ?? []).map(({ class: classes, className, ...selectors }) => Object.assign(selectors, { className: clsx(classes, className) }))
+		}
+	};
+}
+function applyCvaEdits(inherited, edits = {}) {
+	const result = { ...inherited };
+	for (const [slot, definition] of Object.entries(edits)) {
+		const [component, part] = slot.split(".");
+		const key = component;
+		result[key] = {
+			...result[key],
+			[part]: {
+				mode: "overrideCva",
+				...definition
+			}
+		};
+	}
+	return result;
+}
+function exportCvaEdits(edits = {}) {
+	const overrides = applyCvaEdits(void 0, edits);
+	const components = Object.keys(overrides).map((name) => `    ${name}: { ...existing.${name}, ...edited.${name} },`).join("\n");
+	return `import { UIOverrides } from "@povio/ui/ui-overrides";\n\nconst edited = ${JSON.stringify(overrides, null, 2)} satisfies UIOverrides.Config;\n\nexport function withUIOverrides(existing: UIOverrides.Config = {}): UIOverrides.Config {\n  return {\n    ...existing,\n${components}\n  };\n}\n\n// <UIOverrides.Provider config={withUIOverrides(appOverrides)}>{children}</UIOverrides.Provider>\n`;
+}
+//#endregion
+//#region src/configurator/configuration.context.tsx
+const emptyConfiguration = () => ({
+	theme: emptyTheme(),
+	config: {}
+});
+const ConfigurationContext = createContext(null);
+function UIConfigurationProvider(t0) {
+	const $ = c(34);
+	const { defaults, initialValue, onApply, children } = t0;
+	const inheritedOverrides = UIOverrides.useConfig();
+	const [applied, setApplied] = useState(initialValue ?? emptyConfiguration);
+	const [draft, setDraft] = useState(applied);
+	const [isOpen, setOpen] = useState(false);
+	const [revision, setRevision] = useState(0);
+	const active = isOpen ? draft : applied;
+	let t1;
+	if ($[0] !== applied) {
+		t1 = () => {
+			setDraft(structuredClone(applied));
+			setRevision(_temp$6);
+			setOpen(true);
+		};
+		$[0] = applied;
+		$[1] = t1;
+	} else t1 = $[1];
+	const open = t1;
+	let t2;
+	if ($[2] !== applied) {
+		t2 = () => {
+			setDraft(structuredClone(applied));
+			setOpen(false);
+		};
+		$[2] = applied;
+		$[3] = t2;
+	} else t2 = $[3];
+	const cancel = t2;
+	let t3;
+	if ($[4] !== draft || $[5] !== onApply) {
+		t3 = () => {
+			onApply?.(structuredClone(draft));
+			setApplied(structuredClone(draft));
+			setOpen(false);
+		};
+		$[4] = draft;
+		$[5] = onApply;
+		$[6] = t3;
+	} else t3 = $[6];
+	const apply = t3;
+	let t4;
+	if ($[7] !== active.overrides || $[8] !== inheritedOverrides) {
+		t4 = applyCvaEdits(inheritedOverrides, active.overrides);
+		$[7] = active.overrides;
+		$[8] = inheritedOverrides;
+		$[9] = t4;
+	} else t4 = $[9];
+	const overrides = t4;
+	let t5;
+	if ($[10] !== apply || $[11] !== cancel || $[12] !== defaults || $[13] !== draft || $[14] !== inheritedOverrides || $[15] !== isOpen || $[16] !== open || $[17] !== revision) {
+		t5 = {
+			defaults,
+			inheritedOverrides,
+			draft,
+			setDraft,
+			isOpen,
+			open,
+			cancel,
+			apply,
+			revision
+		};
+		$[10] = apply;
+		$[11] = cancel;
+		$[12] = defaults;
+		$[13] = draft;
+		$[14] = inheritedOverrides;
+		$[15] = isOpen;
+		$[16] = open;
+		$[17] = revision;
+		$[18] = t5;
+	} else t5 = $[18];
+	const contextValue = t5;
+	let t6;
+	if ($[19] !== active.theme || $[20] !== defaults) {
+		t6 = runtimeCss(defaults, active.theme);
+		$[19] = active.theme;
+		$[20] = defaults;
+		$[21] = t6;
+	} else t6 = $[21];
+	let t7;
+	if ($[22] !== t6) {
+		t7 = /* @__PURE__ */ jsx("style", {
+			"data-povio-ui-configuration": true,
+			children: t6
+		});
+		$[22] = t6;
+		$[23] = t7;
+	} else t7 = $[23];
+	let t8;
+	if ($[24] !== active.config || $[25] !== children) {
+		t8 = /* @__PURE__ */ jsx(UIConfig.Provider, {
+			config: active.config,
+			children
+		});
+		$[24] = active.config;
+		$[25] = children;
+		$[26] = t8;
+	} else t8 = $[26];
+	let t9;
+	if ($[27] !== overrides || $[28] !== t8) {
+		t9 = /* @__PURE__ */ jsx(UIOverrides.Provider, {
+			config: overrides,
+			children: t8
+		});
+		$[27] = overrides;
+		$[28] = t8;
+		$[29] = t9;
+	} else t9 = $[29];
+	let t10;
+	if ($[30] !== contextValue || $[31] !== t7 || $[32] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(ConfigurationContext.Provider, {
+			value: contextValue,
+			children: [t7, t9]
+		});
+		$[30] = contextValue;
+		$[31] = t7;
+		$[32] = t9;
+		$[33] = t10;
+	} else t10 = $[33];
+	return t10;
+}
+function _temp$6(value) {
+	return value + 1;
+}
+function useUIConfiguration() {
+	const context = use(ConfigurationContext);
+	if (!context) throw new Error("useUIConfiguration requires UIConfigurationProvider");
+	return context;
+}
+//#endregion
+//#region src/configurator/ContextualPreview.tsx
+function CvaPreview(t0) {
+	const $ = c(84);
+	const { slot, variants, setVariants } = t0;
+	const overrides = UIOverrides.useConfig();
+	const [disabled, setDisabled] = useState(false);
+	const [selected, setSelected] = useState(false);
+	const [text, setText] = useState("Example value");
+	let component;
+	let definition;
+	let sample;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== disabled || $[1] !== overrides || $[2] !== selected || $[3] !== slot || $[4] !== text || $[5] !== variants) {
+		definition = resolveCvaDefinition(slot, overrides);
+		component = slot.split(".")[0];
+		const props = {
+			...definition?.config.defaultVariants,
+			...Object.fromEntries(Object.entries(variants).filter(_temp$5).map(_temp2$2))
+		};
+		const classes = (key, t4) => {
+			const extra = t4 === void 0 ? {} : t4;
+			const [group, part] = key.split(".");
+			const inherited = (overrides?.[group])?.[part];
+			if (typeof inherited === "function") return inherited({
+				...props,
+				...extra
+			});
+			const resolved = resolveCvaDefinition(key, overrides);
+			return cva(resolved.base, resolved.config)({
+				...props,
+				...extra
+			});
+		};
+		const exact = classes(slot);
+		bb0: switch (component) {
+			case "button":
+				sample = /* @__PURE__ */ jsx(Button, {
+					...props,
+					isDisabled: disabled,
+					icon: Plus,
+					children: "Example button"
+				});
+				break bb0;
+			case "badgeButton":
+				sample = /* @__PURE__ */ jsx(BadgeButton, {
+					...props,
+					isDisabled: disabled,
+					icon: Plus,
+					children: "Example badge button"
+				});
+				break bb0;
+			case "input":
+			case "label":
+			case "formField":
+			case "tooltipWrapper":
+				sample = /* @__PURE__ */ jsx(Input, {
+					...props,
+					label: "Example input",
+					value: text,
+					onChange: setText,
+					isDisabled: disabled,
+					isClearable: true,
+					leadingIcon: Info,
+					tooltipText: "Helpful field information",
+					...component === "tooltipWrapper" ? { as: "inline" } : {},
+					helperText: "Helpful supporting text",
+					error: slot === "formField.errorLabelCva" ? "This field needs attention." : void 0
+				});
+				break bb0;
+			case "checkbox":
+				sample = /* @__PURE__ */ jsxs("div", {
+					className: classes("checkbox.contentWrapperCva"),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: classes("checkbox.groupLabelCva"),
+						children: "Example group"
+					}), /* @__PURE__ */ jsx("div", {
+						className: classes("checkbox.contentRowCva"),
+						children: /* @__PURE__ */ jsx(Checkbox, {
+							...props,
+							isDisabled: disabled,
+							isSelected: selected,
+							onChange: setSelected,
+							children: "Example checkbox"
+						})
+					})]
+				});
+				break bb0;
+			case "switch":
+				sample = /* @__PURE__ */ jsx(Switch, {
+					...props,
+					isDisabled: disabled,
+					isSelected: selected,
+					onChange: setSelected,
+					children: "Example switch"
+				});
+				break bb0;
+			case "tag":
+				sample = /* @__PURE__ */ jsx(Tag, {
+					...props,
+					isDisabled: disabled,
+					children: "Example tag"
+				});
+				break bb0;
+			case "alert":
+			case "status": {
+				let t5;
+				if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+					t5 = /* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						children: "View"
+					});
+					$[12] = t5;
+				} else t5 = $[12];
+				sample = /* @__PURE__ */ jsx(Alert, {
+					...props,
+					text: "Your changes have been saved.",
+					icon: Info,
+					hasSeparator: true,
+					rightContent: t5
+				});
+				break bb0;
+			}
+			case "progress":
+				sample = /* @__PURE__ */ jsx(Progress, {
+					...props,
+					progress: 65
+				});
+				break bb0;
+			case "typography": {
+				let t5;
+				if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+					t5 = /* @__PURE__ */ jsx("br", {});
+					$[13] = t5;
+				} else t5 = $[13];
+				sample = /* @__PURE__ */ jsxs("div", {
+					className: exact,
+					children: [
+						"The quick brown fox jumps over the lazy dog.",
+						t5,
+						"Aa Bb Cc · 0123456789"
+					]
+				});
+				break bb0;
+			}
+			case "link":
+				sample = /* @__PURE__ */ jsx("a", {
+					className: exact,
+					href: "#preview",
+					onClick: _temp3$2,
+					children: "Example link"
+				});
+				break bb0;
+			case "table": {
+				let t5;
+				if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+					t5 = { width: "100%" };
+					$[14] = t5;
+				} else t5 = $[14];
+				sample = /* @__PURE__ */ jsxs("table", {
+					style: t5,
+					children: [/* @__PURE__ */ jsx("thead", {
+						className: classes("table.theadCva"),
+						children: /* @__PURE__ */ jsxs("tr", {
+							className: classes("table.headRowCva"),
+							children: [/* @__PURE__ */ jsx("th", {
+								className: classes("table.headDataCva"),
+								children: /* @__PURE__ */ jsx("span", {
+									className: classes("table.headerTextCva"),
+									children: "Workspace"
+								})
+							}), /* @__PURE__ */ jsx("th", {
+								className: classes("table.headDataCva"),
+								children: "Status"
+							})]
+						})
+					}), /* @__PURE__ */ jsx("tbody", { children: ["Design system", "Website"].map((name_0) => /* @__PURE__ */ jsxs("tr", {
+						className: classes("table.rowCva"),
+						"data-selected": selected || void 0,
+						children: [/* @__PURE__ */ jsx("td", {
+							className: classes("table.dataCva"),
+							children: /* @__PURE__ */ jsx("span", {
+								className: classes("table.cellTextCva"),
+								children: name_0
+							})
+						}), /* @__PURE__ */ jsx("td", {
+							className: classes("table.dataCva"),
+							children: "Active"
+						})]
+					}, name_0)) })]
+				});
+				break bb0;
+			}
+			case "tooltip": {
+				let t5;
+				if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+					t5 = /* @__PURE__ */ jsx("path", { d: "M0 0 L6 6 L12 0 Z" });
+					$[15] = t5;
+				} else t5 = $[15];
+				sample = /* @__PURE__ */ jsxs("div", {
+					className: classes("tooltip.cva"),
+					children: [/* @__PURE__ */ jsx("div", {
+						className: classes("tooltip.textCva"),
+						children: "Helpful tooltip text"
+					}), /* @__PURE__ */ jsx("svg", {
+						width: "12",
+						height: "6",
+						className: classes(slot === "tooltip.pointerHorizontalCva" ? slot : "tooltip.pointerVerticalCva"),
+						children: t5
+					})]
+				});
+				break bb0;
+			}
+			case "textArea": {
+				let t5;
+				if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+					t5 = (event_0) => setText(event_0.target.value);
+					$[16] = t5;
+				} else t5 = $[16];
+				let t6;
+				if ($[17] !== disabled || $[18] !== text) {
+					t6 = /* @__PURE__ */ jsx("textarea", {
+						"aria-label": "Example text area",
+						value: text,
+						onChange: t5,
+						disabled
+					});
+					$[17] = disabled;
+					$[18] = text;
+					$[19] = t6;
+				} else t6 = $[19];
+				sample = /* @__PURE__ */ jsx("div", {
+					className: exact,
+					children: t6
+				});
+				break bb0;
+			}
+			case "radio": {
+				let t5;
+				if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+					t5 = [{
+						label: "First option",
+						value: "first"
+					}, {
+						label: "Second option",
+						value: "second"
+					}];
+					$[20] = t5;
+				} else t5 = $[20];
+				let t6;
+				if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+					t6 = (value_1) => setSelected(value_1 === "second");
+					$[21] = t6;
+				} else t6 = $[21];
+				sample = /* @__PURE__ */ jsx(RadioGroup, {
+					...props,
+					label: "Choose an option",
+					options: t5,
+					value: selected ? "second" : "first",
+					onChange: t6,
+					isDisabled: disabled
+				});
+				break bb0;
+			}
+			case "accordion": {
+				let t5;
+				if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+					t5 = { width: "100%" };
+					$[22] = t5;
+				} else t5 = $[22];
+				let t6;
+				if ($[23] !== selected) {
+					t6 = () => setSelected(!selected);
+					$[23] = selected;
+					$[24] = t6;
+				} else t6 = $[24];
+				sample = /* @__PURE__ */ jsxs("div", {
+					style: t5,
+					className: `${classes("accordion.cva")} ${classes("accordion.itemCva")}`,
+					children: [/* @__PURE__ */ jsxs("button", {
+						className: classes("accordion.triggerCva"),
+						onClick: t6,
+						"aria-expanded": selected,
+						disabled,
+						children: [
+							/* @__PURE__ */ jsx(Info, { className: classes("accordion.iconCva") }),
+							/* @__PURE__ */ jsxs("div", {
+								className: classes("accordion.headingCva"),
+								children: [/* @__PURE__ */ jsx("div", {
+									className: classes("accordion.headingTitleCva"),
+									children: "Account settings"
+								}), /* @__PURE__ */ jsx("div", {
+									className: classes("accordion.headingSubtitleCva"),
+									children: "Manage your preferences"
+								})]
+							}),
+							/* @__PURE__ */ jsx(Check, { className: classes("accordion.chevronCva") })
+						]
+					}), /* @__PURE__ */ jsx("div", {
+						className: classes("accordion.panelCva"),
+						children: /* @__PURE__ */ jsx("div", {
+							className: classes("accordion.panelContentCva"),
+							children: "Update your account preferences here."
+						})
+					})]
+				});
+				break bb0;
+			}
+			case "breadcrumbs":
+				sample = /* @__PURE__ */ jsxs("nav", {
+					"aria-label": "Preview breadcrumbs",
+					className: classes("breadcrumbs.cva"),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: classes("breadcrumbs.itemCva"),
+						children: [
+							/* @__PURE__ */ jsx(Info, { className: classes("breadcrumbs.iconCva") }),
+							/* @__PURE__ */ jsx("span", {
+								className: classes("breadcrumbs.segmentCva"),
+								children: "Workspace"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: classes("breadcrumbs.chevronCva"),
+								children: "›"
+							})
+						]
+					}), /* @__PURE__ */ jsx("div", {
+						className: classes("breadcrumbs.itemCva"),
+						children: /* @__PURE__ */ jsx("span", {
+							className: classes("breadcrumbs.segmentCva"),
+							children: "Settings"
+						})
+					})]
+				});
+				break bb0;
+			case "stepper":
+				sample = /* @__PURE__ */ jsx("div", {
+					className: classes("stepper.cva"),
+					children: ["Details", "Review"].map((label_2, index) => /* @__PURE__ */ jsxs("div", {
+						className: classes("stepper.itemCva"),
+						children: [
+							/* @__PURE__ */ jsx(Info, { className: classes("stepper.iconCva") }),
+							/* @__PURE__ */ jsx("span", {
+								className: classes("stepper.numberCva"),
+								children: index + 1
+							}),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+								className: classes("stepper.titleCva"),
+								children: label_2
+							}), /* @__PURE__ */ jsx("div", {
+								className: classes("stepper.subtextCva"),
+								children: "Step description"
+							})] }),
+							/* @__PURE__ */ jsx("div", { className: classes("stepper.separatorCva") })
+						]
+					}, label_2))
+				});
+				break bb0;
+			case "toggleGroup":
+				sample = /* @__PURE__ */ jsx("div", {
+					className: classes("toggleGroup.cva"),
+					children: [
+						"Day",
+						"Week",
+						"Month"
+					].map((label_1) => /* @__PURE__ */ jsx("button", {
+						className: classes("toggleGroup.itemCva"),
+						"data-selected": text === label_1 || void 0,
+						onClick: () => setText(label_1),
+						disabled,
+						children: label_1
+					}, label_1))
+				});
+				break bb0;
+			case "select":
+				sample = slot === "select.tagsContentWrapperCva" ? /* @__PURE__ */ jsxs("div", {
+					className: exact,
+					children: [/* @__PURE__ */ jsx(Tag, { children: "Design" }), /* @__PURE__ */ jsx(Tag, { children: "Engineering" })]
+				}) : /* @__PURE__ */ jsx("div", {
+					className: classes("select.popoverCva"),
+					role: "listbox",
+					"aria-label": "Preview options",
+					children: [
+						"Design",
+						"Engineering",
+						"Marketing"
+					].map((label_0) => /* @__PURE__ */ jsx("div", {
+						role: "option",
+						"aria-selected": text === label_0,
+						className: classes("select.listBoxItemCva"),
+						"data-selected": text === label_0 || void 0,
+						onClick: () => setText(label_0),
+						tabIndex: 0,
+						onKeyDown: (event) => {
+							if (event.key === "Enter" || event.key === " ") {
+								event.preventDefault();
+								setText(label_0);
+							}
+						},
+						children: label_0
+					}, label_0))
+				});
+				break bb0;
+			case "dropdownMenu":
+				sample = /* @__PURE__ */ jsx("div", {
+					className: classes("dropdownMenu.popoverWrapperCva"),
+					children: /* @__PURE__ */ jsx("div", {
+						className: classes("dropdownMenu.popoverCva"),
+						children: /* @__PURE__ */ jsx("div", {
+							className: classes("dropdownMenu.cva"),
+							children: [
+								"Edit",
+								"Duplicate",
+								"Delete"
+							].map((label) => /* @__PURE__ */ jsx("button", {
+								className: classes("dropdownMenu.itemCva"),
+								disabled,
+								children: label
+							}, label))
+						})
+					})
+				});
+				break bb0;
+			case "dialog": {
+				let t5;
+				let t6;
+				let t7;
+				if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+					t5 = /* @__PURE__ */ jsx("strong", { children: "Save changes?" });
+					t6 = /* @__PURE__ */ jsx("p", { children: "Your preferences will be updated." });
+					t7 = /* @__PURE__ */ jsx(Button, { children: "Save" });
+					$[25] = t5;
+					$[26] = t6;
+					$[27] = t7;
+				} else {
+					t5 = $[25];
+					t6 = $[26];
+					t7 = $[27];
+				}
+				sample = /* @__PURE__ */ jsxs("div", {
+					className: "studio-mini-dialog",
+					children: [/* @__PURE__ */ jsx("div", { className: classes("dialog.overlayCva") }), /* @__PURE__ */ jsx("div", {
+						className: classes("dialog.mainCva"),
+						children: /* @__PURE__ */ jsxs("div", {
+							className: classes("dialog.contentCva"),
+							children: [
+								t5,
+								t6,
+								t7
+							]
+						})
+					})]
+				});
+				break bb0;
+			}
+			case "popover": {
+				let t5;
+				let t6;
+				let t7;
+				if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+					t5 = /* @__PURE__ */ jsx("strong", { children: "Quick settings" });
+					t6 = /* @__PURE__ */ jsx("p", { children: "Adjust preferences for this workspace." });
+					t7 = /* @__PURE__ */ jsx(Checkbox, { children: "Enable notifications" });
+					$[28] = t5;
+					$[29] = t6;
+					$[30] = t7;
+				} else {
+					t5 = $[28];
+					t6 = $[29];
+					t7 = $[30];
+				}
+				sample = /* @__PURE__ */ jsxs("div", {
+					className: exact,
+					children: [
+						t5,
+						t6,
+						t7
+					]
+				});
+				break bb0;
+			}
+			case "toast": {
+				let t5;
+				let t6;
+				if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+					t5 = /* @__PURE__ */ jsx(Info, {});
+					t6 = /* @__PURE__ */ jsx("span", { children: "Your changes have been saved." });
+					$[31] = t5;
+					$[32] = t6;
+				} else {
+					t5 = $[31];
+					t6 = $[32];
+				}
+				sample = /* @__PURE__ */ jsx("div", {
+					className: classes("toast.containerCva"),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: classes("toast.cva"),
+						children: [t5, t6]
+					})
+				});
+				break bb0;
+			}
+			case "datePickerInput": {
+				let t5;
+				let t6;
+				let t7;
+				let t8;
+				let t9;
+				if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+					t5 = /* @__PURE__ */ jsx("span", { children: "24" });
+					t6 = /* @__PURE__ */ jsx("span", { children: "/" });
+					t7 = /* @__PURE__ */ jsx("span", { children: "09" });
+					t8 = /* @__PURE__ */ jsx("span", { children: "/" });
+					t9 = /* @__PURE__ */ jsx("span", { children: "2026" });
+					$[33] = t5;
+					$[34] = t6;
+					$[35] = t7;
+					$[36] = t8;
+					$[37] = t9;
+				} else {
+					t5 = $[33];
+					t6 = $[34];
+					t7 = $[35];
+					t8 = $[36];
+					t9 = $[37];
+				}
+				let t10;
+				if ($[38] !== exact) {
+					t10 = /* @__PURE__ */ jsxs("div", {
+						className: exact,
+						children: [
+							t5,
+							t6,
+							t7,
+							t8,
+							t9
+						]
+					});
+					$[38] = exact;
+					$[39] = t10;
+				} else t10 = $[39];
+				sample = t10;
+				break bb0;
+			}
+			case "fileUpload": {
+				let t5;
+				let t6;
+				let t7;
+				if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+					t5 = /* @__PURE__ */ jsx(Plus, {});
+					t6 = /* @__PURE__ */ jsx("strong", { children: "Drop files here" });
+					t7 = /* @__PURE__ */ jsx("div", { children: "or choose a file" });
+					$[40] = t5;
+					$[41] = t6;
+					$[42] = t7;
+				} else {
+					t5 = $[40];
+					t6 = $[41];
+					t7 = $[42];
+				}
+				let t8;
+				if ($[43] !== exact) {
+					t8 = /* @__PURE__ */ jsxs("div", {
+						className: exact,
+						children: [
+							t5,
+							t6,
+							t7
+						]
+					});
+					$[43] = exact;
+					$[44] = t8;
+				} else t8 = $[44];
+				sample = t8;
+				break bb0;
+			}
+			default: {
+				let t5;
+				if ($[45] !== exact) {
+					t5 = /* @__PURE__ */ jsx("div", {
+						className: exact,
+						children: "Example"
+					});
+					$[45] = exact;
+					$[46] = t5;
+				} else t5 = $[46];
+				sample = t5;
+			}
+		}
+		if (slot === "input.sideCva") {
+			let t5;
+			if ($[47] !== disabled || $[48] !== props || $[49] !== text) {
+				t5 = /* @__PURE__ */ jsx(TextArea, {
+					...props,
+					as: "floating",
+					label: "Example text area",
+					value: text,
+					onChange: setText,
+					isDisabled: disabled
+				});
+				$[47] = disabled;
+				$[48] = props;
+				$[49] = text;
+				$[50] = t5;
+			} else t5 = $[50];
+			sample = t5;
+		}
+		t2 = "cva-preview";
+		t3 = slot;
+		let t5;
+		if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
+			t5 = /([a-z])([A-Z])/g;
+			$[51] = t5;
+		} else t5 = $[51];
+		t1 = component.replace(t5, "$1 $2");
+		$[0] = disabled;
+		$[1] = overrides;
+		$[2] = selected;
+		$[3] = slot;
+		$[4] = text;
+		$[5] = variants;
+		$[6] = component;
+		$[7] = definition;
+		$[8] = sample;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else {
+		component = $[6];
+		definition = $[7];
+		sample = $[8];
+		t1 = $[9];
+		t2 = $[10];
+		t3 = $[11];
+	}
+	let t4;
+	if ($[52] !== t1) {
+		t4 = /* @__PURE__ */ jsx("h3", { children: t1 });
+		$[52] = t1;
+		$[53] = t4;
+	} else t4 = $[53];
+	let t5;
+	if ($[54] !== definition?.config.variants) {
+		t5 = Object.entries(definition?.config.variants ?? {});
+		$[54] = definition?.config.variants;
+		$[55] = t5;
+	} else t5 = $[55];
+	let t6;
+	if ($[56] !== setVariants || $[57] !== t5 || $[58] !== variants) {
+		t6 = t5.map((t7) => {
+			const [name_1, options] = t7;
+			return /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("span", { children: name_1 }), /* @__PURE__ */ jsxs("select", {
+				"aria-label": `Preview ${name_1}`,
+				value: variants[name_1] ?? "",
+				onChange: (event_2) => setVariants({
+					...variants,
+					[name_1]: event_2.target.value
+				}),
+				children: [/* @__PURE__ */ jsx("option", {
+					value: "",
+					children: "Default"
+				}), Object.keys(options).map(_temp4$2)]
+			})] }, name_1);
+		});
+		$[56] = setVariants;
+		$[57] = t5;
+		$[58] = variants;
+		$[59] = t6;
+	} else t6 = $[59];
+	let t7;
+	if ($[60] !== component || $[61] !== disabled) {
+		t7 = [
+			"button",
+			"badgeButton",
+			"input",
+			"label",
+			"formField",
+			"tooltipWrapper",
+			"checkbox",
+			"switch",
+			"tag",
+			"radio",
+			"textArea",
+			"dropdownMenu",
+			"toggleGroup",
+			"accordion"
+		].includes(component) && /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("span", { children: "Disabled" }), /* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			checked: disabled,
+			onChange: (event_3) => setDisabled(event_3.target.checked)
+		})] });
+		$[60] = component;
+		$[61] = disabled;
+		$[62] = t7;
+	} else t7 = $[62];
+	let t8;
+	if ($[63] !== component || $[64] !== selected) {
+		t8 = [
+			"checkbox",
+			"switch",
+			"radio",
+			"table"
+		].includes(component) && /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("span", { children: "Selected" }), /* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			checked: selected,
+			onChange: (event_4) => setSelected(event_4.target.checked)
+		})] });
+		$[63] = component;
+		$[64] = selected;
+		$[65] = t8;
+	} else t8 = $[65];
+	let t9;
+	if ($[66] !== t6 || $[67] !== t7 || $[68] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("div", {
+			className: "studio-preview-controls",
+			children: [
+				t6,
+				t7,
+				t8
+			]
+		});
+		$[66] = t6;
+		$[67] = t7;
+		$[68] = t8;
+		$[69] = t9;
+	} else t9 = $[69];
+	let t10;
+	if ($[70] !== sample) {
+		t10 = /* @__PURE__ */ jsx("div", {
+			className: "studio-cva-stage",
+			"data-testid": "cva-preview-stage",
+			children: sample
+		});
+		$[70] = sample;
+		$[71] = t10;
+	} else t10 = $[71];
+	let t11;
+	if ($[72] !== slot) {
+		let t12;
+		if ($[74] === Symbol.for("react.memo_cache_sentinel")) {
+			t12 = /Cva$/;
+			$[74] = t12;
+		} else t12 = $[74];
+		t11 = slot.split(".")[1].replace(t12, "");
+		$[72] = slot;
+		$[73] = t11;
+	} else t11 = $[73];
+	let t12;
+	if ($[75] !== t11) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			className: "studio-preview-caption",
+			children: [t11, " · Preview controls don’t change your configuration."]
+		});
+		$[75] = t11;
+		$[76] = t12;
+	} else t12 = $[76];
+	let t13;
+	if ($[77] !== t10 || $[78] !== t12 || $[79] !== t2 || $[80] !== t3 || $[81] !== t4 || $[82] !== t9) {
+		t13 = /* @__PURE__ */ jsxs("div", {
+			"data-testid": t2,
+			"data-slot": t3,
+			children: [
+				t4,
+				t9,
+				t10,
+				t12
+			]
+		});
+		$[77] = t10;
+		$[78] = t12;
+		$[79] = t2;
+		$[80] = t3;
+		$[81] = t4;
+		$[82] = t9;
+		$[83] = t13;
+	} else t13 = $[83];
+	return t13;
+}
+function _temp4$2(value_2) {
+	return /* @__PURE__ */ jsx("option", { children: value_2 }, value_2);
+}
+function _temp3$2(event_1) {
+	return event_1.preventDefault();
+}
+function _temp2$2(t0) {
+	const [name, value_0] = t0;
+	return [name, value_0 === "true" ? true : value_0 === "false" ? false : value_0];
+}
+function _temp$5(t0) {
+	const [, value] = t0;
+	return value !== "";
+}
+function ContextualPreview(t0) {
+	const $ = c(18);
+	const { section, slot, mode, entries, variants, setVariants } = t0;
+	const { defaults, draft } = useUIConfiguration();
+	let t1;
+	if ($[0] !== defaults || $[1] !== draft.theme || $[2] !== mode) {
+		t1 = previewTokens(defaults, draft.theme, mode);
+		$[0] = defaults;
+		$[1] = draft.theme;
+		$[2] = mode;
+		$[3] = t1;
+	} else t1 = $[3];
+	const tokens = t1;
+	let t2;
+	if ($[4] !== defaults || $[5] !== entries || $[6] !== section) {
+		t2 = section === "Typography" ? [...new Map(entries.map((t3) => {
+			const [name, original] = t3;
+			const base = name.replace(/--(?:line-height|letter-spacing)$/, "");
+			return [base, [base, defaults.theme[base] ?? original]];
+		})).values()] : entries;
+		$[4] = defaults;
+		$[5] = entries;
+		$[6] = section;
+		$[7] = t2;
+	} else t2 = $[7];
+	const samples = t2;
+	const t3 = `studio-context-preview ${mode}`;
+	let t4;
+	if ($[8] !== samples || $[9] !== section || $[10] !== setVariants || $[11] !== slot || $[12] !== variants) {
+		t4 = section === "Variants & overrides" ? /* @__PURE__ */ jsx(CvaPreview, {
+			slot,
+			variants,
+			setVariants
+		}, slot) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("h3", { children: section }), /* @__PURE__ */ jsxs("div", {
+			className: "studio-token-samples",
+			children: [samples.map((t5) => {
+				const [name_0, original_0] = t5;
+				const value = `var(${name_0})`;
+				let style;
+				let content = "";
+				if (section === "Colors") style = {
+					background: name_0.endsWith("-base") && (/^\d+\s+\d+\s+\d+$/.test(original_0) || original_0.startsWith("var(")) ? `rgb(${value})` : value,
+					height: 44
+				};
+				else if (section === "Typography" || section === "Font size") {
+					style = name_0.startsWith("--text-") ? {
+						fontSize: value,
+						lineHeight: `var(${name_0}--line-height, 1.4)`,
+						letterSpacing: `var(${name_0}--letter-spacing, normal)`
+					} : name_0.startsWith("--font-weight-") ? { fontWeight: value } : name_0.startsWith("--font-") ? { fontFamily: value } : { letterSpacing: value };
+					content = "The quick brown fox";
+				} else if (section === "Radius") style = {
+					borderRadius: value,
+					height: 56,
+					background: "rgb(var(--interactive-primary-background-base))"
+				};
+				else if (section === "Effects") {
+					style = {
+						height: 56,
+						background: "rgb(var(--surface-default-card-base))",
+						...name_0.startsWith("--blur-") ? { filter: `blur(${value})` } : { boxShadow: value }
+					};
+					content = "Aa";
+				} else style = {
+					width: value,
+					maxWidth: "100%",
+					minWidth: 1,
+					height: 20,
+					background: "rgb(var(--interactive-primary-background-base))"
+				};
+				return /* @__PURE__ */ jsxs("div", {
+					className: "studio-token-sample",
+					children: [/* @__PURE__ */ jsx("span", { children: labelFor(name_0) }), /* @__PURE__ */ jsx("div", {
+						className: "studio-token-specimen",
+						style,
+						children: content
+					})]
+				}, name_0);
+			}), !samples.length && /* @__PURE__ */ jsx("div", { children: "No matching tokens." })]
+		})] });
+		$[8] = samples;
+		$[9] = section;
+		$[10] = setVariants;
+		$[11] = slot;
+		$[12] = variants;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== t3 || $[15] !== t4 || $[16] !== tokens) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: t3,
+			style: tokens,
+			"data-testid": "component-preview",
+			children: t4
+		});
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = tokens;
+		$[17] = t5;
+	} else t5 = $[17];
+	return t5;
+}
+//#endregion
+//#region src/configurator/CvaEditor.tsx
+const title = (value) => value.replace(/Cva$/, "").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^cva$/, "Appearance");
+function ClassField(t0) {
+	const $ = c(18);
+	const { label, value, onCommit, onFocus } = t0;
+	const [text, setText] = useState(value);
+	let t1;
+	let t2;
+	if ($[0] !== value) {
+		t1 = () => setText(value);
+		t2 = [value];
+		$[0] = value;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[3] !== label) {
+		t3 = /* @__PURE__ */ jsx("span", { children: label });
+		$[3] = label;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = (event) => setText(event.target.value);
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== onCommit || $[7] !== text || $[8] !== value) {
+		t5 = () => {
+			if (text !== value) onCommit(text.trim());
+		};
+		$[6] = onCommit;
+		$[7] = text;
+		$[8] = value;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== label || $[11] !== onFocus || $[12] !== t5 || $[13] !== text) {
+		t6 = /* @__PURE__ */ jsx("input", {
+			"aria-label": label,
+			value: text,
+			spellCheck: false,
+			onFocus,
+			onChange: t4,
+			onBlur: t5,
+			onKeyDown: _temp$4
+		});
+		$[10] = label;
+		$[11] = onFocus;
+		$[12] = t5;
+		$[13] = text;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== t3 || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("label", {
+			className: "studio-cva-field",
+			tabIndex: -1,
+			children: [t3, t6]
+		});
+		$[15] = t3;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	return t7;
+}
+function _temp$4(event_0) {
+	if (event_0.key === "Enter" && !event_0.nativeEvent.isComposing) {
+		event_0.preventDefault();
+		event_0.currentTarget.parentElement?.focus();
+	}
+}
+function CvaEditor(t0) {
+	const $ = c(69);
+	const { slot, setSlot, onPreview } = t0;
+	const { draft, setDraft, inheritedOverrides } = useUIConfiguration();
+	let t1;
+	if ($[0] !== slot) {
+		t1 = slot.split(".");
+		$[0] = slot;
+		$[1] = t1;
+	} else t1 = $[1];
+	const component = t1[0];
+	let definition;
+	let original;
+	let slots;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	let update;
+	if ($[2] !== component || $[3] !== draft.overrides || $[4] !== inheritedOverrides || $[5] !== setDraft || $[6] !== setSlot || $[7] !== slot) {
+		slots = Object.keys(cvaDefinitions);
+		const components = [...new Set(slots.map(_temp2$1))];
+		let t10;
+		if ($[20] !== inheritedOverrides || $[21] !== slot) {
+			t10 = resolveCvaDefinition(slot, inheritedOverrides);
+			$[20] = inheritedOverrides;
+			$[21] = slot;
+			$[22] = t10;
+		} else t10 = $[22];
+		original = t10;
+		definition = draft.overrides?.[slot] ?? original;
+		let t11;
+		if ($[23] !== definition || $[24] !== setDraft || $[25] !== slot) {
+			t11 = (change) => {
+				if (!definition) return;
+				const next = structuredClone(definition);
+				change(next);
+				setDraft((current) => ({
+					...current,
+					overrides: {
+						...current.overrides,
+						[slot]: next
+					}
+				}));
+			};
+			$[23] = definition;
+			$[24] = setDraft;
+			$[25] = slot;
+			$[26] = t11;
+		} else t11 = $[26];
+		update = t11;
+		t9 = "studio-cva-editor";
+		t8 = "studio-settings";
+		t6 = "studio-setting";
+		if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+			t7 = /* @__PURE__ */ jsx("span", { children: "Component" });
+			$[27] = t7;
+		} else t7 = $[27];
+		t2 = "CVA component";
+		t3 = component;
+		t4 = (event) => {
+			const next_0 = event.target.value;
+			setSlot(slots.find((key_0) => key_0.startsWith(`${next_0}.`)));
+		};
+		t5 = components.map(_temp3$1);
+		$[2] = component;
+		$[3] = draft.overrides;
+		$[4] = inheritedOverrides;
+		$[5] = setDraft;
+		$[6] = setSlot;
+		$[7] = slot;
+		$[8] = definition;
+		$[9] = original;
+		$[10] = slots;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t6;
+		$[16] = t7;
+		$[17] = t8;
+		$[18] = t9;
+		$[19] = update;
+	} else {
+		definition = $[8];
+		original = $[9];
+		slots = $[10];
+		t2 = $[11];
+		t3 = $[12];
+		t4 = $[13];
+		t5 = $[14];
+		t6 = $[15];
+		t7 = $[16];
+		t8 = $[17];
+		t9 = $[18];
+		update = $[19];
+	}
+	let t10;
+	if ($[28] !== t2 || $[29] !== t3 || $[30] !== t4 || $[31] !== t5) {
+		t10 = /* @__PURE__ */ jsx("select", {
+			"aria-label": t2,
+			value: t3,
+			onChange: t4,
+			children: t5
+		});
+		$[28] = t2;
+		$[29] = t3;
+		$[30] = t4;
+		$[31] = t5;
+		$[32] = t10;
+	} else t10 = $[32];
+	let t11;
+	if ($[33] !== t10 || $[34] !== t6 || $[35] !== t7) {
+		t11 = /* @__PURE__ */ jsxs("label", {
+			className: t6,
+			children: [t7, t10]
+		});
+		$[33] = t10;
+		$[34] = t6;
+		$[35] = t7;
+		$[36] = t11;
+	} else t11 = $[36];
+	let t12;
+	if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx("span", { children: "Slot" });
+		$[37] = t12;
+	} else t12 = $[37];
+	let t13;
+	if ($[38] !== setSlot) {
+		t13 = (event_0) => setSlot(event_0.target.value);
+		$[38] = setSlot;
+		$[39] = t13;
+	} else t13 = $[39];
+	let t14;
+	if ($[40] !== component || $[41] !== slots) {
+		t14 = slots.filter((key_1) => key_1.startsWith(`${component}.`)).map(_temp4$1);
+		$[40] = component;
+		$[41] = slots;
+		$[42] = t14;
+	} else t14 = $[42];
+	let t15;
+	if ($[43] !== slot || $[44] !== t13 || $[45] !== t14) {
+		t15 = /* @__PURE__ */ jsxs("label", {
+			className: "studio-setting",
+			children: [t12, /* @__PURE__ */ jsx("select", {
+				"aria-label": "CVA slot",
+				value: slot,
+				onChange: t13,
+				children: t14
+			})]
+		});
+		$[43] = slot;
+		$[44] = t13;
+		$[45] = t14;
+		$[46] = t15;
+	} else t15 = $[46];
+	let t16;
+	if ($[47] !== t11 || $[48] !== t15 || $[49] !== t8) {
+		t16 = /* @__PURE__ */ jsxs("div", {
+			className: t8,
+			children: [t11, t15]
+		});
+		$[47] = t11;
+		$[48] = t15;
+		$[49] = t8;
+		$[50] = t16;
+	} else t16 = $[50];
+	let t17;
+	if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ jsx("p", {
+			className: "studio-help",
+			children: "Edits replace this slot’s effective definition, including app overrides. Classes must already be compiled by Tailwind to preview live."
+		});
+		$[51] = t17;
+	} else t17 = $[51];
+	let t18;
+	if ($[52] !== definition || $[53] !== onPreview || $[54] !== original || $[55] !== slot || $[56] !== update) {
+		t18 = !original ? /* @__PURE__ */ jsx("p", { children: "This slot uses a function override. Edit it in the application source; it cannot be inspected here." }) : definition && /* @__PURE__ */ jsxs("div", { children: [
+			/* @__PURE__ */ jsx(ClassField, {
+				label: "Base classes",
+				onFocus: () => onPreview({}),
+				value: definition.base.join(" "),
+				onCommit: (value) => update((next_1) => {
+					next_1.base = [value];
+				})
+			}),
+			Object.entries(definition.config.variants).map((t19) => {
+				const [variant, options] = t19;
+				return /* @__PURE__ */ jsxs("fieldset", {
+					className: "studio-token-group",
+					children: [
+						/* @__PURE__ */ jsx("legend", { children: title(variant) }),
+						/* @__PURE__ */ jsxs("label", {
+							className: "studio-setting",
+							children: [/* @__PURE__ */ jsx("span", { children: "Default" }), /* @__PURE__ */ jsxs("select", {
+								"aria-label": `Default ${variant}`,
+								onFocus: () => onPreview({}),
+								value: String(definition.config.defaultVariants[variant] ?? ""),
+								onChange: (event_1) => update((next_2) => {
+									const value_0 = event_1.target.value;
+									next_2.config.defaultVariants[variant] = value_0 === "" ? null : value_0 === "true" ? true : value_0 === "false" ? false : value_0;
+								}),
+								children: [/* @__PURE__ */ jsx("option", {
+									value: "",
+									children: "None"
+								}), Object.keys(options).map(_temp5)]
+							})]
+						}),
+						Object.entries(options).map((t20) => {
+							const [value_2, classes] = t20;
+							return /* @__PURE__ */ jsx(ClassField, {
+								label: `${variant}: ${value_2}`,
+								onFocus: () => onPreview({ [variant]: value_2 }),
+								value: classes,
+								onCommit: (classes_0) => update((next_3) => {
+									next_3.config.variants[variant][value_2] = classes_0;
+								})
+							}, value_2);
+						})
+					]
+				}, variant);
+			}),
+			definition.config.compoundVariants.length > 0 && /* @__PURE__ */ jsxs("fieldset", {
+				className: "studio-token-group",
+				children: [/* @__PURE__ */ jsx("legend", { children: "Compound variants" }), definition.config.compoundVariants.map((entry, index) => /* @__PURE__ */ jsx(ClassField, {
+					label: Object.entries(entry).filter(_temp7).map(_temp8).join(", "),
+					value: String(entry.className ?? ""),
+					onFocus: () => onPreview(Object.fromEntries(Object.entries(entry).filter(_temp9).map(_temp0))),
+					onCommit: (classes_1) => update((next_4) => {
+						next_4.config.compoundVariants[index].className = classes_1;
+					})
+				}, JSON.stringify(Object.entries(entry).filter(_temp6))))]
+			})
+		] }, slot);
+		$[52] = definition;
+		$[53] = onPreview;
+		$[54] = original;
+		$[55] = slot;
+		$[56] = update;
+		$[57] = t18;
+	} else t18 = $[57];
+	const t19 = !draft.overrides?.[slot];
+	let t20;
+	if ($[58] !== setDraft || $[59] !== slot) {
+		t20 = () => setDraft((current_0) => {
+			const overrides = { ...current_0.overrides };
+			delete overrides[slot];
+			return {
+				...current_0,
+				overrides
+			};
+		});
+		$[58] = setDraft;
+		$[59] = slot;
+		$[60] = t20;
+	} else t20 = $[60];
+	let t21;
+	if ($[61] !== t19 || $[62] !== t20) {
+		t21 = /* @__PURE__ */ jsx("button", {
+			className: "studio-cva-reset",
+			disabled: t19,
+			onClick: t20,
+			children: "Reset slot"
+		});
+		$[61] = t19;
+		$[62] = t20;
+		$[63] = t21;
+	} else t21 = $[63];
+	let t22;
+	if ($[64] !== t16 || $[65] !== t18 || $[66] !== t21 || $[67] !== t9) {
+		t22 = /* @__PURE__ */ jsxs("div", {
+			className: t9,
+			children: [
+				t16,
+				t17,
+				t18,
+				t21
+			]
+		});
+		$[64] = t16;
+		$[65] = t18;
+		$[66] = t21;
+		$[67] = t9;
+		$[68] = t22;
+	} else t22 = $[68];
+	return t22;
+}
+function _temp0(t0) {
+	const [key_7, value_4] = t0;
+	return [key_7, String(Array.isArray(value_4) ? value_4[0] : value_4)];
+}
+function _temp9(t0) {
+	const [key_6] = t0;
+	return key_6 !== "className";
+}
+function _temp8(t0) {
+	const [key_5, value_3] = t0;
+	return `${key_5}: ${Array.isArray(value_3) ? value_3.join(" / ") : value_3}`;
+}
+function _temp7(t0) {
+	const [key_4] = t0;
+	return key_4 !== "className";
+}
+function _temp6(t0) {
+	const [key_3] = t0;
+	return key_3 !== "className";
+}
+function _temp5(value_1) {
+	return /* @__PURE__ */ jsx("option", {
+		value: value_1,
+		children: value_1
+	}, value_1);
+}
+function _temp4$1(key_2) {
+	return /* @__PURE__ */ jsx("option", {
+		value: key_2,
+		children: title(key_2.split(".")[1])
+	}, key_2);
+}
+function _temp3$1(name) {
+	return /* @__PURE__ */ jsx("option", {
+		value: name,
+		children: title(name)
+	}, name);
+}
+function _temp2$1(key) {
+	return key.split(".")[0];
+}
+//#endregion
+//#region src/configurator/theme-writer-protocol.ts
+/** Shared by the browser configurator and the isolated Node Vite entry. */
+const themeWriterMetaName = "povio-ui-theme-writer";
+const themeWriterTokenHeader = "x-povio-ui-theme-token";
+//#endregion
+//#region src/configurator/theme-writer-client.ts
+function getThemeWriter() {
+	if (typeof document === "undefined") return null;
+	const content = document.querySelector(`meta[name="${themeWriterMetaName}"]`)?.content;
+	if (!content) return null;
+	try {
+		const connection = JSON.parse(content);
+		if (typeof connection.endpoint === "string" && connection.endpoint.startsWith("/") && !connection.endpoint.startsWith("//") && typeof connection.token === "string" && typeof connection.file === "string") return connection;
+	} catch {}
+	return null;
+}
+async function saveThemeCss(connection, css) {
+	const response = await fetch(connection.endpoint, {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			[themeWriterTokenHeader]: connection.token
+		},
+		body: JSON.stringify({ css })
+	});
+	if (!response.ok) {
+		const result = await response.json().catch(() => null);
+		throw new Error(result?.error ?? `Theme save failed (${response.status}).`);
+	}
+}
+//#endregion
+//#region src/configurator/ColorModeSwitch.tsx
+/** Controlled color-mode switch, shared by configurators and application settings. */
+function ColorModeSwitch(t0) {
+	const $ = c(7);
+	const { value, onChange, label: t1 } = t0;
+	const label = t1 === void 0 ? "Color mode" : t1;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = ["light", "dark"];
+		$[0] = t2;
+	} else t2 = $[0];
+	let t3;
+	if ($[1] !== onChange || $[2] !== value) {
+		t3 = t2.map((mode) => /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-pressed": value === mode,
+			onClick: () => onChange(mode),
+			children: [mode === "light" ? /* @__PURE__ */ jsx(Sun, {
+				size: 14,
+				"aria-hidden": "true"
+			}) : /* @__PURE__ */ jsx(Moon, {
+				size: 14,
+				"aria-hidden": "true"
+			}), mode]
+		}, mode));
+		$[1] = onChange;
+		$[2] = value;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== label || $[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			className: "studio-mode studio-color-mode",
+			role: "group",
+			"aria-label": label,
+			children: t3
+		});
+		$[4] = label;
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	return t4;
+}
+//#endregion
+//#region src/configurator/AlphaColorField.tsx
+/** Whether a token value is an 8-digit hex color with an alpha channel, e.g. `#00000066`. */
+const isAlphaHex = (value) => /^#[0-9a-f]{8}$/i.test(value.trim());
+const toPercent = (alpha) => Math.round(parseInt(alpha, 16) / 255 * 100);
+const toAlpha = (percent) => Math.round(Math.min(Math.max(percent, 0), 100) / 100 * 255).toString(16).padStart(2, "0");
+/**
+* Edits a translucent color the way Figma shows it: a half solid, half checkerboard swatch, the hex color and its
+* opacity as a percentage. The value is kept as an 8-digit hex so exports are unchanged.
+*/
+function AlphaColorField(t0) {
+	const $ = c(23);
+	const { name, label, value, onChange } = t0;
+	const color = value.trim().slice(1, 7);
+	const alpha = value.trim().slice(7, 9);
+	const [hexText, setHexText] = useState(null);
+	const [percentText, setPercentText] = useState(null);
+	const commitHex = () => {
+		if (hexText === null) return;
+		const entered = hexText.trim().replace(/^#/, "");
+		setHexText(null);
+		const hex = /^[0-9a-f]{3}$/i.test(entered) ? entered.replace(/./g, "$&$&") : entered;
+		if (/^[0-9a-f]{6}$/i.test(hex)) onChange(`#${hex.toLowerCase()}${alpha}`);
+	};
+	const commitPercent = () => {
+		if (percentText === null) return;
+		const entered_0 = Number.parseFloat(percentText.replace("%", ""));
+		setPercentText(null);
+		if (Number.isFinite(entered_0)) onChange(`#${color}${toAlpha(entered_0)}`);
+	};
+	const blurOnEnter = _temp$3;
+	const t1 = `#${color}`;
+	let t2;
+	if ($[0] !== t1 || $[1] !== value) {
+		t2 = {
+			"--swatch-solid": t1,
+			"--swatch-color": value
+		};
+		$[0] = t1;
+		$[1] = value;
+		$[2] = t2;
+	} else t2 = $[2];
+	const t3 = `token-${name}`;
+	const t4 = `${label} color`;
+	const t5 = hexText ?? `#${color.toUpperCase()}`;
+	let t6;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (event_1) => setHexText(event_1.target.value);
+		$[3] = t6;
+	} else t6 = $[3];
+	let t7;
+	if ($[4] !== blurOnEnter || $[5] !== commitHex || $[6] !== t3 || $[7] !== t4 || $[8] !== t5) {
+		t7 = /* @__PURE__ */ jsx("input", {
+			id: t3,
+			className: "studio-alpha-hex",
+			"aria-label": t4,
+			value: t5,
+			spellCheck: false,
+			onChange: t6,
+			onBlur: commitHex,
+			onKeyDown: blurOnEnter
+		});
+		$[4] = blurOnEnter;
+		$[5] = commitHex;
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = t5;
+		$[9] = t7;
+	} else t7 = $[9];
+	const t8 = "studio-alpha-opacity";
+	const t9 = `${label} opacity`;
+	const t10 = "numeric";
+	const t11 = percentText ?? `${toPercent(alpha)}%`;
+	let t12;
+	if ($[10] !== setPercentText) {
+		t12 = (event_2) => setPercentText(event_2.target.value);
+		$[10] = setPercentText;
+		$[11] = t12;
+	} else t12 = $[11];
+	let t13;
+	if ($[12] !== alpha || $[13] !== blurOnEnter || $[14] !== color || $[15] !== onChange) {
+		t13 = (event_3) => {
+			const step = event_3.key === "ArrowUp" ? 1 : event_3.key === "ArrowDown" ? -1 : 0;
+			if (step) {
+				event_3.preventDefault();
+				onChange(`#${color}${toAlpha(toPercent(alpha) + step * (event_3.shiftKey ? 10 : 1))}`);
+			} else blurOnEnter(event_3);
+		};
+		$[12] = alpha;
+		$[13] = blurOnEnter;
+		$[14] = color;
+		$[15] = onChange;
+		$[16] = t13;
+	} else t13 = $[16];
+	let t14;
+	if ($[17] !== commitPercent || $[18] !== t11 || $[19] !== t12 || $[20] !== t13 || $[21] !== t9) {
+		t14 = /* @__PURE__ */ jsx("span", {
+			className: t8,
+			children: /* @__PURE__ */ jsx("input", {
+				"aria-label": t9,
+				inputMode: t10,
+				value: t11,
+				onChange: t12,
+				onBlur: commitPercent,
+				onKeyDown: t13
+			})
+		});
+		$[17] = commitPercent;
+		$[18] = t11;
+		$[19] = t12;
+		$[20] = t13;
+		$[21] = t9;
+		$[22] = t14;
+	} else t14 = $[22];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "studio-alpha-color",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "studio-alpha-swatch",
+				style: t2,
+				children: /* @__PURE__ */ jsx("input", {
+					type: "color",
+					"aria-label": `Pick ${label}`,
+					value: `#${color}`,
+					onChange: (event_0) => onChange(`${event_0.target.value}${alpha}`)
+				})
+			}),
+			t7,
+			t14
+		]
+	});
+}
+function _temp$3(event) {
+	if (event.key === "Enter" && !event.nativeEvent.isComposing) event.currentTarget.blur();
+}
+//#endregion
+//#region src/configurator/PaletteSelect.tsx
+const customPaletteKey = "custom";
+/** Groups `--primary-800-base` style tokens by palette, darkest step first, as a design tool's swatch list does. */
+function paletteFamilies(options) {
+	const families = /* @__PURE__ */ new Map();
+	for (const option of options) {
+		const [, family = option.name, step = "0"] = option.name.match(/^--(.+)-(\d+)-base$/) ?? [];
+		if (!families.has(family)) families.set(family, []);
+		families.get(family).push({
+			step: Number(step),
+			option
+		});
+	}
+	return [...families].map(([family, steps]) => ({
+		family,
+		steps: steps.sort((a, b) => b.step - a.step)
+	}));
+}
+/** Centres the selected color when the list opens; the list is its own scroll container. */
+function scrollSelectedIntoView(list) {
+	if (!list) return;
+	requestAnimationFrame(() => {
+		const item = list.querySelector("[data-selected]");
+		if (item) list.scrollTop = item.offsetTop - (list.clientHeight - item.offsetHeight) / 2;
+	});
+}
+/** Picks a base palette color for a semantic token, showing each option's swatch, step and hex value. */
+function PaletteSelect(t0) {
+	const $ = c(28);
+	const { id, label, options, selected, onSelect } = t0;
+	let current;
+	let t1;
+	if ($[0] !== options || $[1] !== selected) {
+		let t2;
+		if ($[4] !== selected) {
+			t2 = (option) => option.name === selected;
+			$[4] = selected;
+			$[5] = t2;
+		} else t2 = $[5];
+		current = options.find(t2);
+		t1 = current?.name.match(/^--(.+)-(\d+)-base$/) ?? [];
+		$[0] = options;
+		$[1] = selected;
+		$[2] = current;
+		$[3] = t1;
+	} else {
+		current = $[2];
+		t1 = $[3];
+	}
+	const [, family, step] = t1;
+	const t2 = `studio-palette-picker ${current ? "" : "is-custom"}`;
+	let t3;
+	if ($[6] !== onSelect) {
+		t3 = (key) => key !== null && onSelect(String(key));
+		$[6] = onSelect;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== current || $[9] !== family || $[10] !== step) {
+		t4 = current && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "studio-palette-swatch",
+			style: { backgroundColor: `rgb(${current.value})` },
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "studio-palette-trigger-label",
+			children: [
+				family,
+				" ",
+				step
+			]
+		})] });
+		$[8] = current;
+		$[9] = family;
+		$[10] = step;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(ChevronDown, {
+			size: 13,
+			"aria-hidden": "true"
+		});
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t4) {
+		t6 = /* @__PURE__ */ jsxs($7705c033048f6da7$export$353f5b6fc5456de1, {
+			className: "studio-palette-trigger",
+			children: [t4, t5]
+		});
+		$[13] = t4;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== options) {
+		t7 = paletteFamilies(options).map(_temp$2);
+		$[15] = options;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx($928221da08ecbc62$export$dca12b0bb56e4fc, {
+			id: "other",
+			children: /* @__PURE__ */ jsx($928221da08ecbc62$export$a11e76429ed99b4, {
+				id: customPaletteKey,
+				className: "studio-palette-item is-custom",
+				children: "Custom value…"
+			})
+		});
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t7) {
+		t9 = /* @__PURE__ */ jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, {
+			className: "studio-palette-popover",
+			placement: "bottom end",
+			children: /* @__PURE__ */ jsxs($928221da08ecbc62$export$41f133550aa26f48, {
+				className: "studio-palette-list",
+				ref: scrollSelectedIntoView,
+				children: [t7, t8]
+			})
+		});
+		$[18] = t7;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== id || $[21] !== label || $[22] !== selected || $[23] !== t2 || $[24] !== t3 || $[25] !== t6 || $[26] !== t9) {
+		t10 = /* @__PURE__ */ jsxs($c8bb816105474884$export$ef9b1a59e592288f, {
+			id,
+			"aria-label": label,
+			className: t2,
+			selectedKey: selected,
+			onSelectionChange: t3,
+			children: [t6, t9]
+		});
+		$[20] = id;
+		$[21] = label;
+		$[22] = selected;
+		$[23] = t2;
+		$[24] = t3;
+		$[25] = t6;
+		$[26] = t9;
+		$[27] = t10;
+	} else t10 = $[27];
+	return t10;
+}
+function _temp$2(t0) {
+	const { family: name, steps } = t0;
+	return /* @__PURE__ */ jsxs($928221da08ecbc62$export$dca12b0bb56e4fc, {
+		id: name,
+		children: [/* @__PURE__ */ jsxs($53e61d82d8b8611d$export$8b251419efc915eb, { children: ["Base palette / ", name] }), steps.map((t1) => {
+			const { step: value, option: option_0 } = t1;
+			return /* @__PURE__ */ jsxs($928221da08ecbc62$export$a11e76429ed99b4, {
+				id: option_0.name,
+				textValue: `${name} ${value}`,
+				"aria-label": `${name} ${value}`,
+				className: "studio-palette-item",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "studio-palette-swatch",
+						style: { backgroundColor: `rgb(${option_0.value})` },
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx("span", { children: value }),
+					/* @__PURE__ */ jsx("code", { children: toHex(option_0.value).toUpperCase() })
+				]
+			}, option_0.name);
+		})]
+	}, name);
+}
+//#endregion
+//#region src/configurator/PanelResizeHandle.tsx
+const keyboardStep = 16;
+/**
+* A draggable divider between two configurator panels. It reports the width of the panel on its left; the parent owns
+* the width and its limits. Double-click (or Enter) restores the default layout.
+*/
+function PanelResizeHandle(t0) {
+	const $ = c(28);
+	const { label, column, width, min, max, onResize, onReset } = t0;
+	const drag = useRef(null);
+	let t1;
+	if ($[0] !== max || $[1] !== min) {
+		t1 = (next) => Math.round(Math.min(Math.max(next, min), Math.max(min, max())));
+		$[0] = max;
+		$[1] = min;
+		$[2] = t1;
+	} else t1 = $[2];
+	const clamp = t1;
+	let t2;
+	if ($[3] !== column || $[4] !== min) {
+		t2 = (handle) => (handle.parentElement?.children[column - 2])?.getBoundingClientRect().width ?? min;
+		$[3] = column;
+		$[4] = min;
+		$[5] = t2;
+	} else t2 = $[5];
+	const measured = t2;
+	let t3;
+	if ($[6] !== measured) {
+		t3 = (event) => {
+			if (event.button !== 0) return;
+			event.preventDefault();
+			event.currentTarget.setPointerCapture(event.pointerId);
+			drag.current = {
+				x: event.clientX,
+				width: measured(event.currentTarget)
+			};
+		};
+		$[6] = measured;
+		$[7] = t3;
+	} else t3 = $[7];
+	const onPointerDown = t3;
+	let t4;
+	if ($[8] !== clamp || $[9] !== onResize) {
+		t4 = (event_0) => {
+			if (drag.current) onResize(clamp(drag.current.width + event_0.clientX - drag.current.x));
+		};
+		$[8] = clamp;
+		$[9] = onResize;
+		$[10] = t4;
+	} else t4 = $[10];
+	const onPointerMove = t4;
+	let t5;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = (event_1) => {
+			drag.current = null;
+			event_1.currentTarget.releasePointerCapture(event_1.pointerId);
+		};
+		$[11] = t5;
+	} else t5 = $[11];
+	const onPointerUp = t5;
+	let t6;
+	if ($[12] !== clamp || $[13] !== measured || $[14] !== onReset || $[15] !== onResize) {
+		t6 = (event_2) => {
+			const step = event_2.key === "ArrowLeft" ? -16 : event_2.key === "ArrowRight" ? keyboardStep : 0;
+			if (step) {
+				event_2.preventDefault();
+				onResize(clamp(measured(event_2.currentTarget) + step));
+			} else if (event_2.key === "Enter") {
+				event_2.preventDefault();
+				onReset();
+			}
+		};
+		$[12] = clamp;
+		$[13] = measured;
+		$[14] = onReset;
+		$[15] = onResize;
+		$[16] = t6;
+	} else t6 = $[16];
+	const onKeyDown = t6;
+	let t7;
+	if ($[17] !== column) {
+		t7 = { gridColumn: column };
+		$[17] = column;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== label || $[20] !== min || $[21] !== onKeyDown || $[22] !== onPointerDown || $[23] !== onPointerMove || $[24] !== onReset || $[25] !== t7 || $[26] !== width) {
+		t8 = /* @__PURE__ */ jsx("div", {
+			className: "studio-resize-handle",
+			style: t7,
+			role: "separator",
+			"aria-orientation": "vertical",
+			"aria-label": label,
+			"aria-valuenow": width,
+			"aria-valuemin": min,
+			tabIndex: 0,
+			title: "Drag to resize · double-click to reset",
+			onPointerDown,
+			onPointerMove,
+			onPointerUp,
+			onPointerCancel: onPointerUp,
+			onDoubleClick: onReset,
+			onKeyDown
+		});
+		$[19] = label;
+		$[20] = min;
+		$[21] = onKeyDown;
+		$[22] = onPointerDown;
+		$[23] = onPointerMove;
+		$[24] = onReset;
+		$[25] = t7;
+		$[26] = width;
+		$[27] = t8;
+	} else t8 = $[27];
+	return t8;
+}
+//#endregion
+//#region src/configurator/FontRoleCard.tsx
+const unquote = (family) => family.trim().replace(/^["']|["']$/g, "");
+/** Generic stacks that are available everywhere, for apps without their own fonts. */
+const systemFonts = [
+	{
+		name: "system:sans",
+		label: "System sans-serif",
+		value: "system-ui, sans-serif",
+		group: "System fonts"
+	},
+	{
+		name: "system:serif",
+		label: "System serif",
+		value: "ui-serif, Georgia, serif",
+		group: "System fonts"
+	},
+	{
+		name: "system:mono",
+		label: "System monospace",
+		value: "ui-monospace, monospace",
+		group: "System fonts"
+	}
+];
+/**
+* The font families the app has loaded (its `@font-face` rules, such as Fontsource packages). A family with a matching
+* `--font-<name>-base` variable is referenced through it, so the theme keeps a single place that names the font.
+*/
+function useLoadedFonts() {
+	const $ = c(7);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [fonts, setFonts] = useState(t0);
+	const [revision, setRevision] = useState(0);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => setRevision(_temp$1);
+		$[1] = t1;
+	} else t1 = $[1];
+	const refresh = t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => {
+			let active = true;
+			document.fonts.ready.then(() => {
+				if (!active) return;
+				const root = getComputedStyle(document.documentElement);
+				const families = [...new Set([...document.fonts].map(_temp2))];
+				setFonts(families.map((family) => {
+					const base = `--font-${family.split(/\s+/)[0].toLowerCase()}-base`;
+					const value_0 = unquote(root.getPropertyValue(base)) === family ? `var(${base}), sans-serif` : `"${family}", sans-serif`;
+					const group = uploadedFamilies.has(family) ? "Uploaded fonts" : "Loaded fonts";
+					return {
+						name: `loaded:${family}`,
+						label: familyName(value_0),
+						value: value_0,
+						group
+					};
+				}));
+			});
+			return () => {
+				active = false;
+			};
+		};
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== revision) {
+		t3 = [revision];
+		$[3] = revision;
+		$[4] = t3;
+	} else t3 = $[4];
+	useEffect(t2, t3);
+	let t4;
+	if ($[5] !== fonts) {
+		t4 = [fonts, refresh];
+		$[5] = fonts;
+		$[6] = t4;
+	} else t4 = $[6];
+	return t4;
+}
+/** Families added through the upload button in this page session. */
+function _temp2(face) {
+	return unquote(face.family);
+}
+function _temp$1(value) {
+	return value + 1;
+}
+const uploadedFamilies = /* @__PURE__ */ new Set();
+const fontFileTypes = ".woff2,.woff,.ttf,.otf";
+/**
+* Registers a font file with the page through the FontFace API, so it can be picked for a role and previewed right
+* away. The family is named after the file. It lasts for this page session; the app still needs the file and an
+* `@font-face` rule for a saved theme to use it.
+*/
+function FontUpload(t0) {
+	const $ = c(8);
+	const { onUpload } = t0;
+	const inputRef = useRef(null);
+	const [message, setMessage] = useState("");
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "studio-gallery-back",
+			onClick: () => inputRef.current?.click(),
+			children: [/* @__PURE__ */ jsx(Upload, {
+				size: 13,
+				"aria-hidden": "true"
+			}), "Upload font"]
+		});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== onUpload) {
+		t2 = /* @__PURE__ */ jsx("input", {
+			ref: inputRef,
+			type: "file",
+			accept: fontFileTypes,
+			hidden: true,
+			onChange: async (event) => {
+				const file = event.target.files?.[0];
+				event.target.value = "";
+				if (!file) return;
+				const family = file.name.replace(/\.[^.]+$/, "").replace(/[-_]+/g, " ").trim();
+				try {
+					const face = await new FontFace(family, await file.arrayBuffer()).load();
+					document.fonts.add(face);
+					uploadedFamilies.add(family);
+					onUpload(family);
+					setMessage(`Added ${family}. Pick it for Heading or Body above.`);
+				} catch {
+					setMessage(`${file.name} is not a font this browser can read. Use WOFF2, WOFF, TTF or OTF.`);
+				}
+			}
+		});
+		$[1] = onUpload;
+		$[2] = t2;
+	} else t2 = $[2];
+	const t3 = message || "WOFF2, WOFF, TTF or OTF. Uploaded fonts last for this session; add the file to your app with @font-face before saving the theme.";
+	let t4;
+	if ($[3] !== t3) {
+		t4 = /* @__PURE__ */ jsx("p", {
+			className: "studio-font-upload-note",
+			role: "status",
+			children: t3
+		});
+		$[3] = t3;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== t2 || $[6] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: "studio-font-upload",
+			children: [
+				t1,
+				t2,
+				t4
+			]
+		});
+		$[5] = t2;
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
+	return t5;
+}
+/** The family name a font stack starts with, such as "Inter" for `var(--font-inter-base), sans-serif`. */
+function familyName(value) {
+	const first = value.split(",")[0].trim();
+	return (first.match(/^var\(--font-([\w-]+?)(?:-base)?\)$/)?.[1] ?? unquote(first)).replace(/(^|-)(\w)/g, (_, dash, letter) => `${dash ? " " : ""}${letter.toUpperCase()}`);
+}
+/**
+* A font role (heading, body) shown as a card with its family name and a sample; the whole card opens a list of the
+* theme's font families, like a design tool's font picker.
+*/
+function FontRoleCard(t0) {
+	const $ = c(44);
+	const { label, value, options, changed, onChange, onReset } = t0;
+	let t1;
+	if ($[0] !== options || $[1] !== value) {
+		let t2;
+		if ($[3] !== value) {
+			t2 = (option) => option.value === value;
+			$[3] = value;
+			$[4] = t2;
+		} else t2 = $[4];
+		t1 = options.find(t2);
+		$[0] = options;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	const selected = t1;
+	let t2;
+	if ($[5] !== label) {
+		t2 = /* @__PURE__ */ jsx("span", { children: label });
+		$[5] = label;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== selected?.label || $[8] !== value) {
+		t3 = selected?.label ?? familyName(value);
+		$[7] = selected?.label;
+		$[8] = value;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx("strong", { children: t3 });
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== t2 || $[13] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("span", {
+			className: "studio-font-role-text",
+			children: [t2, t4]
+		});
+		$[12] = t2;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== value) {
+		t6 = /* @__PURE__ */ jsx("span", {
+			className: "studio-font-role-sample",
+			style: { fontFamily: value },
+			"aria-hidden": "true",
+			children: "Aa"
+		});
+		$[15] = value;
+		$[16] = t6;
+	} else t6 = $[16];
+	const t7 = `${label} font`;
+	const t8 = selected?.name ?? "";
+	let t9;
+	if ($[17] !== onChange || $[18] !== options) {
+		t9 = (event) => {
+			const option_0 = options.find((t10) => {
+				const { name } = t10;
+				return name === event.target.value;
+			});
+			if (option_0) onChange(option_0.value);
+		};
+		$[17] = onChange;
+		$[18] = options;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== selected) {
+		t10 = !selected && /* @__PURE__ */ jsx("option", {
+			value: "",
+			disabled: true,
+			children: "Custom"
+		});
+		$[20] = selected;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== options) {
+		t11 = new Set(options.map(_temp3));
+		$[22] = options;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t11) {
+		t12 = [...t11];
+		$[24] = t11;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== options || $[27] !== t12) {
+		t13 = t12.map((group_0) => /* @__PURE__ */ jsx("optgroup", {
+			label: group_0,
+			children: options.filter((option_1) => option_1.group === group_0).map(_temp4)
+		}, group_0));
+		$[26] = options;
+		$[27] = t12;
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] !== t10 || $[30] !== t13 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9) {
+		t14 = /* @__PURE__ */ jsxs("select", {
+			className: "studio-font-role-select",
+			"aria-label": t7,
+			value: t8,
+			onChange: t9,
+			children: [t10, t13]
+		});
+		$[29] = t10;
+		$[30] = t13;
+		$[31] = t7;
+		$[32] = t8;
+		$[33] = t9;
+		$[34] = t14;
+	} else t14 = $[34];
+	let t15;
+	if ($[35] !== changed || $[36] !== label || $[37] !== onReset) {
+		t15 = changed && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "studio-font-role-reset",
+			"aria-label": `Reset ${label} font`,
+			title: "Reset to the theme default",
+			onClick: onReset,
+			children: /* @__PURE__ */ jsx(RotateCcw, {
+				size: 13,
+				"aria-hidden": "true"
+			})
+		});
+		$[35] = changed;
+		$[36] = label;
+		$[37] = onReset;
+		$[38] = t15;
+	} else t15 = $[38];
+	let t16;
+	if ($[39] !== t14 || $[40] !== t15 || $[41] !== t5 || $[42] !== t6) {
+		t16 = /* @__PURE__ */ jsxs("div", {
+			className: "studio-font-role",
+			children: [
+				t5,
+				t6,
+				t14,
+				t15
+			]
+		});
+		$[39] = t14;
+		$[40] = t15;
+		$[41] = t5;
+		$[42] = t6;
+		$[43] = t16;
+	} else t16 = $[43];
+	return t16;
+}
+function _temp4(option_2) {
+	return /* @__PURE__ */ jsx("option", {
+		value: option_2.name,
+		children: option_2.label
+	}, option_2.name);
+}
+function _temp3(t0) {
+	const { group } = t0;
+	return group;
+}
+//#endregion
+//#region src/configurator/LayoutScaleControl.tsx
+const copy = {
+	Radius: {
+		title: "Global rounding",
+		description: "Scales every radius from the theme defaults"
+	},
+	Spacing: {
+		title: "Global spacing",
+		description: "Scales padding and gaps from the theme defaults"
+	},
+	Sizing: {
+		title: "Global sizing",
+		description: "Scales button and input heights, avatars, icons, minimum widths and container widths"
+	},
+	"Font size": {
+		title: "Global font size",
+		description: "Scales every text style; line heights follow"
+	}
+};
+/**
+* Steps every token of a layout tab up or down together. A custom level means individual tokens were edited, so the
+* next step starts again from the theme defaults.
+*/
+function LayoutScaleControl(t0) {
+	const $ = c(50);
+	const { kind, level, onChange } = t0;
+	const { levels, defaultLevel } = layoutScales[kind];
+	const current = level ?? defaultLevel;
+	const factor = level === void 0 ? 1 : levels[level].factor;
+	const { title, description } = copy[kind];
+	let t1;
+	if ($[0] !== kind) {
+		t1 = kind.toLowerCase().replace(" ", "-");
+		$[0] = kind;
+		$[1] = t1;
+	} else t1 = $[1];
+	const t2 = `studio-rounding-preview studio-scale-preview-${t1}`;
+	let t3;
+	if ($[2] !== factor || $[3] !== kind) {
+		t3 = kind === "Radius" ? { borderTopLeftRadius: factor === Infinity ? "999px" : `${factor * 6}px` } : kind === "Spacing" ? { gap: `${Math.round(factor * 4)}px` } : kind === "Font size" ? { fontSize: `${Math.round(factor * 14)}px` } : { scale: String(factor) };
+		$[2] = factor;
+		$[3] = kind;
+		$[4] = t3;
+	} else t3 = $[4];
+	const t4 = kind === "Font size" && "Aa";
+	let t5;
+	if ($[5] !== kind) {
+		t5 = kind === "Spacing" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("i", {}), /* @__PURE__ */ jsx("i", {})] });
+		$[5] = kind;
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== t2 || $[8] !== t3 || $[9] !== t4 || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("span", {
+			className: t2,
+			"aria-hidden": "true",
+			style: t3,
+			children: [t4, t5]
+		});
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== title) {
+		t7 = /* @__PURE__ */ jsx("strong", { children: title });
+		$[12] = title;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== description) {
+		t8 = /* @__PURE__ */ jsx("span", { children: description });
+		$[14] = description;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t7 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("div", {
+			className: "studio-rounding-text",
+			children: [t7, t8]
+		});
+		$[16] = t7;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== title) {
+		t10 = title.toLowerCase();
+		$[19] = title;
+		$[20] = t10;
+	} else t10 = $[20];
+	const t11 = `Decrease ${t10}`;
+	const t12 = level === 0;
+	let t13;
+	if ($[21] !== current || $[22] !== onChange) {
+		t13 = () => onChange(current - 1);
+		$[21] = current;
+		$[22] = onChange;
+		$[23] = t13;
+	} else t13 = $[23];
+	let t14;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(Minus, {
+			size: 13,
+			"aria-hidden": "true"
+		});
+		$[24] = t14;
+	} else t14 = $[24];
+	let t15;
+	if ($[25] !== t11 || $[26] !== t12 || $[27] !== t13) {
+		t15 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": t11,
+			disabled: t12,
+			onClick: t13,
+			children: t14
+		});
+		$[25] = t11;
+		$[26] = t12;
+		$[27] = t13;
+		$[28] = t15;
+	} else t15 = $[28];
+	const t16 = level === void 0 ? "Custom" : levels[level].label;
+	let t17;
+	if ($[29] !== t16) {
+		t17 = /* @__PURE__ */ jsx("output", {
+			"aria-live": "polite",
+			children: t16
+		});
+		$[29] = t16;
+		$[30] = t17;
+	} else t17 = $[30];
+	let t18;
+	if ($[31] !== title) {
+		t18 = title.toLowerCase();
+		$[31] = title;
+		$[32] = t18;
+	} else t18 = $[32];
+	const t19 = `Increase ${t18}`;
+	const t20 = level === levels.length - 1;
+	let t21;
+	if ($[33] !== current || $[34] !== onChange) {
+		t21 = () => onChange(current + 1);
+		$[33] = current;
+		$[34] = onChange;
+		$[35] = t21;
+	} else t21 = $[35];
+	let t22;
+	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = /* @__PURE__ */ jsx(Plus, {
+			size: 13,
+			"aria-hidden": "true"
+		});
+		$[36] = t22;
+	} else t22 = $[36];
+	let t23;
+	if ($[37] !== t19 || $[38] !== t20 || $[39] !== t21) {
+		t23 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": t19,
+			disabled: t20,
+			onClick: t21,
+			children: t22
+		});
+		$[37] = t19;
+		$[38] = t20;
+		$[39] = t21;
+		$[40] = t23;
+	} else t23 = $[40];
+	let t24;
+	if ($[41] !== t15 || $[42] !== t17 || $[43] !== t23) {
+		t24 = /* @__PURE__ */ jsxs("div", {
+			className: "studio-rounding-stepper",
+			children: [
+				t15,
+				t17,
+				t23
+			]
+		});
+		$[41] = t15;
+		$[42] = t17;
+		$[43] = t23;
+		$[44] = t24;
+	} else t24 = $[44];
+	let t25;
+	if ($[45] !== t24 || $[46] !== t6 || $[47] !== t9 || $[48] !== title) {
+		t25 = /* @__PURE__ */ jsxs("div", {
+			className: "studio-rounding",
+			role: "group",
+			"aria-label": title,
+			children: [
+				t6,
+				t9,
+				t24
+			]
+		});
+		$[45] = t24;
+		$[46] = t6;
+		$[47] = t9;
+		$[48] = title;
+		$[49] = t25;
+	} else t25 = $[49];
+	return t25;
+}
+//#endregion
+//#region src/configurator/presets.ts
+/** Both copies of a token that Tailwind reads as `--spacing-*` (padding, height) and `--container-*` (width). */
+const layoutPair = (name, value) => ({
+	[`--spacing-${name}`]: value,
+	[`--container-${name}`]: value
+});
+/** Tailwind's neutral scale, as RGB channels for one of the theme's base palettes. */
+const neutralPalette = (palette) => Object.fromEntries(Object.entries({
+	50: "250 250 250",
+	100: "245 245 245",
+	200: "229 229 229",
+	300: "212 212 212",
+	400: "161 161 161",
+	500: "115 115 115",
+	600: "82 82 82",
+	700: "64 64 64",
+	800: "38 38 38",
+	900: "23 23 23",
+	950: "10 10 10"
+}).map(([step, value]) => [`--${palette}-${step}-base`, value]));
+const themePresets = [{
+	id: "shadcn",
+	label: "shadcn/ui",
+	description: "Neutral palette, near-black primary, Geist 14px, 8px controls radius, 36px buttons and inputs.",
+	edits: {
+		light: {
+			...neutralPalette("primary"),
+			...neutralPalette("neutral"),
+			"--surface-default-background-base": "var(--neutral-10-base)",
+			"--surface-default-card-base": "var(--neutral-10-base)",
+			"--surface-default-card-foreground-base": "var(--neutral-950-base)",
+			"--surface-default-foreground-base": "var(--neutral-950-base)",
+			"--surface-default-popover-foreground-base": "var(--neutral-500-base)",
+			"--border-default-subtle-base": "var(--neutral-200-base)",
+			"--border-default-input-base": "var(--neutral-200-base)",
+			"--interactive-primary-background-base": "var(--neutral-900-base)",
+			"--interactive-primary-foreground-base": "var(--neutral-50-base)",
+			"--interactive-subtle-primary-background-base": "var(--neutral-100-base)",
+			"--interactive-subtle-primary-foreground-base": "var(--neutral-900-base)",
+			"--interactive-subtle-secondary-background-base": "var(--neutral-100-base)",
+			"--interactive-subtle-secondary-foreground-base": "var(--neutral-900-base)",
+			"--interactive-ring-base": "var(--neutral-400-base)",
+			"--states-hover-opacity": "10%"
+		},
+		dark: {
+			"--surface-default-background-base": "var(--neutral-950-base)",
+			"--surface-default-card-base": "var(--neutral-900-base)",
+			"--surface-default-card-foreground-base": "var(--neutral-50-base)",
+			"--surface-default-foreground-base": "var(--neutral-50-base)",
+			"--surface-default-popover-foreground-base": "var(--neutral-400-base)",
+			"--border-default-subtle-base": "var(--neutral-800-base)",
+			"--border-default-input-base": "var(--neutral-700-base)",
+			"--interactive-primary-background-base": "var(--neutral-200-base)",
+			"--interactive-primary-foreground-base": "var(--neutral-900-base)",
+			"--interactive-subtle-primary-background-base": "var(--neutral-800-base)",
+			"--interactive-subtle-primary-foreground-base": "var(--neutral-50-base)",
+			"--interactive-subtle-secondary-background-base": "var(--neutral-800-base)",
+			"--interactive-subtle-secondary-foreground-base": "var(--neutral-50-base)",
+			"--interactive-ring-base": "var(--neutral-500-base)",
+			"--states-hover-opacity": "10%"
+		},
+		theme: {
+			"--font-titles": "var(--font-geist-base, \"Geist Variable\"), sans-serif",
+			"--font-body": "var(--font-geist-base, \"Geist Variable\"), sans-serif",
+			"--text-body": "0.875rem",
+			"--text-body--line-height": "1.4286",
+			"--radius-global-rounding-xs": "0.25rem",
+			"--radius-global-rounding-s": "0.375rem",
+			"--radius-global-rounding-m": "0.5rem",
+			"--radius-global-rounding-l": "0.625rem",
+			"--radius-global-rounding-xl": "0.875rem",
+			"--radius-button-rounding-default": "0.5rem",
+			"--radius-button-rounding-small": "0.5rem",
+			"--radius-button-focus-rounding-default": "0.625rem",
+			"--radius-button-focus-rounding-small": "0.625rem",
+			"--radius-input-rounding-default": "0.5rem",
+			"--radius-floating-label-input-rounding-default": "0.5rem",
+			"--radius-list-rounding-dropdown": "0.5rem",
+			"--radius-tooltip-rounding-default": "0.5rem",
+			"--radius-badge-rounding-default": "0.5rem",
+			"--radius-toast-rounding-default": "0.5rem",
+			"--radius-modal-rounding-default": "0.625rem",
+			"--radius-alert-rounding-default": "0.625rem",
+			"--radius-file-upload-container-rounding-default": "0.625rem",
+			"--radius-file-upload-file-card-rounding-default": "0.5rem",
+			"--radius-segmented-control-rounding-segment": "0.5rem",
+			"--radius-segmented-control-rounding-segmented-control": "0.625rem",
+			...layoutPair("button-height-default", "0.4375rem"),
+			...layoutPair("button-height-small", "0.3125rem"),
+			...layoutPair("button-side-default", "1rem"),
+			...layoutPair("button-side-small", "0.75rem")
+		}
+	}
+}, {
+	id: "compact",
+	label: "Compact",
+	description: "Keeps your colors and fonts. 36px default and 28px small controls, padding and gaps at ×0.75.",
+	edits: (defaults) => ({
+		light: {},
+		dark: {},
+		theme: {
+			...layoutScales.Spacing.scale(defaults, spacingLevels.findIndex(({ factor }) => factor === .75)),
+			...layoutPair("button-height-default", "0.4375rem"),
+			...layoutPair("button-height-small", "0.1875rem")
+		}
+	})
+}];
+/**
+* A preset's edits for this theme: tokens the theme does not define are skipped, and values equal to the theme's own
+* are left out, so the result reads like edits made by hand.
+*/
+function presetEdits(preset, defaults) {
+	const edits = emptyTheme();
+	const values = typeof preset.edits === "function" ? preset.edits(defaults) : preset.edits;
+	for (const bucket of [
+		"light",
+		"dark",
+		"theme"
+	]) for (const [name, value] of Object.entries(values[bucket])) if (name in defaults[bucket] && defaults[bucket][name] !== value) edits[bucket][name] = value;
+	return edits;
+}
+/** Whether the current edits are exactly this preset applied to the theme. */
+function isPresetActive(preset, defaults, current) {
+	const expected = presetEdits(preset, defaults);
+	return [
+		"light",
+		"dark",
+		"theme"
+	].every((bucket) => {
+		const [a, b] = [expected[bucket], current[bucket]];
+		return Object.keys(a).length === Object.keys(b).length && Object.entries(a).every(([name, value]) => b[name] === value);
+	});
+}
+//#endregion
+//#region src/configurator/ShadesGenerator.tsx
+/**
+* Generates a whole base palette scale from one color, which becomes its 500 step.
+*/
+function ShadesGenerator(t0) {
+	const $ = c(52);
+	const { title, steps, initial, onApply } = t0;
+	let t1;
+	if ($[0] !== initial) {
+		t1 = isRgb(initial) ? toHex(initial).slice(1).toUpperCase() : "";
+		$[0] = initial;
+		$[1] = t1;
+	} else t1 = $[1];
+	const [text, setText] = useState(t1);
+	let base;
+	let pending;
+	let shades;
+	let t10;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	if ($[2] !== initial || $[3] !== steps || $[4] !== text || $[5] !== title) {
+		const hex = text.trim().replace(/^#/, "");
+		base = /^[0-9a-f]{6}$/i.test(hex) ? toRgb(`#${hex}`) : /^[0-9a-f]{3}$/i.test(hex) ? toRgb(`#${hex.replace(/./g, "$&$&")}`) : null;
+		shades = base ? generateShades(base, steps.map(_temp)) : null;
+		pending = !!shades && base !== initial;
+		t8 = "studio-shades";
+		t9 = "group";
+		t10 = `Generate ${title} shades`;
+		t5 = "studio-shades-input";
+		const t11 = `shades-${title}`;
+		if ($[18] !== t11) {
+			t6 = /* @__PURE__ */ jsx("label", {
+				htmlFor: t11,
+				children: "Base color (500)"
+			});
+			$[18] = t11;
+			$[19] = t6;
+		} else t6 = $[19];
+		let t12;
+		if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+			t12 = /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: "#"
+			});
+			$[20] = t12;
+		} else t12 = $[20];
+		const t13 = `shades-${title}`;
+		const t14 = !base;
+		let t15;
+		if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+			t15 = (event) => setText(event.target.value.replace(/^#/, ""));
+			$[21] = t15;
+		} else t15 = $[21];
+		if ($[22] !== t13 || $[23] !== t14 || $[24] !== text) {
+			t7 = /* @__PURE__ */ jsxs("span", {
+				className: "studio-token-input",
+				children: [t12, /* @__PURE__ */ jsx("input", {
+					id: t13,
+					value: text,
+					"aria-invalid": t14,
+					spellCheck: false,
+					onChange: t15
+				})]
+			});
+			$[22] = t13;
+			$[23] = t14;
+			$[24] = text;
+			$[25] = t7;
+		} else t7 = $[25];
+		t2 = "color";
+		t3 = "Pick base color";
+		t4 = base ? toHex(base) : "#000000";
+		$[2] = initial;
+		$[3] = steps;
+		$[4] = text;
+		$[5] = title;
+		$[6] = base;
+		$[7] = pending;
+		$[8] = shades;
+		$[9] = t10;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t7;
+		$[16] = t8;
+		$[17] = t9;
+	} else {
+		base = $[6];
+		pending = $[7];
+		shades = $[8];
+		t10 = $[9];
+		t2 = $[10];
+		t3 = $[11];
+		t4 = $[12];
+		t5 = $[13];
+		t6 = $[14];
+		t7 = $[15];
+		t8 = $[16];
+		t9 = $[17];
+	}
+	let t11;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = (event_0) => setText(event_0.target.value.slice(1).toUpperCase());
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== t2 || $[28] !== t3 || $[29] !== t4) {
+		t12 = /* @__PURE__ */ jsx("input", {
+			type: t2,
+			"aria-label": t3,
+			value: t4,
+			onChange: t11
+		});
+		$[27] = t2;
+		$[28] = t3;
+		$[29] = t4;
+		$[30] = t12;
+	} else t12 = $[30];
+	const t13 = !pending;
+	let t14;
+	if ($[31] !== onApply || $[32] !== shades || $[33] !== steps) {
+		t14 = () => {
+			if (shades) onApply(Object.fromEntries(steps.map((t15) => {
+				const { name, step: step_0 } = t15;
+				return [name, shades[step_0]];
+			})));
+		};
+		$[31] = onApply;
+		$[32] = shades;
+		$[33] = steps;
+		$[34] = t14;
+	} else t14 = $[34];
+	let t15;
+	if ($[35] !== t13 || $[36] !== t14) {
+		t15 = /* @__PURE__ */ jsx("div", {
+			className: "studio-shades-actions",
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "studio-primary",
+				disabled: t13,
+				onClick: t14,
+				children: "Change shades"
+			})
+		});
+		$[35] = t13;
+		$[36] = t14;
+		$[37] = t15;
+	} else t15 = $[37];
+	let t16;
+	if ($[38] !== t12 || $[39] !== t15 || $[40] !== t5 || $[41] !== t6 || $[42] !== t7) {
+		t16 = /* @__PURE__ */ jsxs("div", {
+			className: t5,
+			children: [
+				t6,
+				t7,
+				t12,
+				t15
+			]
+		});
+		$[38] = t12;
+		$[39] = t15;
+		$[40] = t5;
+		$[41] = t6;
+		$[42] = t7;
+		$[43] = t16;
+	} else t16 = $[43];
+	let t17;
+	if ($[44] !== base) {
+		t17 = !base && /* @__PURE__ */ jsx("p", {
+			className: "studio-error",
+			children: "Enter a hex color such as #75ACFF."
+		});
+		$[44] = base;
+		$[45] = t17;
+	} else t17 = $[45];
+	let t18;
+	if ($[46] !== t10 || $[47] !== t16 || $[48] !== t17 || $[49] !== t8 || $[50] !== t9) {
+		t18 = /* @__PURE__ */ jsxs("div", {
+			className: t8,
+			role: t9,
+			"aria-label": t10,
+			children: [t16, t17]
+		});
+		$[46] = t10;
+		$[47] = t16;
+		$[48] = t17;
+		$[49] = t8;
+		$[50] = t9;
+		$[51] = t18;
+	} else t18 = $[51];
+	return t18;
+}
+function _temp(t0) {
+	const { step } = t0;
+	return step;
+}
+//#endregion
+//#region src/configurator/UIConfigurator.tsx
+const colorNamespaces = {
+	surface: "Surfaces",
+	border: "Borders",
+	interactive: "Interactive",
+	support: "Support",
+	states: "States",
+	shadow: "Shadows"
+};
+const componentNamespaces = [
+	["floating-label-input", "Floating label inputs"],
+	["file-upload", "File upload"],
+	["segmented-control", "Segmented controls"],
+	["global", "Global"],
+	["button", "Buttons"],
+	["input", "Inputs"],
+	["list", "Lists"],
+	["modal", "Modals"],
+	["toast", "Toasts"],
+	["tooltip", "Tooltips"],
+	["avatar", "Avatars"],
+	["table", "Tables"],
+	["alert", "Alerts"],
+	["badge", "Badges"],
+	["pill", "Pills"],
+	["progress", "Progress"],
+	["slider", "Sliders"],
+	["stepper", "Steppers"],
+	["accordion", "Accordions"],
+	["breadcrumbs", "Breadcrumbs"],
+	["pagination", "Pagination"],
+	["icons", "Icons"],
+	["icon", "Icons"]
+];
+function componentToken(name) {
+	const token = name.replace(/^--(?:spacing|radius|container)-/, "");
+	const namespace = componentNamespaces.find(([prefix]) => token === prefix || token.startsWith(`${prefix}-`));
+	return {
+		title: namespace?.[1] ?? "Base scale",
+		label: (namespace ? token.slice(namespace[0].length + 1) : token).replace(/(?:^|-)rounding-/g, "-").replace(/^-/, "").replaceAll("-", " ")
+	};
+}
+function effectToken(name) {
+	const namespace = [
+		["--drop-shadow-", "Drop shadows"],
+		["--shadow-", "Shadows"],
+		["--blur-", "Blur"]
+	].find(([prefix]) => name.startsWith(prefix));
+	const label = namespace ? name.slice(namespace[0].length).replaceAll("-", " ") : labelFor(name);
+	return {
+		title: namespace?.[1] ?? "Other effects",
+		label: /^\d+$/.test(label) ? `Level ${label}` : label
+	};
+}
+const textStylesTab = "Text styles";
+/** Text styles share a tab; font families, weights and letter spacing each get their own. */
+const typographyTabFor = (groupKey) => groupKey.startsWith("--text-") ? textStylesTab : groupKey;
+const baseSystemTab = "Base system";
+const semanticPaletteTab = "Semantic palette";
+/** Radius, spacing and sizing share one Layout tab, with a sub-tab each. */
+const navSections = [
+	"Colors",
+	"Typography",
+	"Layout",
+	"Effects"
+];
+const isLayoutKind = (section) => layoutKinds.includes(section);
+/** The editor section that lists a token; font sizes open in Typography, their home section. */
+function sectionFor(name) {
+	const kind = layoutKindFor(name);
+	return kind && kind !== "Font size" ? kind : groupFor(name);
+}
+/** Presets, component defaults, CVA overrides and export share one Advanced tab, with a sub-tab each. */
+const advancedSections = [
+	["Presets", "Presets"],
+	["Components", "Defaults & behavior"],
+	["Variants & overrides", "Variants & overrides"],
+	["Export", "Export"]
+];
+const isAdvancedSection = (section) => advancedSections.some(([key]) => key === section);
+/** The app's own theme, so a preset can be undone without resetting component settings. */
+const appThemePreset = {
+	id: "app",
+	label: "App theme",
+	description: "The theme defined in this app's theme.css, without edits.",
+	edits: {
+		light: {},
+		dark: {},
+		theme: {}
+	}
+};
+/** Sections that list theme tokens; Font size lists the Typography font sizes again under Layout. */
+const isTokenSection = (section) => groups.includes(section) || isLayoutKind(section);
+/** The editor group a token is listed under within its section. */
+function groupKeyFor(section, name, defaults) {
+	const textStyle = section === "Typography" ? name.match(/^--text-(.+?)(?:--.+)?$/)?.[1] : void 0;
+	return textStyle ? `--text-${textStyle}` : section === "Typography" ? name.startsWith("--font-weight-") ? "Font weights" : name.startsWith("--font-") ? "Font families" : "Letter spacing" : section === "Colors" ? baseColorNames(defaults).has(name) ? `Base system · ${name.slice(2).split("-")[0]}` : colorNamespaces[name.slice(2).split("-")[0]] ?? "Other" : section === "Spacing" || section === "Radius" || section === "Sizing" ? componentToken(name).title : section === "Effects" ? effectToken(name).title : "tokens";
+}
+const ComponentGallery = lazy(() => import("../ComponentGallery-BWiPGUL8.js"));
+function ComponentPreview(t0) {
+	const $ = c(14);
+	const { value, mode, inspector } = t0;
+	const { defaults } = useUIConfiguration();
+	const t1 = value.config;
+	const t2 = `studio-sample ${mode}`;
+	let t3;
+	if ($[0] !== defaults || $[1] !== mode || $[2] !== value.theme) {
+		t3 = previewTokens(defaults, value.theme, mode);
+		$[0] = defaults;
+		$[1] = mode;
+		$[2] = value.theme;
+		$[3] = t3;
+	} else t3 = $[3];
+	const t4 = t3;
+	let t5;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx("p", {
+			className: "studio-gallery-loading",
+			children: "Loading components…"
+		});
+		$[4] = t5;
+	} else t5 = $[4];
+	let t6;
+	if ($[5] !== inspector) {
+		t6 = /* @__PURE__ */ jsx(Suspense, {
+			fallback: t5,
+			children: /* @__PURE__ */ jsx(ComponentGallery, { inspector })
+		});
+		$[5] = inspector;
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] !== t2 || $[8] !== t4 || $[9] !== t6) {
+		t7 = /* @__PURE__ */ jsx("div", {
+			className: t2,
+			style: t4,
+			"data-testid": "component-preview",
+			children: t6
+		});
+		$[7] = t2;
+		$[8] = t4;
+		$[9] = t6;
+		$[10] = t7;
+	} else t7 = $[10];
+	let t8;
+	if ($[11] !== t7 || $[12] !== value.config) {
+		t8 = /* @__PURE__ */ jsx(UIConfig.Provider, {
+			config: t1,
+			children: t7
+		});
+		$[11] = t7;
+		$[12] = value.config;
+		$[13] = t8;
+	} else t8 = $[13];
+	return t8;
+}
+/** Changing a text style's font size sets its line height to this multiple of it; the line height stays editable. */
+const fontSizeLineHeight = "1.5";
+const remPresets = [
+	0,
+	.0625,
+	.125,
+	.1875,
+	.25,
+	.375,
+	.5,
+	.625,
+	.75,
+	.875,
+	1,
+	1.25,
+	1.5,
+	2,
+	2.5,
+	3,
+	4,
+	5,
+	6
+];
+function TokenField({ name, value, original, changed, onChange, onReset, onValidity, invalidValue, compactLabel, sizeUnit, fontSize, highlighted, paletteOptions, aliasOptions }) {
+	const [text, setText] = useState(invalidValue ?? value);
+	const [invalid, setInvalid] = useState(invalidValue !== void 0);
+	const [editingText, setEditingText] = useState(null);
+	const [customPaletteValue, setCustomPaletteValue] = useState(invalidValue !== void 0);
+	const [syncedValue, setSyncedValue] = useState(value);
+	if (value !== syncedValue) {
+		setSyncedValue(value);
+		if (!invalid) setText(value);
+	}
+	const hasSizePresets = /^-?(?:\d*\.)?\d+(?:rem|px)$/.test(original) || !!aliasOptions?.length;
+	const literalSize = hasSizePresets ? text.trim().match(/^(-?(?:\d*\.)?\d+)(rem|px)$/) : null;
+	const rootFontSize = typeof document === "undefined" ? 16 : parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+	const storedUnit = original.endsWith("px") ? "px" : "rem";
+	const toStoredUnit = (amount, unit) => `${Number((unit === storedUnit ? amount : unit === "px" ? amount / rootFontSize : amount * rootFontSize).toFixed(6))}${storedUnit}`;
+	const fontSizePx = fontSize?.trim().match(/^(-?(?:\d*\.)?\d+)(rem|px)$/);
+	const fontPx = fontSizePx ? Number(fontSizePx[1]) * (fontSizePx[2] === "rem" ? rootFontSize : 1) : 0;
+	const relativeSuffix = name.endsWith("--line-height") ? "" : name.endsWith("--letter-spacing") ? "em" : null;
+	const relativeSize = sizeUnit === "px" && fontPx && relativeSuffix !== null ? text.trim().match(new RegExp(`^(-?(?:\\d*\\.)?\\d+)${relativeSuffix}$`)) : null;
+	const displayedSize = literalSize ? `${Number((Number(literalSize[1]) * (literalSize[2] === sizeUnit ? 1 : sizeUnit === "px" ? rootFontSize : 1 / rootFontSize)).toFixed(6))}` : relativeSize ? `${Number((Number(relativeSize[1]) * fontPx).toFixed(2))}` : text;
+	const alias = aliasOptions?.find((option) => text.trim() === `var(${option.name})`);
+	const inUnit = (size) => {
+		const match = size.trim().match(/^(-?(?:\d*\.)?\d+)(rem|px)$/);
+		if (!match) return size;
+		const amount_0 = Number(match[1]) * (match[2] === sizeUnit ? 1 : sizeUnit === "px" ? rootFontSize : 1 / rootFontSize);
+		return `${Number(amount_0.toFixed(4))}${sizeUnit}`;
+	};
+	const rgb = isRgb(original);
+	const displayed = alias ? alias.label : rgb && !invalid && isRgb(text) ? toHex(text).toUpperCase() : displayedSize;
+	const showsUnit = literalSize || relativeSize || alias;
+	const color = rgb || /^#[0-9a-f]{6}$/i.test(original);
+	const alphaColor = isAlphaHex(original) && isAlphaHex(text);
+	const paletteAlias = !!paletteOptions?.length && /^var\(--[\w-]+\)$/.test(original);
+	const selectedPalette = text.match(/^var\((--[\w-]+)\)$/)?.[1];
+	const selectedOption = paletteOptions?.find((option_0) => option_0.name === selectedPalette);
+	const showCustomValue = !paletteAlias || customPaletteValue || !selectedOption;
+	const update = (next) => {
+		setText(next);
+		if (paletteAlias) setCustomPaletteValue(!paletteOptions?.some((option_1) => `var(${option_1.name})` === next));
+		const valid = validToken(name, next, original);
+		setInvalid(!valid);
+		onValidity(name, !valid, next);
+		if (valid) onChange(next);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `studio-token ${changed ? "is-changed" : ""} ${highlighted ? "is-highlighted" : ""}`,
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				htmlFor: paletteAlias && !showCustomValue ? `palette-${name}` : `token-${name}`,
+				children: /* @__PURE__ */ jsx("span", { children: compactLabel ?? labelFor(name) })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "studio-token-value",
+				children: [
+					color && /* @__PURE__ */ jsx("input", {
+						"aria-label": `Pick ${labelFor(name)}`,
+						type: "color",
+						value: rgb ? toHex(value) : value,
+						onChange: (event) => update(rgb ? toRgb(event.target.value) : event.target.value)
+					}),
+					paletteAlias && /* @__PURE__ */ jsx(PaletteSelect, {
+						id: `palette-${name}`,
+						label: `Base color for ${labelFor(name)}`,
+						options: paletteOptions,
+						selected: showCustomValue ? "custom" : selectedOption.name,
+						onSelect: (key) => {
+							if (key === "custom") setCustomPaletteValue(true);
+							else update(`var(${key})`);
+						}
+					}),
+					alphaColor && /* @__PURE__ */ jsx(AlphaColorField, {
+						name,
+						label: labelFor(name),
+						value: text,
+						onChange: update
+					}),
+					showCustomValue && !alphaColor && /* @__PURE__ */ jsxs("span", {
+						className: "studio-token-input",
+						tabIndex: -1,
+						children: [/* @__PURE__ */ jsx("input", {
+							id: `token-${name}`,
+							"aria-label": compactLabel ? labelFor(name) : void 0,
+							value: editingText ?? displayed,
+							"aria-invalid": invalid,
+							"aria-describedby": [invalid ? `error-${name}` : "", showsUnit ? `unit-${name}` : ""].filter(Boolean).join(" ") || void 0,
+							onChange: (event_0) => setEditingText(event_0.target.value),
+							onKeyDown: (event_1) => {
+								if (event_1.key === "Enter" && !event_1.nativeEvent.isComposing) {
+									event_1.preventDefault();
+									event_1.currentTarget.parentElement?.focus();
+								}
+							},
+							onBlur: () => {
+								if (editingText === null) return;
+								const entered = editingText.trim();
+								setEditingText(null);
+								if (alias && entered === alias.label) return;
+								const hex = rgb ? entered.match(/^#?([0-9a-f]{3}|[0-9a-f]{6})$/i)?.[1] : void 0;
+								if (hex) {
+									update(toRgb(`#${hex.length === 3 ? hex.replace(/./g, "$&$&") : hex}`));
+									return;
+								}
+								const bare = /^-?(?:\d*\.)?\d+$/.test(entered);
+								update(hasSizePresets && bare ? toStoredUnit(Number(entered), sizeUnit) : relativeSize && bare ? `${Number((Number(entered) / fontPx).toFixed(4))}${relativeSuffix}` : entered);
+							},
+							spellCheck: false
+						}), showsUnit && /* @__PURE__ */ jsx("span", {
+							className: "studio-token-unit",
+							id: `unit-${name}`,
+							children: alias ? inUnit(alias.value) : sizeUnit
+						})]
+					}),
+					hasSizePresets && /* @__PURE__ */ jsxs("select", {
+						className: "studio-size-presets",
+						"aria-label": `Standard sizes for ${labelFor(name)}`,
+						title: "Choose a standard size",
+						value: "",
+						onChange: (event_2) => update(event_2.target.value.startsWith("var(") ? event_2.target.value : toStoredUnit(parseFloat(event_2.target.value), "rem")),
+						children: [
+							/* @__PURE__ */ jsx("option", {
+								value: "",
+								disabled: true,
+								children: "Choose a size"
+							}),
+							!!aliasOptions?.length && /* @__PURE__ */ jsx("optgroup", {
+								label: "Global tokens",
+								children: aliasOptions.map((option_2) => /* @__PURE__ */ jsx("option", {
+									value: `var(${option_2.name})`,
+									children: `${option_2.label} · ${inUnit(option_2.value)}`
+								}, option_2.name))
+							}),
+							/* @__PURE__ */ jsx("optgroup", {
+								label: "Standard sizes",
+								children: remPresets.map((rem) => /* @__PURE__ */ jsx("option", {
+									value: `${rem}rem`,
+									children: `${Number((rem * rootFontSize).toFixed(2))}px · ${rem}rem${name.startsWith("--spacing-") ? ` · spacing ${rem * 4}` : ""}`
+								}, rem))
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `Reset ${labelFor(name)}`,
+						disabled: !changed && !invalid,
+						onClick: () => {
+							setText(original);
+							setInvalid(false);
+							setCustomPaletteValue(false);
+							onValidity(name, false);
+							onReset();
+						},
+						children: /* @__PURE__ */ jsx(RotateCcw, { size: 13 })
+					})
+				]
+			}),
+			invalid && /* @__PURE__ */ jsx("small", {
+				id: `error-${name}`,
+				className: "studio-error",
+				children: rgb ? "Use a hex color such as #1A2B3C, or three RGB values from 0 to 255." : "Enter a valid CSS value, including units where needed."
+			})
+		]
+	});
+}
+function ConfigurationModalContent({ memory }) {
+	const inherited = UIConfig.useConfig();
+	const { defaults, draft, setDraft, isOpen, cancel, apply, revision } = useUIConfiguration();
+	const remembered = memory.current;
+	const [mode, setMode] = useState(remembered.mode ?? "light");
+	const [sizeUnit, setSizeUnit] = useState(remembered.sizeUnit ?? "px");
+	const [loadedFonts, refreshLoadedFonts] = useLoadedFonts();
+	const [editorWidth, setEditorWidth] = useState(remembered.editorWidth);
+	const [confirmingReset, setConfirmingReset] = useState(false);
+	const [nothingToReset, setNothingToReset] = useState(false);
+	const bodyRef = useRef(null);
+	const [cvaVariants, setCvaVariants] = useState({});
+	const [cvaSlot, setCvaSlot] = useState(remembered.cvaSlot ?? "button.cva");
+	const [section, setSection] = useState(remembered.section ?? "Colors");
+	const [previewMode, setPreviewMode] = useState(remembered.previewMode ?? "gallery");
+	const [search, setSearch] = useState("");
+	const [expandedGroups, setExpandedGroups] = useState(remembered.expandedGroups ?? {});
+	const [sectionTabs, setSectionTabs] = useState(remembered.sectionTabs ?? {});
+	const [resetRevision, setResetRevision] = useState(0);
+	const [invalidFields, setInvalidFields] = useState({});
+	const [message, setMessage] = useState("");
+	const [themeWriter, setThemeWriter] = useState(null);
+	const [savingTheme, setSavingTheme] = useState(false);
+	useEffect(() => {
+		setThemeWriter(getThemeWriter());
+	}, []);
+	const [exportTab, setExportTab] = useState(remembered.exportTab ?? "css");
+	const editorRef = useRef(null);
+	const previewRef = useRef(null);
+	useEffect(() => {
+		Object.assign(memory.current, {
+			section,
+			sectionTabs,
+			expandedGroups,
+			mode,
+			cvaSlot,
+			previewMode,
+			exportTab,
+			editorWidth,
+			sizeUnit
+		});
+	}, [
+		memory,
+		section,
+		sectionTabs,
+		expandedGroups,
+		mode,
+		cvaSlot,
+		previewMode,
+		exportTab,
+		editorWidth,
+		sizeUnit
+	]);
+	useLayoutEffect(() => {
+		const frame = requestAnimationFrame(() => {
+			editorRef.current?.scrollTo({ top: memory.current.editorScroll ?? 0 });
+			previewRef.current?.scrollTo({ top: memory.current.previewScroll ?? 0 });
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [memory]);
+	const exportRef = useRef(null);
+	const changedCount = Object.keys(draft.overrides ?? {}).length + Object.values(draft.theme).reduce((count, tokens) => count + Object.keys(tokens).length, 0) + Object.values(draft.config).reduce((count_0, value) => count_0 + (typeof value === "object" && value !== null ? Object.keys(value).length : 1), 0);
+	const config = inherited;
+	const exportText = exportTab === "css" ? exportCss(draft.theme, defaults) : exportTab === "overrides" ? exportCvaEdits(draft.overrides) : `import { UIConfig } from "@povio/ui/ui-config";\n\nconst config = ${JSON.stringify(draft.config, null, 2)} satisfies Partial<UIConfig.Options>;\n\n// Wrap your application:\n// <UIConfig.Provider config={config}>{children}</UIConfig.Provider>\n`;
+	const changeSection = (next) => {
+		if (isLayoutKind(next)) setSectionTabs((current) => ({
+			...current,
+			Layout: next
+		}));
+		if (isAdvancedSection(next)) setSectionTabs((current_0) => ({
+			...current_0,
+			Advanced: next
+		}));
+		setSection(next);
+		setSearch("");
+		setMessage("");
+		setHighlightedToken(null);
+	};
+	const [highlightedToken, setHighlightedToken] = useState(null);
+	const isInspectable = useCallback((name) => (name in defaults.theme || name in defaults.light || name in defaults.dark) && groups.includes(groupFor(name)) && !name.startsWith("--color-"), [defaults]);
+	const describeToken = useCallback((name_0) => {
+		const section_0 = sectionFor(name_0);
+		const bucket = mode === "dark" && name_0 in defaults.dark ? "dark" : name_0 in defaults.light ? "light" : "theme";
+		const value_0 = draft.theme[bucket][name_0] ?? defaults[bucket][name_0];
+		return `${groupKeyFor(section_0, name_0, defaults)} · ${componentToken(name_0).label} · ${value_0}`;
+	}, [
+		defaults,
+		draft,
+		mode
+	]);
+	/** Opens the editor on a token picked in the inspector: its section, its group, scrolled into view and highlighted. */
+	const focusToken = useCallback((picked) => {
+		const name_1 = listedLayoutToken(picked, defaults);
+		const next_0 = sectionFor(name_1);
+		if (isLayoutKind(next_0)) setSectionTabs((current_1) => ({
+			...current_1,
+			Layout: next_0
+		}));
+		setSection(next_0);
+		setSearch("");
+		setMessage("");
+		const key = groupKeyFor(next_0, name_1, defaults);
+		setExpandedGroups((current_2) => ({
+			...current_2,
+			[`${next_0}:${key}`]: true
+		}));
+		if (next_0 === "Typography") setSectionTabs((current_3) => ({
+			...current_3,
+			Typography: typographyTabFor(key)
+		}));
+		if (next_0 === "Colors") setSectionTabs((current_4) => ({
+			...current_4,
+			Colors: baseColorNames(defaults).has(name_1) ? baseSystemTab : semanticPaletteTab
+		}));
+		setHighlightedToken(name_1);
+	}, [defaults]);
+	useEffect(() => {
+		if (!highlightedToken) return;
+		const frame_0 = requestAnimationFrame(() => {
+			(document.getElementById(`token-${highlightedToken}`)?.closest(".studio-token"))?.scrollIntoView({
+				block: "center",
+				behavior: "smooth"
+			});
+		});
+		return () => cancelAnimationFrame(frame_0);
+	}, [highlightedToken, section]);
+	const validity = (name_2, invalid, value_1 = "") => setInvalidFields((current_5) => {
+		const next_1 = { ...current_5 };
+		if (invalid) next_1[name_2] = value_1;
+		else delete next_1[name_2];
+		return next_1;
+	});
+	const reset = () => {
+		setDraft(emptyConfiguration());
+		setInvalidFields({});
+		setResetRevision((value_2) => value_2 + 1);
+		setMessage("All settings reset to the application defaults.");
+	};
+	const setToken = (name_3, value_3) => {
+		const bucket_0 = mode === "dark" && name_3 in defaults.dark ? "dark" : name_3 in defaults.light ? "light" : "theme";
+		const linked = bucket_0 === "theme" && !value_3?.startsWith("var(") ? linkedLayoutTokens(name_3, defaults) : [];
+		setDraft((current_6) => {
+			const tokens_0 = { ...current_6.theme[bucket_0] };
+			for (const token of [name_3, ...linked]) if (value_3 === void 0 || value_3 === defaults[bucket_0][token]) delete tokens_0[token];
+			else tokens_0[token] = value_3;
+			return {
+				...current_6,
+				theme: {
+					...current_6.theme,
+					[bucket_0]: tokens_0
+				}
+			};
+		});
+	};
+	const setLayoutLevel = (kind, level) => setDraft((current_7) => {
+		const tokens_1 = { ...current_7.theme.theme };
+		for (const [name_4, value_4] of Object.entries(layoutScales[kind].scale(defaults, level))) if (value_4 === defaults.theme[name_4]) delete tokens_1[name_4];
+		else tokens_1[name_4] = value_4;
+		return {
+			...current_7,
+			theme: {
+				...current_7.theme,
+				theme: tokens_1
+			}
+		};
+	});
+	const applyPreset = (preset) => {
+		setDraft((current_8) => ({
+			...current_8,
+			theme: presetEdits(preset, defaults)
+		}));
+		setInvalidFields({});
+		setResetRevision((value_5) => value_5 + 1);
+		setMessage(`${preset.label} preset applied. Apply settings to keep it.`);
+	};
+	const setComponent = (key_0, field, value_6) => {
+		setDraft((current_9) => ({
+			...current_9,
+			config: {
+				...current_9.config,
+				[key_0]: {
+					...current_9.config[key_0],
+					[field]: value_6
+				}
+			}
+		}));
+	};
+	const radiusAliasOptions = Object.keys(defaults.theme).filter((name_5) => name_5.startsWith("--radius-global-rounding-")).map((name_6) => ({
+		name: name_6,
+		label: `Global ${name_6.replace("--radius-global-rounding-", "").toUpperCase()}`,
+		value: draft.theme.theme[name_6] ?? defaults.theme[name_6]
+	}));
+	const controlHeightAliasOptions = (name_7) => {
+		const counterpart = controlHeightCounterpart(name_7);
+		if (!counterpart || defaults.theme[name_7] !== `var(${counterpart})`) return void 0;
+		return [{
+			name: counterpart,
+			label: `Button ${counterpart.replace(/^.*-height-/, "")}`,
+			value: draft.theme.theme[counterpart] ?? defaults.theme[counterpart]
+		}];
+	};
+	const palette = baseColorNames(defaults);
+	const paletteOptions = [...palette].map((name_8) => ({
+		name: name_8,
+		value: draft.theme.light[name_8] ?? defaults.light[name_8]
+	}));
+	const sectionEntries = Object.entries({
+		...defaults.light,
+		...mode === "dark" ? defaults.dark : {},
+		...defaults.theme
+	}).filter(([name_9]) => (section === "Font size" ? isFontSizeToken(name_9) : section === "Spacing" || section === "Sizing" ? layoutKindFor(name_9) === section && listedLayoutToken(name_9, defaults) === name_9 : groupFor(name_9) === section) && !name_9.startsWith("--color-"));
+	const groupedEntries = /* @__PURE__ */ new Map();
+	for (const entry of sectionEntries) {
+		const [name_10] = entry;
+		const textStyle = section === "Typography" ? name_10.match(/^--text-(.+?)(?:--.+)?$/)?.[1] : void 0;
+		const key_1 = groupKeyFor(section, name_10, defaults);
+		if (!groupedEntries.has(key_1)) groupedEntries.set(key_1, {
+			title: textStyle ? textStyle.replaceAll("-", " ") : key_1 === "tokens" ? "" : key_1,
+			compact: !!textStyle,
+			entries: []
+		});
+		groupedEntries.get(key_1).entries.push(entry);
+	}
+	const paletteStep = (name_11) => Number(name_11.match(/-(\d+)-base$/)?.[1]);
+	const isPaletteGroup = (entries) => entries.every(([name_12]) => palette.has(name_12));
+	for (const group of groupedEntries.values()) if (isPaletteGroup(group.entries)) group.entries.sort(([left], [right]) => paletteStep(right) - paletteStep(left));
+	const paletteValue = (name_13) => draft.theme.light[name_13] ?? defaults.light[name_13];
+	const renderPaletteShades = (title, entries_0) => {
+		const base = paletteValue((entries_0.find(([name_14]) => paletteStep(name_14) === 500) ?? entries_0[Math.floor(entries_0.length / 2)])[0]);
+		return /* @__PURE__ */ jsx(ShadesGenerator, {
+			title,
+			steps: entries_0.map(([name_15]) => ({
+				name: name_15,
+				step: paletteStep(name_15)
+			})),
+			initial: base,
+			onApply: (values) => {
+				for (const [name_16, value_7] of Object.entries(values)) setToken(name_16, value_7);
+			}
+		}, base);
+	};
+	const tokenGroups = [...groupedEntries.entries()].filter(([key_2, group_0]) => `${key_2} ${group_0.title} ${group_0.entries.map(([name_17]) => `${name_17} ${labelFor(name_17)}`).join(" ")}`.toLowerCase().includes(search.toLowerCase().trim()));
+	const visibleGroups = section === "Typography" ? tokenGroups : tokenGroups.map(([key_3, group_1]) => [key_3, {
+		...group_1,
+		entries: group_1.entries.filter(([name_18]) => `${group_1.title} ${name_18} ${labelFor(name_18)}`.toLowerCase().includes(search.toLowerCase().trim()))
+	}]).filter(([, group_2]) => group_2.entries.length);
+	const groupRank = (key_4) => key_4 === "Global" ? -1 : key_4 === "Base scale" ? 1 : 0;
+	const sectionKeys = [...groupedEntries.keys()].sort((a, b) => groupRank(a) - groupRank(b));
+	const searching = !!search.trim();
+	const tabFor = (key_5) => section === "Typography" ? typographyTabFor(key_5) : section === "Colors" ? isPaletteGroup(groupedEntries.get(key_5)?.entries ?? []) ? baseSystemTab : semanticPaletteTab : void 0;
+	const sectionTabList = [...new Set(sectionKeys.map(tabFor))].filter((tab) => !!tab);
+	const activeSectionTab = sectionTabList.includes(sectionTabs[section]) ? sectionTabs[section] : sectionTabList[0];
+	const tabbed = sectionTabList.length > 1 && !searching;
+	const inActiveTab = (key_6) => !tabbed || tabFor(key_6) === activeSectionTab;
+	const flatTab = tabbed && section === "Typography" && activeSectionTab !== textStylesTab;
+	const orderedGroups = [...visibleGroups].filter(([key_7]) => inActiveTab(key_7)).sort(([a_0], [b_0]) => groupRank(a_0) - groupRank(b_0));
+	const collapsibleKeys = sectionKeys.filter(inActiveTab);
+	const primaryGroup = collapsibleKeys[0];
+	const isExpanded = (key_8) => searching || (expandedGroups[`${section}:${key_8}`] ?? key_8 === primaryGroup);
+	const toggleGroup = (key_9) => setExpandedGroups((current_10) => ({
+		...current_10,
+		[`${section}:${key_9}`]: !isExpanded(key_9)
+	}));
+	const allExpanded = collapsibleKeys.every(isExpanded);
+	const setAllGroups = (expanded) => setExpandedGroups((current_11) => ({
+		...current_11,
+		...Object.fromEntries(collapsibleKeys.map((key_10) => [`${section}:${key_10}`, expanded]))
+	}));
+	const groupChanged = (entries_1) => entries_1.some(([name_19]) => {
+		const bucket_1 = mode === "dark" && name_19 in defaults.dark ? "dark" : name_19 in defaults.light ? "light" : "theme";
+		return name_19 in draft.theme[bucket_1];
+	});
+	/** The current font size of a text style's line height or letter spacing token. */
+	const fontSizeFor = (name_20) => {
+		const fontSizeName = name_20.match(/^(--text-.+?)--(?:line-height|letter-spacing)$/)?.[1];
+		if (!fontSizeName) return void 0;
+		const bucket_2 = mode === "dark" && fontSizeName in defaults.dark ? "dark" : fontSizeName in defaults.light ? "light" : "theme";
+		return draft.theme[bucket_2][fontSizeName] ?? defaults[bucket_2][fontSizeName];
+	};
+	const renderToken = ([name_21, original], compact = false) => {
+		const bucket_3 = mode === "dark" && name_21 in defaults.dark ? "dark" : name_21 in defaults.light ? "light" : "theme";
+		const compactLabel = compact ? name_21.endsWith("--line-height") ? "Line height" : name_21.endsWith("--letter-spacing") ? "Letter spacing" : "Font size" : section === "Colors" ? palette.has(name_21) ? labelFor(name_21).split(" ").slice(1).join(" ") : labelFor(name_21).replace(/^(surface|border|interactive|support|states|shadow) /, "") : section === "Spacing" || section === "Radius" || section === "Sizing" ? componentToken(name_21).label : section === "Font size" ? name_21.replace(/^--text-/, "").replaceAll("-", " ") : section === "Effects" ? effectToken(name_21).label : void 0;
+		return /* @__PURE__ */ jsx(TokenField, {
+			name: name_21,
+			original,
+			compactLabel,
+			sizeUnit,
+			fontSize: fontSizeFor(name_21),
+			highlighted: highlightedToken === name_21,
+			paletteOptions: section === "Colors" && /^var\(--[\w-]+\)$/.test(original) ? paletteOptions : void 0,
+			aliasOptions: section === "Radius" && !name_21.startsWith("--radius-global-") && componentToken(name_21).title !== "Base scale" ? radiusAliasOptions : controlHeightAliasOptions(name_21),
+			value: draft.theme[bucket_3][name_21] ?? original,
+			changed: name_21 in draft.theme[bucket_3],
+			onChange: (value_8) => {
+				setToken(name_21, value_8);
+				const lineHeight = `${name_21}--line-height`;
+				if (/^--text-[\w-]+$/.test(name_21) && !name_21.includes("--", 2) && (lineHeight in defaults.theme || lineHeight in defaults.light)) setToken(lineHeight, fontSizeLineHeight);
+			},
+			onReset: () => setToken(name_21),
+			invalidValue: invalidFields[`${bucket_3}:${name_21}`],
+			onValidity: (field_0, invalid_0, value_9) => validity(`${bucket_3}:${field_0}`, invalid_0, value_9)
+		}, `${revision}-${resetRevision}-${mode}-${name_21}`);
+	};
+	const layoutSection = isLayoutKind(section) ? section : void 0;
+	const advancedSection = isAdvancedSection(section) ? section : void 0;
+	const lastLayoutSection = isLayoutKind(sectionTabs.Layout ?? "") ? sectionTabs.Layout : layoutKinds[0];
+	/**
+	* Font roles (heading, body) lead as picker cards; the families they choose from follow below a divider. A family
+	* token points at its own `-base` font (`--font-inter` → `--font-inter-base`); any other font token is a role.
+	*/
+	const renderFontFamilies = (entries_2) => {
+		const isFamily = ([name_22, value_10]) => value_10.includes(`var(${name_22}-base)`);
+		const families = entries_2.filter(isFamily);
+		const roles = entries_2.filter((entry_0) => !isFamily(entry_0));
+		const themeFonts = families.map(([name_23]) => ({
+			name: name_23,
+			label: familyName(name_23.replace(/^--font-/, "")),
+			value: draft.theme.theme[name_23] ?? defaults.theme[name_23],
+			group: "Theme fonts"
+		}));
+		const options = [
+			...themeFonts,
+			...loadedFonts.filter((font) => !themeFonts.some(({ value: value_11 }) => value_11 === font.value)),
+			...systemFonts
+		];
+		const roleLabels = {
+			"--font-titles": "Heading",
+			"--font-body": "Body"
+		};
+		return /* @__PURE__ */ jsxs("div", {
+			className: "studio-font-families",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "studio-font-roles",
+					children: roles.map(([name_24, original_0]) => /* @__PURE__ */ jsx(FontRoleCard, {
+						label: roleLabels[name_24] ?? labelFor(name_24).replace(/^font /, ""),
+						value: draft.theme.theme[name_24] ?? original_0,
+						options,
+						changed: name_24 in draft.theme.theme,
+						onChange: (value_12) => setToken(name_24, value_12),
+						onReset: () => setToken(name_24)
+					}, `${revision}-${resetRevision}-${name_24}`))
+				}),
+				/* @__PURE__ */ jsx(FontUpload, { onUpload: refreshLoadedFonts }),
+				!!families.length && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("hr", { className: "studio-font-divider" }), families.map((entry_1) => renderToken(entry_1))] })
+			]
+		}, "font-families");
+	};
+	const showTabs = sectionTabList.length > 1 && isTokenSection(section);
+	const toggleAllButton = isTokenSection(section) && !flatTab && collapsibleKeys.length > 1 && /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "studio-toggle-all",
+		disabled: searching,
+		onClick: () => setAllGroups(!allExpanded),
+		children: [/* @__PURE__ */ jsx(ChevronsUpDown, {
+			size: 13,
+			"aria-hidden": "true"
+		}), allExpanded ? "Collapse all" : "Expand all"]
+	});
+	const selectControl = (label, key_11, field_1, options_0) => /* @__PURE__ */ jsxs("label", {
+		className: "studio-setting",
+		children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("select", {
+			"aria-label": label,
+			value: String(config[key_11][field_1]),
+			onChange: (event) => setComponent(key_11, field_1, event.target.value),
+			children: options_0.map((option) => /* @__PURE__ */ jsx("option", { children: option }, option))
+		})]
+	}, `${key_11}-${field_1}`);
+	return /* @__PURE__ */ jsx($8b8d26808cb8cb53$export$8948f78d83984c69, {
+		className: "studio-overlay",
+		isOpen,
+		onOpenChange: (next_2) => {
+			if (!next_2) cancel();
+		},
+		isDismissable: false,
+		children: /* @__PURE__ */ jsx($8b8d26808cb8cb53$export$2b77a92f1a5ad772, {
+			className: "studio-modal",
+			children: /* @__PURE__ */ jsxs($f2ff30fde7b014be$export$3ddf2d174ce01153, {
+				className: "studio-dialog",
+				style: { "--studio-editor-track": editorWidth ? `minmax(260px, ${editorWidth}px)` : void 0 },
+				children: [
+					/* @__PURE__ */ jsxs("header", {
+						className: "studio-topbar",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "studio-title",
+								children: /* @__PURE__ */ jsx($2ec61d1d4f780267$export$a8a3e93435678ff9, {
+									slot: "title",
+									children: "Povio UI Configuration"
+								})
+							}),
+							/* @__PURE__ */ jsxs("nav", {
+								className: "studio-nav",
+								"aria-label": "Configuration sections",
+								children: [
+									navSections.map((group_3) => /* @__PURE__ */ jsx("button", {
+										"aria-current": (group_3 === "Layout" ? isLayoutKind(section) : section === group_3) ? "page" : void 0,
+										onClick: () => changeSection(group_3 === "Layout" ? lastLayoutSection : group_3),
+										children: group_3
+									}, group_3)),
+									/* @__PURE__ */ jsx("span", {
+										className: "studio-nav-divider",
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ jsx("button", {
+										"aria-current": advancedSection ? "page" : void 0,
+										onClick: () => changeSection(isAdvancedSection(sectionTabs.Advanced ?? "") ? sectionTabs.Advanced : advancedSections[0][0]),
+										children: "Advanced"
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "studio-topbar-controls",
+								children: /* @__PURE__ */ jsxs("label", {
+									className: "studio-search",
+									children: [/* @__PURE__ */ jsx(Search, { size: 14 }), /* @__PURE__ */ jsx("input", {
+										"aria-label": "Search tokens",
+										placeholder: "Search tokens",
+										value: search,
+										disabled: !isTokenSection(section),
+										onChange: (event_0) => setSearch(event_0.target.value)
+									})]
+								})
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						ref: bodyRef,
+						className: "studio-body",
+						children: [
+							/* @__PURE__ */ jsxs("main", {
+								ref: editorRef,
+								className: "studio-editor",
+								onScroll: (event_1) => memory.current.editorScroll = event_1.currentTarget.scrollTop,
+								children: [
+									layoutSection ? /* @__PURE__ */ jsxs("div", {
+										className: "studio-subtabs-bar",
+										children: [/* @__PURE__ */ jsx("div", {
+											className: "studio-subtabs",
+											role: "tablist",
+											"aria-label": "Layout tokens",
+											children: layoutKinds.map((kind_0) => /* @__PURE__ */ jsxs("button", {
+												type: "button",
+												role: "tab",
+												"aria-selected": kind_0 === section,
+												onClick: () => changeSection(kind_0),
+												children: [kind_0, Object.keys(draft.theme.theme).some((name_25) => layoutKindFor(name_25) === kind_0) && /* @__PURE__ */ jsx("span", {
+													className: "studio-group-changed",
+													"aria-label": "has changes"
+												})]
+											}, kind_0))
+										}), toggleAllButton]
+									}) : showTabs ? /* @__PURE__ */ jsxs("div", {
+										className: "studio-subtabs-bar",
+										children: [/* @__PURE__ */ jsx("div", {
+											className: "studio-subtabs",
+											role: "tablist",
+											"aria-label": `${section} tokens`,
+											children: sectionTabList.map((tab_0) => /* @__PURE__ */ jsxs("button", {
+												type: "button",
+												role: "tab",
+												"aria-selected": !searching && tab_0 === activeSectionTab,
+												disabled: searching,
+												onClick: () => setSectionTabs((current_12) => ({
+													...current_12,
+													[section]: tab_0
+												})),
+												children: [tab_0, groupChanged([...groupedEntries].filter(([key_12]) => tabFor(key_12) === tab_0).flatMap(([, group_4]) => group_4.entries)) && /* @__PURE__ */ jsx("span", {
+													className: "studio-group-changed",
+													"aria-label": "has changes"
+												})]
+											}, tab_0))
+										}), toggleAllButton]
+									}) : advancedSection ? /* @__PURE__ */ jsx("div", {
+										className: "studio-subtabs-bar",
+										children: /* @__PURE__ */ jsx("div", {
+											className: "studio-subtabs",
+											role: "tablist",
+											"aria-label": "Advanced settings",
+											children: advancedSections.map(([key_13, label_0]) => /* @__PURE__ */ jsxs("button", {
+												type: "button",
+												role: "tab",
+												"aria-selected": key_13 === section,
+												onClick: () => changeSection(key_13),
+												children: [label_0, (key_13 === "Components" ? Object.keys(draft.config).length > 0 : key_13 === "Variants & overrides" && Object.keys(draft.overrides ?? {}).length > 0) && /* @__PURE__ */ jsx("span", {
+													className: "studio-group-changed",
+													"aria-label": "has changes"
+												})]
+											}, key_13))
+										})
+									}) : /* @__PURE__ */ jsxs("div", {
+										className: "studio-editor-heading",
+										children: [/* @__PURE__ */ jsx("h2", { children: section }), toggleAllButton]
+									}),
+									isTokenSection(section) && /* @__PURE__ */ jsxs(Fragment$1, { children: [layoutSection && !searching && /* @__PURE__ */ jsx(LayoutScaleControl, {
+										kind: layoutSection,
+										level: layoutLevelFor(defaults, draft.theme.theme, layoutSection),
+										onChange: (level_0) => setLayoutLevel(layoutSection, level_0)
+									}, layoutSection), /* @__PURE__ */ jsxs("div", {
+										className: `studio-token-list ${section !== "Typography" ? "studio-token-list-inline" : "studio-token-list-rows"}`,
+										children: [orderedGroups.map(([key_14, group_5]) => group_5.title && !flatTab ? /* @__PURE__ */ jsxs("fieldset", {
+											className: `studio-token-group ${group_5.compact ? "studio-type-style" : ""} ${!isExpanded(key_14) ? "is-collapsed" : ""}`,
+											children: [/* @__PURE__ */ jsxs("legend", { children: [/* @__PURE__ */ jsxs("button", {
+												type: "button",
+												className: "studio-group-toggle",
+												"aria-expanded": isExpanded(key_14),
+												"aria-controls": `group-${section}-${key_14.replaceAll(" ", "-")}`,
+												onClick: () => toggleGroup(key_14),
+												children: [
+													/* @__PURE__ */ jsx(ChevronRight, {
+														size: 14,
+														"aria-hidden": "true"
+													}),
+													group_5.title,
+													groupChanged(group_5.entries) && /* @__PURE__ */ jsx("span", {
+														className: "studio-group-changed",
+														"aria-label": "has changes"
+													})
+												]
+											}), section === "Colors" && isPaletteGroup(group_5.entries) && /* @__PURE__ */ jsx("span", {
+												className: "studio-palette-actions",
+												children: /* @__PURE__ */ jsx("button", {
+													type: "button",
+													className: "studio-palette-reset",
+													"aria-label": `Reset ${group_5.title} palette`,
+													title: "Reset every shade in this palette to its default",
+													disabled: !groupChanged(group_5.entries),
+													onClick: () => {
+														for (const [name_26] of group_5.entries) setToken(name_26);
+													},
+													children: /* @__PURE__ */ jsx(RotateCcw, {
+														size: 13,
+														"aria-hidden": "true"
+													})
+												})
+											})] }), /* @__PURE__ */ jsxs("div", {
+												id: `group-${section}-${key_14.replaceAll(" ", "-")}`,
+												hidden: !isExpanded(key_14),
+												className: group_5.compact ? "studio-type-fields" : void 0,
+												children: [section === "Colors" && isPaletteGroup(group_5.entries) && renderPaletteShades(group_5.title, group_5.entries), group_5.entries.map((entry_2) => renderToken(entry_2, group_5.compact))]
+											})]
+										}, key_14) : section === "Typography" && key_14 === "Font families" ? renderFontFamilies(group_5.entries) : group_5.entries.map((entry_3) => renderToken(entry_3))), !orderedGroups.length && /* @__PURE__ */ jsx("p", { children: "No matching tokens. Try a component name such as “button”." })]
+									})] }),
+									section === "Variants & overrides" && /* @__PURE__ */ jsx(CvaEditor, {
+										slot: cvaSlot,
+										setSlot: (slot) => {
+											setCvaSlot(slot);
+											setCvaVariants({});
+										},
+										onPreview: setCvaVariants
+									}),
+									section === "Presets" && /* @__PURE__ */ jsxs("div", {
+										className: "studio-presets",
+										children: [/* @__PURE__ */ jsx("p", {
+											className: "studio-presets-intro",
+											children: "A preset replaces your theme edits with its own. Component defaults and overrides stay as they are; Apply or Save theme keeps it, Cancel discards it."
+										}), [appThemePreset, ...themePresets].map((preset_0) => {
+											const active = isPresetActive(preset_0, defaults, draft.theme);
+											const colors = presetEdits(preset_0, defaults).light;
+											const swatch = (name_27) => `rgb(${colors[name_27] ?? defaults.light[name_27]})`;
+											return /* @__PURE__ */ jsxs("div", {
+												className: `studio-preset ${active ? "is-active" : ""}`,
+												children: [
+													/* @__PURE__ */ jsx("span", {
+														className: "studio-preset-swatches",
+														"aria-hidden": "true",
+														children: [
+															50,
+															200,
+															500,
+															900,
+															950
+														].map((step) => /* @__PURE__ */ jsx("i", { style: { background: swatch(`--neutral-${step}-base`) } }, step))
+													}),
+													/* @__PURE__ */ jsxs("span", {
+														className: "studio-preset-text",
+														children: [/* @__PURE__ */ jsx("strong", { children: preset_0.label }), /* @__PURE__ */ jsx("span", { children: preset_0.description })]
+													}),
+													/* @__PURE__ */ jsx("button", {
+														type: "button",
+														className: active ? void 0 : "studio-primary",
+														disabled: active,
+														onClick: () => applyPreset(preset_0),
+														children: active ? "Active" : "Apply preset"
+													})
+												]
+											}, preset_0.id);
+										})]
+									}),
+									section === "Components" && /* @__PURE__ */ jsxs("div", {
+										className: "studio-settings",
+										children: [
+											/* @__PURE__ */ jsx("h3", { children: "Editor" }),
+											/* @__PURE__ */ jsxs("label", {
+												className: "studio-setting",
+												children: [/* @__PURE__ */ jsx("span", { children: "Size units" }), /* @__PURE__ */ jsxs("select", {
+													"aria-label": "Size units",
+													value: sizeUnit,
+													onChange: (event_2) => setSizeUnit(event_2.target.value),
+													children: [/* @__PURE__ */ jsx("option", {
+														value: "px",
+														children: "px"
+													}), /* @__PURE__ */ jsx("option", {
+														value: "rem",
+														children: "rem"
+													})]
+												})]
+											}),
+											/* @__PURE__ */ jsx("h3", { children: "Buttons" }),
+											selectControl("Appearance", "button", "variant", [
+												"contained",
+												"outlined",
+												"subtle",
+												"ghost",
+												"text"
+											]),
+											selectControl("Button size", "button", "size", [
+												"default",
+												"sm",
+												"s"
+											]),
+											/* @__PURE__ */ jsx("h3", { children: "Inputs" }),
+											selectControl("Input appearance", "input", "variant", ["outlined", "filled"]),
+											selectControl("Label layout", "input", "as", [
+												"default",
+												"floating",
+												"inline",
+												"filter"
+											]),
+											selectControl("Input size", "input", "size", ["default", "small"]),
+											[
+												"isClearable",
+												"hideLabel",
+												"alwaysShowClear"
+											].map((field_2) => /* @__PURE__ */ jsxs("label", {
+												className: "studio-setting",
+												children: [/* @__PURE__ */ jsx("span", { children: {
+													isClearable: "Allow clearing",
+													hideLabel: "Hide labels",
+													alwaysShowClear: "Always show clear button"
+												}[field_2] }), /* @__PURE__ */ jsx("input", {
+													type: "checkbox",
+													checked: config.input[field_2],
+													onChange: (event_3) => setComponent("input", field_2, event_3.target.checked)
+												})]
+											}, field_2)),
+											/* @__PURE__ */ jsx("h3", { children: "Rendering" }),
+											/* @__PURE__ */ jsxs("label", {
+												className: "studio-setting",
+												children: [/* @__PURE__ */ jsxs("span", { children: ["Use static inputs until interaction", /* @__PURE__ */ jsx("small", { children: "Reduce work when rendering large forms." })] }), /* @__PURE__ */ jsx("input", {
+													type: "checkbox",
+													checked: config.renderStaticInput,
+													onChange: (event_4) => setDraft((current_13) => ({
+														...current_13,
+														config: {
+															...current_13.config,
+															renderStaticInput: event_4.target.checked
+														}
+													}))
+												})]
+											}),
+											/* @__PURE__ */ jsx("p", {
+												className: "studio-help",
+												children: "Component props override these defaults. The preview uses inherited defaults unless an example needs a specific state."
+											})
+										]
+									}),
+									section === "Export" && /* @__PURE__ */ jsxs("div", {
+										className: "studio-export",
+										children: [
+											/* @__PURE__ */ jsxs("div", {
+												className: "studio-mode",
+												children: [
+													/* @__PURE__ */ jsx("button", {
+														"aria-pressed": exportTab === "css",
+														onClick: () => setExportTab("css"),
+														children: "Tailwind CSS"
+													}),
+													/* @__PURE__ */ jsx("button", {
+														"aria-pressed": exportTab === "config",
+														onClick: () => setExportTab("config"),
+														children: "UIConfig"
+													}),
+													/* @__PURE__ */ jsx("button", {
+														"aria-pressed": exportTab === "overrides",
+														onClick: () => setExportTab("overrides"),
+														children: "UIOverrides"
+													})
+												]
+											}),
+											/* @__PURE__ */ jsx("p", { children: exportTab === "css" ? "Import after your existing theme. Only changed tokens are included; light and dark colors remain separate." : exportTab === "overrides" ? "Merge these edited slots with your existing app overrides. New Tailwind classes require a rebuild." : "Wrap your application with this provider. Only changed component settings are included." }),
+											/* @__PURE__ */ jsx("textarea", {
+												ref: exportRef,
+												"aria-label": "Exported configuration",
+												readOnly: true,
+												value: exportText,
+												spellCheck: false
+											}),
+											/* @__PURE__ */ jsxs("div", {
+												className: "studio-export-actions",
+												children: [
+													exportTab === "css" && themeWriter && /* @__PURE__ */ jsx("button", {
+														disabled: savingTheme || !!Object.keys(invalidFields).length,
+														title: `Save to ${themeWriter.file}`,
+														onClick: async () => {
+															setSavingTheme(true);
+															setMessage("");
+															try {
+																await saveThemeCss(themeWriter, exportText);
+																setMessage(`Saved theme to ${themeWriter.file}.`);
+															} catch (error) {
+																setMessage(error instanceof Error ? error.message : "Could not save theme.");
+															} finally {
+																setSavingTheme(false);
+															}
+														},
+														children: savingTheme ? "Saving theme…" : "Save theme"
+													}),
+													/* @__PURE__ */ jsx("button", {
+														disabled: !!Object.keys(invalidFields).length,
+														onClick: async () => {
+															try {
+																await navigator.clipboard.writeText(exportText);
+																setMessage("Copied to clipboard.");
+															} catch {
+																exportRef.current?.select();
+																setMessage("Clipboard unavailable. The export is selected for manual copying.");
+															}
+														},
+														children: "Copy code"
+													}),
+													/* @__PURE__ */ jsxs("button", {
+														disabled: !!Object.keys(invalidFields).length,
+														onClick: () => {
+															const url = URL.createObjectURL(new Blob([exportText], { type: "text/plain" }));
+															const link = document.createElement("a");
+															link.href = url;
+															link.download = exportTab === "css" ? "povio-theme.css" : exportTab === "overrides" ? "povio-ui-overrides.ts" : "povio-ui-config.ts";
+															link.click();
+															setTimeout(() => URL.revokeObjectURL(url), 1e3);
+															setMessage("Export downloaded.");
+														},
+														children: [/* @__PURE__ */ jsx(ArrowDownToLine, { size: 14 }), " Download"]
+													})
+												]
+											})
+										]
+									})
+								]
+							}),
+							/* @__PURE__ */ jsxs("aside", {
+								ref: previewRef,
+								className: "studio-preview",
+								onScroll: (event_5) => memory.current.previewScroll = event_5.currentTarget.scrollTop,
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "studio-preview-heading",
+										children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", {}), " LIVE PREVIEW"] }), /* @__PURE__ */ jsxs("div", {
+											className: "studio-preview-actions",
+											children: [/* @__PURE__ */ jsx(ColorModeSwitch, {
+												value: mode,
+												onChange: setMode
+											}), isTokenSection(section) && /* @__PURE__ */ jsxs("div", {
+												className: "studio-mode studio-preview-modes",
+												role: "group",
+												"aria-label": "Preview mode",
+												children: [/* @__PURE__ */ jsx("button", {
+													type: "button",
+													"aria-pressed": previewMode === "gallery",
+													onClick: () => setPreviewMode("gallery"),
+													children: "Gallery"
+												}), /* @__PURE__ */ jsx("button", {
+													type: "button",
+													"aria-pressed": previewMode === "focused",
+													onClick: () => setPreviewMode("focused"),
+													children: "Token preview"
+												})]
+											})]
+										})]
+									}),
+									section === "Variants & overrides" || isTokenSection(section) && previewMode === "focused" ? /* @__PURE__ */ jsx(ContextualPreview, {
+										variants: cvaVariants,
+										setVariants: setCvaVariants,
+										section,
+										slot: cvaSlot,
+										mode,
+										entries: visibleGroups.flatMap(([, group_6]) => group_6.entries)
+									}) : /* @__PURE__ */ jsx(ComponentPreview, {
+										value: draft,
+										mode,
+										inspector: {
+											isKnown: isInspectable,
+											describe: describeToken,
+											onSelect: focusToken,
+											revision: draft
+										}
+									}),
+									/* @__PURE__ */ jsx("p", {
+										className: "studio-preview-note",
+										children: section === "Variants & overrides" || previewMode === "focused" ? "Preview follows the current section. Variant controls affect only the preview." : "Click a component to inspect its padding, gaps and radius."
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx(PanelResizeHandle, {
+								label: "Resize editor and preview",
+								column: 2,
+								width: editorWidth,
+								min: 260,
+								max: () => (bodyRef.current?.parentElement?.clientWidth ?? 0) - 320,
+								onResize: setEditorWidth,
+								onReset: () => setEditorWidth(void 0)
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("footer", {
+						className: "studio-footer",
+						children: [
+							/* @__PURE__ */ jsxs("button", {
+								onClick: () => {
+									const hasChanges = !!changedCount || !!Object.keys(invalidFields).length;
+									setNothingToReset(!hasChanges);
+									setConfirmingReset(hasChanges);
+								},
+								children: [/* @__PURE__ */ jsx(RotateCcw, { size: 14 }), " Reset all"]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								role: "status",
+								children: Object.keys(invalidFields).length ? "Fix invalid values or reset before applying or exporting." : nothingToReset && !changedCount ? "No active changes to reset." : message || `${changedCount} overrides · Changes stay in this session`
+							}),
+							/* @__PURE__ */ jsx("button", {
+								onClick: () => cancel(),
+								children: "Cancel"
+							}),
+							/* @__PURE__ */ jsxs("button", {
+								className: "studio-primary",
+								disabled: !!Object.keys(invalidFields).length,
+								onClick: () => {
+									apply();
+								},
+								children: [/* @__PURE__ */ jsx(Check, { size: 15 }), " Apply settings"]
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx($8b8d26808cb8cb53$export$8948f78d83984c69, {
+						className: "studio-overlay studio-confirm-overlay",
+						isOpen: confirmingReset,
+						onOpenChange: setConfirmingReset,
+						isDismissable: true,
+						children: /* @__PURE__ */ jsx($8b8d26808cb8cb53$export$2b77a92f1a5ad772, {
+							className: "studio-confirm",
+							children: /* @__PURE__ */ jsxs($f2ff30fde7b014be$export$3ddf2d174ce01153, {
+								role: "alertdialog",
+								className: "studio-confirm-dialog",
+								children: [
+									/* @__PURE__ */ jsx($2ec61d1d4f780267$export$a8a3e93435678ff9, {
+										slot: "title",
+										children: "Reset all settings?"
+									}),
+									/* @__PURE__ */ jsxs("p", { children: [
+										"Are you sure you want to reset all settings to the application defaults? All ",
+										changedCount,
+										" overrides will be discarded."
+									] }),
+									/* @__PURE__ */ jsxs("div", {
+										className: "studio-confirm-actions",
+										children: [/* @__PURE__ */ jsx("button", {
+											autoFocus: true,
+											onClick: () => setConfirmingReset(false),
+											children: "Keep changes"
+										}), /* @__PURE__ */ jsxs("button", {
+											className: "studio-danger",
+											onClick: () => {
+												reset();
+												setConfirmingReset(false);
+											},
+											children: [/* @__PURE__ */ jsx(RotateCcw, { size: 14 }), " Yes, reset all"]
+										})]
+									})
+								]
+							})
+						})
+					})
+				]
+			})
+		})
+	});
+}
+function UIConfigurationModal() {
+	const $ = c(4);
+	const { isOpen, revision } = useUIConfiguration();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {};
+		$[0] = t0;
+	} else t0 = $[0];
+	const memory = useRef(t0);
+	let t1;
+	if ($[1] !== isOpen || $[2] !== revision) {
+		t1 = isOpen ? /* @__PURE__ */ jsx(ConfigurationModalContent, { memory }, revision) : null;
+		$[1] = isOpen;
+		$[2] = revision;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+//#endregion
+export { ColorModeSwitch, UIConfigurationModal, UIConfigurationProvider, exportCss, parseThemeCss, useUIConfiguration };