@povio/ui 5.0.0-rc.1 → 5.0.0-rc.3

package/dist/config/ui-configurator.js

@@ -0,0 +1,3731 @@
+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 } from "../CheckboxCheckmark-usHsolNj.js";
+import { i as Search, n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "../selectDesktop.cva-CHAMxhfO.js";
+import { t as X } from "../x-B6vfz8Ps.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-BU0d702K.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-B7_pNwn9.js";
+import { n as switchDefinition, t as Switch } from "../Switch-CqnGEdeD.js";
+import { n as textAreaWrapperDefinition, t as TextArea } from "../TextArea-DqHDiRGJ.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-U_-d4V_g.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-BikE8qJH.js";
+import { t as linkDefinition } from "../link.cva-DMTHZiJG.js";
+import { t as tooltipWrapperTriggerDefinition } from "../tooltipWrapper.cva-BBQ4ic3D.js";
+import { a as groupFor, c as labelFor, d as runtimeCss, f as toHex, i as generateShades, l as parseThemeCss, m as validToken, n as emptyTheme, o as groups, p as toRgb, r as exportCss, s as isRgb, t as baseColorNames, u as previewTokens } from "../theme-model-C-QMCksE.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$5);
+			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$5(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$4).map(_temp2$1))
+		};
+		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$1,
+					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$1)]
+			})] }, 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$1(value_2) {
+	return /* @__PURE__ */ jsx("option", { children: value_2 }, value_2);
+}
+function _temp3$1(event_1) {
+	return event_1.preventDefault();
+}
+function _temp2$1(t0) {
+	const [name, value_0] = t0;
+	return [name, value_0 === "true" ? true : value_0 === "false" ? false : value_0];
+}
+function _temp$4(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") {
+					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$3
+		});
+		$[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$3(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))];
+		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);
+		$[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);
+		$[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(key_2) {
+	return /* @__PURE__ */ jsx("option", {
+		value: key_2,
+		children: title(key_2.split(".")[1])
+	}, key_2);
+}
+function _temp3(name) {
+	return /* @__PURE__ */ jsx("option", {
+		value: name,
+		children: title(name)
+	}, name);
+}
+function _temp2(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$2;
+	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$2(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$1);
+		$[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$1(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/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/TwLogo.tsx
+/** The TW mark (from the admin app's `LogoSmall`), cropped to its outline for the configurator's top bar. */
+const TwLogo = (props) => {
+	const $ = c(5);
+	let t0;
+	let t1;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx("path", {
+			d: "M20.5919 21H13.2263V22.1988H16.1963V27.9876H17.6327V22.1988H20.5919V21Z",
+			fill: "#2B51D4"
+		});
+		t1 = /* @__PURE__ */ jsx("path", {
+			d: "M21.1681 21L24.1165 27.9876H25.8769L27.9931 22.5165L30.0997 27.9876H31.8601L34.7761 21H33.2209L30.962 26.6031L28.8145 21H27.1621L25.0145 26.6031L22.7557 21H21.1681Z",
+			fill: "#2B51D4"
+		});
+		t2 = /* @__PURE__ */ jsx("path", {
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: "M10.2002 19.2C10.2002 18.2059 11.0061 17.4 12.0002 17.4H36.0002C36.9943 17.4 37.8002 18.2059 37.8002 19.2V29.4C37.8002 30.3941 36.9943 31.2 36.0002 31.2H12.0002C11.0061 31.2 10.2002 30.3941 10.2002 29.4V19.2ZM12.0002 18.6H36.0002C36.3316 18.6 36.6002 18.8686 36.6002 19.2V29.4C36.6002 29.7314 36.3316 30 36.0002 30H12.0002C11.6688 30 11.4002 29.7314 11.4002 29.4V19.2C11.4002 18.8686 11.6688 18.6 12.0002 18.6Z",
+			fill: "#2B51D4"
+		});
+		$[0] = t0;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+		t2 = $[2];
+	}
+	let t3;
+	if ($[3] !== props) {
+		t3 = /* @__PURE__ */ jsxs("svg", {
+			viewBox: "10.2 17.4 27.6 13.8",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			"aria-hidden": "true",
+			...props,
+			children: [
+				t0,
+				t1,
+				t2
+			]
+		});
+		$[3] = props;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
+};
+//#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"],
+	["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";
+/** 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-DIFeJqGx.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);
+	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: "⌄"
+							}),
+							!!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("px");
+	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
+		});
+	}, [
+		memory,
+		section,
+		sectionTabs,
+		expandedGroups,
+		mode,
+		cvaSlot,
+		previewMode,
+		exportTab,
+		editorWidth
+	]);
+	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) => {
+		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 = groupFor(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((name_1) => {
+		const next_0 = groupFor(name_1);
+		setSection(next_0);
+		setSearch("");
+		setMessage("");
+		const key = groupKeyFor(next_0, name_1, defaults);
+		setExpandedGroups((current) => ({
+			...current,
+			[`${next_0}:${key}`]: true
+		}));
+		if (next_0 === "Typography") setSectionTabs((current_0) => ({
+			...current_0,
+			Typography: typographyTabFor(key)
+		}));
+		if (next_0 === "Colors") setSectionTabs((current_1) => ({
+			...current_1,
+			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_2) => {
+		const next_1 = { ...current_2 };
+		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";
+		setDraft((current_3) => {
+			const tokens_0 = { ...current_3.theme[bucket_0] };
+			if (value_3 === void 0 || value_3 === defaults[bucket_0][name_3]) delete tokens_0[name_3];
+			else tokens_0[name_3] = value_3;
+			return {
+				...current_3,
+				theme: {
+					...current_3.theme,
+					[bucket_0]: tokens_0
+				}
+			};
+		});
+	};
+	const setComponent = (key_0, field, value_4) => {
+		setDraft((current_4) => ({
+			...current_4,
+			config: {
+				...current_4.config,
+				[key_0]: {
+					...current_4.config[key_0],
+					[field]: value_4
+				}
+			}
+		}));
+	};
+	const radiusAliasOptions = Object.keys(defaults.theme).filter((name_4) => name_4.startsWith("--radius-global-rounding-")).map((name_5) => ({
+		name: name_5,
+		label: `Global ${name_5.replace("--radius-global-rounding-", "").toUpperCase()}`,
+		value: draft.theme.theme[name_5] ?? defaults.theme[name_5]
+	}));
+	const palette = baseColorNames(defaults);
+	const paletteOptions = [...palette].map((name_6) => ({
+		name: name_6,
+		value: draft.theme.light[name_6] ?? defaults.light[name_6]
+	}));
+	const sectionEntries = Object.entries({
+		...defaults.light,
+		...mode === "dark" ? defaults.dark : {},
+		...defaults.theme
+	}).filter(([name_7]) => groupFor(name_7) === section && !name_7.startsWith("--color-"));
+	const groupedEntries = /* @__PURE__ */ new Map();
+	for (const entry of sectionEntries) {
+		const [name_8] = entry;
+		const textStyle = section === "Typography" ? name_8.match(/^--text-(.+?)(?:--.+)?$/)?.[1] : void 0;
+		const key_1 = groupKeyFor(section, name_8, 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_9) => Number(name_9.match(/-(\d+)-base$/)?.[1]);
+	const isPaletteGroup = (entries) => entries.every(([name_10]) => palette.has(name_10));
+	for (const group of groupedEntries.values()) if (isPaletteGroup(group.entries)) group.entries.sort(([left], [right]) => paletteStep(right) - paletteStep(left));
+	const paletteValue = (name_11) => draft.theme.light[name_11] ?? defaults.light[name_11];
+	const renderPaletteShades = (title, entries_0) => {
+		const base = paletteValue((entries_0.find(([name_12]) => paletteStep(name_12) === 500) ?? entries_0[Math.floor(entries_0.length / 2)])[0]);
+		return /* @__PURE__ */ jsx(ShadesGenerator, {
+			title,
+			steps: entries_0.map(([name_13]) => ({
+				name: name_13,
+				step: paletteStep(name_13)
+			})),
+			initial: base,
+			onApply: (values) => {
+				for (const [name_14, value_5] of Object.entries(values)) setToken(name_14, value_5);
+			}
+		}, base);
+	};
+	const tokenGroups = [...groupedEntries.entries()].filter(([key_2, group_0]) => `${key_2} ${group_0.title} ${group_0.entries.map(([name_15]) => `${name_15} ${labelFor(name_15)}`).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_16]) => `${group_1.title} ${name_16} ${labelFor(name_16)}`.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_5) => ({
+		...current_5,
+		[`${section}:${key_9}`]: !isExpanded(key_9)
+	}));
+	const allExpanded = collapsibleKeys.every(isExpanded);
+	const setAllGroups = (expanded) => setExpandedGroups((current_6) => ({
+		...current_6,
+		...Object.fromEntries(collapsibleKeys.map((key_10) => [`${section}:${key_10}`, expanded]))
+	}));
+	const groupChanged = (entries_1) => entries_1.some(([name_17]) => {
+		const bucket_1 = mode === "dark" && name_17 in defaults.dark ? "dark" : name_17 in defaults.light ? "light" : "theme";
+		return name_17 in draft.theme[bucket_1];
+	});
+	/** The current font size of a text style's line height or letter spacing token. */
+	const fontSizeFor = (name_18) => {
+		const fontSizeName = name_18.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_19, original], compact = false) => {
+		const bucket_3 = mode === "dark" && name_19 in defaults.dark ? "dark" : name_19 in defaults.light ? "light" : "theme";
+		const compactLabel = compact ? name_19.endsWith("--line-height") ? "Line height" : name_19.endsWith("--letter-spacing") ? "Letter spacing" : "Font size" : section === "Colors" ? palette.has(name_19) ? labelFor(name_19).split(" ").slice(1).join(" ") : labelFor(name_19).replace(/^(surface|border|interactive|support|states|shadow) /, "") : section === "Spacing" || section === "Radius" || section === "Sizing" ? componentToken(name_19).label : section === "Effects" ? effectToken(name_19).label : void 0;
+		return /* @__PURE__ */ jsx(TokenField, {
+			name: name_19,
+			original,
+			compactLabel,
+			sizeUnit,
+			fontSize: fontSizeFor(name_19),
+			highlighted: highlightedToken === name_19,
+			paletteOptions: section === "Colors" && /^var\(--[\w-]+\)$/.test(original) ? paletteOptions : void 0,
+			aliasOptions: section === "Radius" && !name_19.startsWith("--radius-global-") && componentToken(name_19).title !== "Base scale" ? radiusAliasOptions : void 0,
+			value: draft.theme[bucket_3][name_19] ?? original,
+			changed: name_19 in draft.theme[bucket_3],
+			onChange: (value_6) => {
+				setToken(name_19, value_6);
+				const lineHeight = `${name_19}--line-height`;
+				if (/^--text-[\w-]+$/.test(name_19) && !name_19.includes("--", 2) && (lineHeight in defaults.theme || lineHeight in defaults.light)) setToken(lineHeight, fontSizeLineHeight);
+			},
+			onReset: () => setToken(name_19),
+			invalidValue: invalidFields[`${bucket_3}:${name_19}`],
+			onValidity: (field_0, invalid_0, value_7) => validity(`${bucket_3}:${field_0}`, invalid_0, value_7)
+		}, `${revision}-${resetRevision}-${mode}-${name_19}`);
+	};
+	const showTabs = sectionTabList.length > 1 && groups.includes(section);
+	const toggleAllButton = groups.includes(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) => /* @__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.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",
+				children: [
+					/* @__PURE__ */ jsxs("header", {
+						className: "studio-topbar",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "studio-title",
+								children: [/* @__PURE__ */ jsx(TwLogo, { className: "studio-topbar-logo" }), /* @__PURE__ */ jsx($2ec61d1d4f780267$export$a8a3e93435678ff9, {
+									slot: "title",
+									children: "UI configuration"
+								})]
+							}),
+							/* @__PURE__ */ jsxs("nav", {
+								className: "studio-nav",
+								"aria-label": "Configuration sections",
+								children: [
+									groups.map((group_3) => /* @__PURE__ */ jsx("button", {
+										"aria-current": section === group_3 ? "page" : void 0,
+										onClick: () => changeSection(group_3),
+										children: group_3
+									}, group_3)),
+									/* @__PURE__ */ jsx("span", {
+										className: "studio-nav-divider",
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ jsx("button", {
+										"aria-current": section === "Components" ? "page" : void 0,
+										onClick: () => changeSection("Components"),
+										children: "Defaults & behavior"
+									}),
+									/* @__PURE__ */ jsx("button", {
+										"aria-current": section === "Variants & overrides" ? "page" : void 0,
+										onClick: () => changeSection("Variants & overrides"),
+										children: "Variants & overrides"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "studio-nav-divider",
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ jsx("button", {
+										"aria-current": section === "Export" ? "page" : void 0,
+										onClick: () => changeSection("Export"),
+										children: "Export"
+									})
+								]
+							}),
+							/* @__PURE__ */ jsxs("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: !groups.includes(section),
+											onChange: (event_0) => setSearch(event_0.target.value)
+										})]
+									}),
+									/* @__PURE__ */ jsx("div", {
+										className: "studio-mode studio-unit-mode",
+										role: "group",
+										"aria-label": "Size units",
+										children: ["rem", "px"].map((unit) => /* @__PURE__ */ jsx("button", {
+											type: "button",
+											"aria-pressed": sizeUnit === unit,
+											onClick: () => setSizeUnit(unit),
+											children: unit
+										}, unit))
+									}),
+									/* @__PURE__ */ jsx(ColorModeSwitch, {
+										value: mode,
+										onChange: setMode
+									}),
+									/* @__PURE__ */ jsx("button", {
+										className: "studio-icon",
+										"aria-label": "Close configuration without applying",
+										onClick: () => cancel(),
+										children: /* @__PURE__ */ jsx(X, { size: 17 })
+									})
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						ref: bodyRef,
+						className: "studio-body",
+						style: { "--studio-editor-track": editorWidth ? `minmax(260px, ${editorWidth}px)` : void 0 },
+						children: [
+							/* @__PURE__ */ jsxs("main", {
+								ref: editorRef,
+								className: "studio-editor",
+								onScroll: (event_1) => memory.current.editorScroll = event_1.currentTarget.scrollTop,
+								children: [
+									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_7) => ({
+													...current_7,
+													[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]
+									}) : /* @__PURE__ */ jsxs("div", {
+										className: "studio-editor-heading",
+										children: [/* @__PURE__ */ jsx("h2", { children: section === "Components" ? "Defaults & behavior" : section }), toggleAllButton]
+									}),
+									groups.includes(section) && /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
+										className: `studio-token-list ${section !== "Typography" ? "studio-token-list-inline" : "studio-token-list-rows"}`,
+										children: [orderedGroups.map(([key_13, group_5]) => group_5.title && !flatTab ? /* @__PURE__ */ jsxs("fieldset", {
+											className: `studio-token-group ${group_5.compact ? "studio-type-style" : ""} ${!isExpanded(key_13) ? "is-collapsed" : ""}`,
+											children: [/* @__PURE__ */ jsxs("legend", { children: [/* @__PURE__ */ jsxs("button", {
+												type: "button",
+												className: "studio-group-toggle",
+												"aria-expanded": isExpanded(key_13),
+												"aria-controls": `group-${section}-${key_13.replaceAll(" ", "-")}`,
+												onClick: () => toggleGroup(key_13),
+												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_20] of group_5.entries) setToken(name_20);
+													},
+													children: /* @__PURE__ */ jsx(RotateCcw, {
+														size: 13,
+														"aria-hidden": "true"
+													})
+												})
+											})] }), /* @__PURE__ */ jsxs("div", {
+												id: `group-${section}-${key_13.replaceAll(" ", "-")}`,
+												hidden: !isExpanded(key_13),
+												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_0) => renderToken(entry_0, group_5.compact))]
+											})]
+										}, key_13) : group_5.entries.map((entry_1) => renderToken(entry_1))), !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 === "Components" && /* @__PURE__ */ jsxs("div", {
+										className: "studio-settings",
+										children: [
+											/* @__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_2) => setComponent("input", field_2, event_2.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_3) => setDraft((current_8) => ({
+														...current_8,
+														config: {
+															...current_8.config,
+															renderStaticInput: event_3.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_4) => memory.current.previewScroll = event_4.currentTarget.scrollTop,
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "studio-preview-heading",
+										children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", {}), " LIVE PREVIEW"] }), groups.includes(section) && /* @__PURE__ */ jsxs("div", {
+											className: "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" || groups.includes(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?.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 };