@santi020k/lumen-react 1.6.0 → 1.7.0

package/dist/components.js

@@ -1,9 +1,14 @@
 '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, createLumenLineGeometry, createLumenPieGeometry, formatLumenLanguageLabel, getLumenChartCategories, getLumenChartDomain, getLumenChartTicks, getLumenChartToneClassName, getLumenIcon, getLumenPieChartVariantClassName, hasLumenChartData, hasLumenPieData, lumenCodeTokenClassNames, normalizeLumenFormErrors, resolveLumenChartTone, scaleLumenChartValue, tokenizeLumenCode } from '@santi020k/lumen-core';
+import { alignLumenChartSeries, composeClassName, createLumenBarGeometry, createLumenHeatmapGeometry, createLumenLineGeometry, createLumenPieGeometry, createLumenRangeGeometry, createLumenScatterGeometry, formatLumenChartSummary, formatLumenLanguageLabel, getLumenChartCategories, getLumenChartDomain, getLumenChartTicks, getLumenChartToneClassName, getLumenIcon, getLumenPhoneCountries, getLumenPieChartVariantClassName, hasLumenChartData, hasLumenPieData, lumenCodeTokenClassNames, lumenIllustrations, normalizeLumenFormErrors, 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 { 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);
@@ -17,6 +22,9 @@ const emptyStringOptions = [];
 const emptyDataTableColumns = [];
 const emptyDataTableRows = [];
 const emptyChartSeries = [];
+const emptyHeatmapData = [];
+const emptyRangeData = [];
+const emptyComboSeries = [];
 const emptyPieSeries = {
     data: [],
     id: 'pie',
@@ -91,6 +99,18 @@ const getDataTableSortValue = (cell) => {
         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)
@@ -132,7 +152,6 @@ export const Attachment = ({ className, glass = false, 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 Badge = ({ className, variant = 'default', ...props }) => (_jsx("span", { className: composeClassName('ui-badge', `ui-badge--${variant}`, className), "data-variant": variant, ...props }));
 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. */
@@ -163,31 +182,21 @@ export const Calendar = ({ className, defaultValue, disabled = false, glass = fa
     });
     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 Card = ({ as, className, glass = false, variant = 'default', ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), className: composeClassName(variant === 'muted' && 'ui-card--muted', variant === 'interactive' && 'ui-card--interactive', variant === 'unstyled' && 'ui-card--unstyled', (glass || variant === 'glass') &&
-        composeClassName('ui-card--glass', glassIntensityClass(glass)), className), "data-slot": "card", "data-variant": variant, ...props, uiClassName: "ui-card" }));
-export const CardHeader = ({ as, ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), "data-slot": "card-header", ...props, uiClassName: "ui-card__header" }));
-export const CardTitle = ({ as, ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), "data-slot": "card-title", ...props, uiClassName: "ui-card__title" }));
-export const CardDescription = ({ as, ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), "data-slot": "card-description", ...props, uiClassName: "ui-card__description" }));
-export const CardContent = ({ as, ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), "data-slot": "card-content", ...props, uiClassName: "ui-card__content" }));
-export const CardFooter = ({ as, ...props }) => (_jsx(Primitive, { ...(as ? { as } : {}), "data-slot": "card-footer", ...props, uiClassName: "ui-card__footer" }));
 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', 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 }), children, caption && _jsx("figcaption", { children: caption })] }));
+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 = ({ series }) => (_jsx("ul", { "aria-label": "Chart legend", 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, series }) => (_jsxs("details", { className: "ui-chart__data", children: [_jsx("summary", { children: "View chart data" }), _jsx("div", { children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "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 ??
-                                            (datum?.y === null || datum === undefined ?
-                                                'Not available' :
-                                                formatValue(datum.y)) }, item.id));
-                                })] }, `${typeof category}:${String(category)}`))) })] }) })] }));
+                                    return (_jsx("td", { children: datum?.label ?? formatReactChartTableValue(datum?.y, formatValue) }, item.id));
+                                })] }, getChartCategoryKey(category)))) })] }) })] }));
 const formatChartPercentage = (percentage) => new Intl.NumberFormat(undefined, {
     maximumFractionDigits: percentage < 0.01 ? 1 : 0,
     style: 'percent'
@@ -200,7 +209,7 @@ export const Sparkline = ({ area = false, className, label = 'Trend', showEndpoi
                         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 = 'No chart data available.', formatCategory = String, formatValue = String, layout = 'grouped', orientation = 'vertical', series = emptyChartSeries, showLegend = series.length > 1, showTable = true, ...props }) => {
+export const BarChart = ({ categoryWidth, className, emptyLabel = 'No chart data available.', formatCategory = String, formatValue = String, layout = 'grouped', orientation = 'vertical', series = emptyChartSeries, showLegend = series.length > 1, showTable = true, summary, ...props }) => {
     const geometry = createLumenBarGeometry(series, {
         ...(categoryWidth === undefined ? {} : { categoryWidth }),
         layout,
@@ -217,17 +226,17 @@ export const BarChart = ({ categoryWidth, className, emptyLabel = 'No chart data
             top: 16
         } :
         { bottom: 52, left: 52, right: 16, top: 16 };
-    return (_jsxs(Chart, { className: composeClassName('ui-bar-chart', className), ...props, children: [showLegend && hasData && _jsx(ChartLegend, { series: series }), !hasData && (_jsx("p", { className: "ui-chart__empty", role: "status", children: emptyLabel })), _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 => {
+    return (_jsxs(Chart, { className: composeClassName('ui-bar-chart', className), summary: summary ?? formatLumenChartSummary(series, formatValue), ...props, children: [showLegend && hasData && _jsx(ChartLegend, { series: series }), !hasData && (_jsx("p", { className: "ui-chart__empty", role: "status", children: emptyLabel })), _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) }, `${typeof category.label}:${String(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
+                            }) }), _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}:${String(mark.category)}`))) })] }) }), showTable && hasData && (_jsx(ChartDataTable, { categories: categories, formatCategory: formatCategory, formatValue: formatValue, series: series }))] }));
+                                        formatCategory(mark.category)} · ${mark.seriesLabel}: ${formatValue(mark.value)}` }) }, `${mark.seriesId}:${getChartCategoryKey(mark.category)}`))) })] }) }), showTable && hasData && (_jsx(ChartDataTable, { categories: categories, formatCategory: formatCategory, formatValue: formatValue, series: series }))] }));
 };
 const getLineChartMarkerStep = (markers, categoryCount) => {
     if (markers === false || markers === 'none')
@@ -238,13 +247,16 @@ const getLineChartMarkerStep = (markers, categoryCount) => {
         return Math.max(1, Math.ceil(categoryCount / 24));
     return 1;
 };
-export const LineChart = ({ area = false, className, emptyLabel = 'No chart data available.', formatCategory = String, formatValue = String, markers = 'auto', referenceValue, series = emptyChartSeries, showLegend = series.length > 1, showTable = true, ...props }) => {
+export const LineChart = ({ area = false, className, emptyLabel = 'No chart data available.', formatCategory = String, formatValue = String, markers = 'auto', referenceValue, series = emptyChartSeries, showLegend = series.length > 1, showTable = true, summary, ...props }) => {
     const width = 640;
     const height = 320;
     const padding = 44;
     const categories = getLumenChartCategories(series);
     const hasData = hasLumenChartData(series);
-    const alignedSeries = series.map(item => alignLumenChartSeries(item, categories));
+    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
@@ -262,7 +274,7 @@ export const LineChart = ({ area = false, className, emptyLabel = 'No chart data
     const referenceY = referenceValue === undefined ?
         undefined :
         scaleLumenChartValue(referenceValue, domain, height - padding, padding);
-    return (_jsxs(Chart, { className: composeClassName('ui-line-chart', className), ...props, children: [showLegend && hasData && _jsx(ChartLegend, { series: series }), !hasData && (_jsx("p", { className: "ui-chart__empty", role: "status", children: emptyLabel })), _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 => {
+    return (_jsxs(Chart, { className: composeClassName('ui-line-chart', className), summary: summary ?? formatLumenChartSummary(series, formatValue), ...props, children: [showLegend && hasData && _jsx(ChartLegend, { series: series }), !hasData && (_jsx("p", { className: "ui-chart__empty", role: "status", children: emptyLabel })), _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: padding, x2: width - padding, y1: y, y2: y }), _jsx("text", { x: padding - 8, y: y, children: formatValue(tick) })] }, tick));
                             }) }), _jsx("g", { className: "ui-chart__axis-labels", children: categories.map((category, index) => {
@@ -273,7 +285,7 @@ export const LineChart = ({ area = false, className, emptyLabel = 'No chart data
                                 return (_jsx("text", { textAnchor: "middle", x: x, y: height - 14, children: series
                                         .flatMap(item => item.data)
                                         .find(datum => datum.x === category)?.xLabel ??
-                                        formatCategory(category) }, `${typeof category}:${String(category)}`));
+                                        formatCategory(category) }, getChartCategoryKey(category)));
                             }) }), referenceY !== undefined && (_jsx("line", { className: "ui-chart__reference", x1: padding, x2: width - padding, y1: referenceY, y2: referenceY })), geometries.map((geometry, index) => {
                             const item = series[index];
                             if (!item)
@@ -281,15 +293,86 @@ export const LineChart = ({ area = false, className, emptyLabel = 'No chart data
                             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)}` }) }, `${typeof point.x}:${String(point.x)}`)))] }, item.id));
+                                        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, series: series }))] }));
 };
-export const PieChart = ({ centerLabel, centerValue, className, series = emptyPieSeries, showLegend = true, showTable = true, valueFormatter = String, variant = 'donut', ...props }) => {
+export const PieChart = ({ centerLabel, centerValue, className, series = emptyPieSeries, showLegend = true, showTable = true, summary, valueFormatter = String, variant = 'donut', ...props }) => {
     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), ...props, children: [showLegend && hasData && (_jsx("ul", { "aria-label": "Chart legend", 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: "No chart data available." })), _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: "View chart data" }), _jsx("div", { children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Category" }), _jsx("th", { scope: "col", children: "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)}`))) })] }) })] }))] }));
+    return (_jsxs(Chart, { className: composeClassName('ui-pie-chart', getLumenPieChartVariantClassName(variant), className), summary: summary ?? formatLumenChartSummary([renderedSeries], valueFormatter), ...props, children: [showLegend && hasData && (_jsx("ul", { "aria-label": "Chart legend", 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: "No chart data available." })), _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: "View chart data" }), _jsx("div", { children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Category" }), _jsx("th", { scope: "col", children: "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, series = emptyChartSeries, showLegend = series.length > 1, showTable = true, summary, xScale = 'linear', ...props }) => {
+    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), ...props, children: [showLegend && hasData && _jsx(ChartLegend, { series: series }), !hasData && _jsx("p", { className: "ui-chart__empty", role: "status", children: "No chart data available." }), _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: "View chart data" }), _jsx("div", { children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "X" }), _jsx("th", { scope: "col", children: "Series" }), _jsx("th", { scope: "col", children: "Value" }), _jsx("th", { scope: "col", children: "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) })] }, `${point.seriesId}:${point.id ?? `${getChartCategoryKey(point.x)}:${pointIndex}`}`))) })] }) })] }))] }));
+};
+export const Heatmap = ({ className, data = emptyHeatmapData, formatValue = String, showTable = true, summary, ...props }) => {
+    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 ?? `${availableCells.length} available heatmap cells.`, ...props, children: [!hasData && _jsx("p", { className: "ui-chart__empty", role: "status", children: "No chart data available." }), _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: "View chart data" }), _jsx("div", { children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Column" }), _jsx("th", { scope: "col", children: "Row" }), _jsx("th", { scope: "col", children: "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) ? 'Not available' : formatValue(cell.value)) })] }, cell.id ?? `${getChartCategoryKey(cell.x)}:${getChartCategoryKey(cell.y)}`))) })] }) })] }))] }));
+};
+export const RangeChart = ({ className, data = emptyRangeData, formatValue = String, showTable = true, summary, tone = 'series-1', ...props }) => {
+    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 ?? (geometry.points.length === 0 ? 'No chart data available.' : `${geometry.points.length} available ranges.`), ...props, children: [geometry.points.length === 0 && _jsx("p", { className: "ui-chart__empty", role: "status", children: "No chart data available." }), _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: "View chart data" }), _jsx("div", { children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Category" }), _jsx("th", { scope: "col", children: "Low" }), _jsx("th", { scope: "col", children: "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) ? 'Not available' : formatValue(item.low) }), _jsx("td", { children: item.high === null || !Number.isFinite(item.high) ? 'Not available' : formatValue(item.high) })] }, item.id ?? getChartCategoryKey(item.x)))) })] }) })] }))] }));
+};
+export const ComboChart = ({ className, formatValue = String, series = emptyComboSeries, showLegend = true, showTable = true, summary, ...props }) => {
+    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), ...props, children: [showLegend && hasData && _jsx(ChartLegend, { series: series }), !hasData && _jsx("p", { className: "ui-chart__empty", role: "status", children: "No chart data available." }), _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, 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] }));
@@ -367,6 +450,7 @@ export const CopyButton = ({ children = 'Copy', className, copiedLabel = 'Copied
 };
 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;
@@ -378,12 +462,33 @@ export const Combobox = ({ className, defaultValue, id, label, list, onBlur, onC
         }
         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);
             }
-        }, 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 => {
+        }, 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);
                     }
@@ -396,13 +501,37 @@ export const Combobox = ({ className, defaultValue, id, label, list, onBlur, onC
                     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", type: "button", onClick: () => {
+                }, ...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))) })] }));
@@ -410,9 +539,39 @@ export const Combobox = ({ className, defaultValue, id, label, list, onBlur, onC
 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 }) => (_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 => (_jsx("th", { "data-ui-datatable-sort-type": column.sort, "data-ui-datatable-sortable": column.sortable ? 'true' : undefined, scope: "col", children: column.header ?? column.label ?? column.key }, column.key))) }) }), _jsx("tbody", { children: rows.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) }));
+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;
@@ -545,33 +704,6 @@ export const Dialog = ({ className, defaultOpen, glass = false, layout = 'center
     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 Direction = ({ className, dir = 'ltr', ...props }) => (_jsx("div", { className: composeClassName('ui-direction', className), dir: dir, ...props }));
-export const Container = ({ as = 'div', className, size = 'lg', ...props }) => createElement(as, {
-    className: composeClassName('ui-container', `ui-container--${size}`, className),
-    'data-size': size,
-    'data-ui-container': true,
-    ...props
-});
-export const Grid = ({ as = 'div', className, columns = 'auto', gap = 'md', minItemWidth, style, ...props }) => {
-    const gridStyle = {
-        ...style,
-        '--ui-grid-min': minItemWidth
-    };
-    return createElement(as, {
-        className: composeClassName('ui-grid', `ui-grid--columns-${columns}`, `ui-grid--gap-${gap}`, className),
-        'data-columns': columns,
-        'data-ui-grid': true,
-        style: gridStyle,
-        ...props
-    });
-};
-export const Stack = ({ align = 'stretch', as = 'div', className, direction = 'vertical', gap = 'md', justify = 'start', wrap = false, ...props }) => createElement(as, {
-    className: composeClassName('ui-stack', `ui-stack--${direction}`, `ui-stack--gap-${gap}`, `ui-stack--align-${align}`, `ui-stack--justify-${justify}`, wrap && 'ui-stack--wrap', className),
-    'data-direction': direction,
-    'data-ui-stack': true,
-    ...props
-});
-export const VisuallyHidden = ({ className, focusable = false, ...props }) => (_jsx("span", { className: composeClassName('ui-visually-hidden', focusable && 'ui-visually-hidden--focusable', className), "data-ui-visually-hidden": true, ...props }));
 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 });
@@ -595,6 +727,59 @@ export const DropdownMenuItem = ({ children, className, disabled = false, onClic
 };
 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 }) => {
@@ -629,8 +814,6 @@ export const Icon = ({ 'aria-hidden': ariaHidden, 'aria-label': ariaLabel, child
     });
     return (_jsx("span", { "aria-hidden": accessibility.ariaHidden, "aria-label": accessibility.ariaLabel, className: composeClassName('ui-icon', iconSizeClass(size), className), role: accessibility.role, ...props, children: icon ? renderNamedIcon(icon) : children }));
 };
-export const Input = ({ className, ref, type = 'text', visualSize = 'default', ...props }) => (_jsx("input", { className: composeClassName('ui-input', visualSize === 'sm' && 'ui-input--sm', visualSize === 'lg' && 'ui-input--lg', className), ref: ref, type: type, ...props }));
-export const Label = ({ className, ...props }) => (_jsx("label", { className: composeClassName('ui-label', className), ...props }));
 const getPasswordFieldDescribedBy = (ariaDescribedBy, hintId, errorId) => [ariaDescribedBy, hintId, errorId].filter(Boolean).join(' ') || undefined;
 const usePasswordVisibility = (inputRef) => {
     const [visible, setVisible] = useState(false);
@@ -725,10 +908,56 @@ const phoneInputSizeModifiers = (size) => {
     }
     return { inputClass: undefined, selectClass: undefined };
 };
-export const PhoneInput = ({ className, countries = emptyOptions, countryLabel = 'Country code', countryName = 'country', defaultCountryValue, defaultValue, name = 'phone', placeholder = 'Phone number', size = 'default', ...props }) => {
+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 }));
@@ -744,12 +973,6 @@ 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 Progress = ({ className, max = 100, value = 0, ...props }) => {
-    const safeMax = max > 0 ? max : 100;
-    const safeValue = Math.min(safeMax, Math.max(0, value));
-    const percentage = (safeValue / safeMax) * 100;
-    return (_jsx("div", { "aria-valuemax": safeMax, "aria-valuemin": 0, "aria-valuenow": safeValue, className: composeClassName('ui-progress', className), role: "progressbar", ...props, children: _jsx("span", { className: "ui-progress__bar", "data-slot": "progress-indicator", style: { width: `${percentage}%` } }) }));
-};
 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)) {
@@ -1055,16 +1278,12 @@ export const ListBox = (inputProps) => {
                 (_jsx("p", { className: "ui-list-box__status", role: "status", children: loadingMessage })) :
                 null] }));
 };
-export const Separator = ({ className, orientation = 'horizontal', ...props }) => (_jsx("hr", { "aria-orientation": orientation, className: composeClassName('ui-separator', `ui-separator--${orientation}`, className), "data-orientation": orientation, ...props }));
 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 Skeleton = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-skeleton', className), ...props }));
 export const Slider = ({ className, ref, type = 'range', ...props }) => (_jsx("input", { className: composeClassName('ui-slider', className), ref: ref, type: type, ...props }));
-export const Sonner = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-sonner', className), "data-ui-sonner": true, ...props }));
-export const Spinner = ({ 'aria-hidden': ariaHidden, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, className, role, ...props }) => {
-    const isAccessible = Boolean(ariaLabel || ariaLabelledby);
-    return (_jsx("span", { "aria-hidden": ariaHidden ?? (isAccessible ? undefined : true), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className: composeClassName('ui-spinner', className), role: role ?? (isAccessible ? 'status' : undefined), ...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 }));
+/** @deprecated Use ToastViewport instead. */
+export const Sonner = ({ className, ...props }) => (_jsx(ToastViewport, { className: composeClassName('ui-sonner', className), "data-ui-sonner": true, ...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, ...props }) => (_jsx("div", { className: composeClassName('ui-table-wrap', glassClass('ui-table-wrap', glass), className), "data-slot": "table", ...props }));
 export const Tabs = ({ children, className, defaultValue, glass = false, onValueChange, orientation, value, ...props }) => {
@@ -1134,7 +1353,6 @@ export const CodeTabs = ({ ariaLabel = 'Code examples', className, copy = true,
                         { 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 Textarea = ({ className, ref, rows = 4, ...props }) => (_jsx("textarea", { className: composeClassName('ui-textarea', className), ref: ref, rows: rows, ...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 }));
@@ -1150,19 +1368,18 @@ export const TooltipContent = ({ ...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 Typography = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-typography', className), ...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, invertOnDark = false, loading, ...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', className),
+        className: composeClassName('ui-image', invertOnDark && 'ui-image--invert-dark', `ui-image--fit-${fit}`, `ui-image--radius-${radius}`, className),
         ...(resolvedLoading ? { loading: resolvedLoading } : {})
     });
 };
@@ -1374,7 +1591,6 @@ export const TimelineItem = ({ className, children, dot, ...props }) => (_jsxs("
 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 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" }), variant === 'empty' && (_jsxs("g", { children: [_jsx("path", { d: "M32 48h56l-7 35H39l-7-35Z" }), _jsx("path", { d: "M43 48 49 36h22l6 12M47 66h26" })] })), variant === 'success' && (_jsxs("g", { children: [_jsx("circle", { cx: "60", cy: "60", r: "28" }), _jsx("path", { d: "m45 60 10 10 21-23" })] })), variant === 'error' && (_jsxs("g", { children: [_jsx("circle", { cx: "60", cy: "60", r: "28" }), _jsx("path", { d: "m49 49 22 22m0-22L49 71" })] })), variant === 'offline' && (_jsxs("g", { children: [_jsx("path", { d: "M37 74h44a14 14 0 0 0 1-28 23 23 0 0 0-42-4 16 16 0 0 0-3 32Z" }), _jsx("path", { d: "m38 34 44 52" })] }))] }) }));
 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')