@santi020k/lumen-react 3.0.1 → 4.0.0

package/dist/components.js

@@ -1,1949 +1,4 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Children, cloneElement, createContext, createElement, Fragment, isValidElement, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
-import { alignLumenChartSeries, composeClassName, createLumenBarGeometry, createLumenHeatmapGeometry, createLumenLineGeometry, createLumenPieGeometry, createLumenRangeGeometry, createLumenScatterGeometry, formatLumenChartSummary, formatLumenLanguageLabel, getLumenChartAxisPadding, getLumenChartCategories, getLumenChartDomain, getLumenChartTicks, getLumenChartToneClassName, getLumenIcon, getLumenPhoneCountries, getLumenPieChartVariantClassName, hasLumenChartData, hasLumenPieData, lumenCodeTokenClassNames, lumenIllustrations, normalizeLumenFormErrors, resolveLumenChartLabels, resolveLumenChartTone, resolveLumenPhoneNumber, scaleLumenChartValue, tokenizeLumenCode } from '@santi020k/lumen-core';
-import { renderSVG } from 'uqr';
-import { formatReactChartTableValue } from './chart-recipes.js';
-import { useCalendar, useDialog, useDropdownMenu, useInputOTP, useLanguageToggle, usePopover, useResizable, useSelect, useTabs, useTooltip } from './hooks.js';
-import { renderIconSvg } from './icon-svg.js';
-import { IconView } from './icon-view.js';
-import { resolveReactPhoneInputCountry, resolveReactPhoneInputValue } from './phone-recipes.js';
-import { Input, Label } from './server-components.js';
-export { Badge, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Container, Direction, Grid, Input, Label, Progress, Separator, Skeleton, Spinner, Stack, Textarea, Typography, VisuallyHidden } from './server-components.js';
-const getChartCategoryKey = (value) => `${typeof value}:${String(value)}`;
-const setRefValue = (ref, value) => {
-    if (typeof ref === 'function') {
-        ref(value);
-    }
-    else if (ref) {
-        ref.current = value;
-    }
-};
-const emptyOptions = [];
-const emptyStringOptions = [];
-const emptyDataTableColumns = [];
-const emptyDataTableRows = [];
-const emptyChartSeries = [];
-const emptyHeatmapData = [];
-const emptyRangeData = [];
-const emptyComboSeries = [];
-const emptyPieSeries = {
-    data: [],
-    id: 'pie',
-    label: 'Values'
-};
-const emptyChartValues = [];
-const variantClass = (base, variant, defaultVariant = 'default') => (variant === defaultVariant ? false : `${base}--${variant}`);
-const renderLucideIcon = (name, className) => {
-    const icon = getLumenIcon(name);
-    return icon ? renderIconSvg(icon, className) : null;
-};
-const resolveSurface = (glass) => glass ? 'glass' : 'default';
-const glassIntensityClass = (glass) => glass === 'subtle' ?
-    'ui-glass-subtle' :
-    glass === 'strong' && 'ui-glass-strong';
-const glassSurfaceClass = (base, glass) => resolveSurface(glass) === 'glass' &&
-    composeClassName(`${base}--glass`, glassIntensityClass(glass));
-const glassClass = (base, glass) => Boolean(glass) &&
-    composeClassName(`${base}--glass`, glassIntensityClass(glass));
-const normalizeOption = (option) => typeof option === 'string' ? { label: option, value: option } : option;
-const isDataTableCellObject = (cell) => typeof cell === 'object' && cell !== null;
-const formatDataTableCell = (cell) => {
-    const value = isDataTableCellObject(cell) ? (cell.label ?? cell.value) : cell;
-    return value === undefined || value === null ? '' : String(value);
-};
-const getDataTableSortValue = (cell) => {
-    if (!isDataTableCellObject(cell) ||
-        cell.sortValue === undefined ||
-        cell.sortValue === null)
-        return undefined;
-    return String(cell.sortValue);
-};
-const compareDataTableCells = (left, right, sortType) => {
-    const leftValue = getDataTableSortValue(left) ?? formatDataTableCell(left);
-    const rightValue = getDataTableSortValue(right) ?? formatDataTableCell(right);
-    if (sortType === 'number') {
-        return Number(leftValue.replaceAll(',', '')) -
-            Number(rightValue.replaceAll(',', ''));
-    }
-    return leftValue.localeCompare(rightValue, undefined, {
-        numeric: true,
-        sensitivity: 'base'
-    });
-};
-const getDataTableRowValue = (row, index) => String(row.rowValue ?? row.value ?? row.id ?? index);
-const toInputValue = (value) => {
-    if (value === undefined)
-        return undefined;
-    return String(value);
-};
-const composeHandlers = (userHandler, lumenHandler) => (event) => {
-    userHandler?.(event);
-    lumenHandler?.(event);
-};
-const Primitive = ({ as, className, uiClassName, ...props }) => {
-    const Tag = as ?? 'div';
-    const safeClassName = typeof className === 'string' ? className : undefined;
-    return (_jsx(Tag, { className: composeClassName(uiClassName, safeClassName), ...props }));
-};
-const DropdownMenuContext = createContext(null);
-const PopoverContext = createContext(null);
-const TabsContext = createContext(null);
-const TooltipContext = createContext(null);
-const requireContext = (context, componentName) => {
-    if (!context) {
-        throw new Error(`${componentName} must be used inside its matching Lumen root component.`);
-    }
-    return context;
-};
-export const Accordion = ({ className, variant = 'default', ...props }) => (_jsx("div", { className: composeClassName('ui-accordion', variant === 'flush' && 'ui-accordion--flush', className), "data-variant": variant, ...props }));
-export const Alert = ({ className, glass = false, variant = 'default', ...props }) => (_jsx("aside", { className: composeClassName('ui-alert', variantClass('ui-alert', variant), glassClass('ui-alert', glass), className), "data-variant": variant, ...props }));
-export const AlertDialog = ({ className, defaultOpen, glass = false, onClick, onClose, onOpenChange, open, ...props }) => {
-    const dialog = useDialog({ alert: true, defaultOpen, onOpenChange, open });
-    return (_jsx("dialog", { ...dialog.dialogProps, ...props, className: composeClassName('ui-dialog ui-alert-dialog', glassSurfaceClass('ui-dialog', glass), className), "data-surface": resolveSurface(glass), onClick: composeHandlers(onClick, dialog.dialogProps.onClick), onClose: composeHandlers(onClose, dialog.dialogProps.onClose) }));
-};
-export const Agenda = ({ className, glass = false, ...props }) => (_jsx("section", { className: composeClassName('ui-agenda', glassClass('ui-agenda', glass), className), ...props }));
-export const AspectRatio = ({ className, ratio = '16 / 9', style, ...props }) => (_jsx("div", { className: composeClassName('ui-aspect-ratio', className), style: { aspectRatio: ratio, ...style }, ...props }));
-export const Autocomplete = ({ className, type = 'search', ...props }) => (_jsx("input", { "aria-autocomplete": "list", className: composeClassName('ui-input ui-autocomplete', className), role: "combobox", type: type, ...props }));
-export const Attachment = ({ className, glass = false, href, ...props }) => {
-    const nextClassName = composeClassName('ui-attachment', glassClass('ui-attachment', glass), className);
-    return href ?
-        (_jsx("a", { className: nextClassName, href: href, ...props })) :
-        (_jsx("article", { className: nextClassName, ...props }));
-};
-export const Avatar = ({ alt = '', children, className, fallback, src, ...props }) => (_jsxs("span", { className: composeClassName('ui-avatar', className), ...props, children: [src ? _jsx("img", { alt: alt, src: src }) : _jsx("span", { children: fallback }), children] }));
-export const Breadcrumb = ({ 'aria-label': ariaLabel = 'Breadcrumb', className, ...props }) => (_jsx("nav", { "aria-label": ariaLabel, className: composeClassName('ui-breadcrumb', className), ...props }));
-export const Bubble = ({ className, from = 'assistant', glass = false, ...props }) => (_jsx("article", { className: composeClassName('ui-bubble', from === 'user' && 'ui-bubble--user', glassClass('ui-bubble', glass), className), "data-from": from, ...props }));
-/* eslint-disable complexity -- The compatibility path resolves native, slotted, loading, size, and disabled states in one public component. */
-export const Button = ({ asChild = false, children, className, disabled, loading = false, ref, size = 'default', type = 'button', variant = 'default', ...props }) => {
-    const buttonClassName = composeClassName('ui-button', `ui-button--${variant}`, size === 'default' ? 'ui-button--default-size' : `ui-button--${size}`, disabled && 'ui-button--disabled', loading && 'ui-button--loading', className);
-    if (asChild) {
-        const child = Children.only(children);
-        if (!isValidElement(child)) {
-            throw new TypeError('Button with asChild requires exactly one React element child.');
-        }
-        const ChildComponent = child.type;
-        return (_jsxs(ChildComponent, { ...child.props, ...props, "aria-busy": loading ? true : undefined, "aria-disabled": disabled ? true : undefined, className: composeClassName(buttonClassName, child.props.className), "data-slot": "button", ref: ref, children: [loading && _jsx("span", { "aria-hidden": "true", className: "ui-spinner" }), child.props.children] }));
-    }
-    return (_jsxs("button", { "aria-busy": loading || undefined, className: buttonClassName, "data-slot": "button", disabled: disabled, ref: ref, type: type, ...props, children: [loading && _jsx("span", { "aria-hidden": "true", className: "ui-spinner" }), children] }));
-};
-export const ButtonGroup = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-button-group', className), ...props }));
-export const Calendar = ({ className, defaultValue, disabled = false, glass = false, locale, max, min, month, name, onValueChange, value, ...props }) => {
-    const calendar = useCalendar({
-        defaultValue,
-        disabled,
-        locale,
-        max,
-        min,
-        month,
-        name,
-        onValueChange,
-        value
-    });
-    return (_jsxs("div", { ...props, ...calendar.rootProps, className: composeClassName(calendar.rootProps.className, glassClass('ui-calendar', glass), className), "data-ui-glass-track": glass ? true : undefined, children: [_jsx("input", { ...calendar.inputProps }), _jsxs("div", { className: "ui-calendar__header", children: [_jsx("button", { ...calendar.previousProps, type: "button", children: _jsx("span", { "aria-hidden": "true", children: "\u2039" }) }), _jsx("strong", { ...calendar.labelProps, children: calendar.label }), _jsx("button", { ...calendar.nextProps, type: "button", children: _jsx("span", { "aria-hidden": "true", children: "\u203A" }) })] }), _jsxs("table", { ...calendar.gridProps, children: [_jsx("thead", { children: _jsx("tr", { role: "row", children: calendar.weekdays.map(weekday => (_jsx("th", { role: "columnheader", scope: "col", children: weekday }, weekday))) }) }), _jsx("tbody", { children: calendar.weeks.map(week => (_jsx("tr", { role: "row", children: week.map(day => (_jsx("td", { ...calendar.getDayProps(day), children: day.day }, day.date))) }, week[0]?.date ?? 'week'))) })] })] }));
-};
-export const Carousel = ({ className, glass = false, ...props }) => (_jsx("section", { className: composeClassName('ui-carousel', glassClass('ui-carousel', glass), className), "data-ui-carousel": true, ...props }));
-const ChartHeader = ({ description, heading, value }) => {
-    if (!heading && !description && !value)
-        return null;
-    return (_jsxs("header", { children: [_jsxs("div", { className: "ui-chart__heading", children: [heading && _jsx("h3", { children: heading }), description && _jsx("p", { children: description })] }), value && _jsx("strong", { "data-ui-chart-value": true, children: value })] }));
-};
-export const Chart = ({ caption, children, className, description, glass = false, heading, presentation = 'default', summary, value, ...props }) => (_jsxs("figure", { className: composeClassName('ui-chart', presentation === 'bare' && 'ui-chart--bare', glassClass('ui-chart', glass), className), ...props, children: [_jsx(ChartHeader, { description: description, heading: heading, value: value }), summary && _jsx("p", { className: "ui-sr-only", "data-ui-chart-summary": true, children: summary }), children, caption && _jsx("figcaption", { children: caption })] }));
-const ChartLegend = ({ label = 'Chart legend', series }) => (_jsx("ul", { "aria-label": label, className: "ui-chart__legend", children: series.map((item, index) => (_jsxs("li", { className: getLumenChartToneClassName(item.tone, index), children: [_jsx("span", { "aria-hidden": "true" }), item.label] }, item.id))) }));
-const ChartDataTable = ({ categories, formatCategory = String, formatValue = String, labels, series }) => {
-    const resolvedLabels = resolveLumenChartLabels(labels);
-    return (_jsxs("details", { className: "ui-chart__data", children: [_jsx("summary", { children: resolvedLabels.viewData }), _jsx("div", { children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: resolvedLabels.category }), series.map(item => (_jsx("th", { scope: "col", children: item.label }, item.id)))] }) }), _jsx("tbody", { children: categories.map(category => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: series
-                                            .flatMap(item => item.data)
-                                            .find(datum => datum.x === category)?.xLabel ??
-                                            formatCategory(category) }), series.map(item => {
-                                        const datum = item.data.find(candidate => candidate.x === category);
-                                        return (_jsx("td", { children: datum?.label ?? formatReactChartTableValue(datum?.y, formatValue, resolvedLabels.notAvailable) }, item.id));
-                                    })] }, getChartCategoryKey(category)))) })] }) })] }));
-};
-const formatChartPercentage = (percentage) => new Intl.NumberFormat(undefined, {
-    maximumFractionDigits: percentage < 0.01 ? 1 : 0,
-    style: 'percent'
-}).format(percentage);
-export const Sparkline = ({ area = false, className, label = 'Trend', showEndpoint = true, tone, values = emptyChartValues, ...props }) => {
-    const geometry = createLumenLineGeometry(values.map((value, index) => ({ x: index, y: value })), { height: 40, padding: 3, width: 120 });
-    const resolvedTone = resolveLumenChartTone(tone);
-    const endpoint = geometry.points.at(-1);
-    return (_jsxs("span", { "aria-label": label, className: composeClassName('ui-sparkline', `ui-chart-tone--${resolvedTone}`, className), role: "img", ...props, children: [_jsxs("svg", { "aria-hidden": "true", preserveAspectRatio: "none", viewBox: "0 0 120 40", children: [area &&
-                        geometry.areaPaths.map(path => (_jsx("path", { className: "ui-sparkline__area", d: path }, path))), _jsx("path", { className: "ui-sparkline__line", d: geometry.path }), showEndpoint && endpoint && (_jsx("circle", { className: "ui-sparkline__endpoint", cx: endpoint.xCoordinate, cy: endpoint.yCoordinate, r: "2.5" }))] }), _jsx("span", { className: "ui-sr-only", children: label })] }));
-};
-/* eslint-disable complexity -- Chart renderers keep optional semantic and SVG layers colocated. */
-export const BarChart = ({ categoryWidth, className, emptyLabel, formatCategory = String, formatValue = String, layout = 'grouped', labels, orientation = 'vertical', series = emptyChartSeries, showLegend = series.length > 1, showTable = true, summary, ...props }) => {
-    const resolvedLabels = resolveLumenChartLabels(labels);
-    const geometry = createLumenBarGeometry(series, {
-        ...(categoryWidth === undefined ? {} : { categoryWidth }),
-        layout,
-        orientation
-    });
-    const hasData = hasLumenChartData(series);
-    const ticks = getLumenChartTicks(geometry.domain);
-    const categories = geometry.categories.map(category => category.category);
-    const margin = orientation === 'horizontal' ?
-        {
-            bottom: 24,
-            left: Math.max(64, Math.min(240, categoryWidth ?? 112)),
-            right: 20,
-            top: 16
-        } :
-        { bottom: 52, left: 52, right: 16, top: 16 };
-    return (_jsxs(Chart, { className: composeClassName('ui-bar-chart', className), summary: summary ?? formatLumenChartSummary(series, formatValue, resolvedLabels), ...props, children: [showLegend && hasData && _jsx(ChartLegend, { label: resolvedLabels.chartLegend, series: series }), !hasData && (_jsx("p", { className: "ui-chart__empty", role: "status", children: emptyLabel ?? resolvedLabels.empty })), _jsx("div", { className: "ui-chart__plot", hidden: !hasData, children: _jsxs("svg", { "aria-hidden": "true", preserveAspectRatio: "xMidYMid meet", viewBox: `0 0 ${geometry.width} ${geometry.height}`, children: [_jsx("g", { className: "ui-chart__grid", children: ticks.map(tick => {
-                                const coordinate = orientation === 'horizontal' ?
-                                    scaleLumenChartValue(tick, geometry.domain, margin.left, geometry.width - margin.right) :
-                                    scaleLumenChartValue(tick, geometry.domain, geometry.height - margin.bottom, margin.top);
-                                return orientation === 'horizontal' ?
-                                    (_jsx("line", { x1: coordinate, x2: coordinate, y1: margin.top, y2: geometry.height - margin.bottom }, tick)) :
-                                    (_jsx("line", { x1: margin.left, x2: geometry.width - margin.right, y1: coordinate, y2: coordinate }, tick));
-                            }) }), _jsx("g", { className: "ui-chart__axis-labels", children: geometry.categories.map(category => (_jsx("text", { dominantBaseline: orientation === 'horizontal' ? 'middle' : undefined, textAnchor: orientation === 'horizontal' ? 'end' : 'middle', x: category.x, y: category.y, children: String(category.label) }, getChartCategoryKey(category.label)))) }), _jsx("g", { className: "ui-bar-chart__marks", children: geometry.marks.map(mark => (_jsx("rect", { className: getLumenChartToneClassName(mark.tone), height: mark.height, rx: "4", width: mark.width, x: mark.x, y: mark.y, children: _jsx("title", { children: `${series
-                                        .flatMap(item => item.data)
-                                        .find(datum => datum.x === mark.category)?.xLabel ??
-                                        formatCategory(mark.category)} · ${mark.seriesLabel}: ${formatValue(mark.value)}` }) }, `${mark.seriesId}:${getChartCategoryKey(mark.category)}`))) })] }) }), showTable && hasData && (_jsx(ChartDataTable, { categories: categories, formatCategory: formatCategory, formatValue: formatValue, labels: resolvedLabels, series: series }))] }));
-};
-const getLineChartMarkerStep = (markers, categoryCount) => {
-    if (markers === false || markers === 'none')
-        return Number.POSITIVE_INFINITY;
-    if (typeof markers === 'number')
-        return Math.max(1, Math.round(markers));
-    if (markers === 'auto')
-        return Math.max(1, Math.ceil(categoryCount / 24));
-    return 1;
-};
-export const LineChart = ({ area = false, className, emptyLabel, formatCategory = String, formatValue = String, labels, markers = 'auto', referenceValue, series = emptyChartSeries, showLegend = series.length > 1, showTable = true, summary, ...props }) => {
-    const resolvedLabels = resolveLumenChartLabels(labels);
-    const width = 640;
-    const height = 320;
-    const padding = 44;
-    const categories = getLumenChartCategories(series);
-    const hasData = hasLumenChartData(series);
-    const alignedSeries = series.map(item => ({
-        ...item,
-        data: alignLumenChartSeries(item, categories).data
-    }));
-    const domain = getLumenChartDomain([
-        ...alignedSeries.flatMap(item => item.data.map(datum => datum.y)),
-        referenceValue ?? null
-    ], false);
-    const ticks = getLumenChartTicks(domain);
-    const paddingLeft = getLumenChartAxisPadding(ticks.map(tick => formatValue(tick)));
-    const geometries = alignedSeries.map(item => createLumenLineGeometry(item.data, {
-        domain,
-        height,
-        includeZero: false,
-        padding,
-        paddingLeft,
-        width
-    }));
-    const labelStep = Math.max(1, Math.ceil(categories.length / 8));
-    const markerStep = getLineChartMarkerStep(markers, categories.length);
-    const referenceY = referenceValue === undefined ?
-        undefined :
-        scaleLumenChartValue(referenceValue, domain, height - padding, padding);
-    return (_jsxs(Chart, { className: composeClassName('ui-line-chart', className), summary: summary ?? formatLumenChartSummary(series, formatValue, resolvedLabels), ...props, children: [showLegend && hasData && _jsx(ChartLegend, { label: resolvedLabels.chartLegend, series: series }), !hasData && (_jsx("p", { className: "ui-chart__empty", role: "status", children: emptyLabel ?? resolvedLabels.empty })), _jsx("div", { className: "ui-chart__plot", hidden: !hasData, children: _jsxs("svg", { "aria-hidden": "true", preserveAspectRatio: "xMidYMid meet", viewBox: `0 0 ${width} ${height}`, children: [_jsx("g", { className: "ui-chart__grid", children: ticks.map(tick => {
-                                const y = scaleLumenChartValue(tick, domain, height - padding, padding);
-                                return (_jsxs(Fragment, { children: [_jsx("line", { x1: paddingLeft, x2: width - padding, y1: y, y2: y }), _jsx("text", { x: paddingLeft - 8, y: y, children: formatValue(tick) })] }, tick));
-                            }) }), _jsx("g", { className: "ui-chart__axis-labels", children: categories.map((category, index) => {
-                                if (index % labelStep !== 0 && index !== categories.length - 1)
-                                    return null;
-                                const denominator = Math.max(1, categories.length - 1);
-                                const x = paddingLeft + (index / denominator) * (width - paddingLeft - padding);
-                                return (_jsx("text", { textAnchor: "middle", x: x, y: height - 14, children: series
-                                        .flatMap(item => item.data)
-                                        .find(datum => datum.x === category)?.xLabel ??
-                                        formatCategory(category) }, getChartCategoryKey(category)));
-                            }) }), referenceY !== undefined && (_jsx("line", { className: "ui-chart__reference", x1: paddingLeft, x2: width - padding, y1: referenceY, y2: referenceY })), geometries.map((geometry, index) => {
-                            const item = series[index];
-                            if (!item)
-                                return null;
-                            const tone = resolveLumenChartTone(item.tone, index);
-                            return (_jsxs("g", { className: composeClassName('ui-line-chart__series', getLumenChartToneClassName(tone)), children: [area &&
-                                        geometry.areaPaths.map(path => (_jsx("path", { className: "ui-line-chart__area", d: path }, path))), _jsx("path", { className: "ui-line-chart__line", d: geometry.path }), Number.isFinite(markerStep) &&
-                                        geometry.points.map((point, pointIndex) => pointIndex % markerStep === 0 && (_jsx("circle", { className: "ui-line-chart__point", cx: point.xCoordinate, cy: point.yCoordinate, r: "3", children: _jsx("title", { children: `${point.xLabel ?? formatCategory(point.x)} · ${item.label}: ${formatValue(point.y ?? 0)}` }) }, getChartCategoryKey(point.x))))] }, item.id));
-                        })] }) }), showTable && hasData && (_jsx(ChartDataTable, { categories: categories, formatCategory: formatCategory, formatValue: formatValue, labels: resolvedLabels, series: series }))] }));
-};
-export const PieChart = ({ centerLabel, centerValue, className, labels, series = emptyPieSeries, showLegend = true, showTable = true, summary, valueFormatter = String, variant = 'donut', ...props }) => {
-    const resolvedLabels = resolveLumenChartLabels(labels);
-    const geometry = createLumenPieGeometry(series.data, { variant });
-    const hasData = hasLumenPieData(series.data);
-    const renderedSeries = {
-        ...series,
-        data: series.data.filter(datum => datum.y !== null && Number.isFinite(datum.y) && datum.y > 0)
-    };
-    const hasCenterLabel = centerLabel !== null && centerLabel !== undefined;
-    const hasCenterValue = centerValue !== null && centerValue !== undefined;
-    return (_jsxs(Chart, { className: composeClassName('ui-pie-chart', getLumenPieChartVariantClassName(variant), className), summary: summary ?? formatLumenChartSummary([renderedSeries], valueFormatter, resolvedLabels), ...props, children: [showLegend && hasData && (_jsx("ul", { "aria-label": resolvedLabels.chartLegend, className: "ui-chart__legend", children: geometry.slices.map(slice => (_jsxs("li", { className: getLumenChartToneClassName(slice.tone), children: [_jsx("span", { "aria-hidden": "true" }), slice.label] }, `${typeof slice.x}:${String(slice.x)}`))) })), !hasData && (_jsx("p", { className: "ui-chart__empty", role: "status", children: resolvedLabels.empty })), _jsxs("div", { className: "ui-chart__plot ui-pie-chart__plot", hidden: !hasData, children: [_jsx("svg", { "aria-hidden": "true", preserveAspectRatio: "xMidYMid meet", viewBox: `0 0 ${geometry.size} ${geometry.size}`, children: _jsx("g", { className: "ui-pie-chart__slices", children: geometry.slices.map(slice => (_jsx("path", { className: getLumenChartToneClassName(slice.tone), d: slice.path, fillRule: "evenodd", children: _jsx("title", { children: `${slice.label}: ${valueFormatter(slice.value)} (${formatChartPercentage(slice.percentage)})` }) }, `${typeof slice.x}:${String(slice.x)}`))) }) }), variant === 'donut' && (hasCenterLabel || hasCenterValue) && (_jsxs(_Fragment, { children: [_jsxs("div", { "aria-hidden": "true", className: "ui-pie-chart__center", children: [hasCenterValue && _jsx("strong", { children: centerValue }), hasCenterLabel && _jsx("span", { children: centerLabel })] }), _jsxs("div", { className: "ui-sr-only", children: [centerValue, ' ', centerLabel] })] }))] }), showTable && hasData && (_jsxs("details", { className: "ui-chart__data", children: [_jsx("summary", { children: resolvedLabels.viewData }), _jsx("div", { children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: resolvedLabels.category }), _jsx("th", { scope: "col", children: resolvedLabels.value }), _jsx("th", { scope: "col", children: "Share" })] }) }), _jsx("tbody", { children: geometry.slices.map(slice => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: slice.label }), _jsx("td", { children: valueFormatter(slice.value) }), _jsx("td", { children: formatChartPercentage(slice.percentage) })] }, `${typeof slice.x}:${String(slice.x)}`))) })] }) })] }))] }));
-};
-export const ScatterChart = ({ className, formatValue = String, labels, series = emptyChartSeries, showLegend = series.length > 1, showTable = true, summary, xScale = 'linear', ...props }) => {
-    const resolvedLabels = resolveLumenChartLabels(labels);
-    const geometry = createLumenScatterGeometry(series, { xScale });
-    const renderedSeries = series.map(item => ({
-        ...item,
-        data: geometry.points.filter(point => point.seriesId === item.id)
-    })).filter(item => item.data.length > 0);
-    const hasData = geometry.points.length > 0;
-    return (_jsxs(Chart, { className: composeClassName('ui-scatter-chart', className), summary: summary ?? formatLumenChartSummary(renderedSeries, formatValue, resolvedLabels), ...props, children: [showLegend && hasData && _jsx(ChartLegend, { label: resolvedLabels.chartLegend, series: series }), !hasData && _jsx("p", { className: "ui-chart__empty", role: "status", children: resolvedLabels.empty }), _jsx("div", { className: "ui-chart__plot", hidden: !hasData, children: _jsx("svg", { "aria-hidden": "true", viewBox: `0 0 ${geometry.width} ${geometry.height}`, children: _jsx("g", { className: "ui-scatter-chart__marks", children: geometry.points.map((point, pointIndex) => (_jsx("circle", { className: getLumenChartToneClassName(point.tone), cx: point.xCoordinate, cy: point.yCoordinate, r: point.radius, children: _jsx("title", { children: `${point.xLabel ?? point.x} · ${point.seriesLabel}: ${point.label ?? formatValue(point.y ?? 0)}` }) }, `${point.seriesId}:${point.id ?? `${getChartCategoryKey(point.x)}:${pointIndex}`}`))) }) }) }), showTable && hasData && (_jsxs("details", { className: "ui-chart__data", children: [_jsx("summary", { children: resolvedLabels.viewData }), _jsx("div", { children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: resolvedLabels.x }), _jsx("th", { scope: "col", children: resolvedLabels.series }), _jsx("th", { scope: "col", children: resolvedLabels.value }), _jsx("th", { scope: "col", children: resolvedLabels.size })] }) }), _jsx("tbody", { children: geometry.points.map((point, pointIndex) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: point.xLabel ?? point.x }), _jsx("td", { children: point.seriesLabel }), _jsx("td", { children: point.label ?? formatValue(point.y ?? 0) }), _jsx("td", { children: formatReactChartTableValue(point.size, formatValue, resolvedLabels.notAvailable) })] }, `${point.seriesId}:${point.id ?? `${getChartCategoryKey(point.x)}:${pointIndex}`}`))) })] }) })] }))] }));
-};
-export const Heatmap = ({ className, data = emptyHeatmapData, formatValue = String, labels, showTable = true, summary, ...props }) => {
-    const resolvedLabels = resolveLumenChartLabels(labels);
-    const geometry = createLumenHeatmapGeometry(data);
-    const availableCells = geometry.cells.filter(cell => cell.value !== null && Number.isFinite(cell.value));
-    const hasData = availableCells.length > 0;
-    return (_jsxs(Chart, { className: composeClassName('ui-heatmap', className), summary: summary ?? resolvedLabels.formatHeatmapSummary(availableCells.length), ...props, children: [!hasData && _jsx("p", { className: "ui-chart__empty", role: "status", children: resolvedLabels.empty }), _jsx("div", { className: "ui-chart__plot", hidden: !hasData, children: _jsx("svg", { "aria-hidden": "true", viewBox: `0 0 ${geometry.width} ${geometry.height}`, children: _jsx("g", { className: "ui-heatmap__cells", children: availableCells.map(cell => _jsx("rect", { height: Math.max(0, cell.height - 2), opacity: Math.max(0.12, cell.ratio), width: Math.max(0, cell.width - 2), x: cell.xCoordinate + 1, y: cell.yCoordinate + 1, children: _jsx("title", { children: `${cell.xLabel ?? cell.x} · ${cell.yLabel ?? cell.y}: ${cell.label ?? formatValue(cell.value ?? 0)}` }) }, cell.id ?? `${getChartCategoryKey(cell.x)}:${getChartCategoryKey(cell.y)}`)) }) }) }), showTable && (_jsxs("details", { className: "ui-chart__data", children: [_jsx("summary", { children: resolvedLabels.viewData }), _jsx("div", { children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: resolvedLabels.column }), _jsx("th", { scope: "col", children: resolvedLabels.row }), _jsx("th", { scope: "col", children: resolvedLabels.value })] }) }), _jsx("tbody", { children: data.map(cell => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: cell.xLabel ?? cell.x }), _jsx("td", { children: cell.yLabel ?? cell.y }), _jsx("td", { children: cell.label ?? (cell.value === null || !Number.isFinite(cell.value) ?
-                                                    resolvedLabels.notAvailable :
-                                                    formatValue(cell.value)) })] }, cell.id ?? `${getChartCategoryKey(cell.x)}:${getChartCategoryKey(cell.y)}`))) })] }) })] }))] }));
-};
-export const RangeChart = ({ className, data = emptyRangeData, formatValue = String, labels, showTable = true, summary, tone = 'series-1', ...props }) => {
-    const resolvedLabels = resolveLumenChartLabels(labels);
-    const width = 640;
-    const height = 320;
-    const padding = 44;
-    const geometry = createLumenRangeGeometry(data, { height, padding, width });
-    return (_jsxs(Chart, { className: composeClassName('ui-range-chart', getLumenChartToneClassName(tone), className), summary: summary ?? resolvedLabels.formatRangeSummary(geometry.points.length), ...props, children: [geometry.points.length === 0 && _jsx("p", { className: "ui-chart__empty", role: "status", children: resolvedLabels.empty }), _jsx("div", { className: "ui-chart__plot", hidden: geometry.points.length === 0, children: _jsxs("svg", { "aria-hidden": "true", viewBox: `0 0 ${width} ${height}`, children: [_jsx("path", { className: "ui-range-chart__area", d: geometry.areaPath }), geometry.points.map(point => (_jsx("line", { className: "ui-range-chart__interval", x1: point.xCoordinate, x2: point.xCoordinate, y1: point.highCoordinate, y2: point.lowCoordinate, children: _jsx("title", { children: `${point.xLabel ?? point.x}: ${point.label ?? `${formatValue(point.low ?? 0)}–${formatValue(point.high ?? 0)}`}` }) }, point.id ?? getChartCategoryKey(point.x))))] }) }), showTable && (_jsxs("details", { className: "ui-chart__data", children: [_jsx("summary", { children: resolvedLabels.viewData }), _jsx("div", { children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: resolvedLabels.category }), _jsx("th", { scope: "col", children: resolvedLabels.low }), _jsx("th", { scope: "col", children: resolvedLabels.high })] }) }), _jsx("tbody", { children: data.map(item => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: item.xLabel ?? item.x }), _jsx("td", { children: item.low === null || !Number.isFinite(item.low) ?
-                                                    resolvedLabels.notAvailable :
-                                                    formatValue(item.low) }), _jsx("td", { children: item.high === null || !Number.isFinite(item.high) ?
-                                                    resolvedLabels.notAvailable :
-                                                    formatValue(item.high) })] }, item.id ?? getChartCategoryKey(item.x)))) })] }) })] }))] }));
-};
-export const ComboChart = ({ className, formatValue = String, labels, series = emptyComboSeries, showLegend = true, showTable = true, summary, ...props }) => {
-    const resolvedLabels = resolveLumenChartLabels(labels);
-    const width = 640;
-    const height = 320;
-    const padding = 44;
-    const categories = getLumenChartCategories(series);
-    const alignedSeries = series.map(item => ({
-        ...item,
-        data: alignLumenChartSeries(item, categories).data
-    }));
-    const domain = getLumenChartDomain(alignedSeries.flatMap(item => item.data.map(datum => datum.y)));
-    const barSeries = alignedSeries.filter(item => item.mark === 'bar');
-    const lineSeries = alignedSeries.filter(item => item.mark !== 'bar');
-    const bars = createLumenBarGeometry(barSeries, { domain, height, width });
-    const categoryPositions = new Map(bars.categories.map(category => [getChartCategoryKey(category.category), category.x]));
-    const drawableWidth = width - padding * 2;
-    const alignComboLineDatum = (datum) => {
-        if (barSeries.length === 0)
-            return datum;
-        return {
-            ...datum,
-            x: ((categoryPositions.get(`${typeof datum.x}:${String(datum.x)}`) ?? padding) - padding) / drawableWidth
-        };
-    };
-    const lineGeometryOptions = {
-        domain,
-        height,
-        padding,
-        width,
-        ...(barSeries.length === 0 ?
-            {} :
-            {
-                xDomain: { max: 1, min: 0 },
-                xScale: 'linear'
-            })
-    };
-    const lines = lineSeries.map(item => createLumenLineGeometry(item.data.map(alignComboLineDatum), lineGeometryOptions));
-    const hasData = hasLumenChartData(series);
-    return (_jsxs(Chart, { className: composeClassName('ui-combo-chart', className), summary: summary ?? formatLumenChartSummary(series, formatValue, resolvedLabels), ...props, children: [showLegend && hasData && _jsx(ChartLegend, { label: resolvedLabels.chartLegend, series: series }), !hasData && _jsx("p", { className: "ui-chart__empty", role: "status", children: resolvedLabels.empty }), _jsx("div", { className: "ui-chart__plot", hidden: !hasData, children: _jsxs("svg", { "aria-hidden": "true", viewBox: `0 0 ${width} ${height}`, children: [_jsx("g", { className: "ui-bar-chart__marks", children: bars.marks.map(mark => _jsx("rect", { className: getLumenChartToneClassName(mark.tone), height: mark.height, rx: "4", width: mark.width, x: mark.x, y: mark.y, children: _jsx("title", { children: `${mark.seriesLabel}: ${formatValue(mark.value)}` }) }, `${mark.seriesId}:${getChartCategoryKey(mark.category)}`)) }), lines.map((geometry, index) => {
-                            const item = lineSeries[index];
-                            if (!item)
-                                return null;
-                            const tone = resolveLumenChartTone(item.tone, index + barSeries.length);
-                            return (_jsxs("g", { className: composeClassName('ui-line-chart__series', getLumenChartToneClassName(tone)), children: [item.mark === 'area' && geometry.areaPaths.map(path => (_jsx("path", { className: "ui-line-chart__area", d: path }, path))), _jsx("path", { className: "ui-line-chart__line", d: geometry.path })] }, item.id));
-                        })] }) }), showTable && hasData && (_jsx(ChartDataTable, { categories: categories, formatValue: formatValue, labels: resolvedLabels, series: series }))] }));
-};
-export const Checkbox = ({ className, ref, ...props }) => (_jsx("input", { className: composeClassName('ui-checkbox', className), ref: ref, type: "checkbox", ...props }));
-export const CheckboxGroup = ({ children, className, invalid = false, legend, orientation = 'vertical', ...props }) => (_jsxs("fieldset", { "aria-invalid": invalid || undefined, className: composeClassName('ui-checkbox-group', `ui-checkbox-group--${orientation}`, className), "data-invalid": invalid ? 'true' : undefined, "data-orientation": orientation, "data-ui-checkbox-group": true, ...props, children: [legend && _jsx("legend", { children: legend }), children] }));
-export const Collapsible = ({ className, ...props }) => (_jsx("details", { className: composeClassName('ui-collapsible', className), "data-ui-collapsible": true, ...props }));
-const renderCodeToken = (token) => {
-    if (!token.kind)
-        return token.value;
-    return (_jsx("span", { className: lumenCodeTokenClassNames[token.kind], children: token.value }, `${token.start}-${token.kind}`));
-};
-const renderCodeChildren = (code, children, language) => code === undefined ?
-    children :
-    tokenizeLumenCode(code, language).map(renderCodeToken);
-const renderCodeCopyButton = () => (_jsxs("button", { "aria-label": "Copy code to clipboard", className: "ui-code__copy", "data-ui-code-copy": true, type: "button", children: [renderLucideIcon('copy', 'ui-code__copy-icon'), renderLucideIcon('check', 'ui-code__check-icon')] }));
-const renderCodeHeader = ({ copy, label, language }) => {
-    if (!copy && !label && !language)
-        return null;
-    return (_jsxs("figcaption", { className: "ui-code__header", children: [_jsxs("span", { "aria-hidden": "true", className: "ui-code__dots", children: [_jsx("span", { className: "ui-code__dot ui-code__dot--red" }), _jsx("span", { className: "ui-code__dot ui-code__dot--yellow" }), _jsx("span", { className: "ui-code__dot ui-code__dot--green" })] }), _jsxs("span", { className: "ui-code__meta", children: [language && _jsx("span", { className: "ui-code__language", children: language }), label && _jsx("span", { className: "ui-code__label", children: label })] }), copy && renderCodeCopyButton()] }));
-};
-export const Code = ({ children, className, code, copy = false, highlighted = false, label, language, theme = 'auto', variant = 'inline', wrap = false, ...props }) => {
-    const codeChildren = renderCodeChildren(code, children, language);
-    if (variant === 'block') {
-        return (_jsxs("figure", { className: composeClassName('ui-code ui-code--block', wrap && 'ui-code--wrap', className), "data-code-theme": theme, "data-language": language, "data-slot": "code", "data-ui-code": true, ...props, children: [renderCodeHeader({ copy, label, language }), highlighted ?
-                    (children) :
-                    (_jsx("pre", { children: _jsx("code", { children: codeChildren }) }))] }));
-    }
-    return (_jsx("code", { className: composeClassName('ui-code ui-code--inline', className), "data-code-theme": theme, "data-language": language, "data-slot": "code", ...props, children: code ?? children }));
-};
-const dispatchCopyToast = (enabled, title, variant) => {
-    if (!enabled)
-        return;
-    document.dispatchEvent(new CustomEvent('ui:toast', {
-        detail: { title, variant }
-    }));
-};
-const resolveCopyText = (target, value) => {
-    if (value !== undefined)
-        return value;
-    if (!target)
-        return undefined;
-    const targetElement = document.querySelector(target);
-    return targetElement?.innerText ?? targetElement?.textContent ?? undefined;
-};
-const resolveCopyFeedback = (content, fallback) => (content ?? fallback);
-export const CopyButton = ({ children = 'Copy', className, copiedContent, copiedLabel = 'Copied to clipboard', errorContent, errorLabel = 'Could not copy to clipboard', label = 'Copy to clipboard', onClick, resetAfter = 2000, size = 'default', target, toast = false, value, variant = 'outline', ...props }) => {
-    const [state, setState] = useState('idle');
-    const resetTimerRef = useRef(undefined);
-    useEffect(() => () => {
-        globalThis.clearTimeout(resetTimerRef.current);
-    }, []);
-    const handleClick = async (event) => {
-        onClick?.(event);
-        if (event.defaultPrevented)
-            return;
-        const button = event.currentTarget;
-        const text = resolveCopyText(target, value);
-        try {
-            if (text === undefined)
-                throw new Error(errorLabel);
-            await navigator.clipboard.writeText(text);
-            setState('copied');
-            button.dispatchEvent(new CustomEvent('ui:copy-success', {
-                bubbles: true,
-                detail: { value: text }
-            }));
-            dispatchCopyToast(toast, copiedLabel, 'success');
-        }
-        catch (error) {
-            setState('error');
-            button.dispatchEvent(new CustomEvent('ui:copy-error', {
-                bubbles: true,
-                detail: { error }
-            }));
-            dispatchCopyToast(toast, errorLabel, 'destructive');
-        }
-        globalThis.clearTimeout(resetTimerRef.current);
-        resetTimerRef.current = globalThis.setTimeout(() => {
-            setState('idle');
-        }, resetAfter);
-    };
-    const accessibleLabel = {
-        copied: copiedLabel,
-        error: errorLabel,
-        idle: label
-    }[state];
-    return (_jsxs(Button, { "aria-label": accessibleLabel, className: composeClassName('ui-copy-button', className), "data-slot": "copy-button", "data-state": state, "data-ui-copy-button": true, onClick: handleClick, size: size, variant: variant, ...props, children: [_jsx("span", { "aria-hidden": "true", "data-slot": "copy-idle", hidden: state !== 'idle', children: children }), _jsx("span", { "aria-hidden": "true", "data-slot": "copy-copied", hidden: state !== 'copied', children: resolveCopyFeedback(copiedContent, copiedLabel) }), _jsx("span", { "aria-hidden": "true", "data-slot": "copy-error", hidden: state !== 'error', children: resolveCopyFeedback(errorContent, errorLabel) })] }));
-};
-export const Combobox = ({ className, defaultValue, id, label, list, onBlur, onChange, onFocus, onKeyDown, options = emptyStringOptions, type = 'text', value: valueProp, wrapperClassName, ...props }) => {
-    const inputId = id ?? `${list}-input`;
-    const rootRef = useRef(null);
-    const [open, setOpen] = useState(false);
-    const [value, setValue] = useState(() => String(defaultValue ?? ''));
-    const renderedValue = valueProp ?? value;
-    const query = String(renderedValue).trim().toLowerCase();
-    const visibleOptions = useMemo(() => options.filter(option => !query || option.toLowerCase().includes(query)), [options, query]);
-    const selectOption = (option) => {
-        if (valueProp === undefined) {
-            setValue(option);
-        }
-        setOpen(false);
-    };
-    const getVisibleOptions = () => [
-        ...(rootRef.current?.querySelectorAll('[data-ui-combobox-option]:not([hidden]):not([disabled])') ?? [])
-    ];
-    const focusInputEdgeOption = (key) => {
-        const options = getVisibleOptions();
-        options[key === 'ArrowUp' ? options.length - 1 : 0]?.focus();
-    };
-    const focusOption = (option, key) => {
-        const options = getVisibleOptions();
-        if (!options.length)
-            return;
-        const currentIndex = Math.max(0, options.indexOf(option));
-        let nextIndex = (currentIndex - 1 + options.length) % options.length;
-        if (key === 'Home')
-            nextIndex = 0;
-        else if (key === 'End')
-            nextIndex = options.length - 1;
-        else if (key === 'ArrowDown')
-            nextIndex = (currentIndex + 1) % options.length;
-        options[nextIndex]?.focus();
-    };
-    return (_jsxs("div", { className: composeClassName('ui-combobox', wrapperClassName), "data-ui-combobox": true, onBlur: event => {
-            const nextTarget = event.relatedTarget;
-            if (!nextTarget || !event.currentTarget.contains(nextTarget)) {
-                setOpen(false);
-            }
-        }, ref: rootRef, children: [label && (_jsx("label", { className: "ui-label", htmlFor: inputId, children: label })), _jsx("input", { "aria-autocomplete": "list", "aria-controls": list, "aria-expanded": open, className: composeClassName('ui-input', className), id: inputId, role: "combobox", type: type, value: renderedValue, onBlur: onBlur, onChange: event => {
-                    if (valueProp === undefined) {
-                        setValue(event.currentTarget.value);
-                    }
-                    setOpen(true);
-                    onChange?.(event);
-                }, onFocus: event => {
-                    setOpen(true);
-                    onFocus?.(event);
-                }, onKeyDown: event => {
-                    if (event.key === 'Escape') {
-                        setOpen(false);
-                    }
-                    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-                        const key = event.key;
-                        event.preventDefault();
-                        setOpen(true);
-                        globalThis.queueMicrotask(() => {
-                            focusInputEdgeOption(key);
-                        });
-                    }
-                    if (event.key === 'Enter' && visibleOptions[0]) {
-                        event.preventDefault();
-                        selectOption(visibleOptions[0]);
-                    }
-                    onKeyDown?.(event);
-                }, ...props }), _jsx("div", { className: "ui-combobox__list", hidden: !open, id: list, role: "listbox", children: visibleOptions.map(option => (_jsx("button", { "data-ui-combobox-option": true, "data-value": option, role: "option", tabIndex: -1, type: "button", onClick: () => {
-                        selectOption(option);
-                    }, onKeyDown: event => {
-                        if (event.key === 'Escape') {
-                            setOpen(false);
-                            rootRef.current?.querySelector('input[role="combobox"]')?.focus();
-                            return;
-                        }
-                        if (event.key === 'Enter' || event.key === ' ') {
-                            event.preventDefault();
-                            rootRef.current?.querySelector('input[role="combobox"]')?.focus();
-                            selectOption(option);
-                            return;
-                        }
-                        if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key))
-                            return;
-                        event.preventDefault();
-                        focusOption(event.currentTarget, event.key);
-                    }, onMouseDown: event => {
-                        event.preventDefault();
-                    }, children: option }, option))) })] }));
-};
-export const Command = ({ className, glass = false, ...props }) => (_jsx("div", { className: composeClassName('ui-command', glassClass('ui-command', glass), className), "data-ui-command": true, ...props }));
-export const ContextMenu = ({ className, glass = false, ...props }) => (_jsx("menu", { className: composeClassName('ui-menu', glassSurfaceClass('ui-menu', glass), className), "data-surface": resolveSurface(glass), "data-ui-context-menu": true, role: props.role ?? 'menu', ...props }));
-export const ColorPicker = ({ className, type = 'color', ...props }) => (_jsx("input", { className: composeClassName('ui-color-picker', className), type: type, ...props }));
-export const DataTable = ({ children, className, columns = emptyDataTableColumns, glass = false, name, rows = emptyDataTableRows, selectable = false, ...props }) => {
-    const [sort, setSort] = useState(null);
-    const sortedRows = useMemo(() => {
-        if (!sort)
-            return rows;
-        const column = columns.find(candidate => candidate.key === sort.key);
-        if (!column)
-            return rows;
-        const direction = sort.direction === 'ascending' ? 1 : -1;
-        return [...rows].sort((left, right) => compareDataTableCells(left[column.key], right[column.key], column.sort) * direction);
-    }, [columns, rows, sort]);
-    const toggleSort = (column) => {
-        setSort(current => ({
-            direction: current?.key === column.key && current.direction === 'ascending' ?
-                'descending' :
-                'ascending',
-            key: column.key
-        }));
-    };
-    return (_jsx("div", { className: composeClassName('ui-data-table', glassClass('ui-data-table', glass), className), "data-ui-datatable": true, "data-ui-datatable-name": name, "data-ui-datatable-selectable": selectable ? 'true' : undefined, "data-ui-glass-track": glass ? true : undefined, ...props, children: columns.length > 0 ?
-            (_jsxs("table", { children: [_jsx("thead", { children: _jsx("tr", { children: columns.map(column => {
-                                const direction = sort?.key === column.key ?
-                                    sort.direction :
-                                    undefined;
-                                const label = column.header ?? column.label ?? column.key;
-                                return (_jsx("th", { "aria-sort": direction ?? (column.sortable ? 'none' : undefined), "data-ui-datatable-sort-type": column.sort, "data-ui-datatable-sortable": column.sortable ? 'true' : undefined, scope: "col", children: column.sortable ?
-                                        (_jsx("button", { className: "ui-data-table__sort", "data-ui-datatable-sort": true, onClick: () => {
-                                                toggleSort(column);
-                                            }, type: "button", children: label })) :
-                                        label }, column.key));
-                            }) }) }), _jsx("tbody", { children: sortedRows.map((row, rowIndex) => (_jsx("tr", { "data-ui-datatable-row": true, "data-value": getDataTableRowValue(row, rowIndex), children: columns.map(column => (_jsx("td", { "data-sort-value": getDataTableSortValue(row[column.key]), children: formatDataTableCell(row[column.key]) }, column.key))) }, getDataTableRowValue(row, rowIndex)))) })] })) :
-            children }));
-};
-const formatDatePickerDisplayValue = (value, placeholder) => {
-    if (!value || !/^\d{4}-\d{2}-\d{2}$/.test(value))
-        return placeholder;
-    const date = new Date(`${value}T00:00:00.000Z`);
-    if (Number.isNaN(date.getTime()))
-        return placeholder;
-    return new Intl.DateTimeFormat(undefined, {
-        day: 'numeric',
-        month: 'short',
-        timeZone: 'UTC',
-        year: 'numeric'
-    }).format(date);
-};
-const stringifyDatePickerConstraint = (value) => (value === undefined ? undefined : String(value));
-/* eslint-disable complexity -- DatePicker coordinates controlled input, disclosure, Calendar, and native form contracts. */
-export const DatePicker = ({ className, defaultValue, disabled, glass = false, id, inputRef, max, min, name, onChange, onInvalid, onValueChange, placeholder, required, value, ...props }) => {
-    const generatedId = useId();
-    const datePickerId = id ?? generatedId;
-    const triggerId = `${datePickerId}-trigger`;
-    const popoverId = `${datePickerId}-popover`;
-    const rootRef = useRef(null);
-    const nativeInputRef = useRef(null);
-    const triggerRef = useRef(null);
-    const [internalValue, setInternalValue] = useState(defaultValue ?? '');
-    const [open, setOpen] = useState(false);
-    const selectedValue = value ?? internalValue;
-    const hasSelectedValue = selectedValue !== '';
-    const placeholderText = placeholder ?? 'Choose a date';
-    const maxStr = stringifyDatePickerConstraint(max);
-    const minStr = stringifyDatePickerConstraint(min);
-    const accessibleLabel = props['aria-label'];
-    useEffect(() => {
-        if (!open)
-            return;
-        const handlePointerDown = (event) => {
-            if (event.target instanceof Node &&
-                !rootRef.current?.contains(event.target))
-                setOpen(false);
-        };
-        const handleKeyDown = (event) => {
-            if (event.key !== 'Escape')
-                return;
-            setOpen(false);
-            triggerRef.current?.focus();
-        };
-        document.addEventListener('mousedown', handlePointerDown);
-        document.addEventListener('keydown', handleKeyDown);
-        return () => {
-            document.removeEventListener('mousedown', handlePointerDown);
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [open]);
-    const selectDate = (nextValue) => {
-        if (value === undefined)
-            setInternalValue(nextValue);
-        onValueChange?.(nextValue);
-        if (nativeInputRef.current) {
-            nativeInputRef.current.value = nextValue;
-            nativeInputRef.current.dispatchEvent(new Event('input', { bubbles: true }));
-            nativeInputRef.current.dispatchEvent(new Event('change', { bubbles: true }));
-        }
-        setOpen(false);
-        globalThis.setTimeout(() => triggerRef.current?.focus());
-    };
-    return (_jsxs("div", { className: composeClassName('ui-date-picker-field', glass && 'ui-date-picker-field--glass', glass === 'subtle' && 'ui-glass-subtle', glass === 'strong' && 'ui-glass-strong', className), "data-placeholder": hasSelectedValue ? undefined : 'true', "data-ui-date-picker": true, "data-ui-glass-track": glass ? true : undefined, ref: rootRef, children: [_jsx("input", { "aria-hidden": "true", className: "ui-date-picker ui-date-picker__native", "data-ui-date-picker-native": true, "data-ui-enhanced": "true", disabled: disabled, id: datePickerId, max: max, min: min, name: name, onChange: event => {
-                    if (value === undefined)
-                        setInternalValue(event.currentTarget.value);
-                    onChange?.(event);
-                }, onInvalid: event => {
-                    event.preventDefault();
-                    triggerRef.current?.setAttribute('aria-invalid', 'true');
-                    triggerRef.current?.focus();
-                    onInvalid?.(event);
-                }, ref: node => {
-                    nativeInputRef.current = node;
-                    setRefValue(inputRef, node);
-                }, required: required, tabIndex: -1, type: "date", value: selectedValue, ...props }), _jsxs("div", { className: "ui-date-picker__control", "data-ui-date-picker-control": true, children: [_jsxs("button", { "aria-controls": popoverId, "aria-expanded": open, "aria-haspopup": "dialog", "aria-label": accessibleLabel, "aria-required": required ?? undefined, className: "ui-input ui-date-picker ui-date-picker__trigger", "data-ui-date-picker-trigger": true, disabled: disabled, id: triggerId, onClick: () => {
-                            setOpen(current => !current);
-                        }, onKeyDown: event => {
-                            if (event.key !== 'ArrowDown')
-                                return;
-                            event.preventDefault();
-                            setOpen(true);
-                        }, ref: triggerRef, type: "button", children: [_jsx("span", { "data-ui-date-picker-value": true, children: formatDatePickerDisplayValue(selectedValue, placeholderText) }), _jsx("svg", { "aria-hidden": "true", className: "ui-date-picker__icon", fill: "none", viewBox: "0 0 24 24", children: _jsx("path", { d: "M7 2v3M17 2v3M3.5 9h17M5 4h14a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" }) })] }), _jsx("div", { "aria-label": "Choose date", className: "ui-date-picker__popover", "data-state": open ? 'open' : 'closed', "data-ui-date-picker-popover": true, hidden: !open, id: popoverId, role: "dialog", children: _jsx(Calendar, { disabled: disabled, max: maxStr, min: minStr, onValueChange: selectDate, value: selectedValue }) })] })] }));
-};
-const setDateRangeConstraint = (input, property, value) => {
-    if (value)
-        input[property] = value;
-    else
-        input.removeAttribute(property);
-};
-const getDateRangeState = (start, end) => {
-    if (!start)
-        return 'empty';
-    return end ? 'complete' : 'selecting-end';
-};
-const syncDateRangePickerElement = (root) => {
-    const inputs = [
-        ...root.querySelectorAll('[data-ui-date-picker-native]')
-    ];
-    const start = inputs[0];
-    const end = inputs.at(-1);
-    if (!(start && end) || start === end)
-        return {};
-    const datePickers = root.querySelectorAll('[data-ui-date-picker]');
-    datePickers[0]?.setAttribute('data-range-part', 'start');
-    datePickers[datePickers.length - 1]?.setAttribute('data-range-part', 'end');
-    setDateRangeConstraint(end, 'min', start.value);
-    setDateRangeConstraint(start, 'max', end.value);
-    root.dataset.rangeState = getDateRangeState(start.value, end.value);
-    const range = {};
-    if (end.value)
-        range.end = end.value;
-    if (start.value)
-        range.start = start.value;
-    return range;
-};
-export const DateRangePicker = ({ className, onInput, onRangeChange, ...props }) => {
-    const rootRef = useRef(null);
-    useEffect(() => {
-        if (rootRef.current)
-            syncDateRangePickerElement(rootRef.current);
-    });
-    return (_jsx("div", { className: composeClassName('ui-date-range-picker', className), "data-ui-date-range-picker": true, onInput: event => {
-            onInput?.(event);
-            onRangeChange?.(syncDateRangePickerElement(event.currentTarget));
-        }, ref: rootRef, ...props }));
-};
-export const Dialog = ({ className, defaultOpen, glass = false, layout = 'centered', onClick, onClose, onOpenChange, open, ...props }) => {
-    const dialog = useDialog({ defaultOpen, onOpenChange, open });
-    return (_jsx("dialog", { ...dialog.dialogProps, ...props, className: composeClassName('ui-dialog', layout === 'fullscreen' && 'ui-dialog--fullscreen', glassSurfaceClass('ui-dialog', glass), className), "data-layout": layout, "data-surface": resolveSurface(glass), onClick: composeHandlers(onClick, dialog.dialogProps.onClick), onClose: composeHandlers(onClose, dialog.dialogProps.onClose) }));
-};
-export const Drawer = ({ className, glass = false, ...props }) => (_jsx("dialog", { className: composeClassName('ui-drawer', glassSurfaceClass('ui-drawer', glass), className), "data-surface": resolveSurface(glass), "data-ui-drawer": true, ...props }));
-export const DropdownMenu = ({ children, className, defaultOpen, glass = false, onOpenChange, open, ...props }) => {
-    const menu = useDropdownMenu({ defaultOpen, onOpenChange, open });
-    return (_jsx(DropdownMenuContext.Provider, { value: menu, children: _jsx("menu", { ...menu.rootProps, ...props, className: composeClassName('ui-menu', glassSurfaceClass('ui-menu', glass), className), "data-surface": resolveSurface(glass), "data-ui-dropdown-menu": true, children: children }) }));
-};
-export const DropdownMenuTrigger = ({ onClick, onKeyDown, ...props }) => {
-    const menu = requireContext(useContext(DropdownMenuContext), 'DropdownMenuTrigger');
-    return (_jsx("button", { ...menu.triggerProps, ...props, onClick: composeHandlers(onClick, menu.triggerProps.onClick), onKeyDown: composeHandlers(onKeyDown, menu.triggerProps.onKeyDown), type: props.type ?? 'button' }));
-};
-export const DropdownMenuContent = ({ className, onKeyDown, ...props }) => {
-    const menu = requireContext(useContext(DropdownMenuContext), 'DropdownMenuContent');
-    return (_jsx("div", { ...menu.panelProps, ...props, className: composeClassName('ui-menu__content', className), onKeyDown: composeHandlers(onKeyDown, menu.panelProps.onKeyDown), role: props.role ?? 'menu' }));
-};
-export const DropdownMenuItem = ({ children, className, disabled = false, onClick, status, ...props }) => {
-    const menu = requireContext(useContext(DropdownMenuContext), 'DropdownMenuItem');
-    return (_jsxs("button", { ...props, "aria-disabled": disabled || undefined, className: composeClassName('ui-menu__item', className), disabled: disabled, onClick: event => {
-            onClick?.(event);
-            if (!event.defaultPrevented && !disabled)
-                menu.close();
-        }, role: props.role ?? 'menuitem', type: props.type ?? 'button', children: [_jsx("span", { className: "ui-menu__item-label", children: children }), status && _jsx("span", { className: "ui-menu__item-status", children: status })] }));
-};
-export const DropdownMenuSeparator = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-menu__separator', className), role: props.role ?? 'separator', ...props }));
-export const Empty = ({ className, glass = false, variant = 'default', ...props }) => (_jsx("section", { className: composeClassName('ui-empty', variant === 'compact' && 'ui-empty--compact', glassClass('ui-empty', glass), className), "data-variant": variant, ...props }));
-const renderIllustrationElement = (element, index) => {
-    if (element.kind === 'circle') {
-        return _jsx("circle", { cx: element.cx, cy: element.cy, r: element.r }, index);
-    }
-    if (element.kind === 'rounded-rect') {
-        return (_jsx("rect", { height: element.height, rx: element.radius, width: element.width, x: element.x, y: element.y }, index));
-    }
-    const pointPairs = [];
-    for (let pointIndex = 0; pointIndex < element.points.length; pointIndex += 2) {
-        const x = element.points[pointIndex];
-        const y = element.points[pointIndex + 1];
-        if (x === undefined || y === undefined)
-            break;
-        pointPairs.push(`${x},${y}`);
-    }
-    return createElement(element.kind, { key: index, points: pointPairs.join(' ') });
-};
-export const Illustration = ({ className, label, size = 'md', tone = 'auto', variant = 'empty', ...props }) => (_jsx("span", { "aria-hidden": label ? undefined : true, "aria-label": label, className: composeClassName('ui-illustration', `ui-illustration--${variant}`, `ui-illustration--${tone}`, `ui-illustration--${size}`, className), role: label ? 'img' : undefined, ...props, children: _jsxs("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 120 120", children: [_jsx("circle", { className: "ui-illustration__wash", cx: "60", cy: "60", r: "48" }), lumenIllustrations[variant].elements.map(renderIllustrationElement)] }) }));
-const resolveErrorStateAnnouncement = (announce, ariaLive, role) => {
-    if (announce === 'assertive') {
-        return { 'aria-live': ariaLive ?? 'assertive', role: role ?? 'alert' };
-    }
-    if (announce === 'polite') {
-        return { 'aria-live': ariaLive ?? 'polite', role: role ?? 'status' };
-    }
-    return {
-        ...(ariaLive ? { 'aria-live': ariaLive } : {}),
-        ...(role ? { role } : {})
-    };
-};
-const ErrorStateGraphic = ({ graphic, kind, layout }) => {
-    if (graphic === false)
-        return null;
-    return (_jsx("div", { "aria-hidden": "true", className: "ui-error-state__graphic", "data-slot": "error-state-graphic", children: graphic ?? (_jsx(Illustration, { size: layout === 'compact' ? 'sm' : 'md', variant: kind })) }));
-};
-const ErrorStateContent = ({ children, description, headingLevel, reference, referenceLabel, title, titleId }) => (_jsxs("div", { className: "ui-error-state__content", "data-slot": "error-state-content", children: [createElement(`h${headingLevel}`, {
-            className: 'ui-error-state__title',
-            'data-slot': 'error-state-title',
-            id: titleId
-        }, title), description && (_jsx("p", { className: "ui-error-state__description", "data-slot": "error-state-description", children: description })), children && (_jsx("div", { className: "ui-error-state__details", "data-slot": "error-state-details", children: children })), reference && (_jsxs("p", { className: "ui-error-state__reference", "data-slot": "error-state-reference", children: [_jsxs("span", { children: [referenceLabel, ":"] }), ' ', _jsx("code", { children: reference })] }))] }));
-const ErrorStateActions = ({ actions }) => actions ?
-    (_jsx("div", { className: "ui-error-state__actions", "data-slot": "error-state-actions", children: actions })) :
-    null;
-export const ErrorState = ({ 'aria-live': ariaLive, actions, announce, children, className, description, graphic, headingLevel, id, kind, layout, reference, referenceLabel, role, title, ...props }) => {
-    const resolvedAnnounce = announce ?? 'off';
-    const resolvedHeadingLevel = headingLevel ?? 2;
-    const resolvedKind = kind ?? 'error';
-    const resolvedLayout = layout ?? 'default';
-    const resolvedReferenceLabel = referenceLabel ?? 'Reference';
-    const titleId = id ? `${id}-title` : undefined;
-    const announcementProps = resolveErrorStateAnnouncement(resolvedAnnounce, ariaLive, role);
-    return (_jsxs("section", { "aria-label": titleId ? undefined : title, "aria-labelledby": titleId, className: composeClassName('ui-error-state', `ui-error-state--${resolvedKind}`, `ui-error-state--${resolvedLayout}`, className), "data-kind": resolvedKind, "data-layout": resolvedLayout, "data-ui-error-state": true, id: id, ...announcementProps, ...props, children: [_jsx(ErrorStateGraphic, { graphic: graphic, kind: resolvedKind, layout: resolvedLayout }), _jsx(ErrorStateContent, { description: description, headingLevel: resolvedHeadingLevel, reference: reference, referenceLabel: resolvedReferenceLabel, title: title, titleId: titleId, children: children }), _jsx(ErrorStateActions, { actions: actions })] }));
-};
-export const KanbanBoard = ({ className, tabIndex = 0, ...props }) => (_jsx("section", { "aria-orientation": "horizontal", className: composeClassName('ui-kanban-board ui-kanban', className), "data-ui-kanban": true, tabIndex: tabIndex, ...props }));
-export const KanbanColumn = ({ className, value, ...props }) => (_jsx("section", { className: composeClassName('ui-kanban__column', className), "data-ui-kanban-column": value, ...props }));
-export const ErrorSummary = ({ className, errors, heading = 'There is a problem', id = 'ui-error-summary', ...props }) => {
-    const normalizedErrors = normalizeLumenFormErrors(errors);
-    const allErrors = [
-        ...normalizedErrors.form.map(message => ({ message })),
-        ...normalizedErrors.fields
-    ];
-    const headingId = `${id}-heading`;
-    return (_jsxs("section", { "aria-labelledby": headingId, className: composeClassName('ui-error-summary', className), "data-ui-error-summary": true, hidden: allErrors.length === 0, id: id, tabIndex: -1, ...props, children: [_jsx("h2", { id: headingId, children: heading }), _jsx("ul", { children: allErrors.map(error => (_jsx("li", { children: error.controlId ?
-                        (_jsx("a", { href: `#${error.controlId}`, children: error.message })) :
-                        (error.message) }, `${error.name ?? 'form'}:${error.controlId ?? ''}:${error.message}`))) })] }));
-};
-export const Field = ({ 'aria-describedby': ariaDescribedby, className, controlId, describedBy, glass = false, invalid = false, ...props }) => {
-    const fieldDescribedBy = [ariaDescribedby, describedBy].filter(Boolean).join(' ') || undefined;
-    return (_jsx("div", { "aria-describedby": ariaDescribedby, className: composeClassName('ui-field', glassClass('ui-field', glass), className), "data-invalid": invalid ? 'true' : undefined, "data-ui-field": true, "data-ui-field-control": controlId, "data-ui-field-describedby": fieldDescribedBy, ...props }));
-};
-export const FieldError = ({ children, className, hidden, message, ...props }) => {
-    const content = message ?? children;
-    return (_jsx("p", { className: composeClassName('ui-field-error', className), "data-ui-field-error": true, hidden: hidden ?? !content, ...props, children: content }));
-};
-export const Form = ({ 'aria-busy': ariaBusy, className, enhance = false, status = 'idle', ...props }) => (_jsx("form", { "aria-busy": ariaBusy ?? (status === 'submitting' ? true : undefined), className: composeClassName('ui-form', className), "data-status": status, "data-ui-form": enhance ? true : undefined, ...props }));
-export const HoverCard = ({ className, glass = false, ...props }) => (_jsx("aside", { className: composeClassName('ui-hover-card', glassSurfaceClass('ui-hover-card', glass), className), "data-surface": resolveSurface(glass), "data-ui-hover-card": true, ...props }));
-export const Icon = ({ name, ...props }) => (_jsx(IconView, { ...props, icon: name ? getLumenIcon(name) : undefined }));
-const getPasswordFieldDescribedBy = (ariaDescribedBy, hintId, errorId) => [ariaDescribedBy, hintId, errorId].filter(Boolean).join(' ') || undefined;
-const usePasswordVisibility = (inputRef) => {
-    const [visible, setVisible] = useState(false);
-    useEffect(() => {
-        const form = inputRef.current?.form;
-        if (!form)
-            return;
-        const handleReset = () => {
-            setVisible(false);
-        };
-        const hideAfterSuccess = () => {
-            if (form.dataset.status === 'success')
-                setVisible(false);
-        };
-        form.addEventListener('reset', handleReset);
-        const observer = new MutationObserver(hideAfterSuccess);
-        observer.observe(form, {
-            attributeFilter: ['data-status'],
-            attributes: true
-        });
-        return () => {
-            form.removeEventListener('reset', handleReset);
-            observer.disconnect();
-        };
-    }, [inputRef]);
-    const toggleVisibility = () => {
-        setVisible(current => !current);
-        inputRef.current?.focus({ preventScroll: true });
-    };
-    return { toggleVisibility, visible };
-};
-const PasswordFieldControl = ({ controlId, describedBy, error, forwardedRef, hideLabel, inputProps, inputRef, name, showLabel, toggleVisibility, visible }) => (_jsxs("div", { className: "ui-password-field__control", "data-ui-password-field": true, children: [_jsx(Input, { ...inputProps, "aria-describedby": describedBy, "aria-invalid": error ? true : undefined, id: controlId, name: name, ref: node => {
-                inputRef.current = node;
-                setRefValue(forwardedRef, node);
-            }, type: visible ? 'text' : 'password' }), _jsx(Button, { "aria-controls": controlId, "aria-label": visible ? hideLabel : showLabel, "aria-pressed": visible, "data-ui-password-toggle": true, onClick: toggleVisibility, size: "icon", type: "button", variant: "ghost", children: _jsx("span", { "aria-hidden": "true", children: visible ? 'Hide' : 'Show' }) })] }));
-const PasswordFieldMessages = ({ error, errorId, hint, hintId }) => (_jsxs(_Fragment, { children: [hint && (_jsx("p", { className: "ui-field__hint", "data-ui-field-hint": true, id: hintId, children: hint })), _jsx(FieldError, { id: errorId, message: error })] }));
-export const PasswordField = ({ 'aria-describedby': ariaDescribedby, className, error, hideLabel = 'Hide password', hint, id, label = 'Password', name, ref, showLabel = 'Show password', ...props }) => {
-    const generatedId = useId();
-    const controlId = id ?? `ui-password-${generatedId}`;
-    const hintId = hint ? `${controlId}-hint` : undefined;
-    const errorId = `${controlId}-error`;
-    const describedBy = getPasswordFieldDescribedBy(ariaDescribedby, hintId, error ? errorId : undefined);
-    const inputRef = useRef(null);
-    const { toggleVisibility, visible } = usePasswordVisibility(inputRef);
-    return (_jsxs(Field, { className: composeClassName('ui-password-field', className), controlId: controlId, invalid: Boolean(error), ...(describedBy ? { describedBy } : {}), children: [_jsx(Label, { htmlFor: controlId, children: label }), _jsx(PasswordFieldControl, { controlId: controlId, describedBy: describedBy, error: error, forwardedRef: ref, hideLabel: hideLabel, inputProps: props, inputRef: inputRef, name: name, showLabel: showLabel, toggleVisibility: toggleVisibility, visible: visible }), _jsx(PasswordFieldMessages, { error: error, errorId: errorId, hint: hint, hintId: hintId })] }));
-};
-export const InputGroup = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-input-group', className), ...props }));
-export const InputOTP = ({ 'aria-invalid': ariaInvalid, className, defaultValue, disabled = false, inputClassName, inputMode = 'numeric', length = 6, maxLength = length, pattern = '[0-9]*', ref, value, ...props }) => {
-    const otp = useInputOTP({
-        defaultValue: toInputValue(defaultValue),
-        disabled,
-        inputMode,
-        inputRef: ref,
-        invalid: ariaInvalid === true || ariaInvalid === 'true',
-        length,
-        pattern,
-        value: toInputValue(value)
-    });
-    return (_jsxs("div", { ...otp.rootProps, className: composeClassName(otp.rootProps.className, className), children: [_jsx("input", { ...otp.getInputProps({
-                    ...props,
-                    'aria-invalid': ariaInvalid,
-                    className: inputClassName,
-                    disabled,
-                    inputMode,
-                    maxLength,
-                    pattern
-                }) }), _jsx("div", { ...otp.segmentsProps, children: otp.segmentIndexes.map(index => (_jsx("button", { ...otp.getSegmentProps(index), type: "button", children: _jsx("span", { "data-ui-input-otp-char": true, children: otp.getSegmentChar(index) }) }, index))) })] }));
-};
-export const NumberField = ({ className, ref, type = 'number', ...props }) => (_jsx("input", { className: composeClassName('ui-input ui-number-field', className), ref: ref, type: type, ...props }));
-export const Item = ({ as = 'div', className, glass = false, ...props }) => createElement(as, {
-    className: composeClassName('ui-item', glassClass('ui-item', glass), className),
-    'data-slot': 'item',
-    ...props
-});
-export const Kbd = ({ className, ...props }) => (_jsx("kbd", { className: composeClassName('ui-kbd', className), ...props }));
-export const Marker = ({ className, variant = 'default', ...props }) => (_jsx("span", { className: composeClassName('ui-marker', variantClass('ui-marker', variant), className), "data-variant": variant, ...props }));
-export const Menubar = ({ className, glass = false, ...props }) => (_jsx("nav", { className: composeClassName('ui-menubar', glassSurfaceClass('ui-menubar', glass), className), "data-surface": resolveSurface(glass), "data-ui-menubar": true, ...props }));
-export const Message = ({ className, from = 'assistant', ...props }) => (_jsx("article", { className: composeClassName('ui-message', `ui-message--${from}`, className), "data-from": from, ...props }));
-export const MessageScroller = ({ className, glass = false, ...props }) => (_jsx("div", { className: composeClassName('ui-message-scroller', glassClass('ui-message-scroller', glass), className), ...props }));
-export const NativeSelect = ({ children, className, defaultValue, options = emptyOptions, placeholder, ref, value, visualSize = 'default', ...props }) => {
-    const placeholderDefaultValue = placeholder && value === undefined && defaultValue === undefined ?
-        '' :
-        undefined;
-    return (_jsxs("select", { className: composeClassName('ui-select', visualSize === 'sm' && 'ui-select--sm', visualSize === 'lg' && 'ui-select--lg', className), defaultValue: defaultValue ?? placeholderDefaultValue, ref: ref, value: value, ...props, children: [placeholder && (_jsx("option", { disabled: true, value: "", children: placeholder })), children, options.map(normalizeOption).map(option => (_jsx("option", { disabled: option.disabled, value: option.value, children: option.label }, option.value)))] }));
-};
-const phoneInputSizeModifiers = (size) => {
-    if (size === 'sm') {
-        return { inputClass: 'ui-input--sm', selectClass: 'ui-select--sm' };
-    }
-    if (size === 'lg') {
-        return { inputClass: 'ui-input--lg', selectClass: 'ui-select--lg' };
-    }
-    return { inputClass: undefined, selectClass: undefined };
-};
-const getPhoneInputOptions = (locale) => locale === undefined ? {} : { locale };
-const getBooleanAttribute = (value) => value ? true : undefined;
-const getPhoneErrorId = (invalid, name) => (invalid ? `${name}-error` : undefined);
-const PhoneInputError = ({ invalid, message, name }) => invalid ?
-    (_jsx("span", { className: "ui-visually-hidden", id: `${name}-error`, role: "alert", children: message })) :
-    null;
-const MetadataPhoneInput = ({ className, countryOptions, countryLabel, countryName, defaultCountryValue, defaultValue, invalidNumberMessage, locale, name, onValueChange, placeholder, showValidationError, size, value, ...props }) => {
-    const { selectClass, inputClass } = phoneInputSizeModifiers(size);
-    const phoneOptions = useMemo(() => getPhoneInputOptions(locale), [locale]);
-    const metadataCountries = useMemo(() => countryOptions ?? getLumenPhoneCountries(phoneOptions), [countryOptions, phoneOptions]);
-    const initialCountry = useMemo(() => resolveReactPhoneInputCountry(metadataCountries, defaultCountryValue, locale, value), [defaultCountryValue, locale, metadataCountries, value]);
-    const [internalValue, setInternalValue] = useState(() => (defaultValue ?
-        resolveReactPhoneInputValue(metadataCountries, initialCountry, defaultValue, phoneOptions) :
-        { country: initialCountry, e164: null, isValid: false, nationalNumber: '' }));
-    const phoneValue = value === undefined || value.country.regionCode === initialCountry.regionCode ?
-        value ?? internalValue :
-        resolveReactPhoneInputValue(metadataCountries, initialCountry, value.nationalNumber, phoneOptions);
-    const resolvedOptions = metadataCountries.map(country => ({
-        disabled: false,
-        label: country.pickerLabel,
-        value: country.regionCode
-    }));
-    const commitValue = (nextValue) => {
-        if (value === undefined)
-            setInternalValue(nextValue);
-        onValueChange?.(nextValue);
-    };
-    const handleCountryChange = (event) => {
-        const selectedCountry = metadataCountries.find(country => (country.regionCode === event.currentTarget.value ||
-            country.callingCode === event.currentTarget.value));
-        if (selectedCountry) {
-            commitValue(resolveLumenPhoneNumber(selectedCountry, phoneValue.nationalNumber, phoneOptions));
-        }
-    };
-    const handleNumberChange = (event) => {
-        commitValue(resolveReactPhoneInputValue(metadataCountries, phoneValue.country, event.currentTarget.value, phoneOptions));
-    };
-    const invalid = showValidationError && phoneValue.nationalNumber.length > 0 && !phoneValue.isValid;
-    return (_jsxs("div", { className: composeClassName('ui-phone-input ui-input-group', className), "data-invalid": getBooleanAttribute(invalid), ...props, children: [_jsx("select", { "aria-label": countryLabel, className: composeClassName('ui-select ui-phone-input__country', selectClass), name: countryName, onChange: handleCountryChange, value: phoneValue.country.regionCode, children: resolvedOptions.map(option => (_jsx("option", { disabled: option.disabled, value: option.value, children: option.label }, option.value))) }), _jsx("input", { autoComplete: "tel", "aria-errormessage": getPhoneErrorId(invalid, name), "aria-invalid": getBooleanAttribute(invalid), className: composeClassName('ui-input ui-phone-input__number', inputClass), inputMode: "tel", name: name, onChange: handleNumberChange, placeholder: placeholder, type: "tel", value: phoneValue.nationalNumber }), _jsx(PhoneInputError, { invalid: invalid, message: invalidNumberMessage, name: name })] }));
-};
-const LegacyPhoneInput = ({ className, countries, countryOptions: _countryOptions, countryLabel = 'Country code', countryName = 'country', defaultCountryValue, defaultValue, invalidNumberMessage: _invalidNumberMessage, locale: _locale, name = 'phone', onValueChange: _onValueChange, placeholder = 'Phone number', showValidationError: _showValidationError, size = 'default', value: _value, ...props }) => {
-    const { inputClass, selectClass } = phoneInputSizeModifiers(size);
-    return (_jsxs("div", { className: composeClassName('ui-phone-input ui-input-group', className), ...props, children: [_jsx("select", { "aria-label": countryLabel, className: composeClassName('ui-select ui-phone-input__country', selectClass), defaultValue: defaultCountryValue, name: countryName, children: countries.map(normalizeOption).map(option => (_jsx("option", { disabled: option.disabled, value: option.value, children: option.label }, option.value))) }), _jsx("input", { autoComplete: "tel", className: composeClassName('ui-input ui-phone-input__number', inputClass), defaultValue: defaultValue, inputMode: "tel", name: name, placeholder: placeholder, type: "tel" })] }));
-};
-export const PhoneInput = (props) => {
-    if (props.countries) {
-        return _jsx(LegacyPhoneInput, { ...props, countries: props.countries });
-    }
-    return (_jsx(MetadataPhoneInput, { ...props, countryLabel: props.countryLabel ?? 'Country code', countryName: props.countryName ?? 'country', defaultCountryValue: props.defaultCountryValue ?? 'US', invalidNumberMessage: props.invalidNumberMessage ?? 'Enter a complete phone number.', name: props.name ?? 'phone', placeholder: props.placeholder ?? 'Phone number', showValidationError: props.showValidationError ?? true, size: props.size ?? 'default' }));
-};
-export const NavigationMenu = ({ className, glass = false, variant = 'default', ...props }) => (_jsx("nav", { className: composeClassName('ui-navigation-menu', variant === 'unstyled' && 'ui-navigation-menu--unstyled', glassSurfaceClass('ui-navigation-menu', glass), className), "data-slot": "navigation-menu", "data-surface": resolveSurface(glass), "data-ui-navigation-menu": true, "data-variant": variant, ...props }));
-export const ContextNavigation = ({ children, className, context, variant = 'default', ...props }) => (_jsxs("div", { className: composeClassName('ui-context-navigation', variant === 'unstyled' && 'ui-context-navigation--unstyled', className), "data-slot": "context-navigation", "data-variant": variant, ...props, children: [context && (_jsx("div", { className: "ui-context-navigation__context", "data-slot": "context-navigation-context", children: context })), children] }));
-export const Pagination = ({ 'aria-label': ariaLabel = 'Pagination', className, ...props }) => (_jsx("nav", { "aria-label": ariaLabel, className: composeClassName('ui-pagination', className), ...props }));
-export const Popover = ({ children, className, defaultOpen, glass = false, onOpenChange, open, ...props }) => {
-    const popover = usePopover({ defaultOpen, onOpenChange, open });
-    return (_jsx(PopoverContext.Provider, { value: popover, children: _jsx("div", { ...popover.rootProps, ...props, className: composeClassName('ui-popover', glassSurfaceClass('ui-popover', glass), className), "data-surface": resolveSurface(glass), "data-ui-popover": true, children: children }) }));
-};
-export const PopoverTrigger = ({ onClick, onKeyDown, ...props }) => {
-    const popover = requireContext(useContext(PopoverContext), 'PopoverTrigger');
-    return (_jsx("button", { ...popover.triggerProps, ...props, onClick: composeHandlers(onClick, popover.triggerProps.onClick), onKeyDown: composeHandlers(onKeyDown, popover.triggerProps.onKeyDown), type: props.type ?? 'button' }));
-};
-export const PopoverPanel = ({ onKeyDown, ...props }) => {
-    const popover = requireContext(useContext(PopoverContext), 'PopoverPanel');
-    return (_jsx("div", { ...popover.panelProps, ...props, onKeyDown: composeHandlers(onKeyDown, popover.panelProps.onKeyDown) }));
-};
-export const RadioGroup = ({ className, ...props }) => (_jsx("fieldset", { className: composeClassName('ui-radio-group', className), "data-ui-radio-group": true, ...props }));
-const renderResizablePane = (child, index, panelProps) => {
-    if (isValidElement(child)) {
-        const childProps = child.props;
-        return cloneElement(child, {
-            ...panelProps,
-            className: composeClassName(childProps.className, panelProps.className),
-            style: {
-                ...childProps.style,
-                ...panelProps.style
-            }
-        });
-    }
-    return _jsx("div", { ...panelProps, children: child });
-};
-export const Resizable = ({ children, className, defaultSizes, direction = 'horizontal', maxSize, minSize, resetOnDoubleClick = true, ...props }) => {
-    const panes = Children.toArray(children);
-    const resizable = useResizable({
-        defaultSizes,
-        direction,
-        maxSize,
-        minSize,
-        panelCount: panes.length,
-        resetOnDoubleClick
-    });
-    return (_jsx("div", { ...props, ...resizable.rootProps, className: composeClassName(resizable.rootProps.className, className), children: panes.map((child, index) => (_jsxs(Fragment, { children: [renderResizablePane(child, index, resizable.getPanelProps(index)), index < panes.length - 1 && (_jsx("button", { ...resizable.getHandleProps(index), type: "button" }))] }, index))) }));
-};
-export const RichTextEditor = ({ className, glass = false, ...props }) => (_jsx("section", { className: composeClassName('ui-rich-text-editor', glassClass('ui-rich-text-editor', glass), className), "data-ui-rich-text-editor": true, ...props }));
-export const ScrollArea = ({ className, glass = false, ...props }) => (_jsx("div", { className: composeClassName('ui-scroll-area', glassClass('ui-scroll-area', glass), className), ...props }));
-export const ScrollProgress = ({ 'aria-label': ariaLabel = 'Reading progress', className, position = 'top', ...props }) => {
-    const rootRef = useRef(null);
-    useEffect(() => {
-        const root = rootRef.current;
-        if (!root)
-            return;
-        let frame = 0;
-        const update = () => {
-            frame = 0;
-            const scrollingElement = document.scrollingElement ?? document.documentElement;
-            const maximum = scrollingElement.scrollHeight - scrollingElement.clientHeight;
-            const percentage = maximum > 0 ?
-                Math.min(100, Math.max(0, (scrollingElement.scrollTop / maximum) * 100)) :
-                0;
-            const bar = root.querySelector('.ui-scroll-progress__bar');
-            root.setAttribute('aria-valuenow', `${Math.round(percentage)}`);
-            if (bar)
-                bar.style.transform = `scaleX(${percentage / 100})`;
-        };
-        const scheduleUpdate = () => {
-            if (frame)
-                return;
-            frame = window.requestAnimationFrame(update);
-        };
-        scheduleUpdate();
-        window.addEventListener('resize', scheduleUpdate, { passive: true });
-        window.addEventListener('scroll', scheduleUpdate, { passive: true });
-        return () => {
-            if (frame)
-                window.cancelAnimationFrame(frame);
-            window.removeEventListener('resize', scheduleUpdate);
-            window.removeEventListener('scroll', scheduleUpdate);
-        };
-    }, []);
-    return (_jsx("div", { "aria-label": ariaLabel, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": 0, className: composeClassName('ui-scroll-progress', position === 'bottom' && 'ui-scroll-progress--bottom', className), "data-position": position, "data-ui-scroll-progress": true, ref: rootRef, role: "progressbar", ...props, children: _jsx("span", { className: "ui-scroll-progress__bar" }) }));
-};
-export const Schedule = ({ className, glass = false, ...props }) => (_jsx("section", { className: composeClassName('ui-schedule', glassClass('ui-schedule', glass), className), "data-ui-schedule": true, ...props }));
-export const SearchField = ({ className, ref, type = 'search', ...props }) => (_jsx("input", { className: composeClassName('ui-input ui-search-field', className), ref: ref, type: type, ...props }));
-const getSelectSizeClass = (size) => {
-    if (size === 'sm')
-        return 'ui-select--sm';
-    if (size === 'lg')
-        return 'ui-select--lg';
-    return false;
-};
-export const Select = ({ children, className, defaultValue, disabled = false, glass = false, id, inputRef, name, onChange, onValueChange, options = emptyOptions, placeholder, required = false, size = 'default', value, ...props }) => {
-    const select = useSelect({
-        defaultValue,
-        disabled,
-        id,
-        name,
-        onValueChange,
-        options,
-        placeholder,
-        required,
-        value
-    });
-    const sizeClass = getSelectSizeClass(size);
-    return (_jsxs("div", { ...select.rootProps, className: composeClassName('ui-select-field', glassClass('ui-select-field', glass), className), "data-ui-glass-track": glass ? true : undefined, children: [_jsxs("select", { ...select.nativeSelectProps, ...props, className: composeClassName('ui-select ui-select__native', sizeClass), onChange: composeHandlers(onChange, select.nativeSelectProps.onChange), ref: inputRef, children: [placeholder && (_jsx("option", { "data-ui-select-placeholder": true, disabled: true, value: "", children: placeholder })), children, select.options.map(option => (_jsx("option", { disabled: option.disabled, value: option.value, children: option.label }, option.value)))] }), _jsxs("div", { ...select.controlProps, className: "ui-select__control", children: [_jsx("button", { ...select.triggerProps, className: composeClassName('ui-select ui-select__trigger', sizeClass), type: select.triggerProps.type ?? 'button', children: _jsx("span", { "data-ui-select-value": true, children: select.triggerText }) }), _jsx("div", { ...select.listProps, className: "ui-select__list", children: select.options.map(option => {
-                            const optionProps = select.getOptionProps(option);
-                            return (_jsx("button", { ...optionProps, type: optionProps.type ?? 'button', children: option.label }, option.value));
-                        }) })] })] }));
-};
-const groupListBoxOptions = (options) => {
-    const groups = [];
-    options.forEach((option, index) => {
-        const currentGroup = groups.at(-1);
-        if (!currentGroup || currentGroup.label !== option.section) {
-            groups.push({
-                ...(option.section ? { label: option.section } : {}),
-                options: [{ ...option, index }]
-            });
-            return;
-        }
-        currentGroup.options.push({ ...option, index });
-    });
-    return groups;
-};
-const getListBoxGroupKey = (group) => {
-    const values = group.options.map(option => option.value).join('|');
-    return group.label ? `${group.label}:${values}` : values;
-};
-const optionalTrue = (value) => value ? true : undefined;
-const ListBoxNativeOptions = ({ groups }) => groups.map(group => {
-    const options = group.options.map(option => (_jsx("option", { disabled: option.disabled, value: option.value, children: option.label }, option.value)));
-    return group.label ?
-        (_jsx("optgroup", { label: group.label, children: options }, getListBoxGroupKey(group))) :
-        (_jsx(Fragment, { children: options }, getListBoxGroupKey(group)));
-});
-const ListBoxVisibleOptions = ({ activeIndex, controlId, emptyMessage, groups, loading, onSelect, selectedValues }) => {
-    if (loading)
-        return null;
-    if (!groups.length) {
-        return (_jsx("div", { "aria-disabled": "true", className: "ui-list-box__empty", role: "option", children: emptyMessage }));
-    }
-    return groups.map(group => {
-        const groupKey = getListBoxGroupKey(group);
-        const safeGroupKey = groupKey.replaceAll(/[^a-zA-Z0-9_-]/g, '-');
-        const groupLabelId = group.label ? `${controlId}-group-${safeGroupKey}` : undefined;
-        const options = group.options.map(option => (_jsx("div", { "aria-disabled": option.disabled ? true : undefined, "aria-selected": selectedValues.has(option.value), className: composeClassName('ui-list-box__option', option.index === activeIndex && 'ui-list-box__option--active'), "data-active": option.index === activeIndex ? 'true' : undefined, "data-ui-list-box-option": true, "data-value": option.value, onClick: () => {
-                onSelect(option.index);
-            }, role: "option", children: option.label }, option.value)));
-        if (!group.label)
-            return _jsx(Fragment, { children: options }, groupKey);
-        return (_jsxs("div", { "aria-labelledby": groupLabelId, role: "group", children: [_jsx("div", { className: "ui-list-box__section", id: groupLabelId, children: group.label }), options] }, groupKey));
-    });
-};
-const normalizeListBoxValues = (value) => {
-    if (value === undefined)
-        return [];
-    return Array.isArray(value) ? value : [value];
-};
-const findLastEnabledOptionIndex = (options) => {
-    let lastEnabledIndex = -1;
-    for (const [index, option] of options.entries()) {
-        if (!option.disabled)
-            lastEnabledIndex = index;
-    }
-    return lastEnabledIndex;
-};
-const getListBoxSelectedValues = (controlledValue, internalValues) => controlledValue === undefined ?
-    internalValues :
-    normalizeListBoxValues(controlledValue);
-const getListBoxSelectValue = (multiple, selectedValues) => (multiple ? selectedValues : (selectedValues[0] ?? ''));
-const ListBoxLabel = ({ controlId, label }) => label ?
-    (_jsx("label", { className: "ui-label", htmlFor: controlId, children: label })) :
-    null;
-const normalizeListBoxProps = ({ disabled = false, emptyMessage = 'No options available', loading = false, loadingMessage = 'Loading options', multiple = false, options = emptyOptions, required = false, selectionFollowsFocus = false, ...props }) => ({
-    disabled,
-    emptyMessage,
-    loading,
-    loadingMessage,
-    multiple,
-    options,
-    required,
-    selectionFollowsFocus,
-    ...props
-});
-export const ListBox = (inputProps) => {
-    const { className, defaultValue, disabled, emptyMessage, id, label, loading, loadingMessage, multiple, name, onValueChange, options, ref, required, selectionFollowsFocus, value, ...props } = normalizeListBoxProps(inputProps);
-    const generatedId = useId();
-    const controlId = id ?? `ui-list-box-${generatedId}`;
-    const normalizedOptions = options.map(option => typeof option === 'string' ? { label: option, value: option } : option);
-    const optionGroups = groupListBoxOptions(normalizedOptions);
-    const [internalValues, setInternalValues] = useState(() => normalizeListBoxValues(defaultValue));
-    const selectedValues = getListBoxSelectedValues(value, internalValues);
-    const selectedSet = new Set(selectedValues);
-    const firstEnabledIndex = Math.max(0, normalizedOptions.findIndex(option => !option.disabled));
-    const [activeIndex, setActiveIndex] = useState(firstEnabledIndex);
-    const selectRef = useRef(null);
-    const typeaheadRef = useRef('');
-    const typeaheadTimerRef = useRef(undefined);
-    const commitValues = (nextValues) => {
-        if (value === undefined) {
-            setInternalValues(nextValues);
-        }
-        onValueChange?.(nextValues);
-        const select = selectRef.current;
-        if (!select)
-            return;
-        for (const option of select.options) {
-            option.selected = nextValues.includes(option.value);
-        }
-        select.dispatchEvent(new Event('input', { bubbles: true }));
-        select.dispatchEvent(new Event('change', { bubbles: true }));
-    };
-    const selectOption = (index) => {
-        const option = normalizedOptions[index];
-        if (!option || option.disabled || disabled || loading)
-            return;
-        const optionValue = option.value;
-        let nextValues;
-        if (!multiple) {
-            nextValues = [optionValue];
-        }
-        else if (selectedSet.has(optionValue)) {
-            nextValues = selectedValues.filter(selectedValue => selectedValue !== optionValue);
-        }
-        else {
-            nextValues = [...selectedValues, optionValue];
-        }
-        commitValues(nextValues);
-    };
-    const moveActive = (direction) => {
-        if (!normalizedOptions.length || loading)
-            return;
-        let nextIndex = activeIndex;
-        for (const _option of normalizedOptions) {
-            nextIndex =
-                (nextIndex + direction + normalizedOptions.length) %
-                    normalizedOptions.length;
-            if (!normalizedOptions[nextIndex]?.disabled) {
-                setActiveIndex(nextIndex);
-                if (selectionFollowsFocus)
-                    selectOption(nextIndex);
-                return;
-            }
-        }
-    };
-    useEffect(() => () => {
-        if (typeaheadTimerRef.current)
-            clearTimeout(typeaheadTimerRef.current);
-    }, []);
-    useEffect(() => {
-        const select = selectRef.current;
-        const form = select?.form;
-        if (!form || value !== undefined)
-            return;
-        const handleReset = () => {
-            setInternalValues(normalizeListBoxValues(defaultValue));
-            setActiveIndex(firstEnabledIndex);
-        };
-        form.addEventListener('reset', handleReset);
-        return () => {
-            form.removeEventListener('reset', handleReset);
-        };
-    }, [defaultValue, firstEnabledIndex, value]);
-    const handleNavigationKey = (key) => {
-        if (key === 'ArrowDown')
-            moveActive(1);
-        else if (key === 'ArrowUp')
-            moveActive(-1);
-        else if (key === 'Home') {
-            setActiveIndex(firstEnabledIndex);
-            if (selectionFollowsFocus)
-                selectOption(firstEnabledIndex);
-        }
-        else if (key === 'End') {
-            const lastEnabledIndex = findLastEnabledOptionIndex(normalizedOptions);
-            if (lastEnabledIndex >= 0) {
-                setActiveIndex(lastEnabledIndex);
-                if (selectionFollowsFocus)
-                    selectOption(lastEnabledIndex);
-            }
-        }
-        else if (key === 'Enter' || key === ' ')
-            selectOption(activeIndex);
-        else
-            return false;
-        return true;
-    };
-    const handleTypeaheadKey = (event) => {
-        if (event.key.length !== 1 ||
-            event.ctrlKey ||
-            event.metaKey ||
-            event.altKey)
-            return false;
-        typeaheadRef.current += event.key.toLowerCase();
-        if (typeaheadTimerRef.current)
-            clearTimeout(typeaheadTimerRef.current);
-        typeaheadTimerRef.current = setTimeout(() => {
-            typeaheadRef.current = '';
-        }, 700);
-        const nextIndex = normalizedOptions.findIndex(option => !option.disabled &&
-            option.label.toLowerCase().startsWith(typeaheadRef.current));
-        if (nextIndex >= 0) {
-            setActiveIndex(nextIndex);
-            if (selectionFollowsFocus)
-                selectOption(nextIndex);
-        }
-        return true;
-    };
-    const handleListKeyDown = (event) => {
-        if (handleNavigationKey(event.key) || handleTypeaheadKey(event))
-            event.preventDefault();
-    };
-    return (_jsxs("div", { className: composeClassName('ui-list-box', className), "data-multiple": multiple ? 'true' : undefined, "data-ui-list-box": true, children: [_jsx(ListBoxLabel, { controlId: controlId, label: label }), _jsx("select", { ...props, className: "ui-list-box__native", "data-ui-enhanced": true, "data-ui-list-box-native": true, disabled: disabled || loading, id: controlId, multiple: multiple, name: name, ref: node => {
-                    selectRef.current = node;
-                    setRefValue(ref, node);
-                }, required: required, value: getListBoxSelectValue(multiple, selectedValues), children: _jsx(ListBoxNativeOptions, { groups: optionGroups }) }), _jsx("div", { "aria-busy": optionalTrue(loading), "aria-disabled": optionalTrue(disabled || loading), "aria-multiselectable": optionalTrue(multiple), className: "ui-list-box__list", "data-ui-list-box-list": true, onKeyDown: handleListKeyDown, role: "listbox", tabIndex: disabled || loading ? undefined : 0, children: _jsx(ListBoxVisibleOptions, { activeIndex: activeIndex, controlId: controlId, emptyMessage: emptyMessage, groups: optionGroups, loading: loading, onSelect: index => {
-                        setActiveIndex(index);
-                        selectOption(index);
-                    }, selectedValues: selectedSet }) }), loading ?
-                (_jsx("p", { className: "ui-list-box__status", role: "status", children: loadingMessage })) :
-                null] }));
-};
-export const Sheet = ({ className, glass = false, ...props }) => (_jsx("dialog", { className: composeClassName('ui-sheet', glassSurfaceClass('ui-sheet', glass), className), "data-surface": resolveSurface(glass), "data-ui-sheet": true, ...props }));
-export const Sidebar = ({ className, glass = false, variant = 'default', ...props }) => (_jsx("aside", { className: composeClassName('ui-sidebar', variant === 'unstyled' && 'ui-sidebar--unstyled', glassSurfaceClass('ui-sidebar', glass), className), "data-slot": "sidebar", "data-surface": resolveSurface(glass), "data-variant": variant, ...props }));
-export const Slider = ({ className, ref, type = 'range', ...props }) => (_jsx("input", { className: composeClassName('ui-slider', className), ref: ref, type: type, ...props }));
-export const ToastViewport = ({ 'aria-atomic': ariaAtomic = 'false', 'aria-label': ariaLabel = 'Notifications', 'aria-live': ariaLive = 'polite', className, maxCount = 3, placement = 'bottom-right', ...props }) => (_jsx("div", { "aria-atomic": ariaAtomic, "aria-label": ariaLabel, "aria-live": ariaLive, className: composeClassName('ui-tvp', className), "data-placement": placement, "data-ui-toast-viewport": true, "data-ui-toast-max": maxCount, ...props }));
-export const Switch = ({ className, ref, role = 'switch', ...props }) => (_jsx("input", { className: composeClassName('ui-switch', className), ref: ref, role: role, type: "checkbox", ...props }));
-export const Table = ({ className, glass = false, layout = 'scroll', ...props }) => (_jsx("div", { className: composeClassName('ui-table-wrap', glassClass('ui-table-wrap', glass), layout === 'records' && 'ui-table-wrap--records', className), "data-slot": "table", ...props }));
-export const Tabs = ({ children, className, defaultValue, glass = false, onValueChange, orientation, value, ...props }) => {
-    const tabs = useTabs({ defaultValue, onValueChange, orientation, value });
-    return (_jsx(TabsContext.Provider, { value: tabs, children: _jsx("div", { ...tabs.rootProps, ...props, className: composeClassName('ui-tabs', glassClass('ui-tabs', glass), className), children: children }) }));
-};
-export const TabsList = ({ ...props }) => {
-    const tabs = requireContext(useContext(TabsContext), 'TabsList');
-    return _jsx("div", { ...tabs.listProps, ...props });
-};
-export const TabsTrigger = ({ onClick, onKeyDown, value, ...props }) => {
-    const tabs = requireContext(useContext(TabsContext), 'TabsTrigger');
-    return (_jsx("button", { ...tabs.getTriggerProps(value, props), onClick: composeHandlers(onClick, tabs.getTriggerProps(value).onClick), onKeyDown: composeHandlers(onKeyDown, tabs.getTriggerProps(value).onKeyDown), type: props.type ?? 'button' }));
-};
-export const TabsPanel = ({ value, ...props }) => {
-    const tabs = requireContext(useContext(TabsContext), 'TabsPanel');
-    return _jsx("div", { ...tabs.getPanelProps(value, props) });
-};
-const emptyCodeTabItems = [];
-export const CodeTabs = ({ ariaLabel = 'Code examples', className, copy = true, initialValue, items = emptyCodeTabItems, storageKey, theme = 'auto', wrap = true, ...props }) => {
-    const selectedValue = initialValue ?? items[0]?.value;
-    const [value, setValue] = useState(() => {
-        let storedValue = null;
-        if (storageKey && typeof localStorage !== 'undefined') {
-            try {
-                storedValue = localStorage.getItem(storageKey);
-            }
-            catch {
-                // Storage can be unavailable in privacy modes; tab selection should still work.
-            }
-        }
-        return storedValue && items.some(item => item.value === storedValue) ?
-            storedValue :
-            (selectedValue ?? '');
-    });
-    useEffect(() => {
-        const synchronize = (event) => {
-            const detail = event.detail;
-            if (storageKey &&
-                detail.storageKey === storageKey &&
-                detail.value &&
-                items.some(item => item.value === detail.value)) {
-                setValue(detail.value);
-            }
-        };
-        document.addEventListener('ui:tabs-change', synchronize);
-        return () => {
-            document.removeEventListener('ui:tabs-change', synchronize);
-        };
-    }, [items, storageKey]);
-    const selectValue = (nextValue) => {
-        setValue(nextValue);
-        if (storageKey) {
-            try {
-                localStorage.setItem(storageKey, nextValue);
-            }
-            catch {
-                // Storage can be unavailable in privacy modes; tab selection should still work.
-            }
-        }
-        document.dispatchEvent(new CustomEvent('ui:tabs-change', {
-            detail: { storageKey, value: nextValue }
-        }));
-    };
-    return (_jsxs(Tabs, { className: composeClassName('ui-code-tabs', className), "data-slot": "code-tabs", "data-storage-key": storageKey, onValueChange: selectValue, value: value, ...props, children: [_jsx(TabsList, { "aria-label": ariaLabel, className: "ui-code-tabs__list", children: items.map(item => (_jsx(TabsTrigger, { className: "ui-code-tabs__tab", value: item.value, children: item.label }, item.value))) }), items.map(item => (_jsx(TabsPanel, { className: "ui-code-tabs__panel", value: item.value, children: _jsx(Code, { code: item.code, copy: copy, ...(item.language === undefined ?
-                        {} :
-                        { language: item.language }), theme: theme, variant: "block", wrap: wrap }) }, item.value)))] }));
-};
-export const TagGroup = ({ className, role = 'list', ...props }) => (_jsx("div", { className: composeClassName('ui-tag-group', className), role: role, ...props }));
-export const ThemeBuilder = ({ className, glass = false, ...props }) => (_jsx("section", { className: composeClassName('ui-theme-builder', glassClass('ui-theme-builder', glass), className), "data-ui-theme-builder": true, ...props }));
-export const TimeField = ({ className, ref, type = 'time', ...props }) => (_jsx("input", { className: composeClassName('ui-input ui-time-field', className), ref: ref, type: type, ...props }));
-export const Toast = ({ 'aria-live': ariaLive, className, glass = false, role, variant = 'default', ...props }) => (_jsx("aside", { "aria-live": ariaLive ?? (variant === 'destructive' ? 'assertive' : 'polite'), className: composeClassName('ui-toast', variantClass('ui-toast', variant), glassSurfaceClass('ui-toast', glass), className), "data-surface": resolveSurface(glass), "data-ui-toast": true, "data-variant": variant, role: role ?? (variant === 'destructive' ? 'alert' : 'status'), ...props }));
-export const Toggle = ({ className, controlled = false, pressed = false, type = 'button', ...props }) => (_jsx("button", { "aria-pressed": pressed, className: composeClassName('ui-toggle', className), "data-ui-controlled": controlled || undefined, "data-ui-toggle": true, type: type, ...props }));
-export const ToggleGroup = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-toggle-group', className), "data-ui-toggle-group": true, ...props }));
-export const Tooltip = ({ children, className, defaultOpen, delay, onKeyDown, onMouseEnter, onMouseLeave, onOpenChange, open, ...props }) => {
-    const tooltip = useTooltip({ defaultOpen, delay, onOpenChange, open });
-    return (_jsx(TooltipContext.Provider, { value: tooltip, children: _jsx("span", { ...tooltip.rootProps, ...props, className: composeClassName('ui-tooltip', className), onKeyDown: composeHandlers(onKeyDown, tooltip.rootProps.onKeyDown), onMouseEnter: composeHandlers(onMouseEnter, tooltip.rootProps.onMouseEnter), onMouseLeave: composeHandlers(onMouseLeave, tooltip.rootProps.onMouseLeave), children: children }) }));
-};
-export const TooltipContent = ({ ...props }) => {
-    const tooltip = requireContext(useContext(TooltipContext), 'TooltipContent');
-    return _jsx("span", { ...tooltip.tooltipProps, ...props });
-};
-export const Tree = ({ className, glass = false, role = 'tree', ...props }) => (_jsx("div", { className: composeClassName('ui-tree', glassClass('ui-tree', glass), className), role: role, ...props }));
-export const TreeGrid = ({ className, glass = false, role = 'treegrid', ...props }) => (_jsx("div", { className: composeClassName('ui-tree-grid', glassClass('ui-tree-grid', glass), className), role: role, ...props }));
-export const VirtualList = ({ className, glass = false, itemSize, overscan, ...props }) => (_jsx("div", { className: composeClassName('ui-virtual-list', glassClass('ui-virtual-list', glass), className), "data-ui-item-size": itemSize, "data-ui-overscan": overscan, "data-ui-virtual-list": true, ...props }));
-export const BackToTop = ({ className, type = 'button', ...props }) => (_jsx("button", { className: composeClassName('ui-back-to-top', className), type: type, ...props }));
-export const Callout = ({ className, ...props }) => (_jsx("aside", { className: composeClassName('ui-callout', className), ...props }));
-export const Eyebrow = ({ className, ...props }) => (_jsx("p", { className: composeClassName('ui-eyebrow', className), ...props }));
-export const FloatingBadge = ({ className, ...props }) => (_jsx("span", { className: composeClassName('ui-floating-badge', className), ...props }));
-export const FormattedDate = ({ className, ...props }) => (_jsx("time", { className: composeClassName('ui-formatted-date', className), ...props }));
-export const Image = ({ as, className, fit = 'cover', invertOnDark = false, loading, radius = 'lg', ...props }) => {
-    const Component = as ?? 'img';
-    const resolvedLoading = loading ?? (as ? undefined : 'lazy');
-    return createElement(Component, {
-        ...props,
-        className: composeClassName('ui-image', invertOnDark && 'ui-image--invert-dark', `ui-image--fit-${fit}`, `ui-image--radius-${radius}`, className),
-        ...(resolvedLoading ? { loading: resolvedLoading } : {})
-    });
-};
-export const Link = ({ className, newTab = false, ref, rel, target, variant = 'default', ...props }) => (_jsx("a", { className: composeClassName('ui-link', variant === 'inherit' && 'ui-link--inherit', className), "data-slot": "link", "data-variant": variant, ref: ref, rel: newTab ?
-        [
-            ...new Set(`${rel ?? ''} noopener noreferrer`.trim().split(/\s+/))
-        ].join(' ') :
-        rel, target: newTab ? '_blank' : target, ...props }));
-export const Pill = ({ className, count, children, href, variant = 'neutral', ...props }) => {
-    const content = (_jsxs(_Fragment, { children: [children, count !== undefined && _jsx("span", { className: "ui-pill__count", children: count })] }));
-    return href ?
-        (_jsx("a", { className: composeClassName('ui-pill', variantClass('ui-pill', variant, 'neutral'), className), "data-variant": variant, href: href, ...props, children: content })) :
-        (_jsx("span", { className: composeClassName('ui-pill', variantClass('ui-pill', variant, 'neutral'), className), "data-variant": variant, ...props, children: content }));
-};
-export const Prose = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-prose', className), ...props }));
-export const SkipLink = ({ className, ...props }) => (_jsx("a", { className: composeClassName('ui-skip-link', className), ...props }));
-export const ThemeToggle = ({ className, type = 'button', ...props }) => (_jsxs("button", { className: composeClassName('ui-theme-toggle', className), "data-slot": "theme-toggle", type: type, ...props, children: [_jsx("span", { className: "ui-sr-only", children: "Toggle color theme" }), _jsx(Icon, { className: "ui-theme-toggle__sun", name: "sun" }), _jsx(Icon, { className: "ui-theme-toggle__moon", name: "moon" })] }));
-export const LanguageToggle = ({ children, className, defaultValue, labelTemplate = 'Change language from {current} to {next}', locales, onClick, onValueChange, storageKey, type = 'button', value, ...props }) => {
-    const language = useLanguageToggle({
-        defaultValue,
-        locales,
-        onValueChange,
-        storageKey,
-        value
-    });
-    const accessibleLabel = formatLumenLanguageLabel(labelTemplate, language.currentLocale, language.nextLocale);
-    return (_jsx("button", { "aria-label": accessibleLabel, className: composeClassName('ui-language-toggle', className), "data-ui-language-next-value": language.nextLocale.value, "data-ui-language-toggle": true, "data-ui-language-value": language.value, onClick: event => {
-            onClick?.(event);
-            if (event.defaultPrevented)
-                return;
-            language.selectNext();
-            event.currentTarget.dispatchEvent(new CustomEvent('ui:language-change', {
-                bubbles: true,
-                detail: {
-                    previousValue: language.currentLocale.value,
-                    value: language.nextLocale.value
-                }
-            }));
-        }, type: type, ...props, children: children ?? (_jsx("span", { lang: language.nextLocale.value, children: language.nextLocale.label })) }));
-};
-const particleDensityConfig = { high: 40, low: 15, medium: 25 };
-const particleTones = [
-    'var(--brand)',
-    'var(--accent)',
-    'var(--glow, var(--brand))'
-];
-const createParticles = (density) => Array.from({ length: particleDensityConfig[density] }, (_, index) => {
-    const size = Math.random() * 12 + 8;
-    const left = Math.random() * 100;
-    const top = Math.random() * 100;
-    return {
-        id: `${index}-${left}-${top}`,
-        style: {
-            '--ui-particle-delay': `${Math.random() * 8}s`,
-            '--ui-particle-duration': `${20 + Math.random() * 15}s`,
-            '--ui-particle-left': `${left}%`,
-            '--ui-particle-size': `${size}px`,
-            '--ui-particle-tone': particleTones[Math.floor(Math.random() * particleTones.length)],
-            '--ui-particle-top': `${top}%`
-        }
-    };
-});
-export const Particles = ({ children, className, density = 'medium', ...props }) => {
-    const [particles, setParticles] = useState([]);
-    useEffect(() => {
-        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
-            return;
-        // Particle geometry is client-only to keep SSR output stable while retaining per-load variation.
-        // eslint-disable-next-line @eslint-react/set-state-in-effect
-        setParticles(createParticles(density));
-    }, [density]);
-    return (_jsxs("div", { "aria-hidden": "true", className: composeClassName('ui-particles', className), "data-ui-particles": density, ...props, children: [children, particles.map(particle => (_jsx("span", { className: "ui-particles__particle", style: particle.style }, particle.id)))] }));
-};
-const parseMotionDuration = (value) => {
-    const parsedDuration = Number.parseFloat(value);
-    if (!Number.isFinite(parsedDuration))
-        return 300;
-    return value.endsWith('ms') ? parsedDuration : parsedDuration * 1000;
-};
-export const ScrollReveal = ({ animation = 'fade', className, delay = 0, duration = 'slow', once = true, style, threshold = 0.15, ...props }) => {
-    const rootRef = useRef(null);
-    useEffect(() => {
-        const root = rootRef.current;
-        if (!root)
-            return;
-        root.dataset.uiScrollRevealBound = 'true';
-        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches ||
-            typeof IntersectionObserver === 'undefined') {
-            root.classList.add('is-revealed');
-            return;
-        }
-        const observer = new IntersectionObserver(([entry]) => {
-            if (!entry)
-                return;
-            root.classList.toggle('is-revealed', entry.isIntersecting);
-            if (entry.isIntersecting && once)
-                observer.disconnect();
-        }, { threshold: Math.min(1, Math.max(0, threshold)) });
-        observer.observe(root);
-        return () => {
-            observer.disconnect();
-        };
-    }, [once, threshold]);
-    return (_jsx("div", { className: composeClassName('ui-scroll-reveal', `ui-scroll-reveal-${animation}`, `ui-motion-duration-${duration}`, className), "data-ui-reveal-once": String(once), "data-ui-reveal-threshold": Math.min(1, Math.max(0, threshold)), "data-ui-scroll-reveal": true, ref: rootRef, style: {
-            ...style,
-            '--ui-reveal-delay': `${Math.max(0, delay)}ms`
-        }, ...props }));
-};
-export const RevealGroup = ({ animation = 'slide-up', className, delay = 0, duration = 'slow', once = true, stagger = 80, style, threshold = 0.15, ...props }) => {
-    const rootRef = useRef(null);
-    useEffect(() => {
-        const root = rootRef.current;
-        if (!root)
-            return;
-        root.dataset.uiScrollRevealBound = 'true';
-        for (const [index, child] of [...root.children].entries()) {
-            if (child instanceof HTMLElement) {
-                child.style.setProperty('--ui-reveal-index', String(index));
-            }
-        }
-        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches ||
-            typeof IntersectionObserver === 'undefined') {
-            root.classList.add('is-revealed');
-            return;
-        }
-        const observer = new IntersectionObserver(([entry]) => {
-            if (!entry)
-                return;
-            root.classList.toggle('is-revealed', entry.isIntersecting);
-            if (entry.isIntersecting && once)
-                observer.disconnect();
-        }, { threshold: Math.min(1, Math.max(0, threshold)) });
-        observer.observe(root);
-        return () => {
-            observer.disconnect();
-        };
-    }, [once, threshold]);
-    return (_jsx("div", { className: composeClassName('ui-reveal-group', `ui-reveal-group-${animation}`, `ui-motion-duration-${duration}`, className), "data-ui-reveal-group": true, "data-ui-reveal-once": String(once), "data-ui-reveal-threshold": Math.min(1, Math.max(0, threshold)), ref: rootRef, style: {
-            ...style,
-            '--ui-reveal-delay': `${Math.max(0, delay)}ms`,
-            '--ui-reveal-stagger': `${Math.max(0, stagger)}ms`
-        }, ...props }));
-};
-export const AnimatedNumber = ({ className, decimals = 0, duration = 'slow', from = 0, locale, prefix = '', suffix = '', value, ...props }) => {
-    const outputRef = useRef(null);
-    const safeDecimals = Math.max(0, Math.min(20, Math.floor(decimals)));
-    const formatter = useMemo(() => new Intl.NumberFormat(locale, {
-        maximumFractionDigits: safeDecimals,
-        minimumFractionDigits: safeDecimals
-    }), [locale, safeDecimals]);
-    const formattedValue = `${prefix}${formatter.format(value)}${suffix}`;
-    useEffect(() => {
-        const output = outputRef.current;
-        if (!output)
-            return;
-        const format = (current) => `${prefix}${formatter.format(current)}${suffix}`;
-        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches ||
-            typeof IntersectionObserver === 'undefined') {
-            output.textContent = format(value);
-            return;
-        }
-        output.textContent = format(from);
-        const root = output.parentElement;
-        if (!root)
-            return;
-        const observer = new IntersectionObserver(entries => {
-            if (!entries.some(entry => entry.isIntersecting))
-                return;
-            observer.disconnect();
-            const durationValue = getComputedStyle(root)
-                .getPropertyValue('--ui-motion-duration')
-                .trim();
-            const durationMs = parseMotionDuration(durationValue);
-            const startedAt = performance.now();
-            const update = (now) => {
-                const progress = Math.min(1, (now - startedAt) / Math.max(1, durationMs));
-                const eased = 1 - Math.pow(1 - progress, 3);
-                output.textContent = format(from + (value - from) * eased);
-                if (progress < 1) {
-                    requestAnimationFrame(update);
-                }
-                else {
-                    output.textContent = format(value);
-                }
-            };
-            requestAnimationFrame(update);
-        }, { threshold: 0.15 });
-        observer.observe(root);
-        return () => {
-            observer.disconnect();
-        };
-    }, [formatter, from, prefix, suffix, value]);
-    return (_jsxs("span", { className: composeClassName('ui-animated-number', `ui-motion-duration-${duration}`, className), "data-ui-animated-number": true, ...props, children: [_jsx("span", { "aria-hidden": "true", "data-ui-animated-number-output": true, ref: outputRef, children: formattedValue }), _jsx("span", { className: "ui-sr-only", children: formattedValue })] }));
-};
-export const Stat = ({ as, className, label, value, variant = 'default', children, ...props }) => (_jsxs(Primitive, { ...(as ? { as } : {}), className: composeClassName(variant !== 'default' && `ui-stat--${variant}`, className), "data-slot": "stat", "data-variant": variant, ...props, uiClassName: "ui-stat", children: [label && (_jsx("div", { className: "ui-stat-label", "data-slot": "stat-label", children: label })), value && (_jsx("div", { className: "ui-stat-value", "data-slot": "stat-value", children: value })), children] }));
-export const StatLabel = ({ as, ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), "data-slot": "stat-label", ...props, uiClassName: "ui-stat-label" }));
-export const StatValue = ({ as, ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), "data-slot": "stat-value", ...props, uiClassName: "ui-stat-value" }));
-export const StatDescription = ({ as, ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), "data-slot": "stat-description", ...props, uiClassName: "ui-stat-description" }));
-export const StatIcon = ({ className, ...props }) => (_jsx("span", { className: composeClassName('ui-stat-icon', className), "data-slot": "stat-icon", ...props }));
-export const StatTrend = ({ className, tone = 'neutral', ...props }) => (_jsx("span", { className: composeClassName('ui-stat-trend', `ui-stat-trend--${tone}`, className), "data-slot": "stat-trend", "data-tone": tone, ...props }));
-export const Meter = ({ className, ...props }) => (_jsx("meter", { className: composeClassName('ui-meter', className), ...props }));
-export const Note = ({ className, label, borderPosition = 'left', children, ...props }) => (_jsxs("div", { className: composeClassName('ui-note', `ui-note--border-${borderPosition}`, className), ...props, children: [label && _jsx("p", { className: "ui-note__label", children: label }), _jsx("div", { className: "ui-note__content", children: children })] }));
-export const Rating = ({ className, value = 0, max = 5, readonly = false, ...props }) => {
-    const stars = Array.from({ length: max }, (_, i) => i + 1);
-    return (_jsx("div", { className: composeClassName('ui-rating', readonly && 'ui-rating--readonly', className), "data-ui-rating": true, "data-value": value, "data-max": max, "data-readonly": readonly ? 'true' : 'false', ...props, children: stars.map(star => (_jsx("button", { type: "button", className: "ui-rating__star", "data-active": star <= value ? 'true' : 'false', disabled: readonly, "aria-label": `Rate ${star} out of ${max}`, children: _jsx("svg", { viewBox: "0 0 24 24", width: "24", height: "24", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", className: "ui-icon", children: _jsx("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) }) }, star))) }));
-};
-export const Timeline = ({ className, ...props }) => (_jsx("ol", { className: composeClassName('ui-timeline', className), ...props }));
-export const TimelineItem = ({ className, children, dot, ...props }) => (_jsxs("li", { className: composeClassName('ui-timeline-item', className), ...props, children: [_jsx("div", { className: "ui-timeline-item__tail" }), _jsx("div", { className: "ui-timeline-item__dot", children: dot }), _jsx("div", { className: "ui-timeline-item__content", children: children })] }));
-export const AnimatedLogo = ({ animation = 'reveal', className, ...props }) => (_jsx("span", { className: composeClassName('ui-animated-logo', className), "data-animation": animation, "data-ui-animated-logo": true, ...props }));
-export const Graphic = ({ children, className, label, size = 'md', tone = 'brand', variant = 'orbit', ...props }) => (_jsx("div", { "aria-hidden": label ? undefined : true, "aria-label": label, className: composeClassName('ui-graphic', `ui-graphic--${variant}`, `ui-graphic--${tone}`, `ui-graphic--${size}`, className), role: label ? 'img' : undefined, ...props, children: _jsx("div", { className: "ui-graphic__content", children: children }) }));
-export const Backdrop = ({ children, className, intensity = 'medium', tone = 'brand', variant = 'aurora', ...props }) => (_jsx("div", { className: composeClassName('ui-backdrop', `ui-backdrop--${variant}`, `ui-backdrop--${tone}`, `ui-backdrop--${intensity}`, className), ...props, children: _jsx("div", { className: "ui-backdrop__content", children: children }) }));
-export const AnimatedPortrait = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-animated-portrait relative isolate w-full animate-reveal-lcp motion-reduce:animate-none', className), ...props }));
-const getButtonLinkVariantClass = (variant) => {
-    if (variant === 'unstyled')
-        return 'ui-button-link--unstyled';
-    if (variant === 'inline')
-        return 'ui-button ui-button--inline';
-    return `ui-button ui-button--${variant} min-h-11 rounded-full border`;
-};
-export const ButtonLink = ({ asChild = false, children, className, ref, shape = 'default', variant = 'primary', ...props }) => {
-    const variantClass = getButtonLinkVariantClass(variant);
-    const shapeClass = shape === 'icon' && variant !== 'inline' ?
-        'ui-button-link--icon' :
-        undefined;
-    const buttonLinkClassName = composeClassName('ui-button-link', variant !== 'unstyled' &&
-        'group inline-flex cursor-pointer items-center justify-center gap-2 text-sm font-semibold tracking-[0.01em]', variantClass, shapeClass, className);
-    if (asChild) {
-        const child = Children.only(children);
-        if (!isValidElement(child)) {
-            throw new Error('ButtonLink with asChild requires exactly one valid React element child.');
-        }
-        const ChildComponent = child.type;
-        return (_jsx(ChildComponent, { ...child.props, ...props, className: composeClassName(buttonLinkClassName, child.props.className), "data-slot": "button-link", ref: ref, children: child.props.children }));
-    }
-    return (_jsx("a", { className: buttonLinkClassName, "data-slot": "button-link", ref: ref, ...props, children: children }));
-};
-export const CoverImage = ({ className, hover = false, showBottomGradient = false, children, ...props }) => (_jsxs("div", { className: composeClassName('ui-cover-image relative overflow-hidden bg-surface-muted', hover && 'ui-cover-image--hover', className), ...props, children: [children, showBottomGradient && (_jsx("div", { "aria-hidden": "true", className: "ui-cover-image__bottom-gradient" }))] }));
-export const GradientDivider = ({ className, ...props }) => (_jsx("div", { "aria-hidden": "true", className: composeClassName('ui-gradient-divider pointer-events-none flex justify-center', className), ...props, children: _jsx("div", { className: "\n        via-brand/40 h-px w-full max-w-5xl bg-linear-to-r from-transparent\n        to-transparent\n      " }) }));
-const emptySteps = [];
-const normalizeStep = (step) => typeof step === 'string' ? { description: undefined, title: step } : step;
-export const Stepper = ({ children, className, currentStep = 0, orientation = 'horizontal', steps = emptySteps, ...props }) => (_jsxs("ol", { className: composeClassName('ui-stepper', orientation === 'vertical' && 'ui-stepper--vertical', className), "data-orientation": orientation, ...props, children: [steps.map(normalizeStep).map((step, index) => {
-            let state = 'upcoming';
-            if (index < currentStep) {
-                state = 'complete';
-            }
-            else if (index === currentStep) {
-                state = 'current';
-            }
-            return (_jsxs("li", { "aria-current": state === 'current' ? 'step' : undefined, className: "ui-stepper__step", "data-state": state, children: [_jsx("span", { className: "ui-stepper__marker", children: index + 1 }), _jsxs("span", { className: "ui-stepper__content", children: [_jsx("span", { className: "ui-stepper__title", children: step.title }), step.description && (_jsx("span", { className: "ui-stepper__description", children: step.description }))] })] }, step.title));
-        }), children] }));
-export const FileUpload = ({ children, className, hint, id, inputClassName, label = 'Choose a file or drag it here', onChange, ref, ...props }) => {
-    const generatedId = useId();
-    const inputId = id ?? `ui-file-upload-${generatedId.replaceAll(':', '')}`;
-    const [selectedFiles, setSelectedFiles] = useState([]);
-    const selectedFileText = selectedFiles.length > 1 ?
-        `${selectedFiles.length} files selected` :
-        (selectedFiles[0] ?? '');
-    return (_jsxs("label", { className: composeClassName('ui-file-upload', className), "data-state": selectedFiles.length > 0 ? 'selected' : 'idle', "data-ui-file-upload": true, htmlFor: inputId, children: [_jsx("input", { className: composeClassName('ui-file-upload__input', inputClassName), "data-ui-file-upload-input": true, id: inputId, onChange: event => {
-                    setSelectedFiles([...(event.currentTarget.files ?? [])].map(file => file.name));
-                    onChange?.(event);
-                }, ref: ref, type: "file", ...props }), _jsxs("svg", { "aria-hidden": "true", className: "ui-file-upload__icon", fill: "none", focusable: "false", viewBox: "0 0 24 24", children: [_jsx("path", { d: "M12 16V4m0 0L8 8m4-4 4 4" }), _jsx("path", { d: "M5 14v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4" })] }), _jsx("span", { className: "ui-file-upload__prompt", children: children ?? label }), hint && _jsx("span", { className: "ui-file-upload__hint", children: hint }), _jsx("span", { "aria-live": "polite", className: "ui-file-upload__files", "data-ui-file-upload-files": true, children: selectedFileText })] }));
-};
-const emptyTourSteps = [];
-export const Tour = ({ children, className, closeLabel = 'Done', hidden = true, nextLabel = 'Next', steps = emptyTourSteps, ...props }) => (_jsxs("div", { className: composeClassName('ui-tour', className), "data-ui-tour": true, hidden: hidden, ...props, children: [_jsx("div", { "aria-hidden": "true", className: "ui-tour__backdrop", "data-ui-tour-backdrop": true }), _jsxs("div", { className: "ui-tour__popover", "data-ui-tour-popover": true, role: "dialog", children: [steps.map((step, index) => (_jsxs("div", { className: "ui-tour__step", "data-target": step.target, "data-ui-tour-step": true, hidden: index !== 0, children: [step.title && _jsx("p", { className: "ui-tour__title", children: step.title }), _jsx("p", { className: "ui-tour__content", children: step.content }), _jsxs("div", { className: "ui-tour__actions", children: [_jsx("button", { className: "ui-button ui-button--ghost ui-button--sm", "data-ui-tour-close": true, type: "button", children: closeLabel }), index < steps.length - 1 && (_jsx("button", { className: "ui-button ui-button--default ui-button--sm", "data-ui-tour-next": true, type: "button", children: nextLabel }))] })] }, step.target))), children] })] }));
-const emptyAnchorLinks = [];
-const createAnchorRef = () => {
-    let cleanup;
-    return (root) => {
-        cleanup?.();
-        cleanup = undefined;
-        if (!root)
-            return;
-        const links = [...root.querySelectorAll('a[href^="#"]')];
-        const targets = links.flatMap(link => {
-            const id = decodeURIComponent(link.getAttribute('href')?.slice(1) ?? '');
-            const target = id ? document.getElementById(id) : null;
-            return target ? [{ link, target }] : [];
-        });
-        if (!targets.length)
-            return;
-        const abortController = new AbortController();
-        let frame = 0;
-        const setActive = (active) => {
-            for (const link of links) {
-                const isActive = link === active;
-                link.dataset.active = String(isActive);
-                if (isActive) {
-                    link.setAttribute('aria-current', 'location');
-                }
-                else {
-                    link.removeAttribute('aria-current');
-                }
-            }
-        };
-        const update = () => {
-            frame = 0;
-            const scrollingElement = document.scrollingElement ?? document.documentElement;
-            const atEnd = scrollingElement.scrollTop + scrollingElement.clientHeight >=
-                scrollingElement.scrollHeight - 1;
-            const offset = Number(root.dataset.uiAnchorOffset) || 0;
-            let active = targets[0]?.link;
-            if (atEnd) {
-                active = targets.at(-1)?.link;
-            }
-            else {
-                for (const item of targets) {
-                    if (item.target.getBoundingClientRect().top > offset)
-                        break;
-                    active = item.link;
-                }
-            }
-            if (active)
-                setActive(active);
-        };
-        const requestUpdate = () => {
-            if (frame)
-                return;
-            frame = requestAnimationFrame(update);
-        };
-        for (const { link } of targets) {
-            link.addEventListener('click', () => {
-                setActive(link);
-            }, {
-                signal: abortController.signal
-            });
-        }
-        window.addEventListener('resize', requestUpdate, {
-            passive: true,
-            signal: abortController.signal
-        });
-        window.addEventListener('scroll', requestUpdate, {
-            passive: true,
-            signal: abortController.signal
-        });
-        update();
-        cleanup = () => {
-            abortController.abort();
-            if (frame)
-                cancelAnimationFrame(frame);
-        };
-    };
-};
-export const Anchor = ({ 'aria-label': ariaLabel = 'On this page', activationOffset = 96, children, className, items = emptyAnchorLinks, ...props }) => {
-    const anchorRef = createAnchorRef();
-    return (_jsxs("nav", { "aria-label": ariaLabel, className: composeClassName('ui-anchor', className), "data-ui-anchor": true, "data-ui-anchor-offset": Math.max(0, activationOffset), ref: anchorRef, ...props, children: [items.length > 0 && (_jsx("ol", { children: items.map((item, index) => (_jsx("li", { children: _jsxs("a", { "aria-current": index === 0 ? 'location' : undefined, "data-active": index === 0 ? 'true' : 'false', "data-depth": item.depth, href: item.href, children: [item.index !== undefined && (_jsx("span", { className: "ui-anchor__index", children: item.index })), _jsxs("span", { className: "ui-anchor__content", children: [_jsx("span", { className: "ui-anchor__label", children: item.label }), item.description && (_jsx("span", { className: "ui-anchor__description", children: item.description }))] })] }) }, item.href))) })), children] }));
-};
-export const Segmented = ({ children, className, defaultValue, name = 'segmented', onValueChange, options = emptyOptions, size = 'default', value = defaultValue, ...props }) => (_jsxs("div", { className: composeClassName('ui-segmented', size === 'sm' && 'ui-segmented--sm', size === 'lg' && 'ui-segmented--lg', className), role: "group", ...props, children: [options.map(normalizeOption).map(option => (_jsxs("label", { className: "ui-segmented__option", children: [_jsx("input", { defaultChecked: value === option.value, className: "ui-segmented__input", disabled: option.disabled, name: name, type: "radio", value: option.value, onChange: () => onValueChange?.(option.value) }), _jsx("span", { className: "ui-segmented__label", children: option.label })] }, option.value))), children] }));
-export const Toolbar = ({ 'aria-label': ariaLabel = 'Toolbar', className, orientation = 'horizontal', ...props }) => (_jsx("div", { "aria-label": ariaLabel, "aria-orientation": orientation, className: composeClassName('ui-toolbar', orientation === 'vertical' && 'ui-toolbar--vertical', className), "data-orientation": orientation, "data-ui-toolbar": true, role: "toolbar", ...props }));
-const emptyDescriptionsItems = [];
-export const Descriptions = ({ children, className, columns = 1, items = emptyDescriptionsItems, style, ...props }) => (_jsxs("dl", { className: composeClassName('ui-descriptions', className), "data-columns": columns, style: { ['--ui-descriptions-columns']: columns, ...style }, ...props, children: [items.map((item, index) => (_jsxs("div", { className: "ui-descriptions__item", children: [_jsx("dt", { className: "ui-descriptions__term", children: item.label }), _jsx("dd", { className: "ui-descriptions__detail", children: item.value })] }, index))), children] }));
-export const Popconfirm = ({ cancelLabel = 'Cancel', children, className, confirmLabel = 'Confirm', title = 'Are you sure?', ...props }) => (_jsxs("div", { className: composeClassName('ui-popover ui-popconfirm', className), "data-surface": "default", "data-ui-popconfirm": true, "data-ui-popover": true, ...props, children: [_jsx("span", { "aria-expanded": "false", "aria-haspopup": "dialog", className: "ui-popconfirm__trigger", "data-ui-trigger": true, children: children }), _jsxs("div", { className: "ui-popover__panel ui-popconfirm__panel", "data-ui-panel": true, hidden: true, role: "dialog", children: [_jsx("p", { className: "ui-popconfirm__message", children: title }), _jsxs("div", { className: "ui-popconfirm__actions", children: [_jsx("button", { className: "ui-button ui-button--ghost ui-button--sm", "data-ui-popconfirm-cancel": true, type: "button", children: cancelLabel }), _jsx("button", { className: "ui-button ui-button--destructive ui-button--sm", "data-ui-popconfirm-confirm": true, type: "button", children: confirmLabel })] })] })] }));
-const emptyTransferItems = [];
-const renderTransferItems = (items) => items.map(item => (_jsx("li", { className: "ui-transfer__item", children: _jsxs("label", { className: "ui-transfer__option", children: [_jsx("input", { className: "ui-checkbox", "data-ui-transfer-item": true, type: "checkbox", value: item.key }), _jsx("span", { children: item.label })] }) }, item.key)));
-export const Transfer = ({ className, items = emptyTransferItems, name, sourceTitle = 'Available', targetItems = emptyTransferItems, targetTitle = 'Selected', ...props }) => (_jsxs("div", { className: composeClassName('ui-transfer', className), "data-ui-transfer": true, "data-ui-transfer-name": name, ...props, children: [_jsxs("div", { className: "ui-transfer__panel", children: [_jsx("p", { className: "ui-transfer__title", children: sourceTitle }), _jsx("ul", { className: "ui-transfer__list", "data-side": "source", "data-ui-transfer-list": true, children: renderTransferItems(items) })] }), _jsxs("div", { className: "ui-transfer__controls", children: [_jsx("button", { "aria-label": `Move to ${targetTitle}`, className: "ui-button ui-button--outline ui-button--icon", "data-ui-transfer-move": "target", type: "button", children: _jsx(Icon, { name: "chevron-right" }) }), _jsx("button", { "aria-label": `Move to ${sourceTitle}`, className: "ui-button ui-button--outline ui-button--icon", "data-ui-transfer-move": "source", type: "button", children: _jsx(Icon, { name: "chevron-left" }) })] }), _jsxs("div", { className: "ui-transfer__panel", children: [_jsx("p", { className: "ui-transfer__title", children: targetTitle }), _jsx("ul", { className: "ui-transfer__list", "data-side": "target", "data-ui-transfer-list": true, children: renderTransferItems(targetItems) })] })] }));
-const buildCascaderColumns = (options, idPrefix) => {
-    const columns = [];
-    let count = 0;
-    const build = (items, root) => {
-        count += 1;
-        const id = `${idPrefix}-column-${count}`;
-        const rendered = items.map(item => ({
-            label: item.label,
-            value: item.value
-        }));
-        columns.push({ id, options: rendered, root });
-        for (const [index, item] of items.entries()) {
-            const renderedOption = rendered[index];
-            if (item.children && item.children.length > 0 && renderedOption) {
-                renderedOption.nextId = build(item.children, false);
-            }
-        }
-        return id;
-    };
-    if (options.length > 0)
-        build(options, true);
-    return columns;
-};
-const emptyCascaderOptions = [];
-export const Cascader = ({ children, className, id, name, options = emptyCascaderOptions, placeholder = 'Select…', ...props }) => {
-    const generatedId = useId().replaceAll(':', '');
-    const cascaderId = id ?? `ui-cascader-${generatedId}`;
-    const panelId = `${cascaderId}-panel`;
-    const columns = buildCascaderColumns(options, cascaderId);
-    return (_jsxs("div", { className: composeClassName('ui-cascader', className), "data-surface": "default", "data-ui-cascader": true, "data-ui-popover": true, id: id, ...props, children: [_jsx("button", { "aria-controls": panelId, "aria-expanded": "false", "aria-haspopup": "listbox", className: "ui-select ui-select__trigger ui-cascader__trigger", "data-ui-trigger": true, role: "combobox", type: "button", children: _jsx("span", { "data-ui-cascader-placeholder": placeholder, "data-ui-cascader-value": true, children: placeholder }) }), _jsxs("div", { className: "ui-cascader__panel", "data-ui-panel": true, hidden: true, id: panelId, children: [columns.map(column => (_jsx("ol", { "aria-label": column.root ? 'Options' : 'Sub-options', className: "ui-cascader__column", hidden: !column.root, id: column.id, role: "listbox", children: column.options.map(option => (_jsx("li", { role: "presentation", children: _jsxs("button", { "aria-selected": "false", className: "ui-cascader__option", "data-ui-cascader-next": option.nextId ? `#${option.nextId}` : undefined, "data-ui-cascader-option": true, "data-value": option.value, role: "option", type: "button", children: [_jsx("span", { children: option.label }), option.nextId && _jsx("span", { "aria-hidden": "true", children: "\u203A" })] }) }, option.value))) }, column.id))), children] }), name && _jsx("input", { "data-ui-cascader-input": true, name: name, type: "hidden" })] }));
-};
-const flattenTreeSelect = (nodes, depth = 0, acc = []) => {
-    for (const node of nodes) {
-        acc.push({ depth, label: node.label, value: node.value });
-        if (node.children && node.children.length > 0)
-            flattenTreeSelect(node.children, depth + 1, acc);
-    }
-    return acc;
-};
-const emptyTreeSelectNodes = [];
-export const TreeSelect = ({ children, className, name, placeholder = 'Select…', treeData = emptyTreeSelectNodes, ...props }) => (_jsxs("div", { className: composeClassName('ui-tree-select', className), "data-surface": "default", "data-ui-popover": true, "data-ui-tree-select": true, ...props, children: [_jsx("button", { "aria-expanded": "false", "aria-haspopup": "tree", className: "ui-select ui-select__trigger ui-tree-select__trigger", "data-ui-trigger": true, type: "button", children: _jsx("span", { "data-ui-tree-select-placeholder": placeholder, "data-ui-tree-select-value": true, children: placeholder }) }), _jsxs("div", { className: "ui-tree-select__panel", "data-ui-panel": true, hidden: true, children: [_jsx("div", { className: "ui-tree-select__tree", role: "tree", children: flattenTreeSelect(treeData).map(row => (_jsx("button", { className: "ui-tree-select__option", "data-value": row.value, role: "treeitem", style: { ['--ui-tree-depth']: row.depth }, type: "button", children: row.label }, row.value))) }), children] }), name && _jsx("input", { "data-ui-tree-select-input": true, name: name, type: "hidden" })] }));
-export const Mentions = ({ className, defaultValue = '', label = 'Mentions', name, onValueChange, options = emptyOptions, placeholder, trigger = '@', value, ...props }) => {
-    const generatedId = useId();
-    const inputRef = useRef(null);
-    const [activeIndex, setActiveIndex] = useState(-1);
-    const [internalValue, setInternalValue] = useState(defaultValue);
-    const [query, setQuery] = useState(null);
-    const currentValue = value ?? internalValue;
-    const listId = `ui-mentions-${generatedId}-list`;
-    const escapedTrigger = trigger.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    const normalizedOptions = options.map(normalizeOption);
-    const visibleOptions = query === null ?
-        [] :
-        normalizedOptions.filter(option => option.value.toLowerCase().startsWith(query));
-    const expanded = visibleOptions.length > 0;
-    const resolvedActiveIndex = expanded ?
-        Math.min(Math.max(activeIndex, 0), visibleOptions.length - 1) :
-        -1;
-    const activeOption = visibleOptions[resolvedActiveIndex];
-    const setNextValue = (nextValue) => {
-        if (value === undefined)
-            setInternalValue(nextValue);
-        onValueChange?.(nextValue);
-    };
-    const closeList = () => {
-        setQuery(null);
-        setActiveIndex(-1);
-    };
-    const insertMention = (mention) => {
-        const caret = inputRef.current?.selectionStart ?? currentValue.length;
-        const before = currentValue
-            .slice(0, caret)
-            .replace(new RegExp(`${escapedTrigger}\\w*$`), `${trigger}${mention} `);
-        const nextValue = before + currentValue.slice(caret);
-        setNextValue(nextValue);
-        closeList();
-        requestAnimationFrame(() => {
-            inputRef.current?.focus();
-            inputRef.current?.setSelectionRange(before.length, before.length);
-        });
-    };
-    const handleKeyDown = (event) => {
-        if (event.key === 'Escape' && expanded) {
-            event.preventDefault();
-            closeList();
-            return;
-        }
-        if (expanded && (event.key === 'ArrowDown' || event.key === 'ArrowUp' ||
-            event.key === 'End' || event.key === 'Home')) {
-            event.preventDefault();
-            setActiveIndex(current => {
-                if (event.key === 'Home')
-                    return 0;
-                if (event.key === 'End')
-                    return visibleOptions.length - 1;
-                if (event.key === 'ArrowDown')
-                    return (current + 1) % visibleOptions.length;
-                return (current - 1 + visibleOptions.length) % visibleOptions.length;
-            });
-            return;
-        }
-        if (event.key === 'Enter' && activeOption) {
-            event.preventDefault();
-            insertMention(activeOption.value);
-        }
-    };
-    return (_jsxs("div", { className: composeClassName('ui-mentions', className), "data-ui-mentions": true, "data-ui-mentions-trigger": trigger, ...props, children: [_jsx("textarea", { "aria-activedescendant": activeOption ? `${listId}-option-${resolvedActiveIndex}` : undefined, "aria-autocomplete": "list", "aria-controls": listId, "aria-expanded": expanded, "aria-label": label, className: "ui-textarea ui-mentions__input", "data-ui-mentions-input": true, name: name, onBlur: closeList, onChange: event => {
-                    const nextValue = event.currentTarget.value;
-                    const match = new RegExp(`${escapedTrigger}(\\w*)$`)
-                        .exec(nextValue.slice(0, event.currentTarget.selectionStart));
-                    const nextQuery = match ? (match[1] ?? '').toLowerCase() : null;
-                    setNextValue(nextValue);
-                    setQuery(nextQuery);
-                    setActiveIndex(nextQuery === null ? -1 : 0);
-                }, onKeyDown: handleKeyDown, placeholder: placeholder, ref: inputRef, role: "combobox", rows: 3, value: currentValue }), _jsx("ul", { className: "ui-mentions__list", "data-ui-mentions-list": true, hidden: !expanded, id: listId, role: "listbox", children: visibleOptions.map((option, index) => (_jsx("li", { children: _jsx("button", { "aria-selected": index === resolvedActiveIndex, className: "ui-mentions__option", "data-ui-mentions-option": true, "data-value": option.value, id: `${listId}-option-${index}`, onClick: () => {
-                            insertMention(option.value);
-                        }, onMouseDown: event => {
-                            event.preventDefault();
-                        }, role: "option", type: "button", children: option.label }) }, option.value))) })] }));
-};
-export const QRCode = ({ children, className, size = 160, src, style, value, ...props }) => {
-    const qrSvg = !src && value ? renderSVG(value) : null;
-    const qrSrc = qrSvg ?
-        `data:image/svg+xml;utf8,${encodeURIComponent(qrSvg)}` :
-        src;
-    return (_jsxs("figure", { className: composeClassName('ui-qr-code', className), "data-ui-qr-code": true, style: { ['--ui-qr-code-size']: `${size}px`, ...style }, ...props, children: [_jsx("div", { className: "ui-qr-code__frame", children: qrSrc ?
-                    (_jsx("img", { alt: value ? `QR code for ${value}` : 'QR code', className: "ui-qr-code__image", height: size, src: qrSrc, width: size })) :
-                    (children) }), value && _jsx("figcaption", { className: "ui-qr-code__value", children: value })] }));
-};
-export const Watermark = ({ children, className, content, gap = 120, rotate = -22, style, text = 'Confidential', ...props }) => {
-    const watermarkText = content ?? text;
-    const tileSize = Math.max(1, gap);
-    const watermarkXmlEntities = {
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        '"': '&quot;',
-        '\'': '&apos;'
-    };
-    const escapedWatermarkText = watermarkText.replaceAll(/[&<>"']/g, character => watermarkXmlEntities[character] ?? character);
-    const watermarkSvg = [
-        '<svg xmlns="http://www.w3.org/2000/svg"',
-        ` width="${tileSize}" height="${tileSize}" viewBox="0 0 ${tileSize} ${tileSize}">`,
-        `<text x="${tileSize / 2}" y="${tileSize / 2}" dominant-baseline="middle" text-anchor="middle"`,
-        ` transform="rotate(${rotate} ${tileSize / 2} ${tileSize / 2})"`,
-        ' fill="black" font-family="Montserrat, Avenir Next, Segoe UI, sans-serif" font-size="16" font-weight="500" letter-spacing="1.6">',
-        `${escapedWatermarkText}</text></svg>`
-    ].join('');
-    const watermarkImage = `url("data:image/svg+xml,${encodeURIComponent(watermarkSvg)}")`;
-    return (_jsxs("div", { className: composeClassName('ui-watermark', className), "data-ui-watermark": true, style: {
-            ['--ui-watermark-gap']: `${tileSize}px`,
-            ['--ui-watermark-image']: watermarkImage,
-            ...style
-        }, ...props, children: [children, _jsx("div", { "aria-hidden": "true", className: "ui-watermark__overlay", "data-text": watermarkText })] }));
-};
-export const Affix = ({ className, offset = 0, offsetBottom, offsetTop, position: positionProp, style, ...props }) => {
-    const position = positionProp ?? (offsetBottom === undefined ? 'top' : 'bottom');
-    const resolvedOffset = offsetBottom ?? offsetTop ?? offset;
-    return (_jsx("div", { className: composeClassName('ui-affix', position === 'bottom' && 'ui-affix--bottom', className), "data-position": position, style: {
-            ['--ui-affix-offset']: `${resolvedOffset}px`,
-            ...style
-        }, ...props }));
-};
-const emptySpeedDialActions = [];
-const speedDialNavigationKeys = [
-    'ArrowDown',
-    'ArrowLeft',
-    'ArrowRight',
-    'ArrowUp',
-    'End',
-    'Home'
-];
-const getSpeedDialNavigationIndex = (key, currentIndex, itemCount) => {
-    if (key === 'Home')
-        return 0;
-    if (key === 'End')
-        return itemCount - 1;
-    if (key === 'ArrowDown' || key === 'ArrowRight')
-        return (currentIndex + 1) % itemCount;
-    return (currentIndex - 1 + itemCount) % itemCount;
-};
-export const SpeedDial = ({ actions = emptySpeedDialActions, children, className, defaultOpen = false, direction = 'up', label = 'Actions', onBlur, ...props }) => {
-    const [isOpen, setIsOpen] = useState(defaultOpen);
-    const menuRef = useRef(null);
-    const triggerRef = useRef(null);
-    const close = (restoreFocus = false) => {
-        setIsOpen(false);
-        if (restoreFocus)
-            triggerRef.current?.focus();
-    };
-    const focusAction = (position) => {
-        setIsOpen(true);
-        requestAnimationFrame(() => {
-            const items = menuRef.current?.querySelectorAll('[role="menuitem"], button:not([disabled]), a[href]');
-            const target = position === 'first' ? items?.[0] : items?.[items.length - 1];
-            target?.focus();
-        });
-    };
-    return (_jsxs("div", { className: composeClassName('ui-speed-dial', `ui-speed-dial--${direction}`, className), ...props, "data-direction": direction, "data-state": isOpen ? 'open' : 'closed', "data-ui-bound": "true", "data-ui-speed-dial": true, onBlur: event => {
-            onBlur?.(event);
-            if (!event.currentTarget.contains(event.relatedTarget))
-                close();
-        }, children: [_jsx("button", { "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": label, className: "ui-speed-dial__trigger", "data-ui-speed-dial-trigger": true, onClick: () => {
-                    setIsOpen(open => !open);
-                }, onKeyDown: event => {
-                    if (event.key === 'Escape')
-                        close();
-                    if (['ArrowDown', 'ArrowRight'].includes(event.key)) {
-                        event.preventDefault();
-                        focusAction('first');
-                        return;
-                    }
-                    if (['ArrowLeft', 'ArrowUp'].includes(event.key)) {
-                        event.preventDefault();
-                        focusAction('last');
-                    }
-                }, ref: triggerRef, type: "button", children: _jsx("span", { "aria-hidden": "true", className: "ui-speed-dial__icon" }) }), _jsxs("menu", { "aria-label": label, className: "ui-speed-dial__actions", "data-ui-speed-dial-actions": true, onClick: event => {
-                    if (event.target.closest('[role="menuitem"], button, a'))
-                        close();
-                }, onKeyDown: event => {
-                    const items = [
-                        ...(menuRef.current?.querySelectorAll('[role="menuitem"], button:not([disabled]), a[href]') ?? [])
-                    ];
-                    if (event.key === 'Escape') {
-                        event.preventDefault();
-                        close(true);
-                        return;
-                    }
-                    if (!speedDialNavigationKeys.includes(event.key))
-                        return;
-                    const currentIndex = items.indexOf(document.activeElement);
-                    const targetIndex = getSpeedDialNavigationIndex(event.key, currentIndex, items.length);
-                    event.preventDefault();
-                    items[targetIndex]?.focus();
-                }, ref: menuRef, role: "menu", children: [actions.map((action, index) => (_jsx("li", { role: "presentation", style: { '--ui-speed-dial-index': index }, children: _jsxs("button", { "aria-label": action.label, className: "ui-speed-dial__action", "data-icon": action.icon, "data-value": action.value ?? action.label, role: "menuitem", type: "button", children: [action.icon && (_jsx("span", { "aria-hidden": "true", className: "ui-speed-dial__action-icon ui-icon", children: renderLucideIcon(action.icon, `ui-icon__svg lucide-${action.icon}`) })), _jsx("span", { className: "ui-speed-dial__action-label", children: action.label })] }) }, action.value ?? action.label))), children] })] }));
-};
+"use client";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{Children,cloneElement,createContext,createElement,Fragment,isValidElement,use,useCallback,useEffect,useId,useLayoutEffect,useMemo,useRef,useState}from"react";import{alignLumenChartSeries,bindLumenTabIndicator,composeClassName,createLumenBarGeometry,createLumenChartDatumActivation,createLumenHeatmapDatumActivation,createLumenHeatmapModel,createLumenLineChartModel,createLumenLineGeometry,createLumenMessageScrollerController,createLumenPieGeometry,createLumenRangeDatumActivation,createLumenRangeGeometry,createLumenScatterGeometry,createLumenScatterReferences,formatLumenChartSummary,formatLumenLanguageLabel,formatLumenPhoneNumber,getLumenChartCategories,getLumenChartCategoryLabel,getLumenChartCategoryTicks,getLumenChartDomain,getLumenChartMotionKey,getLumenChartTicks,getLumenChartToneClassName,getLumenHeatmapColor,getLumenIcon,getLumenPhoneCountries,getLumenPhoneFlagSource,getLumenPieChartVariantClassName,hasLumenChartData,hasLumenPieData,lumenCodeTokenClassNames,lumenIllustrations,normalizeLumenFormErrors,resolveLumenChartLabels,resolveLumenChartTone,resolveLumenPhoneNumber,scaleLumenChartValue,tokenizeLumenCode}from"@santi020k/lumen-core";import{parseLumenDate as parseCalendarDate,resolveLumenDateLabels as resolveDateControlLabels,resolveLumenDateLocale as getCalendarLocale}from"@santi020k/lumen-core";import{renderSVG}from"uqr";import{ChartInspection}from"./chart-inspection.js";import{ChartInteraction}from"./chart-interaction.js";import{getChartPlotLabel}from"./chart-label.js";import{createReactChartDatumAction,formatReactChartTableValue,readReactChartDatumActivation}from"./chart-recipes.js";import{useCalendar,useDialog,useDropdownMenu,useInputOTP,useLanguageToggle,usePopover,useResizable,useSelect,useTabs,useTooltip}from"./hooks.js";import{renderIconSvg}from"./icon-svg.js";import{IconView}from"./icon-view.js";import{resolveReactPhoneInputCountry,resolveReactPhoneInputValue}from"./phone-recipes.js";import{Input,Label}from"./server-components.js";import{useCopyFeedback}from"./use-copy-feedback.js";import{Badge,Card,CardContent,CardDescription,CardFooter,CardHeader,CardTitle,Container,Direction,Grid,Input as Input2,Label as Label2,Progress,Separator,Skeleton,Spinner,Stack,Textarea,Typography,VisuallyHidden}from"./server-components.js";const getChartCategoryKey=value=>`${typeof value}:${String(value)}`,setRefValue=(ref,value)=>{typeof ref=="function"?ref(value):ref&&(ref.current=value)},emptyOptions=[],emptyChartSeries=[],emptyHeatmapData=[],emptyRangeData=[],emptyComboSeries=[],emptyPieSeries={data:[],id:"pie",label:"Values"},emptyChartValues=[],variantClass=(base,variant,defaultVariant="default")=>variant===defaultVariant?!1:`${base}--${variant}`,renderLucideIcon=(name,className)=>{const icon=getLumenIcon(name);return icon?renderIconSvg(icon,className):null},resolveSurface=glass=>glass?"glass":"default",glassIntensityClass=glass=>glass==="subtle"?"ui-glass-subtle":glass==="strong"&&"ui-glass-strong",glassSurfaceClass=(base,glass)=>resolveSurface(glass)==="glass"&&composeClassName(`${base}--glass`,glassIntensityClass(glass)),glassClass=(base,glass)=>!!glass&&composeClassName(`${base}--glass`,glassIntensityClass(glass)),normalizeOption=option=>typeof option=="string"?{label:option,value:option}:option,toInputValue=value=>{if(value!==void 0)return String(value)},composeHandlers=(userHandler,lumenHandler)=>event=>{userHandler?.(event),lumenHandler?.(event)},Primitive=({as,className,uiClassName,...props})=>_jsx(as??"div",{className:composeClassName(uiClassName,typeof className=="string"?className:void 0),...props}),DropdownMenuContext=createContext(null),PopoverContext=createContext(null),TabsContext=createContext(null),TooltipContext=createContext(null),requireContext=(context,componentName)=>{if(!context)throw new Error(`${componentName} must be used inside its matching Lumen root component.`);return context},Accordion=({className,variant="default",...props})=>_jsx("div",{className:composeClassName("ui-accordion",variant==="flush"&&"ui-accordion--flush",className),"data-variant":variant,...props}),Alert=({className,glass=!1,variant="default",...props})=>_jsx("aside",{className:composeClassName("ui-alert",variantClass("ui-alert",variant),glassClass("ui-alert",glass),className),"data-variant":variant,...props}),AlertDialog=({className,defaultOpen,dismissOnEscape,dismissOnOutsidePress,glass=!1,onCancel,onClick,onClose,onOpenChange,onPointerDown,open,...props})=>{const dialog=useDialog({alert:!0,defaultOpen,dismissOnEscape,dismissOnOutsidePress,onOpenChange,open});return _jsx("dialog",{...dialog.dialogProps,...props,className:composeClassName("ui-dialog ui-alert-dialog",glassSurfaceClass("ui-dialog",glass),className),"data-surface":resolveSurface(glass),onCancel:composeHandlers(onCancel,dialog.dialogProps.onCancel),onPointerDown:composeHandlers(onPointerDown,dialog.dialogProps.onPointerDown),onClick:composeHandlers(onClick,dialog.dialogProps.onClick),onClose:composeHandlers(onClose,dialog.dialogProps.onClose)})},Agenda=({className,glass=!1,...props})=>_jsx("section",{className:composeClassName("ui-agenda",glassClass("ui-agenda",glass),className),...props}),AspectRatio=({className,ratio="16 / 9",style,...props})=>_jsx("div",{className:composeClassName("ui-aspect-ratio",className),style:{aspectRatio:ratio,...style},...props}),Autocomplete=({className,type="search",...props})=>_jsx("input",{"aria-autocomplete":"list",className:composeClassName("ui-input ui-autocomplete",className),role:"combobox",type,...props}),Attachment=({className,glass=!1,href,...props})=>{const nextClassName=composeClassName("ui-attachment",glassClass("ui-attachment",glass),className);return href?_jsx("a",{className:nextClassName,href,...props}):_jsx("article",{className:nextClassName,...props})},Avatar=({alt="",children,className,fallback,src,...props})=>_jsxs("span",{className:composeClassName("ui-avatar",className),...props,children:[src?_jsx("img",{alt,src}):_jsx("span",{children:fallback}),children]}),Breadcrumb=({"aria-label":ariaLabel="Breadcrumb",className,...props})=>_jsx("nav",{"aria-label":ariaLabel,className:composeClassName("ui-breadcrumb",className),...props}),Bubble=({className,from="assistant",glass=!1,...props})=>_jsx("article",{className:composeClassName("ui-bubble",from==="user"&&"ui-bubble--user",glassClass("ui-bubble",glass),className),"data-from":from,...props}),Button=({asChild=!1,children,className,disabled,loading=!1,ref,size="default",type="button",variant="default",...props})=>{const isDisabled=disabled===!0||loading,buttonClassName=composeClassName("ui-button",`ui-button--${variant}`,size==="default"?"ui-button--default-size":`ui-button--${size}`,isDisabled&&"ui-button--disabled",loading&&"ui-button--loading",className);if(asChild){const child=children;if(!isValidElement(child))throw new TypeError("Button with asChild requires exactly one React element child.");const ChildComponent=child.type;return _jsxs(ChildComponent,{...child.props,...props,"aria-busy":loading?!0:void 0,"aria-disabled":isDisabled?!0:void 0,className:composeClassName(buttonClassName,child.props.className),"data-slot":"button",onClickCapture:isDisabled?event=>{event.preventDefault(),event.stopPropagation()}:props.onClickCapture??child.props.onClickCapture,onKeyDownCapture:isDisabled?event=>{(event.key==="Enter"||event.key===" ")&&(event.preventDefault(),event.stopPropagation())}:props.onKeyDownCapture??child.props.onKeyDownCapture,ref,tabIndex:isDisabled?-1:props.tabIndex??child.props.tabIndex,children:[loading&&_jsx("span",{"aria-hidden":"true",className:"ui-spinner"}),_jsx("span",{className:"ui-button__content",children:child.props.children})]})}return _jsxs("button",{"aria-busy":loading||void 0,className:buttonClassName,"data-slot":"button",disabled:isDisabled,ref,type,...props,children:[loading&&_jsx("span",{"aria-hidden":"true",className:"ui-spinner"}),_jsx("span",{className:"ui-button__content",children})]})},ButtonGroup=({className,...props})=>_jsx("div",{className:composeClassName("ui-button-group",className),...props}),Calendar=({className,defaultValue,disabled=!1,glass=!1,labels,locale,max,min,month,name,onValueChange,readOnly,value,...props})=>{const calendar=useCalendar({defaultValue,disabled,labels,locale,max,min,month,name,onValueChange,readOnly,value});return _jsxs("div",{...props,...calendar.rootProps,className:composeClassName(calendar.rootProps.className,glassClass("ui-calendar",glass),className),"data-ui-glass-track":glass?!0:void 0,children:[_jsx("input",{...calendar.inputProps}),_jsxs("div",{className:"ui-calendar__header",children:[_jsx("button",{...calendar.previousProps,type:"button",children:_jsx("span",{"aria-hidden":"true",children:"\u2039"})}),_jsx("strong",{...calendar.labelProps,children:calendar.label}),_jsx("button",{...calendar.nextProps,type:"button",children:_jsx("span",{"aria-hidden":"true",children:"\u203A"})})]}),_jsxs("table",{...calendar.gridProps,children:[_jsx("thead",{children:_jsx("tr",{role:"row",children:calendar.weekdays.map(weekday=>_jsx("th",{role:"columnheader",scope:"col",children:weekday},weekday))})}),_jsx("tbody",{children:calendar.weeks.map(week=>_jsx("tr",{role:"row",children:week.map(day=>_jsx("td",{...calendar.getDayProps(day),children:day.day},day.date))},week[0]?.date??"week"))})]})]})},Carousel=({className,glass=!1,...props})=>_jsx("section",{className:composeClassName("ui-carousel",glassClass("ui-carousel",glass),className),"data-ui-carousel":!0,...props}),ChartHeader=({description,heading,value})=>!heading&&!description&&!value?null:_jsxs("header",{children:[_jsxs("div",{className:"ui-chart__heading",children:[heading&&_jsx("h3",{children:heading}),description&&_jsx("p",{children:description})]}),value&&_jsx("strong",{"data-ui-chart-value":!0,children:value})]}),Chart=({caption,children,className,description,glass=!1,heading,presentation="default",summary,value,...props})=>_jsxs("figure",{className:composeClassName("ui-chart",presentation==="bare"&&"ui-chart--bare",glassClass("ui-chart",glass),className),...props,children:[_jsx(ChartHeader,{description,heading,value}),summary&&_jsx("p",{className:"ui-sr-only","data-ui-chart-summary":!0,children:summary}),children,caption&&_jsx("figcaption",{children:caption})]}),DatumChart=({onClick,onDatumActivate,...props})=>_jsx(Chart,{...props,"data-ui-chart-activation":onDatumActivate?!0:void 0,"data-ui-chart-adapter":onDatumActivate?"react":void 0,onClick:event=>{if(onClick?.(event),event.defaultPrevented||event.button!==0||!onDatumActivate)return;const detail=readReactChartDatumActivation(event.currentTarget,event.target);detail&&onDatumActivate(detail)}}),ChartDatumActions=({actions,label})=>{const available=actions.filter(action=>action!==null);return available.length===0?null:_jsxs("details",{className:"ui-chart__actions","data-ui-chart-actions":!0,children:[_jsx("summary",{children:label}),_jsx("ul",{children:available.map(action=>_jsx("li",{children:_jsx(Button,{variant:"ghost","data-ui-chart-datum":action.serialized,children:action.label})},action.key))})]})},ChartLegend=({label="Chart legend",series})=>_jsx("ul",{"aria-label":label,className:"ui-chart__legend",children:series.map((item,index)=>_jsxs("li",{className:getLumenChartToneClassName(item.tone,index),children:[_jsx("span",{"aria-hidden":"true"}),item.label]},item.id))}),ChartDataTable=({categories,formatCategory,formatValue=String,labels,series})=>{const resolvedLabels=resolveLumenChartLabels(labels),alignedSeries=series.map(item=>alignLumenChartSeries(item,categories));return _jsxs("details",{className:"ui-chart__data",children:[_jsx("summary",{children:resolvedLabels.viewData}),_jsx("div",{"aria-label":resolvedLabels.chartData,role:"group",tabIndex:0,children:_jsxs("table",{children:[_jsx("thead",{children:_jsxs("tr",{children:[_jsx("th",{scope:"col",children:resolvedLabels.category}),series.map(item=>_jsx("th",{scope:"col",children:item.label},item.id))]})}),_jsx("tbody",{children:categories.map(category=>_jsxs("tr",{children:[_jsx("th",{scope:"row",children:getLumenChartCategoryLabel(alignedSeries,category,formatCategory,"detail")}),alignedSeries.map(item=>{const datum=item.data.find(candidate=>candidate.x===category);return _jsx("td",{children:datum?.label??formatReactChartTableValue(datum?.y,formatValue,resolvedLabels.notAvailable)},item.id)})]},getChartCategoryKey(category)))})]})})]})},formatChartPercentage=percentage=>new Intl.NumberFormat(void 0,{maximumFractionDigits:percentage<.01?1:0,style:"percent"}).format(percentage),Sparkline=({area=!1,className,label="Trend",showEndpoint=!0,tone,values=emptyChartValues,...props})=>{const geometry=createLumenLineGeometry(values.map((value,index)=>({x:index,y:value})),{height:40,padding:3,width:120}),resolvedTone=resolveLumenChartTone(tone),endpoint=geometry.points.at(-1);return _jsxs("span",{"aria-label":label,className:composeClassName("ui-sparkline",`ui-chart-tone--${resolvedTone}`,className),role:"img",...props,children:[_jsxs("svg",{"aria-hidden":"true",preserveAspectRatio:"none",viewBox:"0 0 120 40",children:[area&&geometry.areaPaths.map(path=>_jsx("path",{className:"ui-sparkline__area",d:path},path)),_jsx("path",{className:"ui-sparkline__line",d:geometry.path})]}),showEndpoint&&endpoint&&_jsx("span",{"aria-hidden":"true",className:"ui-sparkline__endpoint",style:{left:`${endpoint.xCoordinate/120*100}%`,top:`${endpoint.yCoordinate/40*100}%`}}),_jsx("span",{className:"ui-sr-only",children:label})]})},BarChart=({categoryWidth,className,onDatumActivate,emptyLabel,formatCategory,formatValue=String,layout="grouped",labels,orientation="vertical",series=emptyChartSeries,showLegend=series.length>1,showTable=!0,summary,...props})=>{const resolvedLabels=resolveLumenChartLabels(labels),categories=getLumenChartCategories(series),alignedSeries=series.map(item=>alignLumenChartSeries(item,categories)),motionKeys=new Map(alignedSeries.flatMap(item=>item.data.map(point=>[JSON.stringify([item.id,point.x]),getLumenChartMotionKey(item.id,point)]))),geometry=createLumenBarGeometry(alignedSeries,{width:480,height:240,categoryWidth:categoryWidth??160,...formatCategory===void 0?{}:{formatCategory},formatValue,layout,orientation}),hasData=hasLumenChartData(alignedSeries),ticks=getLumenChartTicks(geometry.domain),margin=geometry.margin,categoryTicks=getLumenChartCategoryTicks(geometry.categories.map(category=>String(category.label)),{end:geometry.width-margin.right,positions:geometry.categories.map(category=>category.x),start:margin.left}),valueTicks=getLumenChartCategoryTicks(ticks.map(tick=>formatValue(tick)),{end:geometry.width-margin.right,minimumGap:48,positions:ticks.map(tick=>scaleLumenChartValue(tick,geometry.domain,margin.left,geometry.width-margin.right)),start:margin.left}),datumActions=onDatumActivate?geometry.marks.map(mark=>{const item=alignedSeries.find(candidate=>candidate.id===mark.seriesId),datum=item?.data.find(candidate=>candidate.x===mark.category);return item&&datum?createReactChartDatumAction(createLumenChartDatumActivation(item.id,datum),`${getLumenChartCategoryLabel(alignedSeries,mark.category,formatCategory,"detail")} \xB7 ${mark.seriesLabel}: ${formatValue(mark.value)}`,resolvedLabels):null}):[];return _jsxs(DatumChart,{onDatumActivate,className:composeClassName("ui-bar-chart",className),summary:summary??formatLumenChartSummary(alignedSeries,formatValue,resolvedLabels),...props,children:[showLegend&&hasData&&_jsx(ChartLegend,{label:resolvedLabels.chartLegend,series}),!hasData&&_jsx("p",{className:"ui-chart__empty",role:"status",children:emptyLabel??resolvedLabels.empty}),_jsx("div",{"aria-label":resolvedLabels.chartData,className:"ui-chart__plot",role:"region",tabIndex:0,hidden:!hasData,children:_jsxs("svg",{"aria-hidden":"true",preserveAspectRatio:"xMidYMid meet",viewBox:`0 0 ${geometry.width} ${geometry.height}`,children:[_jsx("g",{className:"ui-chart__grid",children:ticks.map(tick=>{const coordinate=orientation==="horizontal"?scaleLumenChartValue(tick,geometry.domain,margin.left,geometry.width-margin.right):scaleLumenChartValue(tick,geometry.domain,geometry.height-margin.bottom,margin.top);return orientation==="horizontal"?_jsx("line",{x1:coordinate,x2:coordinate,y1:margin.top,y2:geometry.height-margin.bottom},tick):_jsxs(Fragment,{children:[_jsx("line",{x1:margin.left,x2:geometry.width-margin.right,y1:coordinate,y2:coordinate}),_jsx("text",{x:margin.left-8,y:coordinate,children:formatValue(tick)})]},tick)})}),_jsx("g",{className:"ui-chart__axis-labels",children:orientation==="horizontal"?geometry.categories.map(category=>_jsx("text",{dominantBaseline:"middle",textAnchor:"end",x:category.x,y:category.y,children:getLumenChartCategoryTicks([String(category.label)],{end:margin.left-16,start:0})[0]?.label},getChartCategoryKey(category.category))):categoryTicks.map(tick=>_jsx("text",{textAnchor:tick.textAnchor,x:tick.position,y:geometry.height-20,children:tick.label},tick.index))}),orientation==="horizontal"&&_jsx("g",{className:"ui-chart__axis-labels",children:valueTicks.map(tick=>_jsx("text",{textAnchor:tick.textAnchor,x:tick.position,y:geometry.height-6,children:tick.label},tick.index))}),_jsxs("g",{className:"ui-bar-chart__marks",children:[geometry.marks.map((mark,index)=>_jsx("rect",{className:getLumenChartToneClassName(mark.tone),"data-ui-chart-motion-key":motionKeys.get(JSON.stringify([mark.seriesId,mark.category])),"data-ui-chart-datum":datumActions[index]?.serialized,height:mark.height,rx:"4",width:mark.width,x:mark.x,y:mark.y,children:_jsx("title",{children:`${getLumenChartCategoryLabel(alignedSeries,mark.category,formatCategory,"detail")} \xB7 ${mark.seriesLabel}: ${formatValue(mark.value)}`})},`${mark.seriesId}:${getChartCategoryKey(mark.category)}`)),onDatumActivate&&geometry.marks.map((mark,index)=>_jsx("rect",{className:"ui-chart__datum-hit",width:Math.max(12,mark.width),height:Math.max(12,mark.height),x:mark.x-Math.max(0,12-mark.width)/2,y:mark.y-Math.max(0,12-mark.height)/2,"data-ui-chart-datum":datumActions[index]?.serialized},`${mark.seriesId}:${getChartCategoryKey(mark.category)}`))]})]})}),showTable&&hasData&&_jsx(ChartDataTable,{categories,...formatCategory===void 0?{}:{formatCategory},formatValue,labels:resolvedLabels,series}),onDatumActivate&&_jsx(ChartDatumActions,{actions:datumActions,label:resolvedLabels.exploreData})]})},getLineChartMarkerStep=(markers,categoryCount)=>markers===!1||markers==="none"?Number.POSITIVE_INFINITY:typeof markers=="number"?Math.max(1,Math.round(markers)):markers==="auto"?Math.max(1,Math.ceil(categoryCount/24)):1,LineChart=({area=!1,onDatumActivate,annotations,domain:requestedDomain,height:requestedHeight,width:requestedWidth,xDomain,xScale="categorical",interactive=!1,syncGroup,cursor,onCursorChange,className,emptyLabel,formatCategory,formatValue=String,labels,markers="auto",referenceValue,series=emptyChartSeries,showLegend=series.length>1,showTable=!0,summary,...props})=>{const resolvedLabels=resolveLumenChartLabels(labels),model=createLumenLineChartModel(series,{xScale,formatValue,...annotations?{annotations}:{},...requestedDomain?{domain:requestedDomain}:{},...requestedHeight===void 0?{}:{height:requestedHeight},...requestedWidth===void 0?{}:{width:requestedWidth},...xDomain?{xDomain}:{},...referenceValue===void 0?{}:{referenceValue},...formatCategory?{formatCategory}:{}}),{width,height,padding,paddingLeft,categories,categoryTicks,domain,geometries,ticks,series:alignedSeries}=model,hasData=hasLumenChartData(alignedSeries),markerStep=getLineChartMarkerStep(markers,categories.length),pointActions=onDatumActivate?geometries.map((geometry,index)=>{const item=alignedSeries[index];return item?geometry.points.map(point=>createReactChartDatumAction(createLumenChartDatumActivation(item.id,point),`${getLumenChartCategoryLabel(alignedSeries,point.x,formatCategory,"detail")} \xB7 ${item.label}: ${formatValue(point.y??0)}`,resolvedLabels)):[]}):[],datumActions=pointActions.flat(),referenceY=referenceValue===void 0?void 0:scaleLumenChartValue(referenceValue,domain,height-padding,padding);return _jsxs(DatumChart,{onDatumActivate,className:composeClassName("ui-line-chart",className),summary:summary??formatLumenChartSummary(alignedSeries,formatValue,resolvedLabels),...props,children:[_jsxs(ChartInteraction,{interactive,model,showLegend,...syncGroup?{syncGroup}:{},...cursor===void 0?{}:{cursor},...onCursorChange?{onCursorChange}:{},children:[showLegend&&hasData&&(interactive?_jsx("ul",{className:"ui-chart__legend","aria-label":resolvedLabels.chartLegend,children:series.map((item,index)=>_jsx("li",{className:getLumenChartToneClassName(item.tone,index),children:_jsx(Button,{"aria-pressed":"true","data-ui-chart-toggle":item.id,disabled:!0,size:"sm",variant:"ghost",children:item.label})},item.id))}):_jsx(ChartLegend,{label:resolvedLabels.chartLegend,series})),!hasData&&_jsx("p",{className:"ui-chart__empty",role:"status",children:emptyLabel??resolvedLabels.empty}),_jsx("div",{"aria-label":getChartPlotLabel(props["aria-label"],props.heading,resolvedLabels.chartData),className:"ui-chart__plot","data-ui-chart-interaction-plot":interactive||void 0,role:"region",tabIndex:0,hidden:!hasData,children:_jsxs("svg",{"aria-hidden":"true",preserveAspectRatio:"xMidYMid meet",viewBox:`0 0 ${width} ${height}`,children:[_jsx("g",{className:"ui-chart__grid",children:ticks.map(tick=>{const y=scaleLumenChartValue(tick,domain,height-padding,padding);return _jsxs(Fragment,{children:[_jsx("line",{x1:paddingLeft,x2:width-padding,y1:y,y2:y}),_jsx("text",{x:paddingLeft-8,y,children:formatValue(tick)})]},tick)})}),_jsx("g",{className:"ui-chart__axis-labels",children:categoryTicks.map(tick=>_jsx("text",{textAnchor:tick.textAnchor,x:tick.position,y:height-14,children:tick.label},tick.index))}),_jsxs("svg",{x:paddingLeft,y:padding,width:width-padding-paddingLeft,height:height-2*padding,viewBox:`${paddingLeft} ${padding} ${width-padding-paddingLeft} ${height-2*padding}`,overflow:"hidden",children:[referenceY!==void 0&&_jsx("line",{className:"ui-chart__reference",x1:paddingLeft,x2:width-padding,y1:referenceY,y2:referenceY}),geometries.map((geometry,index)=>{const item=series[index];if(!item)return null;const tone=resolveLumenChartTone(item.tone,index);return _jsxs("g",{className:composeClassName("ui-line-chart__series",getLumenChartToneClassName(tone)),"data-ui-chart-series":item.id,children:[area&&geometry.areaPaths.length>0&&_jsx("path",{"data-ui-chart-motion-key":JSON.stringify(["area",item.id]),className:"ui-line-chart__area",d:geometry.areaPaths.join(" ")}),_jsx("path",{"data-ui-chart-motion-key":JSON.stringify(["path",item.id]),className:"ui-line-chart__line",d:geometry.path}),Number.isFinite(markerStep)&&geometry.points.map((point,pointIndex)=>pointIndex%markerStep===0&&_jsx("circle",{"data-ui-chart-datum":pointActions[index]?.[pointIndex]?.serialized,"data-ui-chart-motion-key":getLumenChartMotionKey(item.id,point),className:"ui-line-chart__point",cx:point.xCoordinate,cy:point.yCoordinate,r:"3",children:_jsx("title",{children:`${getLumenChartCategoryLabel(alignedSeries,point.x,formatCategory,"detail")} \xB7 ${item.label}: ${formatValue(point.y??0)}`})},point.id??getChartCategoryKey(point.x))),onDatumActivate&&geometry.points.map((point,pointIndex)=>_jsx("circle",{className:"ui-chart__datum-hit",cx:point.xCoordinate,cy:point.yCoordinate,r:"10","data-ui-chart-datum":pointActions[index]?.[pointIndex]?.serialized},point.id??getChartCategoryKey(point.x)))]},item.id)})]}),model.annotationMarks.map(mark=>_jsx("g",{className:composeClassName("ui-chart__annotation",getLumenChartToneClassName(mark.tone)),children:mark.axis==="x"?_jsxs(_Fragment,{children:[_jsx("line",{x1:mark.coordinate,x2:mark.coordinate,y1:padding,y2:height-padding}),_jsx("text",{x:mark.coordinate+4,y:padding-8,children:mark.label})]}):_jsxs(_Fragment,{children:[_jsx("line",{x1:paddingLeft,x2:width-padding,y1:mark.coordinate,y2:mark.coordinate}),_jsx("text",{textAnchor:"end",x:width-padding,y:mark.coordinate-8,children:mark.label})]})},mark.id)),interactive&&_jsx("line",{className:"ui-chart__crosshair","data-ui-chart-crosshair":!0,style:{display:"none"},y1:padding,y2:height-padding})]})}),model.annotationMarks.length>0&&_jsx("ul",{className:"ui-sr-only",children:model.annotationMarks.map(mark=>_jsxs("li",{children:[mark.label,":"," ",mark.axis==="x"?getLumenChartCategoryLabel(alignedSeries,mark.value,formatCategory,"detail"):formatValue(Number(mark.value))]},mark.id))}),interactive&&hasData&&_jsx(ChartInspection,{model,...formatCategory?{formatCategory}:{},formatValue,labels:resolvedLabels})]}),showTable&&hasData&&_jsx(ChartDataTable,{categories,...formatCategory===void 0?{}:{formatCategory},formatValue,labels:resolvedLabels,series}),onDatumActivate&&_jsx(ChartDatumActions,{actions:datumActions,label:resolvedLabels.exploreData})]})},PieChart=({centerLabel,centerValue,className,onDatumActivate,labels,series=emptyPieSeries,showLegend=!0,showTable=!0,summary,valueFormatter=String,variant="donut",...props})=>{const resolvedLabels=resolveLumenChartLabels(labels),geometry=createLumenPieGeometry(series.data,{variant}),hasData=hasLumenPieData(series.data),renderedSeries={...series,data:series.data.filter(datum=>datum.y!==null&&Number.isFinite(datum.y)&&datum.y>0)},hasCenterLabel=centerLabel!=null,hasCenterValue=centerValue!=null,datumActions=onDatumActivate?geometry.slices.map((slice,index)=>{const datum=renderedSeries.data[index];return datum?createReactChartDatumAction(createLumenChartDatumActivation(series.id,datum),`${slice.label} \xB7 ${series.label}: ${valueFormatter(slice.value)}`,resolvedLabels):null}):[];return _jsxs(DatumChart,{onDatumActivate,className:composeClassName("ui-pie-chart",getLumenPieChartVariantClassName(variant),className),summary:summary??formatLumenChartSummary([renderedSeries],valueFormatter,resolvedLabels),...props,children:[showLegend&&hasData&&_jsx("ul",{"aria-label":resolvedLabels.chartLegend,className:"ui-chart__legend",children:geometry.slices.map(slice=>_jsxs("li",{className:getLumenChartToneClassName(slice.tone),children:[_jsx("span",{"aria-hidden":"true"}),slice.label]},`${typeof slice.x}:${String(slice.x)}`))}),!hasData&&_jsx("p",{className:"ui-chart__empty",role:"status",children:resolvedLabels.empty}),_jsxs("div",{className:"ui-chart__plot ui-pie-chart__plot",hidden:!hasData,children:[_jsx("svg",{"aria-hidden":"true",preserveAspectRatio:"xMidYMid meet",viewBox:`0 0 ${geometry.size} ${geometry.size}`,children:_jsx("g",{className:"ui-pie-chart__slices",children:geometry.slices.map((slice,index)=>_jsx("path",{className:getLumenChartToneClassName(slice.tone),"data-ui-chart-datum":datumActions[index]?.serialized,d:slice.path,fillRule:"evenodd",children:_jsx("title",{children:`${slice.label}: ${valueFormatter(slice.value)} (${formatChartPercentage(slice.percentage)})`})},`${typeof slice.x}:${String(slice.x)}`))})}),variant==="donut"&&(hasCenterLabel||hasCenterValue)&&_jsxs(_Fragment,{children:[_jsxs("div",{"aria-hidden":"true",className:"ui-pie-chart__center",children:[hasCenterValue&&_jsx("strong",{children:centerValue}),hasCenterLabel&&_jsx("span",{children:centerLabel})]}),_jsxs("div",{className:"ui-sr-only",children:[centerValue," ",centerLabel]})]})]}),showTable&&hasData&&_jsxs("details",{className:"ui-chart__data",children:[_jsx("summary",{children:resolvedLabels.viewData}),_jsx("div",{"aria-label":resolvedLabels.chartData,role:"group",tabIndex:0,children:_jsxs("table",{children:[_jsx("thead",{children:_jsxs("tr",{children:[_jsx("th",{scope:"col",children:resolvedLabels.category}),_jsx("th",{scope:"col",children:resolvedLabels.value}),_jsx("th",{scope:"col",children:"Share"})]})}),_jsx("tbody",{children:geometry.slices.map(slice=>_jsxs("tr",{children:[_jsx("th",{scope:"row",children:slice.label}),_jsx("td",{children:valueFormatter(slice.value)}),_jsx("td",{children:formatChartPercentage(slice.percentage)})]},`${typeof slice.x}:${String(slice.x)}`))})]})})]}),onDatumActivate&&_jsx(ChartDatumActions,{actions:datumActions,label:resolvedLabels.exploreData})]})},emptyScatterReferences=[],ScatterPlotClip=({children,width,height})=>{const plotId=useId();return _jsxs(_Fragment,{children:[_jsx("defs",{children:_jsx("clipPath",{id:plotId,children:_jsx("rect",{x:"44",y:"44",width:width-88,height:height-88})})}),_jsx("g",{clipPath:`url(#${plotId})`,children})]})},ScatterChart=({className,onDatumActivate,formatValue=String,formatX=String,formatY=formatValue,xDomain,domain,references=emptyScatterReferences,labels,series=emptyChartSeries,showLegend=series.length>1,showTable=!0,summary,xScale="linear",...props})=>{const resolvedLabels=resolveLumenChartLabels(labels),geometry=createLumenScatterGeometry(series,{xScale,...xDomain?{xDomain}:{},...domain?{domain}:{}}),referenceGeometry=createLumenScatterReferences(references,geometry,xScale),renderedSeries=series.map(item=>({...item,data:geometry.points.filter(point=>point.seriesId===item.id)})).filter(item=>item.data.length>0),hasData=geometry.points.length>0,datumActions=onDatumActivate?geometry.points.map(point=>createReactChartDatumAction(createLumenChartDatumActivation(point.seriesId,point),`${point.xLabel??formatX(point.x)} \xB7 ${point.seriesLabel}: ${point.label??formatY(point.y??0)}`,resolvedLabels)):[];return _jsxs(DatumChart,{onDatumActivate,className:composeClassName("ui-scatter-chart",className),summary:summary??formatLumenChartSummary(renderedSeries,formatY,resolvedLabels),...props,children:[showLegend&&hasData&&_jsx(ChartLegend,{label:resolvedLabels.chartLegend,series}),!hasData&&_jsx("p",{className:"ui-chart__empty",role:"status",children:resolvedLabels.empty}),_jsx("div",{"aria-label":resolvedLabels.chartData,className:"ui-chart__plot",role:"region",tabIndex:0,hidden:!hasData,children:_jsxs("svg",{"aria-hidden":"true",viewBox:`0 0 ${geometry.width} ${geometry.height}`,children:[_jsxs(ScatterPlotClip,{width:geometry.width,height:geometry.height,children:[_jsx("g",{className:"ui-scatter-chart__references",children:referenceGeometry.map(reference=>reference.region?_jsx("rect",{x:Math.min(reference.x1,reference.x2),y:Math.min(reference.y1,reference.y2),width:Math.abs(reference.x2-reference.x1),height:Math.abs(reference.y2-reference.y1),children:_jsx("title",{children:reference.label})},reference.id):_jsx("line",{x1:reference.x1,x2:reference.x2,y1:reference.y1,y2:reference.y2,children:_jsx("title",{children:reference.label})},reference.id))}),_jsx("g",{className:"ui-scatter-chart__marks",children:geometry.points.map((point,pointIndex)=>_jsx("circle",{"data-ui-chart-datum":datumActions[pointIndex]?.serialized,className:getLumenChartToneClassName(point.tone),cx:point.xCoordinate,cy:point.yCoordinate,r:point.radius,children:_jsx("title",{children:`${point.xLabel??formatX(point.x)} \xB7 ${point.seriesLabel}: ${point.label??formatY(point.y??0)}`})},`${point.seriesId}:${point.id??`${getChartCategoryKey(point.x)}:${pointIndex}`}`))})]}),onDatumActivate&&geometry.points.map((point,index)=>point.xCoordinate>=44&&point.xCoordinate<=geometry.width-44&&point.yCoordinate>=44&&point.yCoordinate<=geometry.height-44?_jsx("circle",{className:"ui-chart__datum-hit",cx:point.xCoordinate,cy:point.yCoordinate,r:Math.max(10,point.radius),"data-ui-chart-datum":datumActions[index]?.serialized},`${point.seriesId}:${point.id??getChartCategoryKey(point.x)}`):null)]})}),referenceGeometry.length>0&&_jsx("ul",{className:"ui-scatter-chart__reference-labels",children:referenceGeometry.map(reference=>_jsx("li",{children:reference.label},reference.id))}),showTable&&hasData&&_jsxs("details",{className:"ui-chart__data",children:[_jsx("summary",{children:resolvedLabels.viewData}),_jsx("div",{"aria-label":resolvedLabels.chartData,role:"group",tabIndex:0,children:_jsxs("table",{children:[_jsx("thead",{children:_jsxs("tr",{children:[_jsx("th",{scope:"col",children:resolvedLabels.x}),_jsx("th",{scope:"col",children:resolvedLabels.series}),_jsx("th",{scope:"col",children:resolvedLabels.value}),_jsx("th",{scope:"col",children:resolvedLabels.size})]})}),_jsx("tbody",{children:geometry.points.map((point,pointIndex)=>_jsxs("tr",{children:[_jsx("th",{scope:"row",children:point.xLabel??formatX(point.x)}),_jsx("td",{children:point.seriesLabel}),_jsx("td",{children:point.label??formatY(point.y??0)}),_jsx("td",{children:formatReactChartTableValue(point.size,formatValue,resolvedLabels.notAvailable)})]},`${point.seriesId}:${point.id??`${getChartCategoryKey(point.x)}:${pointIndex}`}`))})]})})]}),onDatumActivate&&_jsx(ChartDatumActions,{actions:datumActions,label:resolvedLabels.exploreData})]})},Heatmap=({onDatumActivate,colorScale="sequential",midpoint=0,domain,showLegend=!0,className,data=emptyHeatmapData,formatValue=String,labels,showTable=!0,summary,...props})=>{const resolvedLabels=resolveLumenChartLabels(labels),geometry=createLumenHeatmapModel(data,{colorScale,midpoint,...domain?{domain}:{}}),availableCells=geometry.cells.filter(cell=>cell.value!==null&&Number.isFinite(cell.value)),hasData=availableCells.length>0,datumActions=onDatumActivate?availableCells.map(cell=>createReactChartDatumAction(createLumenHeatmapDatumActivation(cell),`${cell.xLabel??cell.x} \xB7 ${cell.yLabel??cell.y}: ${cell.label??formatValue(cell.value??0)}`,resolvedLabels)):[],datumActionByCell=new Map(availableCells.map((cell,index)=>[cell,datumActions[index]]));return _jsxs(DatumChart,{onDatumActivate,className:composeClassName("ui-heatmap",className),summary:summary??resolvedLabels.formatHeatmapSummary(availableCells.length),...props,children:[!hasData&&_jsx("p",{className:"ui-chart__empty",role:"status",children:resolvedLabels.empty}),_jsx("div",{"aria-label":getChartPlotLabel(props["aria-label"],props.heading,resolvedLabels.chartData),className:"ui-chart__plot",role:"region",tabIndex:0,hidden:geometry.cells.length===0,children:_jsxs("svg",{"aria-hidden":"true",viewBox:`0 0 ${geometry.width} ${geometry.height}`,children:[_jsxs("g",{className:"ui-chart__axis-labels",children:[geometry.xTicks.map(tick=>_jsx("text",{textAnchor:tick.textAnchor,x:tick.position,y:"298",children:tick.label},tick.index)),geometry.yTicks.map(tick=>_jsx("text",{className:"ui-heatmap__row-label",textAnchor:"end",dominantBaseline:"middle",x:"108",y:tick.position,children:tick.label},getChartCategoryKey(tick.value)))]}),_jsx("g",{className:"ui-heatmap__cells",children:geometry.cells.map(cell=>{const missing=cell.value===null||!Number.isFinite(cell.value);return _jsxs("g",{children:[_jsx("rect",{"data-ui-chart-datum":datumActionByCell.get(cell)?.serialized,height:Math.max(0,cell.height-2),width:Math.max(0,cell.width-2),x:cell.xCoordinate+1,y:cell.yCoordinate+1,style:{fill:getLumenHeatmapColor(cell.value,geometry.domain,colorScale,geometry.midpoint)},children:_jsx("title",{children:`${cell.xLabel??cell.x} \xB7 ${cell.yLabel??cell.y}: ${missing?resolvedLabels.notAvailable:cell.label??formatValue(cell.value??0)}`})}),missing&&_jsx("text",{className:"ui-heatmap__missing",textAnchor:"middle",dominantBaseline:"middle",x:cell.xCoordinate+cell.width/2,y:cell.yCoordinate+cell.height/2,children:"\xD7"})]},JSON.stringify([cell.x,cell.y]))})})]})}),showLegend&&geometry.cells.length>0&&_jsxs("div",{className:"ui-heatmap__legend","aria-label":resolvedLabels.chartLegend,children:[_jsx("span",{children:formatValue(geometry.domain.min)}),_jsx("span",{style:{background:geometry.legendBackground},className:"ui-heatmap__scale",children:colorScale==="diverging"&&_jsx("span",{style:{left:`${geometry.midpointPercent}%`},children:formatValue(geometry.midpoint)})}),_jsx("span",{children:formatValue(geometry.domain.max)}),_jsxs("span",{children:["\xD7",resolvedLabels.notAvailable]})]}),showTable&&_jsxs("details",{className:"ui-chart__data",children:[_jsx("summary",{children:resolvedLabels.viewData}),_jsx("div",{"aria-label":resolvedLabels.chartData,role:"group",tabIndex:0,children:_jsxs("table",{children:[_jsx("thead",{children:_jsxs("tr",{children:[_jsx("th",{scope:"col",children:resolvedLabels.column}),_jsx("th",{scope:"col",children:resolvedLabels.row}),_jsx("th",{scope:"col",children:resolvedLabels.value})]})}),_jsx("tbody",{children:geometry.cells.map(cell=>_jsxs("tr",{children:[_jsx("th",{scope:"row",children:cell.xLabel??cell.x}),_jsx("td",{children:cell.yLabel??cell.y}),_jsx("td",{children:cell.label??(cell.value===null||!Number.isFinite(cell.value)?resolvedLabels.notAvailable:formatValue(cell.value))})]},cell.id??`${getChartCategoryKey(cell.x)}:${getChartCategoryKey(cell.y)}`))})]})})]}),onDatumActivate&&_jsx(ChartDatumActions,{actions:datumActions,label:resolvedLabels.exploreData})]})},RangeChart=({className,onDatumActivate,data=emptyRangeData,formatValue=String,labels,showTable=!0,summary,tone="series-1",...props})=>{const resolvedLabels=resolveLumenChartLabels(labels),width=640,height=320,padding=44,geometry=createLumenRangeGeometry(data,{height,padding,width}),categoryTicks=getLumenChartCategoryTicks(geometry.points.map(point=>String(point.xLabel??point.x)),{start:padding,end:width-padding,positions:geometry.points.map(point=>point.xCoordinate)}),ticks=getLumenChartTicks(geometry.domain),datumActions=onDatumActivate?geometry.points.map(point=>createReactChartDatumAction(createLumenRangeDatumActivation(point),`${point.xLabel??point.x}: ${point.label??`${formatValue(point.low??0)}\u2013${formatValue(point.high??0)}`}`,resolvedLabels)):[];return _jsxs(DatumChart,{onDatumActivate,className:composeClassName("ui-range-chart",getLumenChartToneClassName(tone),className),summary:summary??resolvedLabels.formatRangeSummary(geometry.points.length),...props,children:[geometry.points.length===0&&_jsx("p",{className:"ui-chart__empty",role:"status",children:resolvedLabels.empty}),_jsx("div",{"aria-label":resolvedLabels.chartData,className:"ui-chart__plot",role:"region",tabIndex:0,hidden:geometry.points.length===0,children:_jsxs("svg",{"aria-hidden":"true",viewBox:`0 0 ${width} ${height}`,children:[_jsx("g",{className:"ui-chart__grid",children:ticks.map(tick=>{const y=scaleLumenChartValue(tick,geometry.domain,height-padding,padding);return _jsxs("g",{children:[_jsx("line",{x1:padding,x2:width-padding,y1:y,y2:y}),_jsx("text",{x:padding-8,y,children:formatValue(tick)})]},tick)})}),_jsx("g",{className:"ui-chart__axis-labels",children:categoryTicks.map(tick=>_jsx("text",{x:tick.position,y:height-12,textAnchor:tick.textAnchor,children:tick.label},tick.index))}),_jsx("path",{className:"ui-range-chart__area",d:geometry.areaPath}),geometry.points.map((point,index)=>_jsx("line",{"data-ui-chart-datum":datumActions[index]?.serialized,className:"ui-range-chart__interval",x1:point.xCoordinate,x2:point.xCoordinate,y1:point.highCoordinate,y2:point.lowCoordinate,children:_jsx("title",{children:`${point.xLabel??point.x}: ${point.label??`${formatValue(point.low??0)}\u2013${formatValue(point.high??0)}`}`})},point.id??getChartCategoryKey(point.x))),onDatumActivate&&geometry.points.map((point,index)=>_jsx("rect",{className:"ui-chart__datum-hit",x:point.xCoordinate-10,y:Math.min(point.highCoordinate,point.lowCoordinate)-Math.max(0,20-Math.abs(point.highCoordinate-point.lowCoordinate))/2,width:"20",height:Math.max(20,Math.abs(point.highCoordinate-point.lowCoordinate)),"data-ui-chart-datum":datumActions[index]?.serialized},point.id??getChartCategoryKey(point.x)))]})}),showTable&&_jsxs("details",{className:"ui-chart__data",children:[_jsx("summary",{children:resolvedLabels.viewData}),_jsx("div",{"aria-label":resolvedLabels.chartData,role:"group",tabIndex:0,children:_jsxs("table",{children:[_jsx("thead",{children:_jsxs("tr",{children:[_jsx("th",{scope:"col",children:resolvedLabels.category}),_jsx("th",{scope:"col",children:resolvedLabels.low}),_jsx("th",{scope:"col",children:resolvedLabels.high})]})}),_jsx("tbody",{children:data.map(item=>_jsxs("tr",{children:[_jsx("th",{scope:"row",children:item.xLabel??item.x}),_jsx("td",{children:item.low===null||!Number.isFinite(item.low)?resolvedLabels.notAvailable:formatValue(item.low)}),_jsx("td",{children:item.high===null||!Number.isFinite(item.high)?resolvedLabels.notAvailable:formatValue(item.high)})]},item.id??getChartCategoryKey(item.x)))})]})})]}),onDatumActivate&&_jsx(ChartDatumActions,{actions:datumActions,label:resolvedLabels.exploreData})]})},ComboChart=({className,onDatumActivate,formatValue=String,labels,series=emptyComboSeries,showLegend=!0,showTable=!0,summary,...props})=>{const resolvedLabels=resolveLumenChartLabels(labels),width=640,height=320,padding=44,categories=getLumenChartCategories(series),alignedSeries=series.map(item=>({...item,data:alignLumenChartSeries(item,categories).data})),domain=getLumenChartDomain(alignedSeries.flatMap(item=>item.data.map(datum=>datum.y))),barSeries=alignedSeries.filter(item=>item.mark==="bar"),lineSeries=alignedSeries.filter(item=>item.mark!=="bar"),bars=createLumenBarGeometry(barSeries,{domain,height,width}),categoryPositions=new Map(bars.categories.map(category=>[getChartCategoryKey(category.category),category.x])),drawableWidth=width-padding*2,alignComboLineDatum=datum=>barSeries.length===0?datum:{...datum,x:((categoryPositions.get(`${typeof datum.x}:${String(datum.x)}`)??padding)-padding)/drawableWidth},lineGeometryOptions={domain,height,padding,width,...barSeries.length===0?{}:{paddingBottom:bars.margin.bottom,paddingTop:bars.margin.top,xDomain:{max:1,min:0},xScale:"linear"}},lines=lineSeries.map(item=>createLumenLineGeometry(item.data.map(alignComboLineDatum),lineGeometryOptions)),hasData=hasLumenChartData(series),barActions=onDatumActivate?bars.marks.map(mark=>{const item=barSeries.find(candidate=>candidate.id===mark.seriesId),datum=item?.data.find(candidate=>candidate.x===mark.category);return item&&datum?createReactChartDatumAction(createLumenChartDatumActivation(item.id,datum),`${datum.xLabel??datum.x} \xB7 ${item.label}: ${datum.label??formatValue(mark.value)}`,resolvedLabels):null}):[],pointActions=onDatumActivate?lines.map((geometry,index)=>{const item=lineSeries[index];return geometry.points.map(point=>{const datum=item?.data.find(candidate=>alignComboLineDatum(candidate).x===point.x);return item&&datum?createReactChartDatumAction(createLumenChartDatumActivation(item.id,datum),`${datum.xLabel??datum.x} \xB7 ${item.label}: ${datum.label??formatValue(point.y??0)}`,resolvedLabels):null})}):[],plotTop=barSeries.length>0?bars.margin.top:padding,plotBottom=height-(barSeries.length>0?bars.margin.bottom:padding),plotLeft=barSeries.length>0?bars.margin.left:padding,plotRight=width-(barSeries.length>0?bars.margin.right:padding),ticks=getLumenChartTicks(domain),categoryLabels=categories.map(category=>getLumenChartCategoryLabel(series,category)),categoryTicks=getLumenChartCategoryTicks(categoryLabels,{start:plotLeft,end:plotRight,...barSeries.length>0?{positions:bars.categories.map(category=>category.x)}:{}}),datumActions=[...barActions,...pointActions.flat()];return _jsxs(DatumChart,{onDatumActivate,className:composeClassName("ui-combo-chart",className),summary:summary??formatLumenChartSummary(series,formatValue,resolvedLabels),...props,children:[showLegend&&hasData&&_jsx(ChartLegend,{label:resolvedLabels.chartLegend,series}),!hasData&&_jsx("p",{className:"ui-chart__empty",role:"status",children:resolvedLabels.empty}),_jsx("div",{"aria-label":resolvedLabels.chartData,className:"ui-chart__plot",role:"region",tabIndex:0,hidden:!hasData,children:_jsxs("svg",{"aria-hidden":"true",viewBox:`0 0 ${width} ${height}`,children:[_jsx("g",{className:"ui-chart__grid",children:ticks.map(tick=>{const y=scaleLumenChartValue(tick,domain,plotBottom,plotTop);return _jsxs("g",{children:[_jsx("line",{x1:plotLeft,x2:plotRight,y1:y,y2:y}),_jsx("text",{x:plotLeft-8,y,children:formatValue(tick)})]},tick)})}),_jsx("g",{className:"ui-chart__axis-labels",children:categoryTicks.map(tick=>_jsx("text",{x:tick.position,y:height-12,textAnchor:tick.textAnchor,children:tick.label},tick.index))}),_jsxs("g",{className:"ui-bar-chart__marks",children:[bars.marks.map((mark,index)=>_jsx("rect",{"data-ui-chart-datum":barActions[index]?.serialized,className:getLumenChartToneClassName(mark.tone),height:mark.height,rx:"4",width:mark.width,x:mark.x,y:mark.y,children:_jsx("title",{children:`${mark.seriesLabel}: ${formatValue(mark.value)}`})},`${mark.seriesId}:${getChartCategoryKey(mark.category)}`)),onDatumActivate&&bars.marks.map((mark,index)=>_jsx("rect",{className:"ui-chart__datum-hit",width:Math.max(12,mark.width),height:Math.max(12,mark.height),x:mark.x-Math.max(0,12-mark.width)/2,y:mark.y-Math.max(0,12-mark.height)/2,"data-ui-chart-datum":barActions[index]?.serialized},`${mark.seriesId}:${getChartCategoryKey(mark.category)}`))]}),lines.map((geometry,index)=>{const item=lineSeries[index];if(!item)return null;const tone=resolveLumenChartTone(item.tone,index+barSeries.length);return _jsxs("g",{className:composeClassName("ui-line-chart__series",getLumenChartToneClassName(tone)),children:[item.mark==="area"&&geometry.areaPaths.map(path=>_jsx("path",{className:"ui-line-chart__area",d:path},path)),_jsx("path",{className:"ui-line-chart__line",d:geometry.path}),geometry.points.map(point=>_jsx("circle",{className:"ui-line-chart__point",cx:point.xCoordinate,cy:point.yCoordinate,r:"3.5"},point.id??getChartCategoryKey(point.x))),onDatumActivate&&geometry.points.map((point,pointIndex)=>_jsx("circle",{className:"ui-chart__datum-hit",cx:point.xCoordinate,cy:point.yCoordinate,r:"10","data-ui-chart-datum":pointActions[index]?.[pointIndex]?.serialized},point.id??getChartCategoryKey(point.x)))]},item.id)})]})}),showTable&&hasData&&_jsx(ChartDataTable,{categories,formatValue,labels:resolvedLabels,series}),onDatumActivate&&_jsx(ChartDatumActions,{actions:datumActions,label:resolvedLabels.exploreData})]})},Checkbox=({className,ref,...props})=>_jsx("input",{className:composeClassName("ui-checkbox",className),ref,type:"checkbox",...props}),CheckboxGroup=({children,className,invalid=!1,legend,orientation="vertical",...props})=>_jsxs("fieldset",{"aria-invalid":invalid||void 0,className:composeClassName("ui-checkbox-group",`ui-checkbox-group--${orientation}`,className),"data-invalid":invalid?"true":void 0,"data-orientation":orientation,"data-ui-checkbox-group":!0,...props,children:[legend&&_jsx("legend",{children:legend}),children]}),Collapsible=({className,...props})=>_jsx("details",{className:composeClassName("ui-collapsible",className),"data-ui-collapsible":!0,...props}),renderCodeToken=token=>token.kind?_jsx("span",{className:lumenCodeTokenClassNames[token.kind],children:token.value},`${token.start}-${token.kind}`):token.value,renderCodeChildren=(code,children,language)=>code===void 0?children:tokenizeLumenCode(code,language).map(renderCodeToken),CodeCopyButton=({code,copyLabel,copiedLabel,errorLabel})=>{const{accessibleLabel,handleClick,state}=useCopyFeedback({copiedLabel,errorLabel,getValue:button=>{if(code!==void 0)return code;const content=button.closest("[data-ui-code]")?.querySelector("pre code, code");return content?.innerText??content?.textContent??void 0},label:copyLabel});return _jsxs(_Fragment,{children:[_jsxs("button",{"aria-label":accessibleLabel,className:composeClassName("ui-code__copy",state==="copied"&&"ui-code__copy--copied"),"data-state":state,"data-ui-code-copy":!0,onClick:handleClick,title:accessibleLabel,type:"button",children:[renderLucideIcon("copy","ui-code__copy-icon"),renderLucideIcon("check","ui-code__check-icon")]}),_jsx("span",{"aria-live":"polite",className:"ui-sr-only",role:"status",children:state==="idle"?"":accessibleLabel})]})},codeRegionProps=(wrap,codeLabel)=>wrap?{}:{"aria-label":codeLabel,role:"region",tabIndex:0},decorateCodeRegion=(pre,codeLabel)=>{const generated=new Map,attributes={tabindex:"0",role:"region"};pre.hasAttribute("aria-labelledby")||(attributes["aria-label"]=codeLabel);for(const[name,value]of Object.entries(attributes))pre.hasAttribute(name)||(pre.setAttribute(name,value),generated.set(name,value));const releaseOwnership=records=>{for(const record of records)record.attributeName&&generated.delete(record.attributeName)},Observer=pre.ownerDocument.defaultView?.MutationObserver,observer=Observer?new Observer(releaseOwnership):void 0;return observer?.observe(pre,{attributes:!0,attributeFilter:[...generated.keys()]}),()=>{releaseOwnership(observer?.takeRecords()??[]),observer?.disconnect();for(const[name,value]of generated)pre.getAttribute(name)===value&&pre.removeAttribute(name)}},HighlightedCode=({children,codeLabel,wrap})=>{const containerRef=useRef(null);return useLayoutEffect(()=>{if(wrap||!containerRef.current)return;const restore=[...containerRef.current.querySelectorAll("pre")].map(pre=>decorateCodeRegion(pre,codeLabel));return()=>{for(const cleanup of restore)cleanup()}},[children,codeLabel,wrap]),_jsx("div",{ref:containerRef,children})},resolveCodeLabels=({codeLabel,copyLabel,copiedLabel,errorLabel})=>({codeLabel:codeLabel??"Code example",copyLabel:copyLabel??"Copy code to clipboard",copiedLabel:copiedLabel??"Code copied to clipboard",errorLabel:errorLabel??"Could not copy code. Select and copy it manually."}),renderCodeHeader=({code,copy,copyLabel,copiedLabel,errorLabel,label,language})=>!copy&&!label&&!language?null:_jsxs("figcaption",{className:"ui-code__header",children:[_jsxs("span",{"aria-hidden":"true",className:"ui-code__dots",children:[_jsx("span",{className:"ui-code__dot ui-code__dot--red"}),_jsx("span",{className:"ui-code__dot ui-code__dot--yellow"}),_jsx("span",{className:"ui-code__dot ui-code__dot--green"})]}),_jsxs("span",{className:"ui-code__meta",children:[language&&_jsx("span",{className:"ui-code__language",children:language}),label&&_jsx("span",{className:"ui-code__label",children:label})]}),copy&&_jsx(CodeCopyButton,{code,copiedLabel,copyLabel,errorLabel})]}),Code=({children,className,code,copy=!1,codeLabel,copyLabel,copiedLabel,errorLabel,highlighted=!1,label,language,theme="auto",variant="inline",wrap=!1,...props})=>{const labels=resolveCodeLabels({codeLabel,copyLabel,copiedLabel,errorLabel}),codeChildren=renderCodeChildren(code,children,language);return variant==="block"?_jsxs("figure",{className:composeClassName("ui-code ui-code--block",wrap&&"ui-code--wrap",className),"data-code-theme":theme,"data-language":language,"data-slot":"code","data-ui-code":!0,...props,children:[renderCodeHeader({code,copy,...labels,label,language}),highlighted?_jsx(HighlightedCode,{codeLabel:labels.codeLabel,wrap,children}):_jsx("pre",{...codeRegionProps(wrap,labels.codeLabel),children:_jsx("code",{children:codeChildren})})]}):_jsx("code",{className:composeClassName("ui-code ui-code--inline",className),"data-code-theme":theme,"data-language":language,"data-slot":"code",...props,children:code??children})},resolveCopyText=(button,target,value)=>{if(value!==void 0)return value;if(!target)return;const targetElement=button.ownerDocument.querySelector(target);return targetElement?.innerText??targetElement?.textContent??void 0},resolveCopyFeedback=(content,fallback)=>content??fallback,CopyButton=({children="Copy",className,copiedContent,copiedLabel="Copied to clipboard",errorContent,errorLabel="Could not copy to clipboard",label="Copy to clipboard",onClick,resetAfter=2e3,size="default",target,toast=!1,value,variant="outline",...props})=>{const{accessibleLabel,handleClick,state}=useCopyFeedback({copiedLabel,errorLabel,getValue:button=>resolveCopyText(button,target,value),label,onClick,resetAfter,toast});return _jsxs(Button,{"aria-label":accessibleLabel,className:composeClassName("ui-copy-button",className),"data-slot":"copy-button","data-state":state,"data-ui-copy-button":!0,onClick:handleClick,size,variant,...props,children:[_jsx("span",{"aria-hidden":"true","data-slot":"copy-idle",hidden:state!=="idle",children}),_jsx("span",{"aria-hidden":"true","data-slot":"copy-copied",hidden:state!=="copied",children:resolveCopyFeedback(copiedContent,copiedLabel)}),_jsx("span",{"aria-hidden":"true","data-slot":"copy-error",hidden:state!=="error",children:resolveCopyFeedback(errorContent,errorLabel)})]})};import{Combobox}from"./combobox.js";const Command=({className,glass=!1,...props})=>_jsx("div",{className:composeClassName("ui-command",glassClass("ui-command",glass),className),"data-ui-command":!0,...props}),ContextMenu=({className,glass=!1,...props})=>_jsx("menu",{className:composeClassName("ui-menu",glassSurfaceClass("ui-menu",glass),className),"data-surface":resolveSurface(glass),"data-ui-context-menu":!0,role:props.role??"menu",...props}),ColorPicker=({className,type="color",...props})=>_jsx("input",{className:composeClassName("ui-color-picker",className),type,...props}),formatDatePickerDisplayValue=(value,placeholder,locale,formatDate)=>{const date=parseCalendarDate(value);return!date||!value?placeholder:formatDate?formatDate(value):new Intl.DateTimeFormat(getCalendarLocale(locale||"en"),{day:"numeric",month:"short",timeZone:"UTC",year:"numeric"}).format(date)},stringifyDatePickerConstraint=value=>value===void 0?void 0:String(value),useDatePickerDisclosure=unavailable=>{const[state,setState]=useState({unavailable,open:!1});state.unavailable!==unavailable&&setState({unavailable,open:!1});const setOpen=useCallback(open=>{setState({unavailable,open:open&&!unavailable})},[unavailable]);return{open:state.open&&!unavailable,setOpen}},DatePicker=({className,defaultValue,disabled,formatDate,glass=!1,id,inputRef,labels,locale,max,min,name,onChange,onInvalid,onValueChange,placeholder,readOnly,required,value,...props})=>{const generatedId=useId(),datePickerId=id??generatedId,nativeInputId=`${datePickerId}-native`,popoverId=`${datePickerId}-popover`,rootRef=useRef(null),nativeInputRef=useRef(null),triggerRef=useRef(null),[internalValue,setInternalValue]=useState(defaultValue??""),{open:isOpen,setOpen}=useDatePickerDisclosure(disabled===!0||readOnly===!0),selectedValue=value??internalValue,hasSelectedValue=selectedValue!=="",dateLabels={...resolveDateControlLabels(locale||"en"),...labels},placeholderText=placeholder??dateLabels.chooseDate,maxStr=stringifyDatePickerConstraint(max),minStr=stringifyDatePickerConstraint(min),accessibleLabel=props["aria-label"];useEffect(()=>{const owner=nativeInputRef.current?.form;let active=!0,resetTimer;const reset=event=>{globalThis.clearTimeout(resetTimer),resetTimer=globalThis.setTimeout(()=>{!active||event.defaultPrevented||!nativeInputRef.current?.isConnected||(value===void 0&&setInternalValue(defaultValue??""),setOpen(!1))})};return owner?.addEventListener("reset",reset),()=>{active=!1,globalThis.clearTimeout(resetTimer),owner?.removeEventListener("reset",reset)}},[defaultValue,props.form,value,setOpen]),useEffect(()=>{if(!isOpen)return;const root=rootRef.current;if(!root)return;const owner=root.ownerDocument,handlePointerDown=event=>{event.composedPath().includes(root)||setOpen(!1)};return owner.addEventListener("mousedown",handlePointerDown),rootRef.current?.querySelector('[role="gridcell"][tabindex="0"]')?.focus({preventScroll:!0}),()=>{owner.removeEventListener("mousedown",handlePointerDown)}},[isOpen,setOpen]);const selectDate=nextValue=>{disabled||readOnly||(value===void 0&&setInternalValue(nextValue),onValueChange?.(nextValue),nativeInputRef.current&&(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value")?.set?.call(nativeInputRef.current,nextValue),nativeInputRef.current.dispatchEvent(new Event("input",{bubbles:!0})),nativeInputRef.current.dispatchEvent(new Event("change",{bubbles:!0}))),setOpen(!1),globalThis.setTimeout(()=>triggerRef.current?.focus()))};return _jsxs("div",{className:composeClassName("ui-date-picker-field",glass&&"ui-date-picker-field--glass",glass==="subtle"&&"ui-glass-subtle",glass==="strong"&&"ui-glass-strong",className),"data-placeholder":hasSelectedValue?void 0:"true","data-ui-date-picker":!0,"data-ui-glass-track":glass?!0:void 0,ref:rootRef,onKeyDown:event=>{!isOpen||event.key!=="Escape"||(event.preventDefault(),event.stopPropagation(),setOpen(!1),triggerRef.current?.focus({preventScroll:!0}))},children:[_jsx("input",{"aria-hidden":"true",className:"ui-date-picker ui-date-picker__native","data-ui-date-picker-native":!0,"data-ui-enhanced":"true",disabled,id:nativeInputId,max,min,name,onChange:event=>{value===void 0&&setInternalValue(event.currentTarget.value),onChange?.(event)},onInvalid:event=>{event.preventDefault(),triggerRef.current?.setAttribute("aria-invalid","true"),triggerRef.current?.focus(),onInvalid?.(event)},ref:node=>{nativeInputRef.current=node,setRefValue(inputRef,node)},required,readOnly,tabIndex:-1,type:"date",value:selectedValue,...props}),_jsxs("div",{className:"ui-date-picker__control","data-ui-date-picker-control":!0,children:[_jsxs("button",{"aria-controls":popoverId,"aria-expanded":isOpen,"aria-haspopup":"dialog","aria-label":accessibleLabel,"aria-labelledby":props["aria-labelledby"],"aria-describedby":props["aria-describedby"],"aria-disabled":readOnly?!0:void 0,"aria-required":required??void 0,className:"ui-input ui-date-picker ui-date-picker__trigger","data-ui-date-picker-trigger":!0,disabled,id:datePickerId,onClick:()=>{disabled||readOnly||setOpen(!isOpen)},onKeyDown:event=>{event.key!=="ArrowDown"||disabled||readOnly||(event.preventDefault(),setOpen(!0))},ref:triggerRef,type:"button",children:[_jsx("span",{"data-ui-date-picker-value":!0,children:formatDatePickerDisplayValue(selectedValue,placeholderText,locale,formatDate)}),_jsx("svg",{"aria-hidden":"true",className:"ui-date-picker__icon",fill:"none",viewBox:"0 0 24 24",children:_jsx("path",{d:"M7 2v3M17 2v3M3.5 9h17M5 4h14a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z"})})]}),_jsx("div",{"aria-label":dateLabels.chooseDate,className:"ui-date-picker__popover","data-state":isOpen?"open":"closed","data-ui-date-picker-popover":!0,hidden:!isOpen,id:popoverId,role:"dialog",children:_jsx(Calendar,{disabled,readOnly,labels:dateLabels,locale,max:maxStr,min:minStr,onValueChange:selectDate,value:selectedValue})})]})]})},setDateRangeConstraint=(input,property,value)=>{value?input[property]=value:input.removeAttribute(property)},getDateRangeState=(start,end)=>start?end?"complete":"selecting-end":"empty",syncDateRangePickerElement=root=>{const inputs=[...root.querySelectorAll("[data-ui-date-picker-native]")],start=inputs[0],end=inputs.at(-1);if(!(start&&end)||start===end)return{};const datePickers=root.querySelectorAll("[data-ui-date-picker]");datePickers[0]?.setAttribute("data-range-part","start"),datePickers[datePickers.length-1]?.setAttribute("data-range-part","end"),setDateRangeConstraint(end,"min",start.value),setDateRangeConstraint(start,"max",end.value),root.dataset.rangeState=getDateRangeState(start.value,end.value);const range={};return end.value&&(range.end=end.value),start.value&&(range.start=start.value),range},DateRangePicker=({className,onInput,onRangeChange,...props})=>{const rootRef=useRef(null);return useEffect(()=>{rootRef.current&&syncDateRangePickerElement(rootRef.current)}),_jsx("div",{className:composeClassName("ui-date-range-picker",className),"data-ui-date-range-picker":!0,onInput:event=>{onInput?.(event),onRangeChange?.(syncDateRangePickerElement(event.currentTarget))},ref:rootRef,...props})},DialogCloseContext=createContext(null),DialogHeader=({className,...props})=>_jsx("header",{...props,className:composeClassName("ui-dialog-header",className),"data-slot":"dialog-header"}),DialogTitle=({as:Tag="h2",className,...props})=>_jsx(Tag,{...props,className:composeClassName("ui-dialog-title",className),"data-slot":"dialog-title"}),DialogBody=({className,...props})=>_jsx("div",{...props,className:composeClassName("ui-dialog-body",className),"data-slot":"dialog-body"}),DialogFooter=({className,...props})=>_jsx("footer",{...props,className:composeClassName("ui-dialog-footer",className),"data-slot":"dialog-footer"}),DialogClose=({className,onClick,...props})=>{const close=use(DialogCloseContext);return _jsx(Button,{...props,className:composeClassName("ui-dialog-close",className),"data-slot":"dialog-close",onClick:event=>{onClick?.(event),!event.defaultPrevented&&(close?close():event.currentTarget.closest("dialog")?.close())}})},Dialog=({children,className,defaultOpen,dismissOnEscape,dismissOnOutsidePress,glass=!1,layout="centered",onCancel,onClick,onClose,onOpenChange,onPointerDown,open,...props})=>{const dialog=useDialog({defaultOpen,dismissOnEscape,dismissOnOutsidePress,onOpenChange,open});return _jsx("dialog",{...dialog.dialogProps,...props,className:composeClassName("ui-dialog",layout==="fullscreen"&&"ui-dialog--fullscreen",glassSurfaceClass("ui-dialog",glass),className),"data-layout":layout,"data-surface":resolveSurface(glass),onCancel:composeHandlers(onCancel,dialog.dialogProps.onCancel),onPointerDown:composeHandlers(onPointerDown,dialog.dialogProps.onPointerDown),onClick:composeHandlers(onClick,dialog.dialogProps.onClick),onClose:composeHandlers(onClose,dialog.dialogProps.onClose),children:_jsx(DialogCloseContext,{value:dialog.close,children})})},Drawer=({className,glass=!1,...props})=>_jsx("dialog",{className:composeClassName("ui-drawer",glassSurfaceClass("ui-drawer",glass),className),"data-surface":resolveSurface(glass),"data-ui-drawer":!0,...props}),DropdownMenu=({children,className,collisionPadding,defaultOpen,glass=!1,offset,onOpenChange,open,placement,positioning,...props})=>{const menu=useDropdownMenu({collisionPadding,defaultOpen,offset,onOpenChange,open,placement,positioning});return _jsx(DropdownMenuContext,{value:menu,children:_jsx("menu",{...menu.rootProps,...props,className:composeClassName("ui-menu",glassSurfaceClass("ui-menu",glass),className),"data-surface":resolveSurface(glass),"data-ui-dropdown-menu":!0,children})})},DropdownMenuTrigger=({onClick,onKeyDown,...props})=>{const menu=requireContext(use(DropdownMenuContext),"DropdownMenuTrigger");return _jsx("button",{...menu.triggerProps,...props,onClick:composeHandlers(onClick,menu.triggerProps.onClick),onKeyDown:composeHandlers(onKeyDown,menu.triggerProps.onKeyDown),type:props.type??"button"})},DropdownMenuContent=({className,onKeyDown,...props})=>{const menu=requireContext(use(DropdownMenuContext),"DropdownMenuContent");return _jsx("div",{...menu.panelProps,...props,className:composeClassName("ui-menu__content",className),onKeyDown:composeHandlers(onKeyDown,menu.panelProps.onKeyDown),role:props.role??"menu"})},DropdownMenuItem=({children,className,disabled=!1,onClick,status,...props})=>{const menu=requireContext(use(DropdownMenuContext),"DropdownMenuItem");return _jsxs("button",{...props,"aria-disabled":disabled||void 0,className:composeClassName("ui-menu__item",className),disabled,onClick:event=>{onClick?.(event),!event.defaultPrevented&&!disabled&&menu.close()},role:props.role??"menuitem",type:props.type??"button",children:[_jsx("span",{className:"ui-menu__item-label",children}),status&&_jsx("span",{className:"ui-menu__item-status",children:status})]})},DropdownMenuSeparator=({className,...props})=>_jsx("div",{className:composeClassName("ui-menu__separator",className),role:props.role??"separator",...props}),Empty=({className,glass=!1,variant="default",...props})=>_jsx("section",{className:composeClassName("ui-empty",variant==="compact"&&"ui-empty--compact",glassClass("ui-empty",glass),className),"data-variant":variant,...props}),renderIllustrationElement=(element,index)=>{if(element.kind==="circle")return _jsx("circle",{cx:element.cx,cy:element.cy,r:element.r},index);if(element.kind==="rounded-rect")return _jsx("rect",{height:element.height,rx:element.radius,width:element.width,x:element.x,y:element.y},index);const pointPairs=[];for(let pointIndex=0;pointIndex<element.points.length;pointIndex+=2){const x=element.points[pointIndex],y=element.points[pointIndex+1];if(x===void 0||y===void 0)break;pointPairs.push(`${x},${y}`)}return createElement(element.kind,{key:index,points:pointPairs.join(" ")})},Illustration=({className,label,size="md",tone="auto",variant="empty",...props})=>_jsx("span",{"aria-hidden":label?void 0:!0,"aria-label":label,className:composeClassName("ui-illustration",`ui-illustration--${variant}`,`ui-illustration--${tone}`,`ui-illustration--${size}`,className),role:label?"img":void 0,...props,children:_jsxs("svg",{"aria-hidden":"true",fill:"none",viewBox:"0 0 120 120",children:[_jsx("circle",{className:"ui-illustration__wash",cx:"60",cy:"60",r:"48"}),lumenIllustrations[variant].elements.map(renderIllustrationElement)]})}),resolveErrorStateAnnouncement=(announce,ariaLive,role)=>announce==="assertive"?{"aria-live":ariaLive??"assertive",role:role??"alert"}:announce==="polite"?{"aria-live":ariaLive??"polite",role:role??"status"}:{...ariaLive?{"aria-live":ariaLive}:{},...role?{role}:{}},ErrorStateGraphic=({graphic,kind,layout})=>graphic===!1?null:_jsx("div",{"aria-hidden":"true",className:"ui-error-state__graphic","data-slot":"error-state-graphic",children:graphic??_jsx(Illustration,{size:layout==="compact"?"sm":"md",variant:kind})}),ErrorStateContent=({children,description,headingLevel,reference,referenceLabel,title,titleId})=>_jsxs("div",{className:"ui-error-state__content","data-slot":"error-state-content",children:[createElement(`h${headingLevel}`,{className:"ui-error-state__title","data-slot":"error-state-title",id:titleId},title),description&&_jsx("p",{className:"ui-error-state__description","data-slot":"error-state-description",children:description}),children&&_jsx("div",{className:"ui-error-state__details","data-slot":"error-state-details",children}),reference&&_jsxs("p",{className:"ui-error-state__reference","data-slot":"error-state-reference",children:[_jsxs("span",{children:[referenceLabel,":"]})," ",_jsx("code",{children:reference})]})]}),ErrorStateActions=({actions})=>actions?_jsx("div",{className:"ui-error-state__actions","data-slot":"error-state-actions",children:actions}):null,ErrorState=({"aria-live":ariaLive,actions,announce,children,className,description,graphic,headingLevel,id,kind,layout,reference,referenceLabel,role,title,...props})=>{const resolvedAnnounce=announce??"off",resolvedHeadingLevel=headingLevel??2,resolvedKind=kind??"error",resolvedLayout=layout??"default",resolvedReferenceLabel=referenceLabel??"Reference",titleId=id?`${id}-title`:void 0,announcementProps=resolveErrorStateAnnouncement(resolvedAnnounce,ariaLive,role);return _jsxs("section",{"aria-label":titleId?void 0:title,"aria-labelledby":titleId,className:composeClassName("ui-error-state",`ui-error-state--${resolvedKind}`,`ui-error-state--${resolvedLayout}`,className),"data-kind":resolvedKind,"data-layout":resolvedLayout,"data-ui-error-state":!0,id,...announcementProps,...props,children:[_jsx(ErrorStateGraphic,{graphic,kind:resolvedKind,layout:resolvedLayout}),_jsx(ErrorStateContent,{description,headingLevel:resolvedHeadingLevel,reference,referenceLabel:resolvedReferenceLabel,title,titleId,children}),_jsx(ErrorStateActions,{actions})]})},KanbanBoard=({className,tabIndex=0,...props})=>_jsx("section",{"aria-orientation":"horizontal",className:composeClassName("ui-kanban-board ui-kanban",className),"data-ui-kanban":!0,tabIndex,...props}),KanbanColumn=({className,value,...props})=>_jsx("section",{className:composeClassName("ui-kanban__column",className),"data-ui-kanban-column":value,...props}),ErrorSummary=({className,errors,heading="There is a problem",id="ui-error-summary",...props})=>{const normalizedErrors=normalizeLumenFormErrors(errors),allErrors=[...normalizedErrors.form.map(message=>({message})),...normalizedErrors.fields],headingId=`${id}-heading`;return _jsxs("section",{"aria-labelledby":headingId,className:composeClassName("ui-error-summary",className),"data-ui-error-summary":!0,hidden:allErrors.length===0,id,tabIndex:-1,...props,children:[_jsx("h2",{id:headingId,children:heading}),_jsx("ul",{children:allErrors.map(error=>_jsx("li",{children:error.controlId?_jsx("a",{href:`#${error.controlId}`,children:error.message}):error.message},`${error.name??"form"}:${error.controlId??""}:${error.message}`))})]})},Field=({"aria-describedby":ariaDescribedby,className,controlId,describedBy,glass=!1,invalid=!1,...props})=>{const fieldDescribedBy=[ariaDescribedby,describedBy].filter(Boolean).join(" ")||void 0;return _jsx("div",{"aria-describedby":ariaDescribedby,className:composeClassName("ui-field",glassClass("ui-field",glass),className),"data-invalid":invalid?"true":void 0,"data-ui-field":!0,"data-ui-field-control":controlId,"data-ui-field-describedby":fieldDescribedBy,...props})},FieldError=({children,className,hidden,message,...props})=>{const content=message??children;return _jsx("p",{className:composeClassName("ui-field-error",className),"data-ui-field-error":!0,hidden:hidden??!content,...props,children:content})},Form=({"aria-busy":ariaBusy,className,enhance=!1,status="idle",...props})=>_jsx("form",{"aria-busy":ariaBusy??(status==="submitting"?!0:void 0),className:composeClassName("ui-form",className),"data-status":status,"data-ui-form":enhance?!0:void 0,...props}),HoverCard=({className,glass=!1,...props})=>_jsx("aside",{className:composeClassName("ui-hover-card",glassSurfaceClass("ui-hover-card",glass),className),"data-surface":resolveSurface(glass),"data-ui-hover-card":!0,...props}),Icon=({name,...props})=>_jsx(IconView,{...props,icon:name?getLumenIcon(name):void 0}),getPasswordFieldDescribedBy=(ariaDescribedBy,hintId,errorId)=>[ariaDescribedBy,hintId,errorId].filter(Boolean).join(" ")||void 0,usePasswordVisibility=inputRef=>{const[visible,setVisible]=useState(!1);return useEffect(()=>{const form=inputRef.current?.form;if(!form)return;const handleReset=()=>{setVisible(!1)},hideAfterSuccess=()=>{form.dataset.status==="success"&&setVisible(!1)};form.addEventListener("reset",handleReset);const observer=new MutationObserver(hideAfterSuccess);return observer.observe(form,{attributeFilter:["data-status"],attributes:!0}),()=>{form.removeEventListener("reset",handleReset),observer.disconnect()}},[inputRef]),{toggleVisibility:()=>{setVisible(current=>!current),inputRef.current?.focus({preventScroll:!0})},visible}},PasswordFieldControl=({controlId,describedBy,error,forwardedRef,hideLabel,inputProps,inputRef,name,showLabel,toggleVisibility,visible})=>_jsxs("div",{className:"ui-password-field__control","data-ui-password-field":!0,children:[_jsx(Input,{...inputProps,"aria-describedby":describedBy,"aria-invalid":error?!0:void 0,id:controlId,name,ref:node=>{inputRef.current=node,setRefValue(forwardedRef,node)},type:visible?"text":"password"}),_jsx(Button,{"aria-controls":controlId,"aria-label":visible?hideLabel:showLabel,"aria-pressed":visible,"data-ui-password-toggle":!0,onClick:toggleVisibility,size:"icon",type:"button",variant:"ghost",children:_jsx("span",{"aria-hidden":"true",children:visible?"Hide":"Show"})})]}),PasswordFieldMessages=({error,errorId,hint,hintId})=>_jsxs(_Fragment,{children:[hint&&_jsx("p",{className:"ui-field__hint","data-ui-field-hint":!0,id:hintId,children:hint}),_jsx(FieldError,{id:errorId,message:error})]}),PasswordField=({"aria-describedby":ariaDescribedby,className,error,hideLabel="Hide password",hint,id,label="Password",name,ref,showLabel="Show password",...props})=>{const generatedId=useId(),controlId=id??`ui-password-${generatedId}`,hintId=hint?`${controlId}-hint`:void 0,errorId=`${controlId}-error`,describedBy=getPasswordFieldDescribedBy(ariaDescribedby,hintId,error?errorId:void 0),inputRef=useRef(null),{toggleVisibility,visible}=usePasswordVisibility(inputRef);return _jsxs(Field,{className:composeClassName("ui-password-field",className),controlId,invalid:!!error,...describedBy?{describedBy}:{},children:[_jsx(Label,{htmlFor:controlId,children:label}),_jsx(PasswordFieldControl,{controlId,describedBy,error,forwardedRef:ref,hideLabel,inputProps:props,inputRef,name,showLabel,toggleVisibility,visible}),_jsx(PasswordFieldMessages,{error,errorId,hint,hintId})]})},InputGroup=({className,...props})=>_jsx("div",{className:composeClassName("ui-input-group",className),...props}),InputOTP=({"aria-invalid":ariaInvalid,className,defaultValue,disabled=!1,inputClassName,inputMode="numeric",length=6,maxLength=length,pattern="[0-9]*",ref,value,...props})=>{const otp=useInputOTP({defaultValue:toInputValue(defaultValue),disabled,inputMode,inputRef:ref,invalid:ariaInvalid===!0||ariaInvalid==="true",length,pattern,value:toInputValue(value)});return _jsxs("div",{...otp.rootProps,className:composeClassName(otp.rootProps.className,className),children:[_jsx("input",{...otp.getInputProps({...props,"aria-invalid":ariaInvalid,className:inputClassName,disabled,inputMode,maxLength,pattern})}),_jsx("div",{...otp.segmentsProps,children:otp.segmentIndexes.map(index=>_jsx("button",{...otp.getSegmentProps(index),type:"button",children:_jsx("span",{"data-ui-input-otp-char":!0,children:otp.getSegmentChar(index)})},index))})]})},NumberField=({className,ref,type="number",...props})=>_jsx("input",{className:composeClassName("ui-input ui-number-field",className),ref,type,...props}),Item=({as="div",className,glass=!1,...props})=>createElement(as,{className:composeClassName("ui-item",glassClass("ui-item",glass),className),"data-slot":"item",...props}),Kbd=({className,...props})=>_jsx("kbd",{className:composeClassName("ui-kbd",className),...props}),Marker=({className,variant="default",...props})=>_jsx("span",{className:composeClassName("ui-marker",variantClass("ui-marker",variant),className),"data-variant":variant,...props}),Menubar=({className,glass=!1,...props})=>_jsx("nav",{className:composeClassName("ui-menubar",glassSurfaceClass("ui-menubar",glass),className),"data-surface":resolveSurface(glass),"data-ui-menubar":!0,...props}),Message=({className,from="assistant",...props})=>_jsx("article",{className:composeClassName("ui-message",`ui-message--${from}`,className),"data-from":from,...props}),MessageScroller=({className,glass=!1,autoScroll=!1,scrollThreshold=32,...props})=>{const rootRef=useRef(null);return useEffect(()=>{const root=rootRef.current;return!root||!autoScroll?void 0:createLumenMessageScrollerController(root,{threshold:scrollThreshold}).destroy},[autoScroll,scrollThreshold]),_jsx("div",{ref:rootRef,className:composeClassName("ui-message-scroller",glassClass("ui-message-scroller",glass),className),...props})},NativeSelect=({children,className,defaultValue,options=emptyOptions,placeholder,ref,value,visualSize="default",...props})=>{const placeholderDefaultValue=placeholder&&value===void 0&&defaultValue===void 0?"":void 0;return _jsxs("select",{className:composeClassName("ui-select",visualSize==="sm"&&"ui-select--sm",visualSize==="lg"&&"ui-select--lg",className),defaultValue:defaultValue??placeholderDefaultValue,ref,value,...props,children:[placeholder&&_jsx("option",{disabled:!0,value:"",children:placeholder}),children,options.map(normalizeOption).map(option=>_jsx("option",{disabled:option.disabled,value:option.value,children:option.label},option.value))]})},emptyPhoneInputProps={},phoneInputSizeModifiers=visualSize=>visualSize==="sm"?{inputClass:"ui-input--sm",selectClass:"ui-select--sm"}:visualSize==="lg"?{inputClass:"ui-input--lg",selectClass:"ui-select--lg"}:{inputClass:void 0,selectClass:void 0},getPhoneInputOptions=locale=>locale===void 0?{}:{locale},getBooleanAttribute=value=>value?!0:void 0,CountryFlag=({regionCode,decorative=!1,className,...props})=>{const source=getLumenPhoneFlagSource(regionCode);return _jsx("span",{...props,"aria-hidden":decorative||void 0,"aria-label":decorative?void 0:props["aria-label"]??regionCode.toUpperCase(),className:composeClassName("ui-country-flag",className),"data-slot":"country-flag",role:decorative?void 0:"img",children:source?_jsx("img",{alt:"",height:18,src:source,width:24}):regionCode.toUpperCase().slice(0,2)})},PhoneNumber=({value,link=!1,className,...props})=>{const content=_jsxs(_Fragment,{children:[_jsx(CountryFlag,{decorative:!0,regionCode:value.country.regionCode}),_jsx("span",{children:formatLumenPhoneNumber(value)||"\u2014"})]}),classes=composeClassName("ui-phone-number",className);return link&&value.isValid&&value.e164?_jsx("a",{...props,className:classes,href:`tel:${value.e164}`,title:value.country.displayName,children:content}):_jsx("span",{...props,className:classes,title:value.country.displayName,children:content})},resolvePhoneError=(errorMessage,showValidationError,value,invalidNumberMessage)=>{if(errorMessage)return errorMessage;if(showValidationError&&value.nationalNumber.length>0&&!value.isValid)return invalidNumberMessage},resolvePhoneAria=(inputProps,invalid,errorId)=>({"aria-describedby":[inputProps["aria-describedby"],invalid?errorId:void 0].filter(Boolean).join(" ")||void 0,"aria-errormessage":invalid?errorId:inputProps["aria-errormessage"],"aria-invalid":invalid?!0:inputProps["aria-invalid"]}),PhoneNumberInput=({controlId,errorId,hasExplicitId,inputClass,inputProps,inputRef,invalid,isDisabled,isReadOnly,name,numberRef,onChange,phoneValue,placeholder,required})=>_jsx("input",{...inputProps,...resolvePhoneAria(inputProps,invalid,errorId),autoComplete:inputProps.autoComplete??"tel-national","aria-label":inputProps["aria-label"]??(hasExplicitId?void 0:placeholder),className:composeClassName("ui-input ui-phone-input__number",inputClass,inputProps.className),disabled:isDisabled,id:controlId,inputMode:"tel",name,onChange,placeholder,readOnly:isReadOnly,ref:node=>{numberRef.current=node,setRefValue(inputRef,node)},required:required??inputProps.required,type:"tel",value:phoneValue.nationalNumber}),PhoneCountryValue=({disabled,readOnly,form,name,value})=>readOnly&&!disabled?_jsx("input",{form,name,type:"hidden",value}):null,MetadataPhoneInput=({className,countryOptions,countryLabel,countryName,disabled,readOnly,required,errorMessage,id,inputProps=emptyPhoneInputProps,inputRef,defaultCountryValue,defaultValue,invalidNumberMessage,locale,name,onValueChange,placeholder,showValidationError,visualSize,value,...props})=>{const{selectClass,inputClass}=phoneInputSizeModifiers(visualSize),isDisabled=[disabled,inputProps.disabled].some(Boolean),isReadOnly=[readOnly,inputProps.readOnly].some(Boolean),generatedId=useId(),controlId=id??inputProps.id??generatedId,errorId=`${generatedId}-error`,numberRef=useRef(null),selectRef=useRef(null),phoneOptions=useMemo(()=>getPhoneInputOptions(locale),[locale]),metadataCountries=useMemo(()=>countryOptions??getLumenPhoneCountries(phoneOptions),[countryOptions,phoneOptions]),initialCountry=useMemo(()=>resolveReactPhoneInputCountry(metadataCountries,defaultCountryValue,locale,value),[defaultCountryValue,locale,metadataCountries,value]),[internalValue,setInternalValue]=useState(()=>defaultValue?resolveReactPhoneInputValue(metadataCountries,initialCountry,defaultValue,phoneOptions):{country:initialCountry,e164:null,isValid:!1,nationalNumber:""}),phoneValue=value===void 0||value.country.regionCode===initialCountry.regionCode?value??internalValue:resolveReactPhoneInputValue(metadataCountries,initialCountry,value.nationalNumber,phoneOptions),resolvedOptions=metadataCountries.map(country=>({disabled:!1,label:`${country.displayName} (${country.callingCode})`,value:country.regionCode})),commitValue=nextValue=>{value===void 0&&setInternalValue(nextValue),onValueChange?.(nextValue)},handleCountryChange=event=>{const selectedCountry=metadataCountries.find(country=>country.regionCode===event.currentTarget.value||country.callingCode===event.currentTarget.value);selectedCountry&&commitValue(resolveLumenPhoneNumber(selectedCountry,phoneValue.nationalNumber,phoneOptions))},handleNumberChange=event=>{commitValue(resolveReactPhoneInputValue(metadataCountries,phoneValue.country,event.currentTarget.value,phoneOptions))},effectiveError=resolvePhoneError(errorMessage,showValidationError,phoneValue,invalidNumberMessage),invalid=!!effectiveError;return useEffect(()=>{numberRef.current?.setCustomValidity(effectiveError??"")},[effectiveError]),useEffect(()=>{const form=numberRef.current?.form;let active=!0,resetTimer;const reset=event=>{globalThis.clearTimeout(resetTimer),resetTimer=globalThis.setTimeout(()=>{const input=numberRef.current;if(!active||event.defaultPrevented||!input?.isConnected)return;if(value===void 0){const country=resolveReactPhoneInputCountry(metadataCountries,defaultCountryValue,locale,void 0);setInternalValue(resolveReactPhoneInputValue(metadataCountries,country,defaultValue??"",phoneOptions));return}const select=selectRef.current;select&&(select.value=phoneValue.country.regionCode),input.value=phoneValue.nationalNumber})};return form?.addEventListener("reset",reset),()=>{active=!1,globalThis.clearTimeout(resetTimer),form?.removeEventListener("reset",reset)}},[defaultCountryValue,defaultValue,inputProps.form,locale,metadataCountries,phoneOptions,phoneValue,value]),_jsxs(_Fragment,{children:[_jsxs("div",{className:composeClassName("ui-phone-input ui-input-group",className),"data-disabled":getBooleanAttribute(isDisabled),"data-invalid":getBooleanAttribute(invalid),"data-phone-enhanced":"true","data-readonly":getBooleanAttribute(isReadOnly),"data-size":visualSize,"data-slot":"phone-input",...props,children:[_jsxs("span",{className:"ui-phone-input__picker","data-slot":"phone-country",children:[_jsxs("span",{"aria-hidden":"true",className:"ui-phone-input__selection",children:[_jsx(CountryFlag,{decorative:!0,regionCode:phoneValue.country.regionCode}),_jsx("span",{children:phoneValue.country.callingCode}),_jsx("span",{className:"ui-phone-input__chevron"})]}),_jsx("select",{"aria-label":countryLabel,className:composeClassName("ui-select ui-phone-input__country",selectClass),disabled:isDisabled||isReadOnly||metadataCountries.length===0,form:inputProps.form,name:countryName,onChange:handleCountryChange,ref:selectRef,value:phoneValue.country.regionCode,children:resolvedOptions.map(option=>_jsx("option",{disabled:option.disabled,value:option.value,children:option.label},option.value))})]}),_jsx(PhoneNumberInput,{controlId,errorId,hasExplicitId:[id,inputProps.id].some(Boolean),inputClass,inputProps,inputRef,invalid,isDisabled,isReadOnly,name,numberRef,onChange:handleNumberChange,phoneValue,placeholder,required}),_jsx(PhoneCountryValue,{disabled:isDisabled,form:inputProps.form,name:countryName,readOnly:isReadOnly,value:phoneValue.country.regionCode})]}),effectiveError&&_jsx("span",{className:"ui-phone-input__error",id:errorId,role:"alert",children:effectiveError})]})},resolveLegacyPhoneAttributes=(inputProps,props)=>({autoComplete:inputProps.autoComplete??"tel-national",disabled:props.disabled??inputProps.disabled,id:props.id??inputProps.id,readOnly:props.readOnly??inputProps.readOnly,required:props.required??inputProps.required}),resolveLegacyPhoneCountry=(options,value)=>options.find(option=>option.value===value)?.value??options.find(option=>!option.disabled)?.value??"",useLegacyPhoneCountry=(countries,defaultCountryValue,form)=>{const options=countries.map(normalizeOption),[countryValue,setCountryValue]=useState(()=>resolveLegacyPhoneCountry(options,defaultCountryValue)),submissionCountry=resolveLegacyPhoneCountry(options,countryValue),countryRef=useRef(null);return useEffect(()=>{const form2=countryRef.current?.form;let active=!0;queueMicrotask(()=>{active&&setCountryValue(countryRef.current?.value??"")});const reset=event=>{queueMicrotask(()=>{active&&!event.defaultPrevented&&setCountryValue(countryRef.current?.value??"")})};return form2?.addEventListener("reset",reset),()=>{active=!1,form2?.removeEventListener("reset",reset)}},[countries,defaultCountryValue,form]),{countryRef,options,setCountryValue,submissionCountry}},LegacyPhoneInput=({className,countries,countryOptions:_countryOptions,disabled,readOnly,required,errorMessage:_errorMessage,id,inputProps=emptyPhoneInputProps,inputRef,countryLabel="Country code",countryName="country",defaultCountryValue,defaultValue,invalidNumberMessage:_invalidNumberMessage,locale:_locale,name="phone",onValueChange:_onValueChange,placeholder="Phone number",showValidationError:_showValidationError,visualSize="default",value:_value,...props})=>{const{inputClass,selectClass}=phoneInputSizeModifiers(visualSize),numberAttributes=resolveLegacyPhoneAttributes(inputProps,{disabled,readOnly,required,id}),{countryRef,options,setCountryValue,submissionCountry}=useLegacyPhoneCountry(countries,defaultCountryValue,inputProps.form);return _jsxs("div",{className:composeClassName("ui-phone-input ui-input-group",className),...props,"data-disabled":getBooleanAttribute([disabled,inputProps.disabled].some(Boolean)),"data-readonly":getBooleanAttribute([readOnly,inputProps.readOnly].some(Boolean)),"data-size":visualSize,"data-slot":"phone-input",children:[_jsx("span",{className:"ui-phone-input__picker",children:_jsx("select",{"aria-label":countryLabel,className:composeClassName("ui-select ui-phone-input__country",selectClass),defaultValue:defaultCountryValue,disabled:[disabled,readOnly,inputProps.disabled,inputProps.readOnly].some(Boolean),form:inputProps.form,name:countryName,onChange:event=>{setCountryValue(event.currentTarget.value)},ref:countryRef,children:options.map(option=>_jsx("option",{disabled:option.disabled,value:option.value,children:option.label},option.value))})}),_jsx("input",{...inputProps,...numberAttributes,ref:inputRef,className:composeClassName("ui-input ui-phone-input__number",inputClass),defaultValue,inputMode:"tel",name,placeholder,type:"tel"}),_jsx(PhoneCountryValue,{disabled:[disabled,inputProps.disabled].some(Boolean),form:inputProps.form,name:countryName,readOnly:[readOnly,inputProps.readOnly].some(Boolean),value:submissionCountry})]})},PhoneInput=props=>props.countries?_jsx(LegacyPhoneInput,{...props,countries:props.countries}):_jsx(MetadataPhoneInput,{...props,countryLabel:props.countryLabel??"Country code",countryName:props.countryName??"country",defaultCountryValue:props.defaultCountryValue??"US",invalidNumberMessage:props.invalidNumberMessage??"Enter a complete phone number.",name:props.name??"phone",placeholder:props.placeholder??"Phone number",showValidationError:props.showValidationError??!0,visualSize:props.visualSize??"default"}),NavigationMenu=({className,glass=!1,variant="default",...props})=>_jsx("nav",{className:composeClassName("ui-navigation-menu",variant==="unstyled"&&"ui-navigation-menu--unstyled",glassSurfaceClass("ui-navigation-menu",glass),className),"data-slot":"navigation-menu","data-surface":resolveSurface(glass),"data-ui-navigation-menu":!0,"data-variant":variant,...props}),ContextNavigation=({children,className,context,variant="default",...props})=>_jsxs("div",{className:composeClassName("ui-context-navigation",variant==="unstyled"&&"ui-context-navigation--unstyled",className),"data-slot":"context-navigation","data-variant":variant,...props,children:[context&&_jsx("div",{className:"ui-context-navigation__context","data-slot":"context-navigation-context",children:context}),children]}),Pagination=({"aria-label":ariaLabel="Pagination",className,...props})=>_jsx("nav",{"aria-label":ariaLabel,className:composeClassName("ui-pagination",className),...props}),Popover=({children,className,collisionPadding,defaultOpen,glass=!1,offset,onOpenChange,open,placement,positioning,...props})=>{const popover=usePopover({collisionPadding,defaultOpen,offset,onOpenChange,open,placement,positioning});return _jsx(PopoverContext,{value:popover,children:_jsx("div",{...popover.rootProps,...props,className:composeClassName("ui-popover",glassSurfaceClass("ui-popover",glass),className),"data-surface":resolveSurface(glass),"data-ui-popover":!0,children})})},PopoverTrigger=({onClick,onKeyDown,...props})=>{const popover=requireContext(use(PopoverContext),"PopoverTrigger");return _jsx(Button,{...popover.triggerProps,...props,onClick:composeHandlers(onClick,popover.triggerProps.onClick),onKeyDown:composeHandlers(onKeyDown,popover.triggerProps.onKeyDown),type:props.type??"button"})},PopoverPanel=({className,onKeyDown,...props})=>{const popover=requireContext(use(PopoverContext),"PopoverPanel");return _jsx("div",{...popover.panelProps,...props,className:composeClassName("ui-popover__panel",className),onKeyDown:composeHandlers(onKeyDown,popover.panelProps.onKeyDown)})},RadioGroup=({className,...props})=>_jsx("fieldset",{className:composeClassName("ui-radio-group",className),"data-ui-radio-group":!0,...props}),renderResizablePane=(child,index,panelProps)=>{if(isValidElement(child)){const childProps=child.props;return cloneElement(child,{...panelProps,className:composeClassName(childProps.className,panelProps.className),style:{...childProps.style,...panelProps.style}})}return _jsx("div",{...panelProps,children:child})},Resizable=({children,className,defaultSizes,direction="horizontal",maxSize,minSize,resetOnDoubleClick=!0,...props})=>{const panes=Children.toArray(children),resizable=useResizable({defaultSizes,direction,maxSize,minSize,panelCount:panes.length,resetOnDoubleClick});return _jsx("div",{...props,...resizable.rootProps,className:composeClassName(resizable.rootProps.className,className),children:panes.map((child,index)=>_jsxs(Fragment,{children:[renderResizablePane(child,index,resizable.getPanelProps(index)),index<panes.length-1&&_jsx("button",{...resizable.getHandleProps(index),type:"button"})]},index))})},RichTextEditor=({className,glass=!1,...props})=>_jsx("section",{className:composeClassName("ui-rich-text-editor",glassClass("ui-rich-text-editor",glass),className),"data-ui-rich-text-editor":!0,...props}),ScrollArea=({className,glass=!1,...props})=>_jsx("div",{className:composeClassName("ui-scroll-area",glassClass("ui-scroll-area",glass),className),...props}),ScrollProgress=({"aria-label":ariaLabel="Reading progress",className,position="top",...props})=>{const rootRef=useRef(null);return useEffect(()=>{const root=rootRef.current;if(!root)return;let frame=0;const update=()=>{frame=0;const scrollingElement=document.scrollingElement??document.documentElement,maximum=scrollingElement.scrollHeight-scrollingElement.clientHeight,percentage=maximum>0?Math.min(100,Math.max(0,scrollingElement.scrollTop/maximum*100)):0,bar=root.querySelector(".ui-scroll-progress__bar");root.setAttribute("aria-valuenow",`${Math.round(percentage)}`),bar&&(bar.style.transform=`scaleX(${percentage/100})`)},scheduleUpdate=()=>{frame||(frame=window.requestAnimationFrame(update))};return scheduleUpdate(),window.addEventListener("resize",scheduleUpdate,{passive:!0}),window.addEventListener("scroll",scheduleUpdate,{passive:!0}),()=>{frame&&window.cancelAnimationFrame(frame),window.removeEventListener("resize",scheduleUpdate),window.removeEventListener("scroll",scheduleUpdate)}},[]),_jsx("div",{"aria-label":ariaLabel,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":0,className:composeClassName("ui-scroll-progress",position==="bottom"&&"ui-scroll-progress--bottom",className),"data-position":position,"data-ui-scroll-progress":!0,ref:rootRef,role:"progressbar",...props,children:_jsx("span",{className:"ui-scroll-progress__bar"})})},Schedule=({className,glass=!1,...props})=>_jsx("section",{className:composeClassName("ui-schedule",glassClass("ui-schedule",glass),className),"data-ui-schedule":!0,...props}),SearchField=({className,ref,type="search",...props})=>_jsx("input",{className:composeClassName("ui-input ui-search-field",className),ref,type,...props}),getSelectSizeClass=size=>size==="sm"?"ui-select--sm":size==="lg"?"ui-select--lg":!1,Select=({children,className,defaultValue,disabled=!1,glass=!1,id,inputRef,name,onChange,onValueChange,options=emptyOptions,placeholder,required=!1,visualSize="default",value,...props})=>{const select=useSelect({defaultValue,disabled,id,name,onValueChange,options,placeholder,required,value}),sizeClass=getSelectSizeClass(visualSize);return _jsxs("div",{...select.rootProps,className:composeClassName("ui-select-field",glassClass("ui-select-field",glass),className),"data-ui-glass-track":glass?!0:void 0,children:[_jsxs("select",{...select.nativeSelectProps,...props,className:composeClassName("ui-select ui-select__native",sizeClass),onChange:composeHandlers(onChange,select.nativeSelectProps.onChange),ref:inputRef,children:[placeholder&&_jsx("option",{"data-ui-select-placeholder":!0,disabled:!0,value:"",children:placeholder}),children,select.options.map(option=>_jsx("option",{disabled:option.disabled,value:option.value,children:option.label},option.value))]}),_jsxs("div",{...select.controlProps,className:"ui-select__control",children:[_jsx("button",{...select.triggerProps,"aria-label":props["aria-label"],"aria-labelledby":props["aria-labelledby"],"aria-describedby":props["aria-describedby"],"aria-invalid":props["aria-invalid"],"aria-errormessage":props["aria-errormessage"],className:composeClassName("ui-select ui-select__trigger",sizeClass),type:select.triggerProps.type??"button",children:_jsx("span",{"data-ui-select-value":!0,children:select.triggerText})}),_jsx("div",{...select.listProps,className:"ui-select__list",children:select.options.map(option=>{const optionProps=select.getOptionProps(option);return _jsx("button",{...optionProps,type:optionProps.type??"button",children:option.label},option.value)})})]})]})},groupListBoxOptions=options=>{const groups=[];return options.forEach((option,index)=>{const currentGroup=groups.at(-1);if(!currentGroup||currentGroup.label!==option.section){groups.push({...option.section?{label:option.section}:{},options:[{...option,index}]});return}currentGroup.options.push({...option,index})}),groups},getListBoxGroupKey=group=>{const values=group.options.map(option=>option.value).join("|");return group.label?`${group.label}:${values}`:values},optionalTrue=value=>value?!0:void 0,ListBoxNativeOptions=({groups})=>groups.map(group=>{const options=group.options.map(option=>_jsx("option",{disabled:option.disabled,value:option.value,children:option.label},option.value));return group.label?_jsx("optgroup",{label:group.label,children:options},getListBoxGroupKey(group)):_jsx(Fragment,{children:options},getListBoxGroupKey(group))}),ListBoxVisibleOptions=({activeIndex,controlId,emptyMessage,groups,loading,onSelect,selectedValues})=>loading?null:groups.length?groups.map(group=>{const groupKey=getListBoxGroupKey(group),safeGroupKey=groupKey.replaceAll(/[^a-zA-Z0-9_-]/g,"-"),groupLabelId=group.label?`${controlId}-group-${safeGroupKey}`:void 0,options=group.options.map(option=>_jsx("div",{"aria-disabled":option.disabled?!0:void 0,"aria-selected":selectedValues.has(option.value),className:composeClassName("ui-list-box__option",option.index===activeIndex&&"ui-list-box__option--active"),"data-active":option.index===activeIndex?"true":void 0,"data-ui-list-box-option":!0,"data-value":option.value,onClick:()=>{onSelect(option.index)},role:"option",children:option.label},option.value));return group.label?_jsxs("div",{"aria-labelledby":groupLabelId,role:"group",children:[_jsx("div",{className:"ui-list-box__section",id:groupLabelId,children:group.label}),options]},groupKey):_jsx(Fragment,{children:options},groupKey)}):_jsx("div",{"aria-disabled":"true",className:"ui-list-box__empty",role:"option",children:emptyMessage}),normalizeListBoxValues=value=>value===void 0?[]:Array.isArray(value)?value:[value],findLastEnabledOptionIndex=options=>{let lastEnabledIndex=-1;for(const[index,option]of options.entries())option.disabled||(lastEnabledIndex=index);return lastEnabledIndex},getListBoxSelectedValues=(controlledValue,internalValues)=>controlledValue===void 0?internalValues:normalizeListBoxValues(controlledValue),getListBoxSelectValue=(multiple,selectedValues)=>multiple?selectedValues:selectedValues[0]??"",ListBoxLabel=({controlId,label})=>label?_jsx("label",{className:"ui-label",htmlFor:controlId,children:label}):null,normalizeListBoxProps=({disabled=!1,emptyMessage="No options available",loading=!1,loadingMessage="Loading options",multiple=!1,options=emptyOptions,required=!1,selectionFollowsFocus=!1,...props})=>({disabled,emptyMessage,loading,loadingMessage,multiple,options,required,selectionFollowsFocus,...props}),ListBox=inputProps=>{const{className,defaultValue,disabled,emptyMessage,id,label,loading,loadingMessage,multiple,name,onValueChange,options,ref,required,selectionFollowsFocus,value,...props}=normalizeListBoxProps(inputProps),generatedId=useId(),controlId=id??`ui-list-box-${generatedId}`,normalizedOptions=options.map(option=>typeof option=="string"?{label:option,value:option}:option),optionGroups=groupListBoxOptions(normalizedOptions),[internalValues,setInternalValues]=useState(()=>normalizeListBoxValues(defaultValue)),selectedValues=getListBoxSelectedValues(value,internalValues),selectedSet=new Set(selectedValues),firstEnabledIndex=Math.max(0,normalizedOptions.findIndex(option=>!option.disabled)),[activeIndex,setActiveIndex]=useState(firstEnabledIndex),selectRef=useRef(null),typeaheadRef=useRef(""),typeaheadTimerRef=useRef(void 0),commitValues=nextValues=>{value===void 0&&setInternalValues(nextValues),onValueChange?.(nextValues);const select=selectRef.current;if(select){for(const option of select.options)option.selected=nextValues.includes(option.value);select.dispatchEvent(new Event("input",{bubbles:!0})),select.dispatchEvent(new Event("change",{bubbles:!0}))}},selectOption=index=>{const option=normalizedOptions[index];if(!option||option.disabled||disabled||loading)return;const optionValue=option.value;let nextValues;multiple?selectedSet.has(optionValue)?nextValues=selectedValues.filter(selectedValue=>selectedValue!==optionValue):nextValues=[...selectedValues,optionValue]:nextValues=[optionValue],commitValues(nextValues)},moveActive=direction=>{if(!normalizedOptions.length||loading)return;let nextIndex=activeIndex;for(const _option of normalizedOptions)if(nextIndex=(nextIndex+direction+normalizedOptions.length)%normalizedOptions.length,!normalizedOptions[nextIndex]?.disabled){setActiveIndex(nextIndex),selectionFollowsFocus&&selectOption(nextIndex);return}};useEffect(()=>()=>{typeaheadTimerRef.current&&clearTimeout(typeaheadTimerRef.current)},[]),useEffect(()=>{const form=selectRef.current?.form;if(!form||value!==void 0)return;const handleReset=()=>{setInternalValues(normalizeListBoxValues(defaultValue)),setActiveIndex(firstEnabledIndex)};return form.addEventListener("reset",handleReset),()=>{form.removeEventListener("reset",handleReset)}},[defaultValue,firstEnabledIndex,value]);const handleNavigationKey=key=>{if(key==="ArrowDown")moveActive(1);else if(key==="ArrowUp")moveActive(-1);else if(key==="Home")setActiveIndex(firstEnabledIndex),selectionFollowsFocus&&selectOption(firstEnabledIndex);else if(key==="End"){const lastEnabledIndex=findLastEnabledOptionIndex(normalizedOptions);lastEnabledIndex>=0&&(setActiveIndex(lastEnabledIndex),selectionFollowsFocus&&selectOption(lastEnabledIndex))}else if(key==="Enter"||key===" ")selectOption(activeIndex);else return!1;return!0},handleTypeaheadKey=event=>{if(event.key.length!==1||event.ctrlKey||event.metaKey||event.altKey)return!1;typeaheadRef.current+=event.key.toLowerCase(),typeaheadTimerRef.current&&clearTimeout(typeaheadTimerRef.current),typeaheadTimerRef.current=setTimeout(()=>{typeaheadRef.current=""},700);const nextIndex=normalizedOptions.findIndex(option=>!option.disabled&&option.label.toLowerCase().startsWith(typeaheadRef.current));return nextIndex>=0&&(setActiveIndex(nextIndex),selectionFollowsFocus&&selectOption(nextIndex)),!0},handleListKeyDown=event=>{(handleNavigationKey(event.key)||handleTypeaheadKey(event))&&event.preventDefault()};return _jsxs("div",{className:composeClassName("ui-list-box",className),"data-multiple":multiple?"true":void 0,"data-ui-list-box":!0,children:[_jsx(ListBoxLabel,{controlId,label}),_jsx("select",{...props,className:"ui-list-box__native","data-ui-enhanced":!0,"data-ui-list-box-native":!0,disabled:disabled||loading,id:controlId,multiple,name,ref:node=>{selectRef.current=node,setRefValue(ref,node)},required,value:getListBoxSelectValue(multiple,selectedValues),children:_jsx(ListBoxNativeOptions,{groups:optionGroups})}),_jsx("div",{"aria-busy":optionalTrue(loading),"aria-disabled":optionalTrue(disabled||loading),"aria-multiselectable":optionalTrue(multiple),className:"ui-list-box__list","data-ui-list-box-list":!0,onKeyDown:handleListKeyDown,role:"listbox",tabIndex:disabled||loading?void 0:0,children:_jsx(ListBoxVisibleOptions,{activeIndex,controlId,emptyMessage,groups:optionGroups,loading,onSelect:index=>{setActiveIndex(index),selectOption(index)},selectedValues:selectedSet})}),loading?_jsx("p",{className:"ui-list-box__status",role:"status",children:loadingMessage}):null]})},Sheet=({className,glass=!1,...props})=>_jsx("dialog",{className:composeClassName("ui-sheet",glassSurfaceClass("ui-sheet",glass),className),"data-surface":resolveSurface(glass),"data-ui-sheet":!0,...props}),Sidebar=({className,glass=!1,variant="default",...props})=>_jsx("aside",{className:composeClassName("ui-sidebar",variant==="unstyled"&&"ui-sidebar--unstyled",glassSurfaceClass("ui-sidebar",glass),className),"data-slot":"sidebar","data-surface":resolveSurface(glass),"data-variant":variant,...props}),Slider=({className,ref,type="range",...props})=>_jsx("input",{className:composeClassName("ui-slider",className),ref,type,...props}),ToastViewport=({"aria-atomic":ariaAtomic="false","aria-label":ariaLabel="Notifications","aria-live":ariaLive="polite",className,maxCount=3,placement="bottom-right",...props})=>_jsx("div",{"aria-atomic":ariaAtomic,"aria-label":ariaLabel,"aria-live":ariaLive,className:composeClassName("ui-tvp",className),"data-placement":placement,"data-ui-toast-viewport":!0,"data-ui-toast-max":maxCount,...props}),Switch=({className,ref,role="switch",...props})=>_jsx("input",{className:composeClassName("ui-switch",className),ref,role,type:"checkbox",...props}),Table=({className,glass=!1,layout="scroll",...props})=>_jsx("div",{className:composeClassName("ui-table-wrap",glassClass("ui-table-wrap",glass),layout==="records"&&"ui-table-wrap--records",className),"data-slot":"table",...props}),Tabs=({children,className,defaultValue,glass=!1,indicator=!1,onValueChange,orientation,value,...props})=>{const tabs=useTabs({defaultValue,onValueChange,orientation,value}),indicatorRef=useRef(null);return useEffect(()=>{if(indicator&&indicatorRef.current)return bindLumenTabIndicator(indicatorRef.current)},[indicator]),_jsx(TabsContext,{value:tabs,children:_jsx("div",{ref:indicatorRef,...tabs.rootProps,...props,className:composeClassName("ui-tabs",glassClass("ui-tabs",glass),className),children})})},TabsList=({...props})=>{const tabs=requireContext(use(TabsContext),"TabsList");return _jsx("div",{...tabs.listProps,...props})},TabsTrigger=({onClick,onKeyDown,value,...props})=>{const tabs=requireContext(use(TabsContext),"TabsTrigger");return _jsx("button",{...tabs.getTriggerProps(value,props),onClick:composeHandlers(onClick,tabs.getTriggerProps(value).onClick),onKeyDown:composeHandlers(onKeyDown,tabs.getTriggerProps(value).onKeyDown),type:props.type??"button"})},TabsPanel=({value,...props})=>{const tabs=requireContext(use(TabsContext),"TabsPanel");return _jsx("div",{...tabs.getPanelProps(value,props)})},emptyCodeTabItems=[],CodeTabs=({ariaLabel="Code examples",className,copy=!0,codeLabel,copyLabel,copiedLabel,errorLabel,initialValue,items=emptyCodeTabItems,storageKey,theme="auto",wrap=!0,...props})=>{const labels=resolveCodeLabels({codeLabel,copyLabel,copiedLabel,errorLabel}),selectedValue=initialValue??items[0]?.value,[value,setValue]=useState(()=>{let storedValue=null;if(storageKey&&typeof localStorage<"u")try{storedValue=localStorage.getItem(storageKey)}catch{}return storedValue&&items.some(item=>item.value===storedValue)?storedValue:selectedValue??""});useEffect(()=>{const synchronize=event=>{const detail=event.detail;storageKey&&detail.storageKey===storageKey&&detail.value&&items.some(item=>item.value===detail.value)&&setValue(detail.value)};return document.addEventListener("ui:tabs-change",synchronize),()=>{document.removeEventListener("ui:tabs-change",synchronize)}},[items,storageKey]);const selectValue=nextValue=>{if(setValue(nextValue),storageKey)try{localStorage.setItem(storageKey,nextValue)}catch{}document.dispatchEvent(new CustomEvent("ui:tabs-change",{detail:{storageKey,value:nextValue}}))};return _jsxs(Tabs,{className:composeClassName("ui-code-tabs",className),"data-slot":"code-tabs","data-storage-key":storageKey,onValueChange:selectValue,value,...props,children:[_jsx(TabsList,{"aria-label":ariaLabel,className:"ui-code-tabs__list",children:items.map(item=>_jsx(TabsTrigger,{className:"ui-code-tabs__tab",value:item.value,children:item.label},item.value))}),items.map(item=>_jsx(TabsPanel,{className:"ui-code-tabs__panel",value:item.value,children:_jsx(Code,{code:item.code,copy,...labels,...item.language===void 0?{}:{language:item.language},theme,variant:"block",wrap})},item.value))]})},TagGroup=({className,role="list",...props})=>_jsx("div",{className:composeClassName("ui-tag-group",className),role,...props}),ThemeBuilder=({className,glass=!1,...props})=>_jsx("section",{className:composeClassName("ui-theme-builder",glassClass("ui-theme-builder",glass),className),"data-ui-theme-builder":!0,...props}),TimeField=({className,ref,type="time",...props})=>_jsx("input",{className:composeClassName("ui-input ui-time-field",className),ref,type,...props}),Toast=({"aria-live":ariaLive,className,glass=!1,role,variant="default",...props})=>_jsx("aside",{"aria-live":ariaLive??(variant==="destructive"?"assertive":"polite"),className:composeClassName("ui-toast",variantClass("ui-toast",variant),glassSurfaceClass("ui-toast",glass),className),"data-surface":resolveSurface(glass),"data-ui-toast":!0,"data-variant":variant,role:role??(variant==="destructive"?"alert":"status"),...props}),Toggle=({className,controlled=!1,pressed=!1,type="button",...props})=>_jsx("button",{"aria-pressed":pressed,className:composeClassName("ui-toggle",className),"data-ui-controlled":controlled||void 0,"data-ui-toggle":!0,type,...props}),ToggleGroup=({className,...props})=>_jsx("div",{className:composeClassName("ui-toggle-group",className),"data-ui-toggle-group":!0,...props}),Tooltip=({children,className,defaultOpen,delay,onKeyDown,onMouseEnter,onMouseLeave,onOpenChange,open,...props})=>{const tooltip=useTooltip({defaultOpen,delay,onOpenChange,open});return _jsx(TooltipContext,{value:tooltip,children:_jsx("span",{...tooltip.rootProps,...props,className:composeClassName("ui-tooltip",className),onKeyDown:composeHandlers(onKeyDown,tooltip.rootProps.onKeyDown),onMouseEnter:composeHandlers(onMouseEnter,tooltip.rootProps.onMouseEnter),onMouseLeave:composeHandlers(onMouseLeave,tooltip.rootProps.onMouseLeave),children})})},TooltipContent=({...props})=>{const tooltip=requireContext(use(TooltipContext),"TooltipContent");return _jsx("span",{...tooltip.tooltipProps,...props})},Tree=({className,glass=!1,role="tree",...props})=>_jsx("div",{className:composeClassName("ui-tree",glassClass("ui-tree",glass),className),role,...props}),TreeGrid=({className,glass=!1,role="treegrid",...props})=>_jsx("div",{className:composeClassName("ui-tree-grid",glassClass("ui-tree-grid",glass),className),role,...props});import{VirtualList}from"./virtual-list.js";const BackToTop=({className,type="button",...props})=>_jsx("button",{className:composeClassName("ui-back-to-top",className),type,...props}),Callout=({className,...props})=>_jsx("aside",{className:composeClassName("ui-callout",className),...props}),Eyebrow=({className,...props})=>_jsx("p",{className:composeClassName("ui-eyebrow",className),...props}),FloatingBadge=({className,...props})=>_jsx("span",{className:composeClassName("ui-floating-badge",className),...props}),FormattedDate=({className,...props})=>_jsx("time",{className:composeClassName("ui-formatted-date",className),...props}),Image=({as,className,fit="cover",invertOnDark=!1,loading,radius="lg",...props})=>{const Component=as??"img",resolvedLoading=loading??(as?void 0:"lazy");return createElement(Component,{...props,className:composeClassName("ui-image",invertOnDark&&"ui-image--invert-dark",`ui-image--fit-${fit}`,`ui-image--radius-${radius}`,className),...resolvedLoading?{loading:resolvedLoading}:{}})},Link=({className,newTab=!1,ref,rel,target,variant="default",...props})=>_jsx("a",{className:composeClassName("ui-link",variant==="inherit"&&"ui-link--inherit",className),"data-slot":"link","data-variant":variant,ref,rel:newTab?[...new Set(`${rel??""} noopener noreferrer`.trim().split(/\s+/))].join(" "):rel,target:newTab?"_blank":target,...props}),Pill=({className,count,children,href,variant="neutral",...props})=>{const content=_jsxs(_Fragment,{children:[children,count!==void 0&&_jsx("span",{className:"ui-pill__count",children:count})]});return href?_jsx("a",{className:composeClassName("ui-pill",variantClass("ui-pill",variant,"neutral"),className),"data-variant":variant,href,...props,children:content}):_jsx("span",{className:composeClassName("ui-pill",variantClass("ui-pill",variant,"neutral"),className),"data-variant":variant,...props,children:content})},Prose=({className,...props})=>_jsx("div",{className:composeClassName("ui-prose",className),...props}),SkipLink=({className,...props})=>_jsx("a",{className:composeClassName("ui-skip-link",className),...props}),ThemeToggle=({className,type="button",...props})=>_jsxs("button",{className:composeClassName("ui-theme-toggle",className),"data-slot":"theme-toggle",type,...props,children:[_jsx("span",{className:"ui-sr-only",children:"Toggle color theme"}),_jsx(Icon,{className:"ui-theme-toggle__sun",name:"sun"}),_jsx(Icon,{className:"ui-theme-toggle__moon",name:"moon"})]}),LanguageToggle=({children,className,defaultValue,labelTemplate="Change language from {current} to {next}",locales,onClick,onValueChange,storageKey,type="button",value,...props})=>{const language=useLanguageToggle({defaultValue,locales,onValueChange,storageKey,value}),accessibleLabel=formatLumenLanguageLabel(labelTemplate,language.currentLocale,language.nextLocale);return _jsx("button",{"aria-label":accessibleLabel,className:composeClassName("ui-language-toggle",className),"data-ui-language-next-value":language.nextLocale.value,"data-ui-language-toggle":!0,"data-ui-language-value":language.value,onClick:event=>{onClick?.(event),!event.defaultPrevented&&(language.selectNext(),event.currentTarget.dispatchEvent(new CustomEvent("ui:language-change",{bubbles:!0,detail:{previousValue:language.currentLocale.value,value:language.nextLocale.value}})))},type,...props,children:children??_jsx("span",{lang:language.nextLocale.value,children:language.nextLocale.label})})},particleDensityConfig={high:40,low:15,medium:25},particleTones=["var(--brand)","var(--accent)","var(--glow, var(--brand))"],createParticles=density=>Array.from({length:particleDensityConfig[density]},(_,index)=>{const size=Math.random()*12+8,left=Math.random()*100,top=Math.random()*100;return{id:`${index}-${left}-${top}`,style:{"--ui-particle-delay":`${Math.random()*8}s`,"--ui-particle-duration":`${20+Math.random()*15}s`,"--ui-particle-left":`${left}%`,"--ui-particle-size":`${size}px`,"--ui-particle-tone":particleTones[Math.floor(Math.random()*particleTones.length)],"--ui-particle-top":`${top}%`}}}),Particles=({children,className,density="medium",...props})=>{const[particles,setParticles]=useState([]);return useEffect(()=>{window.matchMedia("(prefers-reduced-motion: reduce)").matches||setParticles(createParticles(density))},[density]),_jsxs("div",{"aria-hidden":"true",className:composeClassName("ui-particles",className),"data-ui-particles":density,...props,children:[children,particles.map(particle=>_jsx("span",{className:"ui-particles__particle",style:particle.style},particle.id))]})},parseMotionDuration=value=>{const parsedDuration=Number.parseFloat(value);return Number.isFinite(parsedDuration)?value.endsWith("ms")?parsedDuration:parsedDuration*1e3:300},ScrollReveal=({animation="fade",className,delay=0,duration="slow",once=!0,style,threshold=.15,...props})=>{const rootRef=useRef(null);return useEffect(()=>{const root=rootRef.current;if(!root)return;if(root.dataset.uiScrollRevealBound="true",window.matchMedia("(prefers-reduced-motion: reduce)").matches||typeof IntersectionObserver>"u"){root.classList.add("is-revealed");return}const observer=new IntersectionObserver(([entry])=>{entry&&(root.classList.toggle("is-revealed",entry.isIntersecting),entry.isIntersecting&&once&&observer.disconnect())},{threshold:Math.min(1,Math.max(0,threshold))});return observer.observe(root),()=>{observer.disconnect()}},[once,threshold]),_jsx("div",{className:composeClassName("ui-scroll-reveal",`ui-scroll-reveal-${animation}`,`ui-motion-duration-${duration}`,className),"data-ui-reveal-once":String(once),"data-ui-reveal-threshold":Math.min(1,Math.max(0,threshold)),"data-ui-scroll-reveal":!0,ref:rootRef,style:{...style,"--ui-reveal-delay":`${Math.max(0,delay)}ms`},...props})},RevealGroup=({animation="slide-up",className,delay=0,duration="slow",once=!0,stagger=80,style,threshold=.15,...props})=>{const rootRef=useRef(null);return useEffect(()=>{const root=rootRef.current;if(!root)return;root.dataset.uiScrollRevealBound="true";for(const[index,child]of[...root.children].entries())child instanceof HTMLElement&&child.style.setProperty("--ui-reveal-index",String(index));if(window.matchMedia("(prefers-reduced-motion: reduce)").matches||typeof IntersectionObserver>"u"){root.classList.add("is-revealed");return}const observer=new IntersectionObserver(([entry])=>{entry&&(root.classList.toggle("is-revealed",entry.isIntersecting),entry.isIntersecting&&once&&observer.disconnect())},{threshold:Math.min(1,Math.max(0,threshold))});return observer.observe(root),()=>{observer.disconnect()}},[once,threshold]),_jsx("div",{className:composeClassName("ui-reveal-group",`ui-reveal-group-${animation}`,`ui-motion-duration-${duration}`,className),"data-ui-reveal-group":!0,"data-ui-reveal-once":String(once),"data-ui-reveal-threshold":Math.min(1,Math.max(0,threshold)),ref:rootRef,style:{...style,"--ui-reveal-delay":`${Math.max(0,delay)}ms`,"--ui-reveal-stagger":`${Math.max(0,stagger)}ms`},...props})},AnimatedNumber=({className,decimals=0,duration="slow",from=0,locale,prefix="",suffix="",value,...props})=>{const outputRef=useRef(null),safeDecimals=Math.max(0,Math.min(20,Math.floor(decimals))),formatter=useMemo(()=>new Intl.NumberFormat(locale,{maximumFractionDigits:safeDecimals,minimumFractionDigits:safeDecimals}),[locale,safeDecimals]),formattedValue=`${prefix}${formatter.format(value)}${suffix}`;return useEffect(()=>{const output=outputRef.current;if(!output)return;const format=current=>`${prefix}${formatter.format(current)}${suffix}`;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches||typeof IntersectionObserver>"u"){output.textContent=format(value);return}output.textContent=format(from);const root=output.parentElement;if(!root)return;const observer=new IntersectionObserver(entries=>{if(!entries.some(entry=>entry.isIntersecting))return;observer.disconnect();const durationValue=getComputedStyle(root).getPropertyValue("--ui-motion-duration").trim(),durationMs=parseMotionDuration(durationValue),startedAt=performance.now(),update=now=>{const progress=Math.min(1,(now-startedAt)/Math.max(1,durationMs)),eased=1-Math.pow(1-progress,3);output.textContent=format(from+(value-from)*eased),progress<1?requestAnimationFrame(update):output.textContent=format(value)};requestAnimationFrame(update)},{threshold:.15});return observer.observe(root),()=>{observer.disconnect()}},[formatter,from,prefix,suffix,value]),_jsxs("span",{className:composeClassName("ui-animated-number",`ui-motion-duration-${duration}`,className),"data-ui-animated-number":!0,...props,children:[_jsx("span",{"aria-hidden":"true","data-ui-animated-number-output":!0,ref:outputRef,children:formattedValue}),_jsx("span",{className:"ui-sr-only",children:formattedValue})]})},Stat=({as,className,label,value,variant="default",children,...props})=>_jsxs(Primitive,{...as?{as}:{},className:composeClassName(variant!=="default"&&`ui-stat--${variant}`,className),"data-slot":"stat","data-variant":variant,...props,uiClassName:"ui-stat",children:[label&&_jsx("div",{className:"ui-stat-label","data-slot":"stat-label",children:label}),value&&_jsx("div",{className:"ui-stat-value","data-slot":"stat-value",children:value}),children]}),StatLabel=({as,...props})=>_jsx(Primitive,{...as?{as}:{},"data-slot":"stat-label",...props,uiClassName:"ui-stat-label"}),StatValue=({as,...props})=>_jsx(Primitive,{...as?{as}:{},"data-slot":"stat-value",...props,uiClassName:"ui-stat-value"}),StatDescription=({as,...props})=>_jsx(Primitive,{...as?{as}:{},"data-slot":"stat-description",...props,uiClassName:"ui-stat-description"}),StatIcon=({className,...props})=>_jsx("span",{className:composeClassName("ui-stat-icon",className),"data-slot":"stat-icon",...props}),StatTrend=({className,tone="neutral",...props})=>_jsx("span",{className:composeClassName("ui-stat-trend",`ui-stat-trend--${tone}`,className),"data-slot":"stat-trend","data-tone":tone,...props}),Meter=({className,...props})=>_jsx("meter",{className:composeClassName("ui-meter",className),...props}),Note=({className,label,borderPosition="left",children,...props})=>_jsxs("div",{className:composeClassName("ui-note",`ui-note--border-${borderPosition}`,className),...props,children:[label&&_jsx("p",{className:"ui-note__label",children:label}),_jsx("div",{className:"ui-note__content",children})]}),Rating=({className,value=0,max=5,readonly=!1,...props})=>{const stars=Array.from({length:max},(_,i)=>i+1);return _jsx("div",{className:composeClassName("ui-rating",readonly&&"ui-rating--readonly",className),"data-ui-rating":!0,"data-value":value,"data-max":max,"data-readonly":readonly?"true":"false",...props,children:stars.map(star=>_jsx("button",{type:"button",className:"ui-rating__star","data-active":star<=value?"true":"false",disabled:readonly,"aria-label":`Rate ${star} out of ${max}`,children:_jsx("svg",{viewBox:"0 0 24 24",width:"24",height:"24",stroke:"currentColor",strokeWidth:"2",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",className:"ui-icon",children:_jsx("polygon",{points:"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"})})},star))})},Timeline=({className,...props})=>_jsx("ol",{className:composeClassName("ui-timeline",className),...props}),TimelineItem=({className,children,dot,...props})=>_jsxs("li",{className:composeClassName("ui-timeline-item",className),...props,children:[_jsx("div",{className:"ui-timeline-item__tail"}),_jsx("div",{className:"ui-timeline-item__dot",children:dot}),_jsx("div",{className:"ui-timeline-item__content",children})]}),AnimatedLogo=({animation="reveal",className,...props})=>_jsx("span",{className:composeClassName("ui-animated-logo",className),"data-animation":animation,"data-ui-animated-logo":!0,...props}),Graphic=({children,className,label,size="md",tone="brand",variant="orbit",...props})=>_jsx("div",{"aria-hidden":label?void 0:!0,"aria-label":label,className:composeClassName("ui-graphic",`ui-graphic--${variant}`,`ui-graphic--${tone}`,`ui-graphic--${size}`,className),role:label?"img":void 0,...props,children:_jsx("div",{className:"ui-graphic__content",children})}),Backdrop=({children,className,intensity="medium",tone="brand",variant="aurora",...props})=>_jsx("div",{className:composeClassName("ui-backdrop",`ui-backdrop--${variant}`,`ui-backdrop--${tone}`,`ui-backdrop--${intensity}`,className),...props,children:_jsx("div",{className:"ui-backdrop__content",children})}),AnimatedPortrait=({className,...props})=>_jsx("div",{className:composeClassName("ui-animated-portrait relative isolate w-full animate-reveal-lcp motion-reduce:animate-none",className),...props}),getButtonLinkVariantClass=variant=>variant==="unstyled"?"ui-button-link--unstyled":variant==="inline"?"ui-button ui-button--inline":`ui-button ui-button--${variant} min-h-11 rounded-full border`,ButtonLink=({asChild=!1,children,className,ref,shape="default",variant="primary",...props})=>{const variantClass2=getButtonLinkVariantClass(variant),buttonLinkClassName=composeClassName("ui-button-link",variant!=="unstyled"&&"group inline-flex cursor-pointer items-center justify-center gap-2 text-sm font-semibold tracking-[0.01em]",variantClass2,shape==="icon"&&variant!=="inline"?"ui-button-link--icon":void 0,className);if(asChild){const child=children;if(!isValidElement(child))throw new Error("ButtonLink with asChild requires exactly one valid React element child.");const ChildComponent=child.type;return _jsx(ChildComponent,{...child.props,...props,className:composeClassName(buttonLinkClassName,child.props.className),"data-slot":"button-link",ref,children:child.props.children})}return _jsx("a",{className:buttonLinkClassName,"data-slot":"button-link",ref,...props,children})},CoverImage=({className,hover=!1,showBottomGradient=!1,children,...props})=>_jsxs("div",{className:composeClassName("ui-cover-image relative overflow-hidden bg-surface-muted",hover&&"ui-cover-image--hover",className),...props,children:[children,showBottomGradient&&_jsx("div",{"aria-hidden":"true",className:"ui-cover-image__bottom-gradient"})]}),GradientDivider=({className,...props})=>_jsx("div",{"aria-hidden":"true",className:composeClassName("ui-gradient-divider pointer-events-none flex justify-center",className),...props,children:_jsx("div",{className:`
+        via-brand/40 h-px w-full max-w-5xl bg-linear-to-r from-transparent
+        to-transparent
+      `})}),emptySteps=[],normalizeStep=step=>typeof step=="string"?{description:void 0,title:step}:step,Stepper=({children,className,currentStep=0,orientation="horizontal",steps=emptySteps,...props})=>_jsxs("ol",{className:composeClassName("ui-stepper",orientation==="vertical"&&"ui-stepper--vertical",className),"data-orientation":orientation,...props,children:[steps.map(normalizeStep).map((step,index)=>{let state="upcoming";return index<currentStep?state="complete":index===currentStep&&(state="current"),_jsxs("li",{"aria-current":state==="current"?"step":void 0,className:"ui-stepper__step","data-state":state,children:[_jsx("span",{className:"ui-stepper__marker",children:index+1}),_jsxs("span",{className:"ui-stepper__content",children:[_jsx("span",{className:"ui-stepper__title",children:step.title}),step.description&&_jsx("span",{className:"ui-stepper__description",children:step.description})]})]},step.title)}),children]}),FileUpload=({children,className,hint,id,inputClassName,label="Choose a file or drag it here",selectedFilesLabel="{count} files selected",onChange,ref,...props})=>{const generatedId=useId(),inputId=id??`ui-file-upload-${generatedId.replaceAll(":","")}`,[selectedFiles,setSelectedFiles]=useState([]),inputRef=useRef(null);useEffect(()=>{const owner=inputRef.current?.ownerDocument;let active=!0;const reset=event=>{event.target===inputRef.current?.form&&queueMicrotask(()=>{active&&!event.defaultPrevented&&setSelectedFiles([])})};return owner?.addEventListener("reset",reset),()=>{active=!1,owner?.removeEventListener("reset",reset)}},[props.form]);const selectedFileText=selectedFiles.length>1?selectedFilesLabel.replaceAll("{count}",String(selectedFiles.length)):selectedFiles[0]??"";return _jsxs("label",{className:composeClassName("ui-file-upload",className),"data-state":selectedFiles.length>0?"selected":"idle","data-ui-file-upload":!0,htmlFor:inputId,children:[_jsx("input",{className:composeClassName("ui-file-upload__input",inputClassName),"data-ui-file-upload-input":!0,id:inputId,onChange:event=>{setSelectedFiles([...event.currentTarget.files??[]].map(file=>file.name)),onChange?.(event)},ref:element=>{if(inputRef.current=element,typeof ref=="function")return ref(element);ref&&(ref.current=element)},type:"file",...props,defaultValue:void 0,value:void 0}),_jsxs("svg",{"aria-hidden":"true",className:"ui-file-upload__icon",fill:"none",focusable:"false",viewBox:"0 0 24 24",children:[_jsx("path",{d:"M12 16V4m0 0L8 8m4-4 4 4"}),_jsx("path",{d:"M5 14v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4"})]}),_jsx("span",{className:"ui-file-upload__prompt",children:children??label}),hint&&_jsx("span",{className:"ui-file-upload__hint",children:hint}),_jsx("span",{"aria-live":"polite",className:"ui-file-upload__files","data-ui-file-upload-files":!0,children:selectedFileText})]})},emptyTourSteps=[],Tour=({children,className,closeLabel="Done",hidden=!0,nextLabel="Next",steps=emptyTourSteps,...props})=>_jsxs("div",{className:composeClassName("ui-tour",className),"data-ui-tour":!0,hidden,...props,children:[_jsx("div",{"aria-hidden":"true",className:"ui-tour__backdrop","data-ui-tour-backdrop":!0}),_jsxs("div",{className:"ui-tour__popover","data-ui-tour-popover":!0,role:"dialog",children:[steps.map((step,index)=>_jsxs("div",{className:"ui-tour__step","data-target":step.target,"data-ui-tour-step":!0,hidden:index!==0,children:[step.title&&_jsx("p",{className:"ui-tour__title",children:step.title}),_jsx("p",{className:"ui-tour__content",children:step.content}),_jsxs("div",{className:"ui-tour__actions",children:[_jsx("button",{className:"ui-button ui-button--ghost ui-button--sm","data-ui-tour-close":!0,type:"button",children:closeLabel}),index<steps.length-1&&_jsx("button",{className:"ui-button ui-button--default ui-button--sm","data-ui-tour-next":!0,type:"button",children:nextLabel})]})]},step.target)),children]})]}),emptyAnchorLinks=[],createAnchorRef=()=>{let cleanup;return root=>{if(cleanup?.(),cleanup=void 0,!root)return;const links=[...root.querySelectorAll('a[href^="#"]')],targets=links.flatMap(link=>{const id=decodeURIComponent(link.getAttribute("href")?.slice(1)??""),target=id?document.getElementById(id):null;return target?[{link,target}]:[]});if(!targets.length)return;const abortController=new AbortController;let frame=0;const setActive=active=>{for(const link of links){const isActive=link===active;link.dataset.active=String(isActive),isActive?link.setAttribute("aria-current","location"):link.removeAttribute("aria-current")}},update=()=>{frame=0;const scrollingElement=document.scrollingElement??document.documentElement,atEnd=scrollingElement.scrollTop+scrollingElement.clientHeight>=scrollingElement.scrollHeight-1,offset=Number(root.dataset.uiAnchorOffset)||0;let active=targets[0]?.link;if(atEnd)active=targets.at(-1)?.link;else for(const item of targets){if(item.target.getBoundingClientRect().top>offset)break;active=item.link}active&&setActive(active)},requestUpdate=()=>{frame||(frame=requestAnimationFrame(update))};for(const{link}of targets)link.addEventListener("click",()=>{setActive(link)},{signal:abortController.signal});window.addEventListener("resize",requestUpdate,{passive:!0,signal:abortController.signal}),window.addEventListener("scroll",requestUpdate,{passive:!0,signal:abortController.signal}),update(),cleanup=()=>{abortController.abort(),frame&&cancelAnimationFrame(frame)}}},Anchor=({"aria-label":ariaLabel="On this page",activationOffset=96,children,className,items=emptyAnchorLinks,...props})=>{const anchorRef=createAnchorRef();return _jsxs("nav",{"aria-label":ariaLabel,className:composeClassName("ui-anchor",className),"data-ui-anchor":!0,"data-ui-anchor-offset":Math.max(0,activationOffset),ref:anchorRef,...props,children:[items.length>0&&_jsx("ol",{children:items.map((item,index)=>_jsx("li",{children:_jsxs("a",{"aria-current":index===0?"location":void 0,"data-active":index===0?"true":"false","data-depth":item.depth,href:item.href,children:[item.index!==void 0&&_jsx("span",{className:"ui-anchor__index",children:item.index}),_jsxs("span",{className:"ui-anchor__content",children:[_jsx("span",{className:"ui-anchor__label",children:item.label}),item.description&&_jsx("span",{className:"ui-anchor__description",children:item.description})]})]})},item.href))}),children]})},Segmented=({children,className,defaultValue,name="segmented",onValueChange,options=emptyOptions,visualSize="default",value,...props})=>_jsxs("div",{className:composeClassName("ui-segmented",visualSize==="sm"&&"ui-segmented--sm",visualSize==="lg"&&"ui-segmented--lg",className),role:"group",...props,children:[options.map(normalizeOption).map(option=>_jsxs("label",{className:"ui-segmented__option",children:[_jsx("input",{checked:value===void 0?void 0:value===option.value,defaultChecked:value===void 0?defaultValue===option.value:void 0,className:"ui-segmented__input",disabled:option.disabled,name,type:"radio",value:option.value,onChange:()=>onValueChange?.(option.value)}),_jsx("span",{className:"ui-segmented__label",children:option.label})]},option.value)),children]}),Toolbar=({"aria-label":ariaLabel="Toolbar",className,orientation="horizontal",...props})=>_jsx("div",{"aria-label":ariaLabel,"aria-orientation":orientation,className:composeClassName("ui-toolbar",orientation==="vertical"&&"ui-toolbar--vertical",className),"data-orientation":orientation,"data-ui-toolbar":!0,role:"toolbar",...props}),emptyDescriptionsItems=[],Descriptions=({children,className,columns=1,items=emptyDescriptionsItems,style,...props})=>_jsxs("dl",{className:composeClassName("ui-descriptions",className),"data-columns":columns,style:{"--ui-descriptions-columns":columns,...style},...props,children:[items.map((item,index)=>_jsxs("div",{className:"ui-descriptions__item",children:[_jsx("dt",{className:"ui-descriptions__term",children:item.label}),_jsx("dd",{className:"ui-descriptions__detail",children:item.value})]},index)),children]}),Popconfirm=({cancelLabel="Cancel",children,className,confirmLabel="Confirm",title="Are you sure?",...props})=>_jsxs("div",{className:composeClassName("ui-popover ui-popconfirm",className),"data-surface":"default","data-ui-popconfirm":!0,"data-ui-popover":!0,...props,children:[_jsx("span",{"aria-expanded":"false","aria-haspopup":"dialog",className:"ui-popconfirm__trigger","data-ui-trigger":!0,children}),_jsxs("div",{className:"ui-popover__panel ui-popconfirm__panel","data-ui-panel":!0,hidden:!0,role:"dialog",children:[_jsx("p",{className:"ui-popconfirm__message",children:title}),_jsxs("div",{className:"ui-popconfirm__actions",children:[_jsx("button",{className:"ui-button ui-button--ghost ui-button--sm","data-ui-popconfirm-cancel":!0,type:"button",children:cancelLabel}),_jsx("button",{className:"ui-button ui-button--destructive ui-button--sm","data-ui-popconfirm-confirm":!0,type:"button",children:confirmLabel})]})]})]}),emptyTransferItems=[],renderTransferItems=items=>items.map(item=>_jsx("li",{className:"ui-transfer__item",children:_jsxs("label",{className:"ui-transfer__option",children:[_jsx("input",{className:"ui-checkbox","data-ui-transfer-item":!0,type:"checkbox",value:item.key}),_jsx("span",{children:item.label})]})},item.key)),Transfer=({className,items=emptyTransferItems,name,sourceTitle="Available",targetItems=emptyTransferItems,targetTitle="Selected",...props})=>_jsxs("div",{className:composeClassName("ui-transfer",className),"data-ui-transfer":!0,"data-ui-transfer-name":name,...props,children:[_jsxs("div",{className:"ui-transfer__panel",children:[_jsx("p",{className:"ui-transfer__title",children:sourceTitle}),_jsx("ul",{className:"ui-transfer__list","data-side":"source","data-ui-transfer-list":!0,children:renderTransferItems(items)})]}),_jsxs("div",{className:"ui-transfer__controls",children:[_jsx("button",{"aria-label":`Move to ${targetTitle}`,className:"ui-button ui-button--outline ui-button--icon","data-ui-transfer-move":"target",type:"button",children:_jsx(Icon,{name:"chevron-right"})}),_jsx("button",{"aria-label":`Move to ${sourceTitle}`,className:"ui-button ui-button--outline ui-button--icon","data-ui-transfer-move":"source",type:"button",children:_jsx(Icon,{name:"chevron-left"})})]}),_jsxs("div",{className:"ui-transfer__panel",children:[_jsx("p",{className:"ui-transfer__title",children:targetTitle}),_jsx("ul",{className:"ui-transfer__list","data-side":"target","data-ui-transfer-list":!0,children:renderTransferItems(targetItems)})]})]}),buildCascaderColumns=(options,idPrefix)=>{const columns=[];let count=0;const build=(items,root)=>{count+=1;const id=`${idPrefix}-column-${count}`,rendered=items.map(item=>({label:item.label,value:item.value}));columns.push({id,options:rendered,root});for(const[index,item]of items.entries()){const renderedOption=rendered[index];item.children&&item.children.length>0&&renderedOption&&(renderedOption.nextId=build(item.children,!1))}return id};return options.length>0&&build(options,!0),columns},emptyCascaderOptions=[],Cascader=({children,className,id,name,options=emptyCascaderOptions,placeholder="Select\u2026",...props})=>{const generatedId=useId().replaceAll(":",""),cascaderId=id??`ui-cascader-${generatedId}`,panelId=`${cascaderId}-panel`,columns=buildCascaderColumns(options,cascaderId);return _jsxs("div",{className:composeClassName("ui-cascader",className),"data-surface":"default","data-ui-cascader":!0,"data-ui-popover":!0,id,...props,children:[_jsx("button",{"aria-controls":panelId,"aria-expanded":"false","aria-haspopup":"listbox",className:"ui-select ui-select__trigger ui-cascader__trigger","data-ui-trigger":!0,role:"combobox",type:"button",children:_jsx("span",{"data-ui-cascader-placeholder":placeholder,"data-ui-cascader-value":!0,children:placeholder})}),_jsxs("div",{className:"ui-cascader__panel","data-ui-panel":!0,hidden:!0,id:panelId,children:[columns.map(column=>_jsx("ol",{"aria-label":column.root?"Options":"Sub-options",className:"ui-cascader__column",hidden:!column.root,id:column.id,role:"listbox",children:column.options.map(option=>_jsx("li",{role:"presentation",children:_jsxs("button",{"aria-selected":"false",className:"ui-cascader__option","data-ui-cascader-next":option.nextId?`#${option.nextId}`:void 0,"data-ui-cascader-option":!0,"data-value":option.value,role:"option",type:"button",children:[_jsx("span",{children:option.label}),option.nextId&&_jsx("span",{"aria-hidden":"true",children:"\u203A"})]})},option.value))},column.id)),children]}),name&&_jsx("input",{"data-ui-cascader-input":!0,name,type:"hidden"})]})},flattenTreeSelect=(nodes,depth=0,acc=[])=>{for(const node of nodes)acc.push({depth,label:node.label,value:node.value}),node.children&&node.children.length>0&&flattenTreeSelect(node.children,depth+1,acc);return acc},emptyTreeSelectNodes=[],TreeSelect=({children,className,name,placeholder="Select\u2026",treeData=emptyTreeSelectNodes,...props})=>_jsxs("div",{className:composeClassName("ui-tree-select",className),"data-surface":"default","data-ui-popover":!0,"data-ui-tree-select":!0,...props,children:[_jsx("button",{"aria-expanded":"false","aria-haspopup":"tree",className:"ui-select ui-select__trigger ui-tree-select__trigger","data-ui-trigger":!0,type:"button",children:_jsx("span",{"data-ui-tree-select-placeholder":placeholder,"data-ui-tree-select-value":!0,children:placeholder})}),_jsxs("div",{className:"ui-tree-select__panel","data-ui-panel":!0,hidden:!0,children:[_jsx("div",{className:"ui-tree-select__tree",role:"tree",children:flattenTreeSelect(treeData).map(row=>_jsx("button",{className:"ui-tree-select__option","data-value":row.value,role:"treeitem",style:{"--ui-tree-depth":row.depth},type:"button",children:row.label},row.value))}),children]}),name&&_jsx("input",{"data-ui-tree-select-input":!0,name,type:"hidden"})]}),Mentions=({className,defaultValue="",label="Mentions",name,onValueChange,options=emptyOptions,placeholder,trigger="@",value,...props})=>{const generatedId=useId(),inputRef=useRef(null),pendingCaretRef=useRef(null),[activeIndex,setActiveIndex]=useState(-1),[internalValue,setInternalValue]=useState(defaultValue),[query,setQuery]=useState(null),currentValue=value??internalValue;useLayoutEffect(()=>{const pending=pendingCaretRef.current,input=inputRef.current;pending&&(pendingCaretRef.current=null,!(!input||currentValue!==pending.value)&&(input.focus(),input.setSelectionRange(pending.position,pending.position)))},[currentValue]);const listId=`ui-mentions-${generatedId}-list`,escapedTrigger=trigger.replaceAll(/[.*+?^${}()|[\]\\]/g,"\\$&"),normalizedOptions=options.map(normalizeOption),visibleOptions=query===null?[]:normalizedOptions.filter(option=>option.value.toLowerCase().startsWith(query)),expanded=visibleOptions.length>0,resolvedActiveIndex=expanded?Math.min(Math.max(activeIndex,0),visibleOptions.length-1):-1,activeOption=visibleOptions[resolvedActiveIndex],setNextValue=nextValue=>{value===void 0&&setInternalValue(nextValue),onValueChange?.(nextValue)},closeList=()=>{setQuery(null),setActiveIndex(-1)},insertMention=mention=>{const caret=inputRef.current?.selectionStart??currentValue.length,before=currentValue.slice(0,caret).replace(new RegExp(`${escapedTrigger}\\w*$`),`${trigger}${mention} `),nextValue=before+currentValue.slice(caret);pendingCaretRef.current={position:before.length,value:nextValue},setNextValue(nextValue),closeList()},handleKeyDown=event=>{if(event.key==="Escape"&&expanded){event.preventDefault(),closeList();return}if(expanded&&(event.key==="ArrowDown"||event.key==="ArrowUp"||event.key==="End"||event.key==="Home")){event.preventDefault(),setActiveIndex(current=>event.key==="Home"?0:event.key==="End"?visibleOptions.length-1:event.key==="ArrowDown"?(current+1)%visibleOptions.length:(current-1+visibleOptions.length)%visibleOptions.length);return}event.key==="Enter"&&activeOption&&(event.preventDefault(),insertMention(activeOption.value))};return _jsxs("div",{className:composeClassName("ui-mentions",className),"data-ui-mentions":!0,"data-ui-mentions-trigger":trigger,...props,children:[_jsx("textarea",{"aria-activedescendant":activeOption?`${listId}-option-${resolvedActiveIndex}`:void 0,"aria-autocomplete":"list","aria-controls":listId,"aria-expanded":expanded,"aria-label":label,className:"ui-textarea ui-mentions__input","data-ui-mentions-input":!0,name,onBlur:()=>{pendingCaretRef.current=null,closeList()},onChange:event=>{pendingCaretRef.current=null;const nextValue=event.currentTarget.value,match=new RegExp(`${escapedTrigger}(\\w*)$`).exec(nextValue.slice(0,event.currentTarget.selectionStart)),nextQuery=match?(match[1]??"").toLowerCase():null;setNextValue(nextValue),setQuery(nextQuery),setActiveIndex(nextQuery===null?-1:0)},onKeyDown:handleKeyDown,placeholder,ref:inputRef,role:"combobox",rows:3,value:currentValue}),_jsx("ul",{className:"ui-mentions__list","data-ui-mentions-list":!0,hidden:!expanded,id:listId,role:"listbox",children:visibleOptions.map((option,index)=>_jsx("li",{children:_jsx("button",{"aria-selected":index===resolvedActiveIndex,className:"ui-mentions__option","data-ui-mentions-option":!0,"data-value":option.value,id:`${listId}-option-${index}`,onClick:()=>{insertMention(option.value)},onMouseDown:event=>{event.preventDefault()},role:"option",tabIndex:-1,type:"button",children:option.label})},option.value))})]})},QRCode=({children,className,size=160,src,style,value,...props})=>{const qrSvg=!src&&value?renderSVG(value):null,qrSrc=qrSvg?`data:image/svg+xml;utf8,${encodeURIComponent(qrSvg)}`:src;return _jsxs("figure",{className:composeClassName("ui-qr-code",className),"data-ui-qr-code":!0,style:{"--ui-qr-code-size":`${size}px`,...style},...props,children:[_jsx("div",{className:"ui-qr-code__frame",children:qrSrc?_jsx("img",{alt:value?`QR code for ${value}`:"QR code",className:"ui-qr-code__image",height:size,src:qrSrc,width:size}):children}),value&&_jsx("figcaption",{className:"ui-qr-code__value",children:value})]})},Watermark=({children,className,content,gap=120,rotate=-22,style,text="Confidential",...props})=>{const watermarkText=content??text,tileSize=Math.max(1,gap),watermarkXmlEntities={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&apos;"},escapedWatermarkText=watermarkText.replaceAll(/[&<>"']/g,character=>watermarkXmlEntities[character]??character),watermarkSvg=['<svg xmlns="http://www.w3.org/2000/svg"',` width="${tileSize}" height="${tileSize}" viewBox="0 0 ${tileSize} ${tileSize}">`,`<text x="${tileSize/2}" y="${tileSize/2}" dominant-baseline="middle" text-anchor="middle"`,` transform="rotate(${rotate} ${tileSize/2} ${tileSize/2})"`,' fill="black" font-family="Montserrat, Avenir Next, Segoe UI, sans-serif" font-size="16" font-weight="500" letter-spacing="1.6">',`${escapedWatermarkText}</text></svg>`].join(""),watermarkImage=`url("data:image/svg+xml,${encodeURIComponent(watermarkSvg)}")`;return _jsxs("div",{className:composeClassName("ui-watermark",className),"data-ui-watermark":!0,style:{"--ui-watermark-gap":`${tileSize}px`,"--ui-watermark-image":watermarkImage,...style},...props,children:[children,_jsx("div",{"aria-hidden":"true",className:"ui-watermark__overlay","data-text":watermarkText})]})},Affix=({className,offset=0,offsetBottom,offsetTop,position:positionProp,style,...props})=>{const position=positionProp??(offsetBottom===void 0?"top":"bottom"),resolvedOffset=offsetBottom??offsetTop??offset;return _jsx("div",{className:composeClassName("ui-affix",position==="bottom"&&"ui-affix--bottom",className),"data-position":position,style:{"--ui-affix-offset":`${resolvedOffset}px`,...style},...props})},emptySpeedDialActions=[],speedDialNavigationKeys=["ArrowDown","ArrowLeft","ArrowRight","ArrowUp","End","Home"],getSpeedDialNavigationIndex=(key,currentIndex,itemCount)=>key==="Home"?0:key==="End"?itemCount-1:key==="ArrowDown"||key==="ArrowRight"?(currentIndex+1)%itemCount:(currentIndex-1+itemCount)%itemCount,SpeedDial=({actions=emptySpeedDialActions,children,className,defaultOpen=!1,direction="up",label="Actions",onBlur,...props})=>{const[isOpen,setIsOpen]=useState(defaultOpen),menuRef=useRef(null),triggerRef=useRef(null),close=(restoreFocus=!1)=>{setIsOpen(!1),restoreFocus&&triggerRef.current?.focus()},focusAction=position=>{setIsOpen(!0),requestAnimationFrame(()=>{const items=menuRef.current?.querySelectorAll('[role="menuitem"], button:not([disabled]), a[href]');(position==="first"?items?.[0]:items?.[items.length-1])?.focus()})};return _jsxs("div",{className:composeClassName("ui-speed-dial",`ui-speed-dial--${direction}`,className),...props,"data-direction":direction,"data-state":isOpen?"open":"closed","data-ui-bound":"true","data-ui-speed-dial":!0,onBlur:event=>{onBlur?.(event),event.currentTarget.contains(event.relatedTarget)||close()},children:[_jsx("button",{"aria-expanded":isOpen,"aria-haspopup":"menu","aria-label":label,className:"ui-speed-dial__trigger","data-ui-speed-dial-trigger":!0,onClick:()=>{setIsOpen(open=>!open)},onKeyDown:event=>{if(event.key==="Escape"&&close(),["ArrowDown","ArrowRight"].includes(event.key)){event.preventDefault(),focusAction("first");return}["ArrowLeft","ArrowUp"].includes(event.key)&&(event.preventDefault(),focusAction("last"))},ref:triggerRef,type:"button",children:_jsx("span",{"aria-hidden":"true",className:"ui-speed-dial__icon"})}),_jsxs("menu",{"aria-label":label,className:"ui-speed-dial__actions","data-ui-speed-dial-actions":!0,onClick:event=>{event.target.closest('[role="menuitem"], button, a')&&close()},onKeyDown:event=>{const items=[...menuRef.current?.querySelectorAll('[role="menuitem"], button:not([disabled]), a[href]')??[]];if(event.key==="Escape"){event.preventDefault(),close(!0);return}if(!speedDialNavigationKeys.includes(event.key))return;const currentIndex=items.indexOf(document.activeElement),targetIndex=getSpeedDialNavigationIndex(event.key,currentIndex,items.length);event.preventDefault(),items[targetIndex]?.focus()},ref:menuRef,role:"menu",children:[actions.map((action,index)=>_jsx("li",{role:"presentation",style:{"--ui-speed-dial-index":index},children:_jsxs("button",{"aria-label":action.label,className:"ui-speed-dial__action","data-icon":action.icon,"data-value":action.value??action.label,role:"menuitem",type:"button",children:[action.icon&&_jsx("span",{"aria-hidden":"true",className:"ui-speed-dial__action-icon ui-icon",children:renderLucideIcon(action.icon,`ui-icon__svg lucide-${action.icon}`)}),_jsx("span",{className:"ui-speed-dial__action-label",children:action.label})]})},action.value??action.label)),children]})]})},DescriptionItem=({className,...props})=>_jsx("div",{...props,className:composeClassName("ui-description-item","ui-descriptions__item",className),"data-slot":"description-item"}),DescriptionTerm=({className,...props})=>_jsx("dt",{...props,className:composeClassName("ui-description-term","ui-descriptions__term",className),"data-slot":"description-term"}),DescriptionDetail=({className,...props})=>_jsx("dd",{...props,className:composeClassName("ui-description-detail","ui-descriptions__detail",className),"data-slot":"description-detail"});export{Accordion,Affix,Agenda,Alert,AlertDialog,Anchor,AnimatedLogo,AnimatedNumber,AnimatedPortrait,AspectRatio,Attachment,Autocomplete,Avatar,BackToTop,Backdrop,Badge,BarChart,Breadcrumb,Bubble,Button,ButtonGroup,ButtonLink,Calendar,Callout,Card,CardContent,CardDescription,CardFooter,CardHeader,CardTitle,Carousel,Cascader,Chart,Checkbox,CheckboxGroup,Code,CodeTabs,Collapsible,ColorPicker,ComboChart,Combobox,Command,Container,ContextMenu,ContextNavigation,CopyButton,CountryFlag,CoverImage,DatePicker,DateRangePicker,DescriptionDetail,DescriptionItem,DescriptionTerm,Descriptions,Dialog,DialogBody,DialogClose,DialogFooter,DialogHeader,DialogTitle,Direction,Drawer,DropdownMenu,DropdownMenuContent,DropdownMenuItem,DropdownMenuSeparator,DropdownMenuTrigger,Empty,ErrorState,ErrorSummary,Eyebrow,Field,FieldError,FileUpload,FloatingBadge,Form,FormattedDate,GradientDivider,Graphic,Grid,Heatmap,HoverCard,Icon,Illustration,Image,Input2 as Input,InputGroup,InputOTP,Item,KanbanBoard,KanbanColumn,Kbd,Label2 as Label,LanguageToggle,LineChart,Link,ListBox,Marker,Mentions,Menubar,Message,MessageScroller,Meter,NativeSelect,NavigationMenu,Note,NumberField,Pagination,Particles,PasswordField,PhoneInput,PhoneNumber,PieChart,Pill,Popconfirm,Popover,PopoverPanel,PopoverTrigger,Progress,Prose,QRCode,RadioGroup,RangeChart,Rating,Resizable,RevealGroup,RichTextEditor,ScatterChart,Schedule,ScrollArea,ScrollProgress,ScrollReveal,SearchField,Segmented,Select,Separator,Sheet,Sidebar,Skeleton,SkipLink,Slider,Sparkline,SpeedDial,Spinner,Stack,Stat,StatDescription,StatIcon,StatLabel,StatTrend,StatValue,Stepper,Switch,Table,Tabs,TabsList,TabsPanel,TabsTrigger,TagGroup,Textarea,ThemeBuilder,ThemeToggle,TimeField,Timeline,TimelineItem,Toast,ToastViewport,Toggle,ToggleGroup,Toolbar,Tooltip,TooltipContent,Tour,Transfer,Tree,TreeGrid,TreeSelect,Typography,VirtualList,VisuallyHidden,Watermark};