@reopt-ai/opt-ui 1.7.0 → 1.9.0

package/dist/{shader-surface-Fav5K9UC.cjs → key-pad-menu-DoGskWbp.cjs}

@@ -1,8 +1,8 @@
 "use client";
-const require_pagination = require("./pagination-DjfxBcjX.cjs");
+const require_highlight = require("./highlight-CGcrYGMC.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
-react = require_pagination.__toESM(react, 1);
+react = require_highlight.__toESM(react, 1);
 let _reopt_ai_opt_ui_primitives = require("@reopt-ai/opt-ui-primitives");
 let lucide_react = require("lucide-react");
 let react_resizable_panels = require("react-resizable-panels");
@@ -17,7 +17,7 @@ const _excluded$17 = [
 	"className",
 	"children"
 ];
-const toneStyles = {
+const toneStyles$1 = {
 	primary: "text-text-primary",
 	secondary: "text-text-secondary",
 	tertiary: "text-text-tertiary",
@@ -25,10 +25,10 @@ const toneStyles = {
 };
 /** Semantic body text whose visual role is controlled by foundation tokens. */
 function Text(_ref) {
-	let { as, variant = "body", tone = "primary", truncate = false, className, children } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$17);
+	let { as, variant = "body", tone = "primary", truncate = false, className, children } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$17);
 	const Component = as !== null && as !== void 0 ? as : "span";
-	const elementProps = require_pagination._objectSpread2(require_pagination._objectSpread2({}, props), {}, {
-		className: require_pagination.cn(`opt-type-${variant}`, toneStyles[tone], truncate && "truncate", className),
+	const elementProps = require_highlight._objectSpread2(require_highlight._objectSpread2({}, props), {}, {
+		className: require_highlight.cn(`opt-type-${variant}`, toneStyles$1[tone], truncate && "truncate", className),
 		"data-opt-component": "text",
 		"data-opt-part": "root",
 		"data-opt-id": "NFKP2",
@@ -48,7 +48,7 @@ const _excluded$16 = [
 ];
 /** Semantic heading with independently selectable visual hierarchy. */
 function Heading(_ref) {
-	let { level = 2, variant = `heading-${level}`, className, children } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$16);
+	let { level = 2, variant = `heading-${level}`, className, children } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$16);
 	const Component = {
 		1: "h1",
 		2: "h2",
@@ -57,7 +57,7 @@ function Heading(_ref) {
 		5: "h5",
 		6: "h6"
 	}[level];
-	return (0, react.createElement)(Component, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn(`opt-type-${variant}`, "text-text-primary", className) }, props), {}, {
+	return (0, react.createElement)(Component, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(`opt-type-${variant}`, "text-text-primary", className) }, props), {}, {
 		"data-opt-component": "heading",
 		"data-opt-part": "root",
 		"data-opt-id": "NF0BT",
@@ -74,7 +74,7 @@ function Heading(_ref) {
 */
 function Separator$1({ orientation = "horizontal", decorative = false, children, className }) {
 	if (orientation === "horizontal" && children != null) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("gap-element flex items-center", className),
+		className: require_highlight.cn("gap-element flex items-center", className),
 		"data-opt-id": "7PWJS",
 		"data-opt-slug": "separator.Separator",
 		children: [
@@ -97,7 +97,7 @@ function Separator$1({ orientation = "horizontal", decorative = false, children,
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Separator, {
 		orientation,
 		decorative,
-		className: require_pagination.cn("bg-border shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px self-stretch", className),
+		className: require_highlight.cn("bg-border shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px self-stretch", className),
 		"data-opt-id": "7PWJS",
 		"data-opt-slug": "separator.Separator"
 	});
@@ -122,7 +122,7 @@ function OtpField({ length = 6, value: controlledValue, defaultValue = "", onCha
 	const labelId = label ? `${fieldId}-label` : void 0;
 	const groupLabelledBy = ariaLabel ? void 0 : labelId;
 	const groupAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : groupLabelledBy ? void 0 : "One-time code";
-	const [value, setRawValue] = require_pagination.useControlledState(defaultValue, controlledValue, onChange);
+	const [value, setRawValue] = require_highlight.useControlledState(defaultValue, controlledValue, onChange);
 	const completedRef = react.useRef(false);
 	const setValue = react.useCallback((next) => {
 		const clipped = next.slice(0, length);
@@ -215,20 +215,20 @@ function OtpField({ length = 6, value: controlledValue, defaultValue = "", onCha
 		focusCell
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("flex flex-col gap-1.5", className),
+		className: require_highlight.cn("flex flex-col gap-1.5", className),
 		"data-opt-id": "0083Q",
 		"data-opt-slug": "otp-field.OtpField",
 		children: [
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 				className: "text-sm font-medium text-text-primary",
 				id: labelId,
-				children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.RequiredMark, {})]
+				children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.RequiredMark, {})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				role: "group",
 				"aria-label": groupAriaLabel,
 				"aria-labelledby": groupLabelledBy,
-				"aria-describedby": require_pagination.getDescribedBy(fieldId, error, hint),
+				"aria-describedby": require_highlight.getDescribedBy(fieldId, error, hint),
 				className: "gap-element flex items-center",
 				children: cells.map((cell, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					ref: (node) => {
@@ -247,7 +247,7 @@ function OtpField({ length = 6, value: controlledValue, defaultValue = "", onCha
 					onKeyDown: handleKeyDown(i),
 					onPaste: handlePaste(i),
 					onFocus: (e) => e.target.select(),
-					className: require_pagination.cn(require_pagination.OPT_INPUT, "h-12 w-10 text-center text-lg font-medium", hasError && "border-danger focus-visible:outline-danger")
+					className: require_highlight.cn(require_highlight.OPT_INPUT, "h-12 w-10 text-center text-lg font-medium", hasError && "border-danger focus-visible:outline-danger")
 				}, i))
 			}),
 			name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
@@ -256,7 +256,7 @@ function OtpField({ length = 6, value: controlledValue, defaultValue = "", onCha
 				value,
 				disabled
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FieldMessages, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FieldMessages, {
 				id: fieldId,
 				error,
 				hint
@@ -277,15 +277,15 @@ const _excluded2$8 = [
 	"children",
 	"orientation"
 ];
-const sizeStyles$5 = {
+const sizeStyles$8 = {
 	sm: "h-8 min-w-8 px-2 text-xs gap-1.5",
 	md: "h-10 min-w-10 px-3 text-sm gap-2"
 };
-const toggleBase = require_pagination.cn("inline-flex cursor-pointer items-center justify-center rounded-md border border-border bg-surface font-medium text-text-secondary", "hover:bg-bg-subtle hover:text-text-primary", "data-[pressed]:border-accent data-[pressed]:bg-accent-subtle data-[pressed]:text-accent", "disabled:pointer-events-none disabled:opacity-40", require_pagination.OPT_FOCUS_VISIBLE);
+const toggleBase = require_highlight.cn("inline-flex cursor-pointer items-center justify-center rounded-md border border-border bg-surface font-medium text-text-secondary", "hover:bg-bg-subtle hover:text-text-primary", "data-[pressed]:border-accent data-[pressed]:bg-accent-subtle data-[pressed]:text-accent", "disabled:pointer-events-none disabled:opacity-40", require_highlight.OPT_FOCUS_VISIBLE);
 /** A two-state (pressed) button. Use standalone or inside `ToggleGroup`. */
 function Toggle(_ref) {
-	let { size = "md", className, children } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$15);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Toggle, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn(toggleBase, sizeStyles$5[size], className) }, props), {}, {
+	let { size = "md", className, children } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$15);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Toggle, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(toggleBase, sizeStyles$8[size], className) }, props), {}, {
 		"data-opt-id": "GFCMY",
 		"data-opt-slug": "toggle.Toggle",
 		children
@@ -294,11 +294,11 @@ function Toggle(_ref) {
 Toggle.displayName = "Toggle";
 /** A set of related toggles with shared selection and keyboard navigation. */
 function ToggleGroup(_ref2) {
-	let { className, children, orientation = "horizontal" } = _ref2, props = require_pagination._objectWithoutProperties(_ref2, _excluded2$8);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.ToggleGroup, require_pagination._objectSpread2(require_pagination._objectSpread2({
+	let { className, children, orientation = "horizontal" } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2$8);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.ToggleGroup, require_highlight._objectSpread2(require_highlight._objectSpread2({
 		orientation,
 		"aria-orientation": orientation,
-		className: require_pagination.cn("inline-flex gap-1", orientation === "vertical" ? "flex-col" : "flex-row", className)
+		className: require_highlight.cn("inline-flex gap-1", orientation === "vertical" ? "flex-col" : "flex-row", className)
 	}, props), {}, {
 		"data-opt-id": "47J37",
 		"data-opt-slug": "toggle.ToggleGroup",
@@ -312,23 +312,23 @@ const _excluded$14 = ["className"];
 const _excluded2$7 = ["className"];
 const _excluded3$4 = ["className", "children"];
 const _excluded4$3 = ["className", "children"];
-const triggerClass = `group/acc-trigger flex w-full cursor-pointer items-center justify-between gap-2 py-4 text-left text-sm font-medium text-text-primary transition-colors hover:text-text-secondary ${require_pagination.OPT_FOCUS} disabled:cursor-not-allowed disabled:opacity-50`;
-const contentClass = `overflow-hidden text-sm text-text-secondary ${require_pagination.OPT_ANIMATE_ENTER_EXIT}`;
+const triggerClass = `group/acc-trigger flex w-full cursor-pointer items-center justify-between gap-2 py-4 text-left text-sm font-medium text-text-primary transition-colors hover:text-text-secondary ${require_highlight.OPT_FOCUS} disabled:cursor-not-allowed disabled:opacity-50`;
+const contentClass = `overflow-hidden text-sm text-text-secondary ${require_highlight.OPT_ANIMATE_ENTER_EXIT}`;
 /** A vertically stacked set of expandable panels (single or multiple open). */
 function AccordionRoot(_ref) {
-	let { className } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$14);
+	let { className } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$14);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("border-border border-y", className),
+		className: require_highlight.cn("border-border border-y", className),
 		"data-opt-id": "CSBA9",
 		"data-opt-slug": "accordion.AccordionRoot",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AccordionRoot, require_pagination._objectSpread2({}, props))
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AccordionRoot, require_highlight._objectSpread2({}, props))
 	});
 }
 AccordionRoot.displayName = "AccordionRoot";
 /** A single accordion entry, identified by its `value`. */
 function AccordionItem(_ref2) {
-	let { className } = _ref2, props = require_pagination._objectWithoutProperties(_ref2, _excluded2$7);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AccordionItem, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("border-border border-b last:border-b-0", className) }, props), {}, {
+	let { className } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2$7);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AccordionItem, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("border-border border-b last:border-b-0", className) }, props), {}, {
 		"data-opt-id": "JTY9M",
 		"data-opt-slug": "accordion.AccordionItem"
 	}));
@@ -336,8 +336,8 @@ function AccordionItem(_ref2) {
 AccordionItem.displayName = "AccordionItem";
 /** The clickable header that expands/collapses its panel. */
 function AccordionTrigger(_ref3) {
-	let { className, children } = _ref3, props = require_pagination._objectWithoutProperties(_ref3, _excluded3$4);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.AccordionTrigger, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn(triggerClass, className) }, props), {}, {
+	let { className, children } = _ref3, props = require_highlight._objectWithoutProperties(_ref3, _excluded3$4);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.AccordionTrigger, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(triggerClass, className) }, props), {}, {
 		"data-opt-id": "CWJZZ",
 		"data-opt-slug": "accordion.AccordionTrigger",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -352,8 +352,8 @@ function AccordionTrigger(_ref3) {
 AccordionTrigger.displayName = "AccordionTrigger";
 /** The collapsible panel body associated with a trigger. */
 function AccordionContent(_ref4) {
-	let { className, children } = _ref4, props = require_pagination._objectWithoutProperties(_ref4, _excluded4$3);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AccordionContent, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn(contentClass, className) }, props), {}, {
+	let { className, children } = _ref4, props = require_highlight._objectWithoutProperties(_ref4, _excluded4$3);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AccordionContent, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(contentClass, className) }, props), {}, {
 		"data-opt-id": "J98AG",
 		"data-opt-slug": "accordion.AccordionContent",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -372,19 +372,19 @@ function interpolate(template, values) {
 function Breadcrumb({ items, separator = "/", className, onNavigate, "aria-label": ariaLabel = "Breadcrumb" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
 		"aria-label": ariaLabel,
-		className: require_pagination.cn("flex items-center gap-1 px-1.5 text-sm", className),
+		className: require_highlight.cn("flex items-center gap-1 px-1.5 text-sm", className),
 		"data-opt-id": "3FR0Y",
 		"data-opt-slug": "breadcrumb.Breadcrumb",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
 			className: "flex items-center gap-1",
 			children: items.map((item, index) => {
 				const isLast = index === items.length - 1;
-				const linkClassName = require_pagination.cn(`flex items-center gap-1.5 rounded-sm ${require_pagination.OPT_FOCUS} transition-colors`, item.disabled ? `${require_pagination.OPT_TEXT_TERTIARY} cursor-not-allowed` : `${require_pagination.OPT_TEXT_SECONDARY} hover:text-text-primary cursor-pointer`);
+				const linkClassName = require_highlight.cn(`flex items-center gap-1.5 rounded-sm ${require_highlight.OPT_FOCUS} transition-colors`, item.disabled ? `${require_highlight.OPT_TEXT_TERTIARY} cursor-not-allowed` : `${require_highlight.OPT_TEXT_SECONDARY} hover:text-text-primary cursor-pointer`);
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
 					className: "flex items-center gap-1",
 					children: isLast ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						"aria-current": "page",
-						className: `flex items-center gap-1.5 font-medium ${require_pagination.OPT_TEXT_PRIMARY}`,
+						className: `flex items-center gap-1.5 font-medium ${require_highlight.OPT_TEXT_PRIMARY}`,
 						children: [item.icon, item.label]
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [item.href ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 						href: item.disabled ? void 0 : item.href,
@@ -395,13 +395,13 @@ function Breadcrumb({ items, separator = "/", className, onNavigate, "aria-label
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
 						disabled: item.disabled,
-						"aria-label": interpolate(require_pagination.koBreadcrumbLabels.navAriaLabel, { label: item.label }),
+						"aria-label": interpolate(require_highlight.koBreadcrumbLabels.navAriaLabel, { label: item.label }),
 						className: linkClassName,
 						onClick: () => !item.disabled && (onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(item)),
 						children: [item.icon, item.label]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						"aria-hidden": "true",
-						className: require_pagination.OPT_TEXT_TERTIARY,
+						className: require_highlight.OPT_TEXT_TERTIARY,
 						children: separator
 					})] })
 				}, item.id);
@@ -448,7 +448,7 @@ const _excluded6 = [
 ];
 /** Renders the card component. */
 function Card(_ref) {
-	let { variant = "default", padding = "md", shadow = true, selectable = false, selected = false, onSelectedChange, className, children, onClick, onKeyDown, role, tabIndex } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$13);
+	let { variant = "default", padding = "md", shadow = true, selectable = false, selected = false, onSelectedChange, className, children, onClick, onKeyDown, role, tabIndex } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$13);
 	const isInteractive = selectable || !!onClick;
 	const handleClick = selectable ? (e) => {
 		onSelectedChange === null || onSelectedChange === void 0 || onSelectedChange(!selected);
@@ -467,7 +467,7 @@ function Card(_ref) {
 		}
 		onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
 	} : onKeyDown;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_pagination._objectSpread2(require_pagination._objectSpread2(require_pagination._objectSpread2({}, props), {}, { className: require_pagination.cn("rounded-xl", variant === "default" && require_pagination.cn(`border border-border bg-surface`, shadow && "shadow-sm"), variant === "outline" && "border-border border-2 bg-transparent", variant === "ghost" && "bg-bg-subtle", padding === "none" && "p-0", padding === "sm" && "p-3", padding === "md" && "p-5", padding === "lg" && "p-8", selectable && "cursor-pointer transition-colors", selectable && selected && "ring-accent border-accent ring-2 ring-offset-1", selectable && !selected && "hover:border-accent/50", className) }, isInteractive ? {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_highlight._objectSpread2(require_highlight._objectSpread2(require_highlight._objectSpread2({}, props), {}, { className: require_highlight.cn("rounded-xl", variant === "default" && require_highlight.cn(`border border-border bg-surface`, shadow && "shadow-sm"), variant === "outline" && "border-border border-2 bg-transparent", variant === "ghost" && "bg-bg-subtle", padding === "none" && "p-0", padding === "sm" && "p-3", padding === "md" && "p-5", padding === "lg" && "p-8", selectable && "cursor-pointer transition-colors", selectable && selected && "ring-accent border-accent ring-2 ring-offset-1", selectable && !selected && "hover:border-accent/50", className) }, isInteractive ? {
 		role: selectable ? "option" : "button",
 		tabIndex: 0,
 		"aria-selected": selectable ? selected : void 0,
@@ -491,8 +491,8 @@ const headerGapClasses = {
 };
 /** Renders the card header component. */
 function CardHeader(_ref2) {
-	let { gap = "sm", className, children } = _ref2, props = require_pagination._objectWithoutProperties(_ref2, _excluded2$6);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("flex flex-col", headerGapClasses[gap], className) }, props), {}, {
+	let { gap = "sm", className, children } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2$6);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("flex flex-col", headerGapClasses[gap], className) }, props), {}, {
 		"data-opt-id": "JST3J",
 		"data-opt-slug": "card.CardHeader",
 		children
@@ -500,8 +500,8 @@ function CardHeader(_ref2) {
 }
 /** Renders the card title component. */
 function CardTitle(_ref3) {
-	let { as: Tag = "h3", className, children } = _ref3, props = require_pagination._objectWithoutProperties(_ref3, _excluded3$3);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn(`text-lg font-semibold ${require_pagination.OPT_TEXT_PRIMARY}`, className) }, props), {}, {
+	let { as: Tag = "h3", className, children } = _ref3, props = require_highlight._objectWithoutProperties(_ref3, _excluded3$3);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(`text-lg font-semibold ${require_highlight.OPT_TEXT_PRIMARY}`, className) }, props), {}, {
 		"data-opt-id": "V15TX",
 		"data-opt-slug": "card.CardTitle",
 		children
@@ -509,8 +509,8 @@ function CardTitle(_ref3) {
 }
 /** Renders the card description component. */
 function CardDescription(_ref4) {
-	let { className, children } = _ref4, props = require_pagination._objectWithoutProperties(_ref4, _excluded4$2);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn(`text-sm ${require_pagination.OPT_TEXT_SECONDARY}`, className) }, props), {}, {
+	let { className, children } = _ref4, props = require_highlight._objectWithoutProperties(_ref4, _excluded4$2);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(`text-sm ${require_highlight.OPT_TEXT_SECONDARY}`, className) }, props), {}, {
 		"data-opt-id": "YB1RN",
 		"data-opt-slug": "card.CardDescription",
 		children
@@ -524,8 +524,8 @@ const contentSpacingClasses = {
 };
 /** Renders the card content component. */
 function CardContent(_ref5) {
-	let { spacing = "md", className, children } = _ref5, props = require_pagination._objectWithoutProperties(_ref5, _excluded5);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn(contentSpacingClasses[spacing], className) }, props), {}, {
+	let { spacing = "md", className, children } = _ref5, props = require_highlight._objectWithoutProperties(_ref5, _excluded5);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(contentSpacingClasses[spacing], className) }, props), {}, {
 		"data-opt-id": "9Y68R",
 		"data-opt-slug": "card.CardContent",
 		children
@@ -533,8 +533,8 @@ function CardContent(_ref5) {
 }
 /** Renders the card footer component. */
 function CardFooter(_ref6) {
-	let { divider = true, className, children } = _ref6, props = require_pagination._objectWithoutProperties(_ref6, _excluded6);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("mt-4 flex items-center justify-end gap-2 pt-4", divider && `border-t border border-border`, className) }, props), {}, {
+	let { divider = true, className, children } = _ref6, props = require_highlight._objectWithoutProperties(_ref6, _excluded6);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("mt-4 flex items-center justify-end gap-2 pt-4", divider && `border-t border border-border`, className) }, props), {}, {
 		"data-opt-id": "GRNTR",
 		"data-opt-slug": "card.CardFooter",
 		children
@@ -559,7 +559,7 @@ const _excluded$12 = [
 	"aria-label",
 	"aria-labelledby"
 ];
-const sizeStyles$4 = {
+const sizeStyles$7 = {
 	sm: {
 		track: "h-5 w-9",
 		thumb: "h-4 w-4",
@@ -578,12 +578,12 @@ const sizeStyles$4 = {
 };
 const Switch = (0, react.forwardRef)((_ref, ref) => {
 	var _useInputId;
-	let { label, required, error, hint, description, checked: controlledChecked, defaultChecked = false, onChange, size = "md", disabled, className, id, onClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$12);
+	let { label, required, error, hint, description, checked: controlledChecked, defaultChecked = false, onChange, size = "md", disabled, className, id, onClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$12);
 	const fallbackId = (0, react.useId)();
-	const switchId = (_useInputId = require_pagination.useInputId(id, label, "switch")) !== null && _useInputId !== void 0 ? _useInputId : `switch-${fallbackId}`;
+	const switchId = (_useInputId = require_highlight.useInputId(id, label, "switch")) !== null && _useInputId !== void 0 ? _useInputId : `switch-${fallbackId}`;
 	const hintText = hint !== null && hint !== void 0 ? hint : description;
 	const hasError = Boolean(error);
-	const styles = sizeStyles$4[size];
+	const styles = sizeStyles$7[size];
 	const labelId = label ? `${switchId}-label` : void 0;
 	const switchLabelledBy = ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : ariaLabel ? void 0 : labelId;
 	const switchAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : switchLabelledBy ? void 0 : "Switch";
@@ -602,12 +602,12 @@ const Switch = (0, react.forwardRef)((_ref, ref) => {
 		onClick
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("flex flex-col gap-1.5", className),
+		className: require_highlight.cn("flex flex-col gap-1.5", className),
 		"data-opt-id": "51Z9R",
 		"data-opt-slug": "switch.Switch",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex items-start gap-3",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", require_pagination._objectSpread2(require_pagination._objectSpread2({
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", require_highlight._objectSpread2(require_highlight._objectSpread2({
 				ref,
 				type: "button",
 				role: "switch",
@@ -616,24 +616,24 @@ const Switch = (0, react.forwardRef)((_ref, ref) => {
 				"aria-label": switchAriaLabel,
 				"aria-labelledby": switchLabelledBy,
 				disabled,
-				className: require_pagination.cn("group relative inline-flex shrink-0 cursor-pointer rounded-full p-0.5 transition-colors", styles.track, "bg-bg-muted", "aria-[checked=true]:bg-accent", "disabled:cursor-not-allowed disabled:opacity-50", require_pagination.OPT_FOCUS_VISIBLE),
+				className: require_highlight.cn("group relative inline-flex shrink-0 cursor-pointer rounded-full p-0.5 transition-colors", styles.track, "bg-bg-muted", "aria-[checked=true]:bg-accent", "disabled:cursor-not-allowed disabled:opacity-50", require_highlight.OPT_FOCUS_VISIBLE),
 				"aria-invalid": hasError,
 				"aria-required": required,
-				"aria-describedby": require_pagination.getDescribedBy(switchId, error, hintText),
+				"aria-describedby": require_highlight.getDescribedBy(switchId, error, hintText),
 				onClick: handleClick
-			}, props), {}, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_pagination.cn("pointer-events-none inline-block transform rounded-full bg-white shadow-sm ring-0 transition-transform", styles.thumb, "translate-x-0", size === "sm" && "group-aria-[checked=true]:translate-x-4", size === "md" && "group-aria-[checked=true]:translate-x-5", size === "lg" && "group-aria-[checked=true]:translate-x-7") }) })), (label || hintText) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			}, props), {}, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_highlight.cn("pointer-events-none inline-block transform rounded-full bg-white shadow-sm ring-0 transition-transform", styles.thumb, "translate-x-0", size === "sm" && "group-aria-[checked=true]:translate-x-4", size === "md" && "group-aria-[checked=true]:translate-x-5", size === "lg" && "group-aria-[checked=true]:translate-x-7") }) })), (label || hintText) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-col",
 				children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 					id: labelId,
-					className: require_pagination.cn("text-text-primary text-sm font-medium", disabled && "opacity-50"),
-					children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.RequiredMark, {})]
+					className: require_highlight.cn("text-text-primary text-sm font-medium", disabled && "opacity-50"),
+					children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.RequiredMark, {})]
 				}), hintText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					id: `${switchId}-hint`,
-					className: require_pagination.cn("text-text-tertiary text-sm", disabled && "opacity-50"),
+					className: require_highlight.cn("text-text-tertiary text-sm", disabled && "opacity-50"),
 					children: hintText
 				})]
 			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FieldMessages, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FieldMessages, {
 			id: switchId,
 			error
 		})]
@@ -661,9 +661,9 @@ const variantStyles$2 = {
 };
 /** Renders the skeleton component. */
 function Skeleton(_ref) {
-	let { variant = "text", width, height, lines = 1, animated = true, className, style } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$11);
-	const baseClass = require_pagination.cn("bg-bg-subtle", animated && "animate-pulse", variantStyles$2[variant], className);
-	const computedStyle = require_pagination._objectSpread2({
+	let { variant = "text", width, height, lines = 1, animated = true, className, style } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$11);
+	const baseClass = require_highlight.cn("bg-bg-subtle", animated && "animate-pulse", variantStyles$2[variant], className);
+	const computedStyle = require_highlight._objectSpread2({
 		width: typeof width === "number" ? `${width}px` : width,
 		height: typeof height === "number" ? `${height}px` : height
 	}, style);
@@ -673,15 +673,15 @@ function Skeleton(_ref) {
 		"aria-label": "Loading",
 		"data-opt-id": "EJT87",
 		"data-opt-slug": "skeleton.Skeleton",
-		children: [Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_pagination._objectSpread2({
-			className: require_pagination.cn(baseClass, i === lines - 1 && "w-4/5"),
+		children: [Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_highlight._objectSpread2({
+			className: require_highlight.cn(baseClass, i === lines - 1 && "w-4/5"),
 			style: i === lines - 1 ? void 0 : computedStyle
 		}, props), i)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sr-only",
 			children: "Loading..."
 		})]
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({
 		className: baseClass,
 		style: computedStyle,
 		role: "status",
@@ -697,8 +697,8 @@ function Skeleton(_ref) {
 }
 /** Renders the skeleton text component. */
 function SkeletonText(_ref2) {
-	let { lines = 3, className } = _ref2, props = require_pagination._objectWithoutProperties(_ref2, _excluded2$5);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, require_pagination._objectSpread2(require_pagination._objectSpread2({
+	let { lines = 3, className } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2$5);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, require_highlight._objectSpread2(require_highlight._objectSpread2({
 		variant: "text",
 		lines,
 		className
@@ -709,8 +709,8 @@ function SkeletonText(_ref2) {
 }
 /** Renders the skeleton avatar component. */
 function SkeletonAvatar(_ref3) {
-	let { size = 40, className } = _ref3, props = require_pagination._objectWithoutProperties(_ref3, _excluded3$2);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, require_pagination._objectSpread2(require_pagination._objectSpread2({
+	let { size = 40, className } = _ref3, props = require_highlight._objectWithoutProperties(_ref3, _excluded3$2);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, require_highlight._objectSpread2(require_highlight._objectSpread2({
 		variant: "circular",
 		width: size,
 		height: size,
@@ -722,8 +722,8 @@ function SkeletonAvatar(_ref3) {
 }
 /** Renders the skeleton card component. */
 function SkeletonCard(_ref4) {
-	let { className } = _ref4, props = require_pagination._objectWithoutProperties(_ref4, _excluded4$1);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("gap-group flex flex-col", className) }, props), {}, {
+	let { className } = _ref4, props = require_highlight._objectWithoutProperties(_ref4, _excluded4$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("gap-group flex flex-col", className) }, props), {}, {
 		"data-opt-id": "34V5D",
 		"data-opt-slug": "skeleton.SkeletonCard",
 		children: [
@@ -745,7 +745,7 @@ function SkeletonCard(_ref4) {
 /** Renders the skeleton table component. */
 function SkeletonTable({ rows = 5, columns = 4, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("gap-element flex flex-col", className),
+		className: require_highlight.cn("gap-element flex flex-col", className),
 		role: "status",
 		"aria-label": "Loading table",
 		"data-opt-id": "3KEDN",
@@ -788,7 +788,7 @@ const _excluded$10 = [
 	"id",
 	"rows"
 ];
-const textareaSizeStyles = require_pagination.OPT_TEXTAREA_SIZE;
+const textareaSizeStyles = require_highlight.OPT_TEXTAREA_SIZE;
 const resizeStyles = {
 	none: "resize-none",
 	vertical: "resize-y",
@@ -797,29 +797,29 @@ const resizeStyles = {
 };
 const Textarea = (0, react.forwardRef)((_ref, ref) => {
 	var _useInputId;
-	let { label, error, hint, fullWidth = false, required, resize = "vertical", size = "md", className, id, rows = 4 } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$10);
+	let { label, error, hint, fullWidth = false, required, resize = "vertical", size = "md", className, id, rows = 4 } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$10);
 	const fallbackId = (0, react.useId)().replace(/:/g, "");
-	const textareaId = (_useInputId = require_pagination.useInputId(id, label, "textarea")) !== null && _useInputId !== void 0 ? _useInputId : `textarea-${fallbackId}`;
+	const textareaId = (_useInputId = require_highlight.useInputId(id, label, "textarea")) !== null && _useInputId !== void 0 ? _useInputId : `textarea-${fallbackId}`;
 	const hasError = Boolean(error);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("flex flex-col gap-1.5", fullWidth && "w-full"),
+		className: require_highlight.cn("flex flex-col gap-1.5", fullWidth && "w-full"),
 		"data-opt-id": "6T58H",
 		"data-opt-slug": "textarea.Textarea",
 		children: [
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 				htmlFor: textareaId,
 				className: "text-text-primary text-sm font-medium",
-				children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.RequiredMark, {})]
+				children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.RequiredMark, {})]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", require_pagination._objectSpread2({
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", require_highlight._objectSpread2({
 				ref,
 				id: textareaId,
 				rows,
-				className: require_pagination.cn("border-border bg-surface text-text-primary placeholder:text-text-tertiary w-full rounded-lg border px-4 py-3 text-sm outline-transparent", require_pagination.OPT_FOCUS_VISIBLE, textareaSizeStyles[size], resizeStyles[resize], hasError && "border-danger focus-visible:outline-danger", !fullWidth && "w-auto", className),
+				className: require_highlight.cn("border-border bg-surface text-text-primary placeholder:text-text-tertiary w-full rounded-lg border px-4 py-3 text-sm outline-transparent", require_highlight.OPT_FOCUS_VISIBLE, textareaSizeStyles[size], resizeStyles[resize], hasError && "border-danger focus-visible:outline-danger", !fullWidth && "w-auto", className),
 				"aria-invalid": hasError,
-				"aria-describedby": require_pagination.getDescribedBy(textareaId, error, hint)
+				"aria-describedby": require_highlight.getDescribedBy(textareaId, error, hint)
 			}, props)),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FieldMessages, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FieldMessages, {
 				id: textareaId,
 				error,
 				hint
@@ -889,7 +889,7 @@ function useImageLoadingStatus(src, { srcSet, sizes, crossOrigin, referrerPolicy
 	]);
 	return status;
 }
-const sizeStyles$3 = {
+const sizeStyles$6 = {
 	xs: "h-6 w-6 text-[10px]",
 	sm: "h-8 w-8 text-xs",
 	md: "h-10 w-10 text-sm",
@@ -932,7 +932,7 @@ function getColorFromName(name) {
 /** Renders the avatar component. */
 function Avatar(_ref) {
 	var _ref2, _ref3;
-	let { src, srcSet, sizes, crossOrigin, referrerPolicy, alt, name, size = "md", fallback, status, className, onLoadingStatusChange } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$9);
+	let { src, srcSet, sizes, crossOrigin, referrerPolicy, alt, name, size = "md", fallback, status, className, onLoadingStatusChange } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$9);
 	const loadingStatus = useImageLoadingStatus(src, {
 		srcSet,
 		sizes,
@@ -970,33 +970,33 @@ function Avatar(_ref) {
 		"aria-hidden": "true",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", require_pagination._objectSpread2(require_pagination._objectSpread2({
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", require_highlight._objectSpread2(require_highlight._objectSpread2({
 		role: "img",
 		"aria-label": avatarLabel,
-		className: require_pagination.cn("relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full", sizeStyles$3[size], !showImage && bgColor, className)
+		className: require_highlight.cn("relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full", sizeStyles$6[size], !showImage && bgColor, className)
 	}, props), {}, {
 		"data-opt-id": "SCMM0",
 		"data-opt-slug": "avatar.Avatar",
 		children: [avatarContent, status && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: require_pagination.cn("border-surface absolute right-0 bottom-0 rounded-full", statusStyles[status], statusSizeStyles[size]),
+			className: require_highlight.cn("border-surface absolute right-0 bottom-0 rounded-full", statusStyles[status], statusSizeStyles[size]),
 			"aria-hidden": "true"
 		})]
 	}));
 }
 /** Renders the avatar group component. */
 function AvatarGroup(_ref5) {
-	let { max = 4, size = "md", children, className } = _ref5, props = require_pagination._objectWithoutProperties(_ref5, _excluded2$4);
+	let { max = 4, size = "md", children, className } = _ref5, props = require_highlight._objectWithoutProperties(_ref5, _excluded2$4);
 	const avatars = Array.isArray(children) ? children : [children];
 	const visibleAvatars = avatars.slice(0, max);
 	const remainingCount = avatars.length - max;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("flex", className) }, props), {}, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("flex", className) }, props), {}, {
 		"data-opt-id": "MVB53",
 		"data-opt-slug": "avatar.AvatarGroup",
 		children: [visibleAvatars.map((child, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "ring-surface relative -ml-2 inline-block rounded-full ring-2 first:ml-0",
 			children: child
 		}, index)), remainingCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: require_pagination.cn("bg-bg-subtle text-text-secondary ring-surface relative inline-flex items-center justify-center rounded-full font-medium ring-2", sizeStyles$3[size]),
+			className: require_highlight.cn("bg-bg-subtle text-text-secondary ring-surface relative inline-flex items-center justify-center rounded-full font-medium ring-2", sizeStyles$6[size]),
 			children: ["+", remainingCount]
 		})]
 	}));
@@ -1025,7 +1025,7 @@ const _excluded2$3 = [
 	"indeterminate",
 	"className"
 ];
-const sizeStyles$2 = {
+const sizeStyles$5 = {
 	sm: "h-1",
 	md: "h-2",
 	lg: "h-3"
@@ -1049,10 +1049,10 @@ function getProgressValue(value, max) {
 }
 /** Renders the progress component. */
 function Progress(_ref) {
-	let { value, max = 100, size = "md", variant = "default", showLabel = false, label, animated = true, indeterminate = false, className } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$8);
+	let { value, max = 100, size = "md", variant = "default", showLabel = false, label, animated = true, indeterminate = false, className } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$8);
 	const progress = indeterminate || value === void 0 ? null : getProgressValue(value, max);
 	const shouldRenderHeader = Boolean(label) || showLabel && progress;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("w-full", className) }, props), {}, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("w-full", className) }, props), {}, {
 		"data-opt-id": "Y5N8R",
 		"data-opt-slug": "progress.Progress",
 		children: [shouldRenderHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1065,7 +1065,7 @@ function Progress(_ref) {
 				children: progress.valueText
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: require_pagination.cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$2[size]),
+			className: require_highlight.cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$5[size]),
 			role: "progressbar",
 			"aria-valuenow": progress === null || progress === void 0 ? void 0 : progress.clampedValue,
 			"aria-valuemin": progress ? 0 : void 0,
@@ -1073,7 +1073,7 @@ function Progress(_ref) {
 			"aria-valuetext": progress === null || progress === void 0 ? void 0 : progress.valueText,
 			"aria-label": label !== null && label !== void 0 ? label : progress ? `${progress.valueText} complete` : "Loading",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_pagination.cn("h-full rounded-full", variantStyles$1[variant], !progress && "w-1/3 animate-pulse", animated && (progress ? "transition-all duration-300 ease-out" : "transition-opacity duration-700 ease-in-out")),
+				className: require_highlight.cn("h-full rounded-full", variantStyles$1[variant], !progress && "w-1/3 animate-pulse", animated && (progress ? "transition-all duration-300 ease-out" : "transition-opacity duration-700 ease-in-out")),
 				style: progress ? { width: `${progress.percentage}%` } : void 0
 			})
 		})]
@@ -1088,7 +1088,7 @@ const circularVariantStyles = {
 /** Renders the circular progress component. */
 function CircularProgress(_ref2) {
 	var _progress$percentage;
-	let { value, max = 100, size = 48, strokeWidth = 4, variant = "default", showLabel = false, label, indeterminate = false, className } = _ref2, props = require_pagination._objectWithoutProperties(_ref2, _excluded2$3);
+	let { value, max = 100, size = 48, strokeWidth = 4, variant = "default", showLabel = false, label, indeterminate = false, className } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2$3);
 	const labelId = (0, react.useId)();
 	const isIndeterminate = indeterminate || value === void 0;
 	const progress = isIndeterminate ? null : getProgressValue(value, max);
@@ -1106,10 +1106,10 @@ function CircularProgress(_ref2) {
 				className: "sr-only",
 				children: label
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", require_pagination._objectSpread2(require_pagination._objectSpread2({
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", require_highlight._objectSpread2(require_highlight._objectSpread2({
 				width: size,
 				height: size,
-				className: require_pagination.cn(isIndeterminate ? "animate-spin" : "-rotate-90", className),
+				className: require_highlight.cn(isIndeterminate ? "animate-spin" : "-rotate-90", className),
 				role: isIndeterminate ? "progressbar" : "meter",
 				"aria-labelledby": label ? labelId : void 0,
 				"aria-valuenow": progress === null || progress === void 0 ? void 0 : progress.clampedValue,
@@ -1131,7 +1131,7 @@ function CircularProgress(_ref2) {
 				fill: "none",
 				strokeWidth,
 				strokeLinecap: "round",
-				className: require_pagination.cn("transition-all duration-300 ease-out", circularVariantStyles[variant]),
+				className: require_highlight.cn("transition-all duration-300 ease-out", circularVariantStyles[variant]),
 				style: {
 					strokeDasharray: isIndeterminate ? `${circumference * .28} ${circumference}` : circumference,
 					strokeDashoffset: isIndeterminate ? 0 : strokeDashoffset,
@@ -1158,7 +1158,7 @@ const _excluded$7 = [
 	"getValueLabel",
 	"className"
 ];
-const sizeStyles$1 = {
+const sizeStyles$4 = {
 	sm: "h-1",
 	md: "h-2",
 	lg: "h-3"
@@ -1175,10 +1175,10 @@ const variantStyles = {
 * opt-ui-primitives Meter primitive, which owns the role/aria/valuetext.
 */
 function Meter(_ref) {
-	let { value, min = 0, max = 100, size = "md", variant = "default", showValue = false, label, getValueLabel, className } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$7);
+	let { value, min = 0, max = 100, size = "md", variant = "default", showValue = false, label, getValueLabel, className } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$7);
 	const clamped = Math.min(Math.max(value, min), max);
 	const percentage = max === min ? 0 : (clamped - min) / (max - min) * 100;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("w-full", className) }, props), {}, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("w-full", className) }, props), {}, {
 		"data-opt-id": "G01TE",
 		"data-opt-slug": "meter.Meter",
 		children: [(showValue || label) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1196,9 +1196,9 @@ function Meter(_ref) {
 			max,
 			getValueLabel,
 			"aria-label": label !== null && label !== void 0 ? label : `${Math.round(percentage)}%`,
-			className: require_pagination.cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$1[size]),
+			className: require_highlight.cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$4[size]),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_pagination.cn("h-full rounded-full transition-all duration-300 ease-out", variantStyles[variant]),
+				className: require_highlight.cn("h-full rounded-full transition-all duration-300 ease-out", variantStyles[variant]),
 				style: { width: `${percentage}%` }
 			})
 		})]
@@ -1242,7 +1242,7 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 		editingId
 	]);
 	const updateStep = (0, react.useCallback)((id, updates) => {
-		onChange(steps.map((s) => s.id === id ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, s), updates) : s));
+		onChange(steps.map((s) => s.id === id ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, s), updates) : s));
 	}, [steps, onChange]);
 	const moveStep = (0, react.useCallback)((index, direction) => {
 		const target = index + direction;
@@ -1253,7 +1253,7 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 	}, [steps, onChange]);
 	const atLimit = Boolean(maxSteps && steps.length >= maxSteps);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("flex flex-col gap-3", className),
+		className: require_highlight.cn("flex flex-col gap-3", className),
 		role: "list",
 		"aria-label": (_ref = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref !== void 0 ? _ref : "Step builder",
 		"data-opt-id": "7BQDT",
@@ -1266,7 +1266,7 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 			steps.map((step, index) => {
 				var _step$description;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: require_pagination.cn(require_pagination.OPT_SURFACE, require_pagination.OPT_BORDER, "flex items-start gap-3 p-3"),
+					className: require_highlight.cn(require_highlight.OPT_SURFACE, require_highlight.OPT_BORDER, "flex items-start gap-3 p-3"),
 					role: "listitem",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1286,7 +1286,7 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 										onKeyDown: (e) => {
 											if (e.key === "Enter") setEditingId(null);
 										},
-										className: require_pagination.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset w-full rounded-md border px-2 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_pagination.OPT_TEXT_PRIMARY, require_pagination.OPT_FOCUS_VISIBLE),
+										className: require_highlight.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset w-full rounded-md border px-2 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_highlight.OPT_TEXT_PRIMARY, require_highlight.OPT_FOCUS_VISIBLE),
 										"aria-label": "Step label",
 										autoFocus: true
 									}),
@@ -1295,10 +1295,10 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 										value: (_step$description = step.description) !== null && _step$description !== void 0 ? _step$description : "",
 										onChange: (e) => updateStep(step.id, { description: e.target.value }),
 										placeholder: "Description (optional)",
-										className: require_pagination.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset w-full rounded-md border px-2 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_pagination.OPT_TEXT_PRIMARY, "placeholder:text-text-tertiary", require_pagination.OPT_FOCUS_VISIBLE),
+										className: require_highlight.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset w-full rounded-md border px-2 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_highlight.OPT_TEXT_PRIMARY, "placeholder:text-text-tertiary", require_highlight.OPT_FOCUS_VISIBLE),
 										"aria-label": "Step description"
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 										variant: "ghost",
 										size: "sm",
 										onClick: () => setEditingId(null),
@@ -1311,10 +1311,10 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 								onClick: () => setEditingId(step.id),
 								"aria-label": `Edit ${step.label}`,
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: require_pagination.cn(require_pagination.OPT_TEXT_PRIMARY, "text-sm font-medium"),
+									className: require_highlight.cn(require_highlight.OPT_TEXT_PRIMARY, "text-sm font-medium"),
 									children: step.label
 								}), step.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: require_pagination.cn("text-text-secondary", "mt-0.5 block text-xs"),
+									className: require_highlight.cn("text-text-secondary", "mt-0.5 block text-xs"),
 									children: step.description
 								})]
 							})
@@ -1326,7 +1326,7 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 									type: "button",
 									onClick: () => moveStep(index, -1),
 									disabled: index === 0,
-									className: require_pagination.cn("rounded p-1 text-sm", require_pagination.OPT_TEXT_TERTIARY, "hover:bg-bg-subtle", "disabled:opacity-30", require_pagination.OPT_FOCUS_VISIBLE),
+									className: require_highlight.cn("rounded p-1 text-sm", require_highlight.OPT_TEXT_TERTIARY, "hover:bg-bg-subtle", "disabled:opacity-30", require_highlight.OPT_FOCUS_VISIBLE),
 									"aria-label": "Move up",
 									children: "▲"
 								}),
@@ -1334,14 +1334,14 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 									type: "button",
 									onClick: () => moveStep(index, 1),
 									disabled: index === steps.length - 1,
-									className: require_pagination.cn("rounded p-1 text-sm", require_pagination.OPT_TEXT_TERTIARY, "hover:bg-bg-subtle", "disabled:opacity-30", require_pagination.OPT_FOCUS_VISIBLE),
+									className: require_highlight.cn("rounded p-1 text-sm", require_highlight.OPT_TEXT_TERTIARY, "hover:bg-bg-subtle", "disabled:opacity-30", require_highlight.OPT_FOCUS_VISIBLE),
 									"aria-label": "Move down",
 									children: "▼"
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
 									onClick: () => removeStep(step.id),
-									className: require_pagination.cn("text-danger-fg hover:bg-danger-subtle rounded p-1 text-sm", require_pagination.OPT_FOCUS_VISIBLE),
+									className: require_highlight.cn("text-danger-fg hover:bg-danger-subtle rounded p-1 text-sm", require_highlight.OPT_FOCUS_VISIBLE),
 									"aria-label": `Remove ${step.label}`,
 									children: "✕"
 								})
@@ -1350,7 +1350,7 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 					]
 				}, step.id);
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.Button, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.Button, {
 				variant: "secondary",
 				size: "sm",
 				onClick: addStep,
@@ -1526,12 +1526,12 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 		onChange(groups.filter((g) => g.id !== groupId));
 	}, [groups, onChange]);
 	const updateGroupLogic = (0, react.useCallback)((groupId, logic) => {
-		onChange(groups.map((g) => g.id === groupId ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, g), {}, { logic }) : g));
+		onChange(groups.map((g) => g.id === groupId ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, g), {}, { logic }) : g));
 	}, [groups, onChange]);
 	const addCondition = (0, react.useCallback)((groupId) => {
 		onChange(groups.map((g) => {
 			var _properties$2;
-			return g.id === groupId ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, g), {}, { conditions: [...g.conditions, {
+			return g.id === groupId ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, g), {}, { conditions: [...g.conditions, {
 				id: createConditionId(),
 				property: (_properties$2 = properties[0]) !== null && _properties$2 !== void 0 ? _properties$2 : "",
 				operator: "equals",
@@ -1545,15 +1545,15 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 		createConditionId
 	]);
 	const removeCondition = (0, react.useCallback)((groupId, condId) => {
-		onChange(groups.map((g) => g.id === groupId ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, g), {}, { conditions: g.conditions.filter((c) => c.id !== condId) }) : g));
+		onChange(groups.map((g) => g.id === groupId ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, g), {}, { conditions: g.conditions.filter((c) => c.id !== condId) }) : g));
 	}, [groups, onChange]);
 	const updateCondition = (0, react.useCallback)((groupId, condId, updates) => {
-		onChange(groups.map((g) => g.id === groupId ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, g), {}, { conditions: g.conditions.map((c) => c.id === condId ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, c), updates) : c) }) : g));
+		onChange(groups.map((g) => g.id === groupId ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, g), {}, { conditions: g.conditions.map((c) => c.id === condId ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, c), updates) : c) }) : g));
 	}, [groups, onChange]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConditionBuilderIdScopeContext.Provider, {
 		value: idScope,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: require_pagination.cn("flex flex-col gap-3", className),
+			className: require_highlight.cn("flex flex-col gap-3", className),
 			"aria-label": (_ref = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref !== void 0 ? _ref : "Condition builder",
 			"data-opt-id": "SXXKJ",
 			"data-opt-slug": "condition-builder.ConditionBuilder",
@@ -1573,7 +1573,7 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-border-subtle h-px flex-1" })
 					]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: require_pagination.cn(require_pagination.OPT_SURFACE, require_pagination.OPT_BORDER, "p-3"),
+					className: require_highlight.cn(require_highlight.OPT_SURFACE, require_highlight.OPT_BORDER, "p-3"),
 					role: "group",
 					"aria-label": `Condition group ${groupIndex + 1}`,
 					children: [
@@ -1583,7 +1583,7 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 								className: "flex items-center gap-2",
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: require_pagination.cn(require_pagination.OPT_TEXT_SECONDARY, "text-xs font-medium"),
+										className: require_highlight.cn(require_highlight.OPT_TEXT_SECONDARY, "text-xs font-medium"),
 										children: "Match"
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
@@ -1592,7 +1592,7 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 											const v = e.target.value;
 											if (v === "and" || v === "or") updateGroupLogic(group.id, v);
 										},
-										className: require_pagination.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset rounded border px-2 py-0.5 text-xs font-semibold outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_pagination.OPT_TEXT_PRIMARY, require_pagination.OPT_FOCUS_VISIBLE),
+										className: require_highlight.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset rounded border px-2 py-0.5 text-xs font-semibold outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_highlight.OPT_TEXT_PRIMARY, require_highlight.OPT_FOCUS_VISIBLE),
 										"aria-label": "Group logic",
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
 											value: "and",
@@ -1603,14 +1603,14 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 										})]
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: require_pagination.cn(require_pagination.OPT_TEXT_SECONDARY, "text-xs"),
+										className: require_highlight.cn(require_highlight.OPT_TEXT_SECONDARY, "text-xs"),
 										children: "of the following"
 									})
 								]
 							}), groups.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
 								onClick: () => removeGroup(group.id),
-								className: require_pagination.cn("text-danger-fg hover:bg-danger-subtle rounded p-1 text-xs", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+								className: require_highlight.cn("text-danger-fg hover:bg-danger-subtle rounded p-1 text-xs", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
 								"aria-label": "Remove group",
 								children: "✕"
 							})]
@@ -1623,7 +1623,7 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 									className: "flex items-center gap-2",
 									children: [
 										condIndex > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: require_pagination.cn("w-8 text-center text-[10px] font-semibold uppercase", group.logic === "and" ? "text-info-fg" : "text-warning-fg"),
+											className: require_highlight.cn("w-8 text-center text-[10px] font-semibold uppercase", group.logic === "and" ? "text-info-fg" : "text-warning-fg"),
 											children: group.logic
 										}),
 										condIndex === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "w-8" }),
@@ -1636,7 +1636,7 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
 												value: cond.property,
 												onChange: (e) => updateCondition(group.id, cond.id, { property: e.target.value }),
-												className: require_pagination.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset min-w-[120px] rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_pagination.OPT_TEXT_PRIMARY, require_pagination.OPT_FOCUS_VISIBLE),
+												className: require_highlight.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset min-w-[120px] rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_highlight.OPT_TEXT_PRIMARY, require_highlight.OPT_FOCUS_VISIBLE),
 												"aria-label": "Property",
 												children: properties.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
 													value: p,
@@ -1649,7 +1649,7 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 													const v = e.target.value;
 													if (isConditionOperator(v)) updateCondition(group.id, cond.id, { operator: v });
 												},
-												className: require_pagination.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset min-w-[130px] rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_pagination.OPT_TEXT_PRIMARY, require_pagination.OPT_FOCUS_VISIBLE),
+												className: require_highlight.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset min-w-[130px] rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_highlight.OPT_TEXT_PRIMARY, require_highlight.OPT_FOCUS_VISIBLE),
 												"aria-label": "Operator",
 												children: Object.entries(OPERATOR_LABELS).map(([key, lbl]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
 													value: key,
@@ -1661,14 +1661,14 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 												value: cond.value,
 												onChange: (e) => updateCondition(group.id, cond.id, { value: e.target.value }),
 												placeholder: "Value",
-												className: require_pagination.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset min-w-[100px] flex-1 rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", "text-text-primary", "placeholder:text-text-tertiary", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+												className: require_highlight.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset min-w-[100px] flex-1 rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", "text-text-primary", "placeholder:text-text-tertiary", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
 												"aria-label": "Value"
 											})
 										] }),
 										group.conditions.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 											type: "button",
 											onClick: () => removeCondition(group.id, cond.id),
-											className: require_pagination.cn("text-danger-fg hover:bg-danger-subtle rounded p-1 text-sm", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+											className: require_highlight.cn("text-danger-fg hover:bg-danger-subtle rounded p-1 text-sm", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
 											"aria-label": "Remove condition",
 											children: "✕"
 										})
@@ -1681,7 +1681,7 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConditionBuilder, {
 								groups: group.children,
 								onChange: (newChildren) => {
-									onChange(groups.map((g) => g.id === group.id ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, g), {}, { children: newChildren }) : g));
+									onChange(groups.map((g) => g.id === group.id ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, g), {}, { children: newChildren }) : g));
 								},
 								properties,
 								addConditionLabel,
@@ -1694,12 +1694,12 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "mt-2 flex items-center gap-2",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.Button, {
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.Button, {
 								variant: "ghost",
 								size: "sm",
 								onClick: () => addCondition(group.id),
 								children: ["+ ", addConditionLabel]
-							}), nested && maxDepth > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.Button, {
+							}), nested && maxDepth > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.Button, {
 								variant: "ghost",
 								size: "sm",
 								onClick: () => {
@@ -1716,7 +1716,7 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 									};
 									onChange(groups.map((g) => {
 										var _g$children;
-										return g.id === group.id ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, g), {}, { children: [...(_g$children = g.children) !== null && _g$children !== void 0 ? _g$children : [], nestedGroup] }) : g;
+										return g.id === group.id ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, g), {}, { children: [...(_g$children = g.children) !== null && _g$children !== void 0 ? _g$children : [], nestedGroup] }) : g;
 									}));
 								},
 								children: ["+ ", addNestedGroupLabel]
@@ -1726,14 +1726,14 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 				})] }, group.id)),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.Button, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.Button, {
 						variant: "secondary",
 						size: "sm",
 						onClick: addGroup,
 						className: "self-start",
 						children: ["+ ", addGroupLabel]
 					}), previewCount != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: require_pagination.cn("text-text-secondary", "text-sm"),
+						className: require_highlight.cn("text-text-secondary", "text-sm"),
 						children: [formatOptNumber(previewCount), " matches"]
 					})]
 				})
@@ -1748,35 +1748,35 @@ const _excluded$6 = ["className"];
 const _excluded2$2 = ["className"];
 const _excluded3$1 = ["className", "variant"];
 const _excluded4 = ["className"];
-const DropdownMenu = require_pagination.MenuRoot;
+const DropdownMenu = require_highlight.MenuRoot;
 /** Renders the dropdown trigger component. */
 function DropdownTrigger(_ref) {
-	let { className } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$6);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuTrigger, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("cursor-pointer gap-2", className) }, props), {}, {
+	let { className } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$6);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.MenuTrigger, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("cursor-pointer gap-2", className) }, props), {}, {
 		"data-opt-id": "C4BSS",
 		"data-opt-slug": "dropdown-menu.DropdownTrigger"
 	}));
 }
 /** Renders the dropdown content component. */
 function DropdownContent(_ref2) {
-	let { className } = _ref2, props = require_pagination._objectWithoutProperties(_ref2, _excluded2$2);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuPopover, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn(className) }, props), {}, {
+	let { className } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2$2);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.MenuPopover, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(className) }, props), {}, {
 		"data-opt-id": "J6NF7",
 		"data-opt-slug": "dropdown-menu.DropdownContent"
 	}));
 }
 /** Renders the dropdown item component. */
 function DropdownItem(_ref3) {
-	let { className, variant = "default" } = _ref3, props = require_pagination._objectWithoutProperties(_ref3, _excluded3$1);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuItem, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("cursor-pointer data-[disabled]:cursor-not-allowed", variant === "destructive" && "text-danger-fg data-[active-item]:bg-danger-subtle data-[active-item]:text-danger-fg", className) }, props), {}, {
+	let { className, variant = "default" } = _ref3, props = require_highlight._objectWithoutProperties(_ref3, _excluded3$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.MenuItem, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("cursor-pointer data-[disabled]:cursor-not-allowed", variant === "destructive" && "text-danger-fg data-[active-item]:bg-danger-subtle data-[active-item]:text-danger-fg", className) }, props), {}, {
 		"data-opt-id": "5M6GA",
 		"data-opt-slug": "dropdown-menu.DropdownItem"
 	}));
 }
 /** Renders the dropdown separator component. */
 function DropdownSeparator(_ref4) {
-	let { className } = _ref4, props = require_pagination._objectWithoutProperties(_ref4, _excluded4);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuSeparator, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn(className) }, props), {}, {
+	let { className } = _ref4, props = require_highlight._objectWithoutProperties(_ref4, _excluded4);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.MenuSeparator, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(className) }, props), {}, {
 		"data-opt-id": "K9Y54",
 		"data-opt-slug": "dropdown-menu.DropdownSeparator"
 	}));
@@ -1793,7 +1793,7 @@ const _excluded$5 = [
 	"disabled",
 	"className"
 ];
-const sizeStyles = {
+const sizeStyles$3 = {
 	sm: {
 		radio: "h-4 w-4",
 		dot: "h-2 w-2",
@@ -1824,7 +1824,7 @@ function RadioGroup({ children, value, defaultValue = "", onChange, disabled, si
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioGroupContext.Provider, {
 		value: ctxValue,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: require_pagination.cn("flex flex-col gap-1.5", className),
+			className: require_highlight.cn("flex flex-col gap-1.5", className),
 			"data-opt-id": "2F20H",
 			"data-opt-slug": "radio-group.RadioGroup",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.RadioGroupRoot, {
@@ -1839,14 +1839,14 @@ function RadioGroup({ children, value, defaultValue = "", onChange, disabled, si
 				"aria-labelledby": labelId,
 				"aria-required": required,
 				"aria-invalid": hasError,
-				"aria-describedby": require_pagination.getDescribedBy(groupId, error, void 0),
-				className: require_pagination.cn("flex", orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-6"),
+				"aria-describedby": require_highlight.getDescribedBy(groupId, error, void 0),
+				className: require_highlight.cn("flex", orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-6"),
 				children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					id: labelId,
 					className: "text-text-secondary mb-1 text-sm font-medium",
-					children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.RequiredMark, {})]
+					children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.RequiredMark, {})]
 				}), children]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FieldMessages, {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FieldMessages, {
 				id: groupId,
 				error
 			})]
@@ -1855,13 +1855,13 @@ function RadioGroup({ children, value, defaultValue = "", onChange, disabled, si
 }
 const Radio = (0, react.forwardRef)((_ref, ref) => {
 	var _ref2;
-	let { label, hint, description, value, name: _name, size: sizeProp, disabled: disabledProp, className } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$5);
+	let { label, hint, description, value, name: _name, size: sizeProp, disabled: disabledProp, className } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$5);
 	const groupContext = (0, react.useContext)(RadioGroupContext);
 	const primContext = (0, _reopt_ai_opt_ui_primitives.useRadioGroupContext)();
 	const size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : groupContext.size;
 	const disabled = (_ref2 = disabledProp !== null && disabledProp !== void 0 ? disabledProp : groupContext.disabled) !== null && _ref2 !== void 0 ? _ref2 : primContext === null || primContext === void 0 ? void 0 : primContext.disabled;
 	const hintText = hint !== null && hint !== void 0 ? hint : description;
-	const styles = sizeStyles[size];
+	const styles = sizeStyles$3[size];
 	const isChecked = (primContext === null || primContext === void 0 ? void 0 : primContext.value) === value;
 	const radioId = `radio-${(0, react.useId)().replace(/:/g, "")}`;
 	const labelId = label ? `${radioId}-label` : void 0;
@@ -1873,10 +1873,10 @@ const Radio = (0, react.forwardRef)((_ref, ref) => {
 		value,
 		primContext
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", require_pagination._objectSpread2(require_pagination._objectSpread2({
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", require_highlight._objectSpread2(require_highlight._objectSpread2({
 		ref,
 		"aria-checked": isChecked,
-		className: require_pagination.cn("group flex items-start gap-3", disabled && "cursor-not-allowed opacity-50", !disabled && "cursor-pointer", className)
+		className: require_highlight.cn("group flex items-start gap-3", disabled && "cursor-not-allowed opacity-50", !disabled && "cursor-pointer", className)
 	}, props), {}, {
 		"data-opt-id": "HY7YG",
 		"data-opt-slug": "radio-group.Radio",
@@ -1895,15 +1895,15 @@ const Radio = (0, react.forwardRef)((_ref, ref) => {
 				className: "sr-only"
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: require_pagination.cn("relative mt-0.5 inline-flex shrink-0 items-center justify-center rounded-full", styles.radio, "border-border border-2", "bg-surface", "group-aria-checked:border-accent", "transition-colors", "group-has-[:focus-visible]:outline-ring outline-transparent group-has-[:focus-visible]:outline-2 group-has-[:focus-visible]:-outline-offset-1"),
+				className: require_highlight.cn("relative mt-0.5 inline-flex shrink-0 items-center justify-center rounded-full", styles.radio, "border-border border-2", "bg-surface", "group-aria-checked:border-accent", "transition-colors", "group-has-[:focus-visible]:outline-ring outline-transparent group-has-[:focus-visible]:outline-2 group-has-[:focus-visible]:-outline-offset-1"),
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_pagination.cn(styles.dot, "bg-accent rounded-full", "scale-0 opacity-0 transition-all", "group-aria-checked:scale-100 group-aria-checked:opacity-100") })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_highlight.cn(styles.dot, "bg-accent rounded-full", "scale-0 opacity-0 transition-all", "group-aria-checked:scale-100 group-aria-checked:opacity-100") })
 			}),
 			(label || hintText) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-col",
 				children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					id: labelId,
-					className: require_pagination.cn("text-text-primary font-medium", styles.text),
+					className: require_highlight.cn("text-text-primary font-medium", styles.text),
 					children: label
 				}), hintText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					id: hintId,
@@ -1925,12 +1925,12 @@ const _excluded$4 = [
 ];
 /** Renders the loading overlay component. */
 function LoadingOverlay(_ref) {
-	let { loading, children, label = "Loading…", className } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$4);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({
+	let { loading, children, label = "Loading…", className } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$4);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({
 		"data-opt-id": "380ZR",
 		"data-opt-slug": "loading-overlay.LoadingOverlay"
 	}, props), {}, {
-		className: require_pagination.cn("relative", className),
+		className: require_highlight.cn("relative", className),
 		children: [children, loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "bg-surface/60 absolute inset-0 z-10 flex items-center justify-center rounded-lg backdrop-blur-[1px]",
 			role: "status",
@@ -1938,7 +1938,7 @@ function LoadingOverlay(_ref) {
 			"aria-label": label,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-col items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Spinner, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Spinner, {
 					size: "md",
 					"aria-hidden": "true"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1974,9 +1974,9 @@ const insetClass = {
 };
 /** Renders the block layout component. */
 function BlockLayout(_ref) {
-	let { children, className, spacing = "section", inset, loading, loadingLabel } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$3);
-	const layoutClassName = require_pagination.cn("flex flex-col", spacingClass[spacing], inset ? insetClass[inset] : void 0, className);
-	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingOverlay, require_pagination._objectSpread2(require_pagination._objectSpread2({
+	let { children, className, spacing = "section", inset, loading, loadingLabel } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$3);
+	const layoutClassName = require_highlight.cn("flex flex-col", spacingClass[spacing], inset ? insetClass[inset] : void 0, className);
+	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingOverlay, require_highlight._objectSpread2(require_highlight._objectSpread2({
 		"data-opt-id": "9D8QR",
 		"data-opt-slug": "block-layout.BlockLayout"
 	}, props), {}, {
@@ -1985,7 +1985,7 @@ function BlockLayout(_ref) {
 		label: loadingLabel,
 		children
 	}));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({
 		"data-opt-id": "9D8QR",
 		"data-opt-slug": "block-layout.BlockLayout"
 	}, props), {}, {
@@ -2006,7 +2006,7 @@ const _excluded$2 = ["loading", "className"];
 */
 function createBlock(name, render, options) {
 	const Component = (props) => {
-		const { loading, className } = props, rest = require_pagination._objectWithoutProperties(props, _excluded$2);
+		const { loading, className } = props, rest = require_highlight._objectWithoutProperties(props, _excluded$2);
 		const layoutCn = (options === null || options === void 0 ? void 0 : options.layoutClassName) ? `${options.layoutClassName}${className ? ` ${className}` : ""}` : className;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BlockLayout, {
 			loading,
@@ -2022,7 +2022,7 @@ function createBlock(name, render, options) {
 /** Renders the page header component. */
 function PageHeader({ title, description, actions, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("gap-group flex flex-col items-stretch sm:flex-row sm:items-center sm:justify-between", className),
+		className: require_highlight.cn("gap-group flex flex-col items-stretch sm:flex-row sm:items-center sm:justify-between", className),
 		"data-opt-id": "7AK8Z",
 		"data-opt-slug": "page-header.PageHeader",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2051,7 +2051,7 @@ const overflowMap = {
 /** Renders the scroll area component. */
 function ScrollArea({ children, className, orientation = "vertical" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn(overflowMap[orientation], "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border hover:scrollbar-thumb-border-hover", className),
+		className: require_highlight.cn(overflowMap[orientation], "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border hover:scrollbar-thumb-border-hover", className),
 		"data-opt-id": "A9X4K",
 		"data-opt-slug": "scroll-area.ScrollArea",
 		children
@@ -2071,7 +2071,7 @@ const maxWidthMap = {
 /** Renders the container component. */
 function Container({ children, maxWidth = "xl", center = true, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn(maxWidthMap[maxWidth], center && "mx-auto", "px-4", className),
+		className: require_highlight.cn(maxWidthMap[maxWidth], center && "mx-auto", "px-4", className),
 		"data-opt-id": "H3G96",
 		"data-opt-slug": "container.Container",
 		children
@@ -2084,7 +2084,7 @@ Container.displayName = "Container";
 function Section({ children, title, description, className }) {
 	const titleId = `${(0, react.useId)()}-title`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: require_pagination.cn("gap-group flex flex-col", className),
+		className: require_highlight.cn("gap-group flex flex-col", className),
 		"aria-labelledby": title ? titleId : void 0,
 		"data-opt-id": "M3QXW",
 		"data-opt-slug": "section.Section",
@@ -2125,11 +2125,11 @@ function toPanelSize(size) {
 }
 /** Renders the resizable panel group component. */
 function ResizablePanelGroup(_ref) {
-	let { direction, children, className, id, autoSaveId } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$1);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Group, require_pagination._objectSpread2(require_pagination._objectSpread2({
+	let { direction, children, className, id, autoSaveId } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Group, require_highlight._objectSpread2(require_highlight._objectSpread2({
 		orientation: direction,
 		id: id !== null && id !== void 0 ? id : autoSaveId,
-		className: require_pagination.cn("flex h-full w-full", className)
+		className: require_highlight.cn("flex h-full w-full", className)
 	}, props), {}, {
 		"data-opt-id": "BM5RR",
 		"data-opt-slug": "resizable.ResizablePanelGroup",
@@ -2139,13 +2139,13 @@ function ResizablePanelGroup(_ref) {
 ResizablePanelGroup.displayName = "ResizablePanelGroup";
 /** Renders the resizable panel component. */
 function ResizablePanel(_ref2) {
-	let { collapsedSize, defaultSize, minSize, maxSize, children, className } = _ref2, props = require_pagination._objectWithoutProperties(_ref2, _excluded2$1);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Panel, require_pagination._objectSpread2(require_pagination._objectSpread2({
+	let { collapsedSize, defaultSize, minSize, maxSize, children, className } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Panel, require_highlight._objectSpread2(require_highlight._objectSpread2({
 		collapsedSize: toPanelSize(collapsedSize),
 		defaultSize: toPanelSize(defaultSize),
 		minSize: toPanelSize(minSize),
 		maxSize: toPanelSize(maxSize),
-		className: require_pagination.cn("overflow-auto", className)
+		className: require_highlight.cn("overflow-auto", className)
 	}, props), {}, {
 		"data-opt-id": "88X4V",
 		"data-opt-slug": "resizable.ResizablePanel",
@@ -2155,8 +2155,8 @@ function ResizablePanel(_ref2) {
 ResizablePanel.displayName = "ResizablePanel";
 /** Renders the resizable handle component. */
 function ResizableHandle(_ref3) {
-	let { className, withHandle = false } = _ref3, props = require_pagination._objectWithoutProperties(_ref3, _excluded3);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Separator, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("bg-border relative flex items-center justify-center", "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2", "data-[resize-handle-active]:bg-accent", "[&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full", "[&[data-orientation=horizontal]]:h-full [&[data-orientation=horizontal]]:w-px", className) }, props), {}, {
+	let { className, withHandle = false } = _ref3, props = require_highlight._objectWithoutProperties(_ref3, _excluded3);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Separator, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("bg-border relative flex items-center justify-center", "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2", "data-[resize-handle-active]:bg-accent", "[&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full", "[&[data-orientation=horizontal]]:h-full [&[data-orientation=horizontal]]:w-px", className) }, props), {}, {
 		"data-opt-id": "6Z22W",
 		"data-opt-slug": "resizable.ResizableHandle",
 		children: withHandle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2190,28 +2190,28 @@ function Logo({ src, icon, text, alt = "Logo", size = "md", href, onClick, class
 	if (showImage) mark = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 		src,
 		alt,
-		className: require_pagination.cn("object-contain", markSizeStyles[size]),
+		className: require_highlight.cn("object-contain", markSizeStyles[size]),
 		onError: () => setImageError(true)
 	});
 	else if (icon) mark = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: require_pagination.cn("flex shrink-0 items-center justify-center", markSizeStyles[size]),
+		className: require_highlight.cn("flex shrink-0 items-center justify-center", markSizeStyles[size]),
 		"aria-hidden": "true",
 		children: icon
 	});
 	else if (fallbackLetter) mark = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: require_pagination.cn("bg-accent text-on-accent flex shrink-0 items-center justify-center rounded-lg font-bold", markSizeStyles[size], textSizeStyles[size]),
+		className: require_highlight.cn("bg-accent text-on-accent flex shrink-0 items-center justify-center rounded-lg font-bold", markSizeStyles[size], textSizeStyles[size]),
 		"aria-hidden": "true",
 		children: fallbackLetter
 	});
 	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [mark, text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: require_pagination.cn("text-text-primary font-semibold", textSizeStyles[size]),
+		className: require_highlight.cn("text-text-primary font-semibold", textSizeStyles[size]),
 		children: text
 	})] });
-	const sharedClassName = require_pagination.cn("inline-flex items-center gap-element", className);
+	const sharedClassName = require_highlight.cn("inline-flex items-center gap-element", className);
 	if (href) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 		href,
 		onClick,
-		className: require_pagination.cn(sharedClassName, "no-underline"),
+		className: require_highlight.cn(sharedClassName, "no-underline"),
 		"aria-label": text !== null && text !== void 0 ? text : alt,
 		"data-opt-id": "R906A",
 		"data-opt-slug": "logo.Logo",
@@ -2264,7 +2264,7 @@ const positionClass = {
 };
 /** Renders the drawer root component. */
 function DrawerRoot(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogRoot, require_pagination._objectSpread2(require_pagination._objectSpread2({ animated: true }, props), {}, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogRoot, require_highlight._objectSpread2(require_highlight._objectSpread2({ animated: true }, props), {}, {
 		"data-opt-id": "YGJ0M",
 		"data-opt-slug": "drawer.DrawerRoot"
 	}));
@@ -2280,7 +2280,7 @@ function dismissOffset(side, dx, dy) {
 }
 /** Renders the drawer panel component. */
 function DrawerPanel(_ref) {
-	let { className, side = "right", size = "md", swipeToDismiss = true, swipeDismissThreshold = 80, style, onPointerDown } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded);
+	let { className, side = "right", size = "md", swipeToDismiss = true, swipeDismissThreshold = 80, style, onPointerDown } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded);
 	const isHorizontal = side === "left" || side === "right";
 	const close = (0, _reopt_ai_opt_ui_primitives.useDialogClose)();
 	const dragStart = (0, react.useRef)(null);
@@ -2342,9 +2342,9 @@ function DrawerPanel(_ref) {
 		};
 	}, [side]);
 	const dragStyle = offset !== 0 ? { transform: `translate${axis}(${offset}px)` } : void 0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogPanel, require_pagination._objectSpread2(require_pagination._objectSpread2({
-		className: require_pagination.cn("border-border bg-surface z-50 m-0 flex flex-col border p-0 shadow-2xl", "data-[enter]:fade-in data-[leave]:fade-out", dragging ? "touch-none" : require_pagination.OPT_ANIMATE_DRAWER[side], positionClass[side], isHorizontal ? ["h-full w-full", sizeMap[size]] : ["w-full", heightMap[size]], className),
-		style: require_pagination._objectSpread2(require_pagination._objectSpread2(require_pagination._objectSpread2(require_pagination._objectSpread2({}, style), dragStyle), keyboardInset > 0 ? { marginBottom: keyboardInset } : null), dragging ? { transition: "none" } : null),
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogPanel, require_highlight._objectSpread2(require_highlight._objectSpread2({
+		className: require_highlight.cn("border-border bg-surface z-50 m-0 flex flex-col border p-0 shadow-2xl", "data-[enter]:fade-in data-[leave]:fade-out", dragging ? "touch-none" : require_highlight.OPT_ANIMATE_DRAWER[side], positionClass[side], isHorizontal ? ["h-full w-full", sizeMap[size]] : ["w-full", heightMap[size]], className),
+		style: require_highlight._objectSpread2(require_highlight._objectSpread2(require_highlight._objectSpread2(require_highlight._objectSpread2({}, style), dragStyle), keyboardInset > 0 ? { marginBottom: keyboardInset } : null), dragging ? { transition: "none" } : null),
 		onPointerDown: handlePointerDown,
 		onPointerMove: swipeToDismiss ? handlePointerMove : void 0,
 		onPointerUp: swipeToDismiss ? endDrag : void 0,
@@ -2356,8 +2356,8 @@ function DrawerPanel(_ref) {
 }
 /** Renders the drawer close component. */
 function DrawerClose(_ref2) {
-	let { className } = _ref2, props = require_pagination._objectWithoutProperties(_ref2, _excluded2);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogDismiss, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("hover:bg-bg-subtle rounded-md p-1.5 transition-colors", "cursor-pointer data-[disabled]:cursor-not-allowed", require_pagination.OPT_FOCUS, className) }, props), {}, {
+	let { className } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogDismiss, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("hover:bg-bg-subtle rounded-md p-1.5 transition-colors", "cursor-pointer data-[disabled]:cursor-not-allowed", require_highlight.OPT_FOCUS, className) }, props), {}, {
 		"data-opt-id": "M6D6D",
 		"data-opt-slug": "drawer.DrawerClose"
 	}));
@@ -2464,8 +2464,8 @@ function VirtualList({ items, renderItem, itemHeight, overscan = 3, className, s
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: handleRef,
 		onScroll: handleScroll,
-		className: require_pagination.cn("overflow-auto", className),
-		style: require_pagination._objectSpread2({ position: "relative" }, style),
+		className: require_highlight.cn("overflow-auto", className),
+		style: require_highlight._objectSpread2({ position: "relative" }, style),
 		role: "list",
 		"data-opt-id": "VT2NP",
 		"data-opt-slug": "virtual-list.VirtualList",
@@ -3638,8 +3638,8 @@ const ShaderSurfaceComponent = (0, react.forwardRef)(function ShaderSurface({ pr
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: containerRef,
 		"aria-hidden": ariaHidden,
-		className: require_pagination.cn("relative overflow-hidden", className),
-		style: require_pagination._objectSpread2({ background: fallbackBackground }, style),
+		className: require_highlight.cn("relative overflow-hidden", className),
+		style: require_highlight._objectSpread2({ background: fallbackBackground }, style),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
 			ref: canvasRef,
 			className: "absolute inset-0 block h-full w-full"
@@ -3649,6 +3649,842 @@ const ShaderSurfaceComponent = (0, react.forwardRef)(function ShaderSurface({ pr
 ShaderSurfaceComponent.displayName = "ShaderSurface";
 const ShaderSurface = ShaderSurfaceComponent;
 //#endregion
+//#region src/core/facet.tsx
+const defaultLabels$1 = {
+	empty: "No values in this range.",
+	loading: "Counting…",
+	showMore: (remaining) => `Show ${remaining} more`,
+	showLess: "Show fewer",
+	selectHint: (label, count, share) => `${label}, ${count} (${share})`
+};
+function defaultCountFormat(value) {
+	return new Intl.NumberFormat(void 0, { notation: "compact" }).format(value);
+}
+function formatShare(share) {
+	const percent = share * 100;
+	if (percent > 0 && percent < .1) return "<0.1%";
+	return `${percent >= 10 ? Math.round(percent) : percent.toFixed(1)}%`;
+}
+/**
+* Facet — one value of a field, its count, and its share of the whole.
+*
+* The row is the filter: reading it and acting on it are the same gesture,
+* which is what separates a facet from a legend.
+*/
+function Facet({ item, selected = false, onSelect, showShare = true, share, countFormatter = defaultCountFormat, layout = "vertical", labels, className }) {
+	var _ref;
+	const text = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$1), labels);
+	const resolvedShare = (_ref = share !== null && share !== void 0 ? share : item.share) !== null && _ref !== void 0 ? _ref : 0;
+	const interactive = onSelect !== void 0 && !item.disabled;
+	const countText = item.count === void 0 ? "" : countFormatter(item.count);
+	const shareText = formatShare(resolvedShare);
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		showShare && layout === "vertical" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			className: require_highlight.cn("absolute inset-y-0 left-0 rounded-[inherit] transition-[width] duration-300", selected ? "bg-accent/25" : "bg-accent/10"),
+			style: {
+				width: `${Math.max(resolvedShare * 100, resolvedShare > 0 ? 1.5 : 0)}%`,
+				backgroundColor: item.color ? `color-mix(in oklab, ${item.color} ${selected ? 30 : 16}%, transparent)` : void 0
+			}
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "gap-element relative flex min-w-0 flex-1 items-center",
+			children: [
+				item.color && !item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": "true",
+					className: "size-2 shrink-0 rounded-full",
+					style: { backgroundColor: item.color }
+				}),
+				item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": "true",
+					className: "shrink-0",
+					children: item.icon
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate",
+					children: item.label
+				})
+			]
+		}),
+		item.count !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-text-tertiary relative shrink-0 tabular-nums",
+			children: countText
+		}),
+		showShare && item.count !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-text-tertiary relative w-11 shrink-0 text-right text-xs tabular-nums",
+			children: shareText
+		})
+	] });
+	const shellClass = require_highlight.cn("relative flex w-full items-center gap-element overflow-hidden rounded-md px-2 py-1.5 text-left text-sm", layout === "horizontal" && "w-auto", selected ? "text-text-primary font-medium" : "text-text-secondary", interactive && "hover:bg-accent-subtle hover:text-text-primary cursor-pointer transition-colors", item.disabled && "cursor-not-allowed opacity-50", className);
+	if (!interactive) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: shellClass,
+		"data-selected": selected || void 0,
+		"data-opt-id": "E9H18",
+		"data-opt-slug": "facet.Facet",
+		children: content
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		className: require_highlight.cn(shellClass, require_highlight.OPT_FOCUS_VISIBLE),
+		"aria-pressed": selected,
+		"aria-label": text.selectHint(typeof item.label === "string" ? item.label : item.id, countText, shareText),
+		disabled: item.disabled,
+		onClick: () => onSelect(item.id),
+		"data-selected": selected || void 0,
+		"data-opt-id": "E9H18",
+		"data-opt-slug": "facet.Facet",
+		children: content
+	});
+}
+/**
+* FacetGroup — the distribution of one field, as a list you can filter with.
+*
+* Counts alone do not say whether 4,000 is most of the data or a rounding
+* error, so every row carries its share of the whole as a bar behind the
+* label. The tail collapses by default: a high-cardinality field would
+* otherwise push everything else off the screen.
+*
+* @example
+* ```tsx
+* <FacetGroup
+*   items={topValues}
+*   selected={filters}
+*   onSelectedChange={setFilters}
+*   total={sampledRows}
+*   max={5}
+* />
+* ```
+*/
+function FacetGroup({ items, selected, onSelectedChange, selection = "multiple", layout = "vertical", showShare = true, countFormatter = defaultCountFormat, max, total, loading = false, emptyState, labels, className, "aria-label": ariaLabel }) {
+	const text = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$1), labels);
+	const [uncontrolled, setUncontrolled] = (0, react.useState)([]);
+	const [expanded, setExpanded] = (0, react.useState)(false);
+	const current = selected !== null && selected !== void 0 ? selected : uncontrolled;
+	const denominator = (0, react.useMemo)(() => {
+		if (total !== void 0 && total > 0) return total;
+		const sum = items.reduce((acc, item) => {
+			var _item$count;
+			return acc + ((_item$count = item.count) !== null && _item$count !== void 0 ? _item$count : 0);
+		}, 0);
+		return sum > 0 ? sum : 1;
+	}, [items, total]);
+	const visible = max === void 0 || expanded ? items : items.slice(0, Math.max(max, 1));
+	const remaining = items.length - visible.length;
+	const handleSelect = (id) => {
+		if (selection === "none") return;
+		const next = selection === "single" ? current.includes(id) ? [] : [id] : current.includes(id) ? current.filter((value) => value !== id) : [...current, id];
+		if (selected === void 0) setUncontrolled(next);
+		onSelectedChange === null || onSelectedChange === void 0 || onSelectedChange(next);
+	};
+	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_highlight.cn("flex flex-col gap-element", className),
+		"aria-busy": "true",
+		"aria-label": ariaLabel,
+		"data-opt-id": "G1RNN",
+		"data-opt-slug": "facet.FacetGroup",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "sr-only",
+			children: text.loading
+		}), Array.from({ length: Math.min(max !== null && max !== void 0 ? max : 4, 6) }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			className: "bg-bg-subtle h-7 animate-pulse rounded-md"
+		}, index))]
+	});
+	if (items.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_highlight.cn("text-text-tertiary px-2 py-1.5 text-sm", className),
+		"aria-label": ariaLabel,
+		"data-opt-id": "G1RNN",
+		"data-opt-slug": "facet.FacetGroup",
+		children: emptyState !== null && emptyState !== void 0 ? emptyState : text.empty
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_highlight.cn(layout === "vertical" ? "flex flex-col gap-0.5" : "flex flex-wrap items-center gap-element", className),
+		role: selection === "none" ? "list" : "group",
+		"aria-label": ariaLabel,
+		"data-opt-id": "G1RNN",
+		"data-opt-slug": "facet.FacetGroup",
+		children: [visible.map((item) => {
+			var _item$share, _item$count2;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Facet, {
+				item,
+				layout,
+				selected: current.includes(item.id),
+				onSelect: selection === "none" ? void 0 : handleSelect,
+				showShare,
+				share: (_item$share = item.share) !== null && _item$share !== void 0 ? _item$share : ((_item$count2 = item.count) !== null && _item$count2 !== void 0 ? _item$count2 : 0) / denominator,
+				countFormatter,
+				labels
+			}, item.id);
+		}), (remaining > 0 || expanded) && max !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: require_highlight.cn("text-text-tertiary hover:text-text-primary rounded-md px-2 py-1 text-left text-xs", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+			onClick: () => setExpanded((value) => !value),
+			children: expanded ? text.showLess : text.showMore(remaining)
+		})]
+	});
+}
+//#endregion
+//#region src/core/expression.tsx
+const toneStyles = {
+	accent: {
+		text: "text-accent",
+		rule: "decoration-accent"
+	},
+	success: {
+		text: "text-success",
+		rule: "decoration-success"
+	},
+	warning: {
+		text: "text-warning",
+		rule: "decoration-warning"
+	},
+	danger: {
+		text: "text-danger",
+		rule: "decoration-danger"
+	},
+	info: {
+		text: "text-info",
+		rule: "decoration-info"
+	},
+	muted: {
+		text: "text-text-secondary",
+		rule: "decoration-border-hover"
+	}
+};
+/**
+* Expression — one clause of a condition, written as a sentence and edited in
+* place.
+*
+* A rule like "when the count of checkout events is above 100 over 5 minutes"
+* is a sentence before it is a form. Rendering it as one — with only the
+* variable halves clickable — lets a reader verify the rule by reading it,
+* which is the step a stack of labelled inputs skips.
+*
+* @example
+* ```tsx
+* <ExpressionGroup>
+*   <Expression description="when" value="count()" onClick={openAggregation} />
+*   <Expression description="is above" value="100" tone="danger" onClick={openThreshold} />
+*   <Expression description="for the last" value="5 minutes" onClick={openWindow} />
+* </ExpressionGroup>
+* ```
+*/
+function Expression({ description, value, tone = "accent", active = false, invalid = false, disabled = false, onClick, display = "inline", "aria-label": ariaLabel, className }) {
+	const palette = invalid ? toneStyles.danger : toneStyles[tone];
+	const interactive = onClick !== void 0 && !disabled;
+	const body = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_highlight.cn("text-text-secondary text-xs font-semibold tracking-wide uppercase", disabled && "opacity-60"),
+		children: description
+	}), value !== void 0 && value !== null && value !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_highlight.cn("text-sm font-semibold", palette.text, interactive && require_highlight.cn("underline decoration-2 underline-offset-4", palette.rule, active ? "decoration-solid" : "decoration-dotted"), disabled && "opacity-60"),
+		children: value
+	})] });
+	const shell = require_highlight.cn(display === "stacked" ? "flex flex-col items-start gap-0.5" : "inline-flex items-baseline gap-1.5", "rounded-md px-1.5 py-1 text-left", interactive && "hover:bg-accent-subtle cursor-pointer transition-colors", active && "bg-accent-subtle", disabled && "cursor-not-allowed", className);
+	if (!interactive) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: shell,
+		"data-invalid": invalid || void 0,
+		"data-opt-id": "TXGA8",
+		"data-opt-slug": "expression.Expression",
+		children: body
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		className: require_highlight.cn(shell, require_highlight.OPT_FOCUS_VISIBLE),
+		onClick,
+		disabled,
+		"aria-expanded": active,
+		"aria-label": ariaLabel,
+		"data-invalid": invalid || void 0,
+		"data-opt-id": "TXGA8",
+		"data-opt-slug": "expression.Expression",
+		children: body
+	});
+}
+/**
+* ExpressionGroup — the clauses of one condition, laid out so they read as a
+* single sentence rather than as a row of unrelated controls.
+*/
+function ExpressionGroup({ children, display = "sentence", className, "aria-label": ariaLabel }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_highlight.cn(display === "sentence" ? "flex flex-wrap items-baseline gap-x-1 gap-y-1" : "grid grid-flow-col auto-cols-fr items-start gap-group", className),
+		role: "group",
+		"aria-label": ariaLabel,
+		"data-opt-id": "F78CE",
+		"data-opt-slug": "expression.ExpressionGroup",
+		children
+	});
+}
+//#endregion
+//#region src/core/text-truncate.tsx
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+/** Measures text in the element's own resolved font, not an assumed one. */
+function createMeasurer(element) {
+	const context = document.createElement("canvas").getContext("2d");
+	if (!context) return null;
+	const computed = window.getComputedStyle(element);
+	context.font = [
+		computed.fontStyle,
+		computed.fontVariant,
+		computed.fontWeight,
+		`${computed.fontSize}/${computed.lineHeight}`,
+		computed.fontFamily
+	].join(" ");
+	const spacing = Number.parseFloat(computed.letterSpacing) || 0;
+	return (value) => context.measureText(value).width + spacing * value.length;
+}
+/** Largest `n` in `[0, max]` for which `fits(n)` holds. */
+function largestFitting(max, fits) {
+	let low = 0;
+	let high = max;
+	while (low < high) {
+		const mid = Math.ceil((low + high) / 2);
+		if (fits(mid)) low = mid;
+		else high = mid - 1;
+	}
+	return low;
+}
+function truncateToWidth(text, side, ellipsis, available, measure) {
+	if (measure(text) <= available) return text;
+	const chars = Array.from(text);
+	if (side === "end") {
+		const keep = largestFitting(chars.length, (n) => measure(chars.slice(0, n).join("") + ellipsis) <= available);
+		return chars.slice(0, keep).join("") + ellipsis;
+	}
+	if (side === "start") {
+		const keep = largestFitting(chars.length, (n) => measure(ellipsis + chars.slice(chars.length - n).join("")) <= available);
+		return ellipsis + chars.slice(chars.length - keep).join("");
+	}
+	if (side === "startEnd") {
+		const keep = largestFitting(Math.floor(chars.length / 2), (n) => {
+			const head = chars.slice(0, n).join("");
+			const tail = chars.slice(chars.length - n).join("");
+			return measure(head + ellipsis + tail) <= available;
+		});
+		if (keep === 0) return ellipsis;
+		return chars.slice(0, keep).join("") + ellipsis + chars.slice(chars.length - keep).join("");
+	}
+	const span = largestFitting(chars.length, (n) => {
+		const start = Math.floor((chars.length - n) / 2);
+		return measure(ellipsis + chars.slice(start, start + n).join("") + ellipsis) <= available;
+	});
+	if (span === 0) return ellipsis;
+	const start = Math.floor((chars.length - span) / 2);
+	return ellipsis + chars.slice(start, start + span).join("") + ellipsis;
+}
+/**
+* TextTruncate — drops characters from the part of a string that identifies it
+* least.
+*
+* CSS can only cut the end. That is the wrong end for the strings analytics
+* shows most: two URLs that differ in their query string, two ids that share a
+* prefix, a stack frame whose filename is at the tail. This measures the real
+* text in the real font against the real available width and cuts where the
+* caller says.
+*
+* The full string stays in the accessibility tree and in `title`, so
+* truncation never costs the reader information — only space.
+*
+* @example
+* ```tsx
+* <TextTruncate text={event.url} truncation="startEnd" />
+* ```
+*/
+function TextTruncate({ text, truncation = "startEnd", ellipsis = "…", width, children, className }) {
+	const ref = (0, react.useRef)(null);
+	const [available, setAvailable] = (0, react.useState)(width !== null && width !== void 0 ? width : null);
+	useIsomorphicLayoutEffect(() => {
+		if (width !== void 0) {
+			setAvailable(width);
+			return;
+		}
+		const element = ref.current;
+		if (!element || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry) setAvailable(entry.contentRect.width);
+		});
+		observer.observe(element);
+		setAvailable(element.getBoundingClientRect().width);
+		return () => observer.disconnect();
+	}, [width]);
+	const [rendered, setRendered] = (0, react.useState)(text);
+	useIsomorphicLayoutEffect(() => {
+		const element = ref.current;
+		if (!element || available === null || available <= 0) {
+			setRendered(text);
+			return;
+		}
+		const measure = createMeasurer(element);
+		if (!measure) {
+			setRendered(text);
+			return;
+		}
+		setRendered(truncateToWidth(text, truncation, ellipsis, available, measure));
+	}, [
+		text,
+		truncation,
+		ellipsis,
+		available
+	]);
+	const truncated = rendered !== text;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		ref,
+		className: require_highlight.cn("block w-full overflow-hidden whitespace-nowrap", className),
+		title: truncated ? text : void 0,
+		"data-opt-id": "Y6BGX",
+		"data-opt-slug": "text-truncate.TextTruncate",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": truncated ? "true" : void 0,
+			children: children ? children(rendered) : rendered
+		}), truncated && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "sr-only",
+			children: text
+		})]
+	});
+}
+//#endregion
+//#region src/core/live-region.tsx
+/**
+* LiveRegion — says out loud what a live view changed.
+*
+* Data that updates without a page change is invisible to a screen reader
+* unless something narrates it. This is that narrator: one polite region per
+* live surface, throttled so a fast stream produces a readable summary rather
+* than a torrent, and alternating between two nodes so a repeat of the same
+* words is still announced rather than swallowed as an unchanged region.
+*
+* @example
+* ```tsx
+* <LiveRegion
+*   message={`${newRows} new events`}
+*   nonce={batchId}
+*   throttleMs={4000}
+*   muted={paused}
+* />
+* ```
+*/
+function LiveRegion({ message, nonce, politeness = "polite", throttleMs = 0, muted = false }) {
+	const [slots, setSlots] = (0, react.useState)(["", ""]);
+	const activeSlot = (0, react.useRef)(0);
+	const pending = (0, react.useRef)(null);
+	const timer = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (muted || message === "") return;
+		const flush = () => {
+			const next = pending.current;
+			pending.current = null;
+			timer.current = null;
+			if (next === null) return;
+			const slot = activeSlot.current;
+			activeSlot.current = slot === 0 ? 1 : 0;
+			setSlots(slot === 0 ? [next, ""] : ["", next]);
+		};
+		pending.current = message;
+		if (throttleMs <= 0) {
+			flush();
+			return;
+		}
+		if (timer.current === null) timer.current = setTimeout(flush, throttleMs);
+		return () => {
+			if (timer.current !== null) {
+				clearTimeout(timer.current);
+				timer.current = null;
+			}
+		};
+	}, [
+		message,
+		nonce,
+		throttleMs,
+		muted
+	]);
+	(0, react.useEffect)(() => {
+		if (!muted) return;
+		pending.current = null;
+		if (timer.current !== null) {
+			clearTimeout(timer.current);
+			timer.current = null;
+		}
+		setSlots(["", ""]);
+	}, [muted]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "sr-only",
+		"data-opt-id": "0CFGR",
+		"data-opt-slug": "live-region.LiveRegion",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			role: "status",
+			"aria-live": politeness,
+			"aria-atomic": "true",
+			children: slots[0]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			role: "status",
+			"aria-live": politeness,
+			"aria-atomic": "true",
+			children: slots[1]
+		})]
+	});
+}
+//#endregion
+//#region src/core/color-palette.tsx
+/** The theme's own chart ramps, so a picker can offer them without a literal. */
+const THEME_PALETTES = [
+	{
+		id: "categorical",
+		label: "Categorical",
+		kind: "categorical",
+		colors: Array.from({ length: 10 }, (_, index) => `var(--opt-chart-${index + 1})`)
+	},
+	{
+		id: "sequential",
+		label: "Sequential",
+		kind: "sequential",
+		colors: Array.from({ length: 5 }, (_, index) => `var(--opt-chart-sequential-${index + 1})`)
+	},
+	{
+		id: "diverging",
+		label: "Diverging",
+		kind: "diverging",
+		colors: [
+			"var(--opt-chart-diverging-negative)",
+			"var(--opt-chart-diverging-neutral)",
+			"var(--opt-chart-diverging-positive)"
+		]
+	}
+];
+const sizeStyles$2 = {
+	xs: "h-1.5",
+	sm: "h-2.5",
+	md: "h-4",
+	lg: "h-6"
+};
+/**
+* ColorPaletteDisplay — a palette, shown as the thing it will look like.
+*
+* A palette name tells a reader nothing; the colours do. Categorical palettes
+* draw as discrete blocks and ramps draw as a blend, so the picture itself
+* states which kind of data the palette is for.
+*/
+function ColorPaletteDisplay({ palette, render, size = "sm", "aria-label": ariaLabel, className }) {
+	const mode = render !== null && render !== void 0 ? render : palette.kind === "categorical" ? "stops" : "gradient";
+	const colors = palette.colors.length > 0 ? palette.colors : ["transparent"];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_highlight.cn("flex w-full overflow-hidden rounded-sm", sizeStyles$2[size], className),
+		role: "img",
+		"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : palette.label,
+		style: mode === "gradient" ? { backgroundImage: `linear-gradient(to right, ${colors.join(", ")})` } : void 0,
+		"data-opt-id": "E7T89",
+		"data-opt-slug": "color-palette.ColorPaletteDisplay",
+		children: mode === "stops" && colors.map((color, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "h-full flex-1",
+			style: { backgroundColor: color }
+		}, `${color}-${index}`))
+	});
+}
+/**
+* ColorPalettePicker — choose the colours a visualisation is drawn in.
+*
+* Each option shows its own palette, so the choice is made by looking rather
+* than by remembering what "Cool" meant last time.
+*
+* @example
+* ```tsx
+* <ColorPalettePicker
+*   palettes={THEME_PALETTES}
+*   value={paletteId}
+*   onValueChange={setPaletteId}
+*   label="Series colours"
+* />
+* ```
+*/
+function ColorPalettePicker({ palettes, value, onValueChange, label = "Colour palette", hideLabel = false, size = "sm", disabled = false, className }) {
+	var _palettes$find, _ref;
+	const labelId = (0, react.useId)();
+	const selected = (_palettes$find = palettes.find((palette) => palette.id === value)) !== null && _palettes$find !== void 0 ? _palettes$find : palettes[0];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_highlight.cn("flex flex-col gap-element", className),
+		"data-opt-id": "5R0PG",
+		"data-opt-slug": "color-palette.ColorPalettePicker",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			id: labelId,
+			className: require_highlight.cn("text-text-primary text-sm font-medium", hideLabel && "sr-only"),
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectRoot, {
+			value: (_ref = value !== null && value !== void 0 ? value : selected === null || selected === void 0 ? void 0 : selected.id) !== null && _ref !== void 0 ? _ref : "",
+			setValue: (next) => {
+				if (typeof next === "string") onValueChange === null || onValueChange === void 0 || onValueChange(next);
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectTrigger, {
+				"aria-labelledby": labelId,
+				disabled,
+				className: require_highlight.cn("gap-group", require_highlight.OPT_FOCUS_VISIBLE),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "gap-group flex min-w-0 flex-1 items-center",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-text-primary shrink-0 truncate text-sm",
+						children: selected === null || selected === void 0 ? void 0 : selected.label
+					}), selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPaletteDisplay, {
+						palette: selected,
+						size,
+						className: require_highlight.cn("min-w-16 flex-1", "border border-border"),
+						"aria-label": ""
+					})]
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectPopover, { children: palettes.map((palette) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectItem, {
+				value: palette.id,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "gap-group flex w-full min-w-40 items-center",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "shrink-0 truncate text-sm",
+						children: palette.label
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPaletteDisplay, {
+						palette,
+						size,
+						className: "min-w-16 flex-1",
+						"aria-label": ""
+					})]
+				})
+			}, palette.id)) })]
+		})]
+	});
+}
+//#endregion
+//#region src/core/inline-edit.tsx
+const defaultLabels = {
+	edit: (value) => `Edit ${value}`,
+	save: "Save",
+	cancel: "Cancel",
+	invalid: "That value cannot be saved."
+};
+const sizeStyles$1 = {
+	sm: "text-sm",
+	md: "text-base",
+	lg: "text-lg font-semibold",
+	xl: "text-2xl font-semibold tracking-tight"
+};
+/**
+* InlineEdit — renames a thing where the thing is, instead of in a dialog.
+*
+* A dashboard title, a metric name, a saved segment: each is read far more
+* often than it is renamed, so the control has to disappear into the text and
+* reappear on intent. Read mode is a button carrying the text; edit mode is a
+* field sized to match it, so the words do not move when the mode does.
+*
+* Enter commits, Escape reverts, and a rejected save keeps the field open with
+* what was typed — losing an edit to a validation error is worse than the
+* error.
+*
+* @example
+* ```tsx
+* <InlineEdit as="h2" size="xl" value={dashboard.name} onSave={rename} />
+* ```
+*/
+function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder, emptyText = "Untitled", disabled = false, maxLength, suffix, labels, className }) {
+	const text = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels), labels);
+	const [editing, setEditing] = (0, react.useState)(false);
+	const [draft, setDraft] = (0, react.useState)(value);
+	const [rejected, setRejected] = (0, react.useState)(false);
+	const [saving, setSaving] = (0, react.useState)(false);
+	const inputRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (!editing) setDraft(value);
+	}, [value, editing]);
+	(0, react.useEffect)(() => {
+		if (editing) {
+			var _inputRef$current, _inputRef$current2;
+			(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+			(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.select();
+		}
+	}, [editing]);
+	const commit = async () => {
+		if (saving) return;
+		const next = draft.trim();
+		if (next === value) {
+			setEditing(false);
+			setRejected(false);
+			return;
+		}
+		setSaving(true);
+		try {
+			if (await onSave(next) === false) {
+				setRejected(true);
+				return;
+			}
+			setRejected(false);
+			setEditing(false);
+		} finally {
+			setSaving(false);
+		}
+	};
+	const cancel = () => {
+		setDraft(value);
+		setRejected(false);
+		setEditing(false);
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			commit();
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			cancel();
+		}
+	};
+	if (editing) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: require_highlight.cn("inline-flex items-center gap-element", className),
+		"data-opt-id": "RQ0H2",
+		"data-opt-slug": "inline-edit.InlineEdit",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: inputRef,
+				value: draft,
+				onChange: (event) => {
+					setDraft(event.target.value);
+					setRejected(false);
+				},
+				onKeyDown: handleKeyDown,
+				onBlur: () => void commit(),
+				placeholder,
+				maxLength,
+				disabled: saving,
+				"aria-invalid": rejected || void 0,
+				"aria-errormessage": rejected ? "inline-edit-error" : void 0,
+				className: require_highlight.cn(require_highlight.OPT_INPUT, sizeStyles$1[size], "min-w-0 flex-1")
+			}),
+			rejected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				id: "inline-edit-error",
+				role: "alert",
+				className: "sr-only",
+				children: text.invalid
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": text.save,
+				disabled: saving,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: () => void commit(),
+				className: require_highlight.cn("text-success hover:bg-success-subtle rounded-md p-1", require_highlight.OPT_FOCUS_VISIBLE),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
+					className: "size-4",
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": text.cancel,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: cancel,
+				className: require_highlight.cn("text-text-tertiary hover:bg-bg-subtle rounded-md p-1", require_highlight.OPT_FOCUS_VISIBLE),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+					className: "size-4",
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: require_highlight.cn("inline-flex items-center gap-element", className),
+		"data-opt-id": "RQ0H2",
+		"data-opt-slug": "inline-edit.InlineEdit",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			disabled,
+			onClick: () => setEditing(true),
+			"aria-label": text.edit(value || emptyText),
+			className: require_highlight.cn("group -mx-1.5 -my-0.5 inline-flex max-w-full items-center gap-element rounded-md px-1.5 py-0.5 text-left", !disabled && "hover:bg-bg-subtle cursor-pointer", disabled && "cursor-default", require_highlight.OPT_FOCUS_VISIBLE),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+				className: require_highlight.cn("truncate", sizeStyles$1[size], value ? "text-text-primary" : "text-text-tertiary italic"),
+				children: value || emptyText
+			}), !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, {
+				"aria-hidden": "true",
+				className: require_highlight.cn("text-text-tertiary size-3.5 shrink-0 opacity-0 transition-opacity", "group-hover:opacity-100 group-focus-visible:opacity-100")
+			})]
+		}), suffix]
+	});
+}
+//#endregion
+//#region src/core/key-pad-menu.tsx
+const sizeStyles = {
+	sm: "min-h-20 p-2 text-xs [&_[data-keypad-icon]]:size-5",
+	md: "min-h-24 p-3 text-sm [&_[data-keypad-icon]]:size-6"
+};
+/**
+* KeyPadMenu — a choice between things that are easier to recognise than to
+* name.
+*
+* A chart type, a layout, an import source: the picture is the label, and a
+* dropdown of words makes the reader translate twice. Tiles are real radios or
+* checkboxes underneath, so arrow keys, screen readers, and form submission
+* all behave as they would for any other group.
+*
+* @example
+* ```tsx
+* <KeyPadMenu
+*   label="Chart type"
+*   items={vizTypes}
+*   value={vizType}
+*   onValueChange={setVizType}
+* />
+* ```
+*/
+function KeyPadMenu({ items, label, selection = "single", value, onValueChange, columns = "auto", size = "md", hideLabel = false, className }) {
+	const name = (0, react.useId)();
+	const selected = new Set(value === void 0 ? [] : Array.isArray(value) ? value : [value]);
+	const handleChange = (id) => {
+		if (selection === "multiple") {
+			const next = selected.has(id) ? [...selected].filter((item) => item !== id) : [...selected, id];
+			onValueChange === null || onValueChange === void 0 || onValueChange(next);
+			return;
+		}
+		onValueChange === null || onValueChange === void 0 || onValueChange(id);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
+		className: require_highlight.cn("min-w-0", className),
+		"data-opt-id": "ZZG2R",
+		"data-opt-slug": "key-pad-menu.KeyPadMenu",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
+			className: require_highlight.cn("text-text-primary mb-element text-sm font-medium", hideLabel && "sr-only"),
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "gap-element grid",
+			style: { gridTemplateColumns: columns === "auto" ? "repeat(auto-fill, minmax(6.5rem, 1fr))" : `repeat(${columns}, minmax(0, 1fr))` },
+			children: items.map((item) => {
+				const isSelected = selected.has(item.id);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+					className: require_highlight.cn("relative flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg text-center transition-colors", require_highlight.OPT_BORDER, sizeStyles[size], isSelected ? "border-accent bg-accent-subtle text-text-primary" : "text-text-secondary hover:border-border-hover hover:bg-bg-subtle", item.disabled && "cursor-not-allowed opacity-50", "has-[:focus-visible]:outline-ring has-[:focus-visible]:outline-2"),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: selection === "single" ? "radio" : "checkbox",
+							name: selection === "single" ? name : void 0,
+							value: item.id,
+							checked: isSelected,
+							disabled: item.disabled,
+							onChange: () => handleChange(item.id),
+							className: require_highlight.cn("sr-only", require_highlight.OPT_FOCUS_VISIBLE)
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"data-keypad-icon": "",
+							"aria-hidden": "true",
+							className: require_highlight.cn("flex items-center justify-center", isSelected ? "text-accent" : "text-text-tertiary"),
+							children: item.icon
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "font-medium",
+							children: item.label
+						}),
+						item.hint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-text-tertiary line-clamp-2 text-[11px] leading-tight",
+							children: item.hint
+						}),
+						item.badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "bg-info-subtle text-info absolute top-1 right-1 rounded px-1 text-[10px] font-semibold",
+							children: item.badge
+						})
+					]
+				}, item.id);
+			})
+		})]
+	});
+}
+//#endregion
 Object.defineProperty(exports, "AccordionContent", {
 	enumerable: true,
 	get: function() {
@@ -3739,6 +4575,18 @@ Object.defineProperty(exports, "CircularProgress", {
 		return CircularProgress;
 	}
 });
+Object.defineProperty(exports, "ColorPaletteDisplay", {
+	enumerable: true,
+	get: function() {
+		return ColorPaletteDisplay;
+	}
+});
+Object.defineProperty(exports, "ColorPalettePicker", {
+	enumerable: true,
+	get: function() {
+		return ColorPalettePicker;
+	}
+});
 Object.defineProperty(exports, "ConditionBuilder", {
 	enumerable: true,
 	get: function() {
@@ -3799,12 +4647,54 @@ Object.defineProperty(exports, "DropdownTrigger", {
 		return DropdownTrigger;
 	}
 });
+Object.defineProperty(exports, "Expression", {
+	enumerable: true,
+	get: function() {
+		return Expression;
+	}
+});
+Object.defineProperty(exports, "ExpressionGroup", {
+	enumerable: true,
+	get: function() {
+		return ExpressionGroup;
+	}
+});
+Object.defineProperty(exports, "Facet", {
+	enumerable: true,
+	get: function() {
+		return Facet;
+	}
+});
+Object.defineProperty(exports, "FacetGroup", {
+	enumerable: true,
+	get: function() {
+		return FacetGroup;
+	}
+});
 Object.defineProperty(exports, "Heading", {
 	enumerable: true,
 	get: function() {
 		return Heading;
 	}
 });
+Object.defineProperty(exports, "InlineEdit", {
+	enumerable: true,
+	get: function() {
+		return InlineEdit;
+	}
+});
+Object.defineProperty(exports, "KeyPadMenu", {
+	enumerable: true,
+	get: function() {
+		return KeyPadMenu;
+	}
+});
+Object.defineProperty(exports, "LiveRegion", {
+	enumerable: true,
+	get: function() {
+		return LiveRegion;
+	}
+});
 Object.defineProperty(exports, "LoadingOverlay", {
 	enumerable: true,
 	get: function() {
@@ -3967,12 +4857,24 @@ Object.defineProperty(exports, "Switch", {
 		return Switch;
 	}
 });
+Object.defineProperty(exports, "THEME_PALETTES", {
+	enumerable: true,
+	get: function() {
+		return THEME_PALETTES;
+	}
+});
 Object.defineProperty(exports, "Text", {
 	enumerable: true,
 	get: function() {
 		return Text;
 	}
 });
+Object.defineProperty(exports, "TextTruncate", {
+	enumerable: true,
+	get: function() {
+		return TextTruncate;
+	}
+});
 Object.defineProperty(exports, "Textarea", {
 	enumerable: true,
 	get: function() {