pixelize-design-library 2.4.2-beta.42 → 2.4.2-beta.44

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.js

@@ -6,14 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ApexBarChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const react_2 = require("@chakra-ui/react");
 const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
 const chartBase_1 = require("../chartBase");
+const LazyReactApexChart_1 = __importDefault(require("../LazyReactApexChart"));
+const ApexChartFallback_1 = __importDefault(require("../ApexChartFallback"));
 /** Bar chart wrapper around react-apexcharts (horizontal/stacked/distributed via props), themed via chartColorsFromTheme + chartBase. */
 function ApexBarChart({ data, labels, title, titlePosition, height = 400, width = 500, barColor, xAxisStyle, yAxisStyle, titleStyle, horizontal = false, distributed = false, seriesName = "Data", series, stacked = false, showLegend, legendPosition = "bottom", }) {
     const theme = (0, react_2.useTheme)();
     const palette = theme.colors;
+    const chartId = `apex-bar-${(0, react_1.useId)().replace(/:/g, "")}`;
     const seriesColors = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette), [palette]);
     const resolvedBarColors = (0, react_1.useMemo)(() => barColor !== null && barColor !== void 0 ? barColor : (distributed ? seriesColors : [seriesColors[1]]), [barColor, distributed, seriesColors]);
     const axisColor = (0, chartColorsFromTheme_1.chartAxisLabelColor)(palette);
@@ -21,7 +23,7 @@ function ApexBarChart({ data, labels, title, titlePosition, height = 400, width
     const mergedYAxis = (0, react_1.useMemo)(() => { var _a; return ({ ...(0, chartBase_1.baseAxisLabels)(palette), ...yAxisStyle, colors: (_a = yAxisStyle === null || yAxisStyle === void 0 ? void 0 : yAxisStyle.color) !== null && _a !== void 0 ? _a : axisColor }); }, [palette, axisColor, yAxisStyle]);
     const mergedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
     const options = (0, react_1.useMemo)(() => ({
-        chart: (0, chartBase_1.baseChart)(palette, { type: "bar", stacked }),
+        chart: (0, chartBase_1.baseChart)(palette, { id: chartId, type: "bar", stacked }),
         plotOptions: {
             bar: {
                 borderRadius: 4,
@@ -50,6 +52,7 @@ function ApexBarChart({ data, labels, title, titlePosition, height = 400, width
         colors: resolvedBarColors,
     }), [
         palette,
+        chartId,
         labels,
         mergedXAxis,
         mergedYAxis,
@@ -64,6 +67,6 @@ function ApexBarChart({ data, labels, title, titlePosition, height = 400, width
         legendPosition,
         series,
     ]);
-    const resolvedSeries = series !== null && series !== void 0 ? series : [{ name: seriesName, data: data !== null && data !== void 0 ? data : [] }];
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: resolvedSeries, type: "bar", height: height, width: width }) }));
+    const resolvedSeries = (0, react_1.useMemo)(() => series !== null && series !== void 0 ? series : [{ name: seriesName, data: data !== null && data !== void 0 ? data : [] }], [series, seriesName, data]);
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ApexChartFallback_1.default, { height: height, width: width }), children: (0, jsx_runtime_1.jsx)(LazyReactApexChart_1.default, { options: options, series: resolvedSeries, type: "bar", height: height, width: width }) }) }));
 }

package/dist/Components/Apexcharts/ApexChartFallback.d.ts

@@ -0,0 +1,7 @@
+type ApexChartFallbackProps = {
+    height?: string | number;
+    width?: string | number;
+};
+/** Suspense fallback while the lazy react-apexcharts chunk loads — reserves the chart's own footprint. */
+declare const ApexChartFallback: ({ height, width }: ApexChartFallbackProps) => import("react/jsx-runtime").JSX.Element;
+export default ApexChartFallback;

package/dist/Components/Apexcharts/ApexChartFallback.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+/** Suspense fallback while the lazy react-apexcharts chunk loads — reserves the chart's own footprint. */
+const ApexChartFallback = ({ height = "320px", width = "100%" }) => ((0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: height, width: width, borderRadius: "lg" }));
+exports.default = ApexChartFallback;

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.js

@@ -5,15 +5,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const react_2 = require("@chakra-ui/react");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
 const chartBase_1 = require("../chartBase");
+const LazyReactApexChart_1 = __importDefault(require("../LazyReactApexChart"));
+const ApexChartFallback_1 = __importDefault(require("../ApexChartFallback"));
 /** Line chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
 const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePosition = "center", titleStyle, compact = false, toolbarBreakpointPct = 0.6, titleClampLines, showTitleEllipsis = true, showSeries = true, series: seriesNames, variant = "basic", }) => {
     const theme = (0, react_2.useTheme)();
     const palette = theme.colors;
+    const chartId = `apex-line-${(0, react_1.useId)().replace(/:/g, "")}`;
     const resolvedLineColors = lineColors !== null && lineColors !== void 0 ? lineColors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette);
     const resolvedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
     const initialName = Array.isArray(seriesNames) && seriesNames.length ? seriesNames[0] : "Series 1";
@@ -87,6 +89,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
     const showToolbar = !isSmall && ratio >= toolbarBreakpointPct;
     const options = (0, react_1.useMemo)(() => ({
         chart: (0, chartBase_1.baseChart)(palette, {
+            id: chartId,
             type: "line",
             animations: variant === "realtime"
                 ? { enabled: true, speed: 1000, dynamicAnimation: { speed: 1000 } }
@@ -123,6 +126,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
         },
     }), [
         variant,
+        chartId,
         showToolbar,
         resolvedLineColors,
         labels,
@@ -154,6 +158,6 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
                         wordBreak: clampLines > 1 ? "break-word" : undefined,
                         lineHeight: clampLines > 1 ? "1.2em" : undefined,
                         maxHeight: clampLines > 1 ? `${1.2 * clampLines}em` : undefined,
-                    }, children: title }) })), (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: apexSeries, type: "line", height: height, width: width })] }));
+                    }, children: title }) })), (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ApexChartFallback_1.default, { height: height, width: width }), children: (0, jsx_runtime_1.jsx)(LazyReactApexChart_1.default, { options: options, series: apexSeries, type: "line", height: height, width: width }) })] }));
 };
 exports.default = ApexLineChart;

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -5,10 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
 const chartBase_1 = require("../chartBase");
+const LazyReactApexChart_1 = __importDefault(require("../LazyReactApexChart"));
+const ApexChartFallback_1 = __importDefault(require("../ApexChartFallback"));
 const getValidLegendPosition = (position) => {
     const validPositions = ["left", "right", "top", "bottom"];
     if (validPositions.includes(position)) {
@@ -23,6 +24,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
     const { colors: palette } = (0, useCustomTheme_1.useCustomTheme)();
     const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
     const gap = surfaceColor !== null && surfaceColor !== void 0 ? surfaceColor : ink.surface;
+    const chartId = `apex-pie-${(0, react_1.useId)().replace(/:/g, "")}`;
     const mergedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
     const seriesColors = (0, react_1.useMemo)(() => { var _a; return (_a = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _a !== void 0 ? _a : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette); }, [chartColor, donutColors, palette]);
     const labelInks = (0, react_1.useMemo)(() => seriesColors.map((c) => (0, chartColorsFromTheme_1.labelOnSeries)(c, palette)), [seriesColors, palette]);
@@ -148,6 +150,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
             states: { hover: { filter: { type: "lighten", value: 0.08 } } },
             ...extraOptions,
             chart: (0, chartBase_1.baseChart)(palette, {
+                id: chartId,
                 type: isDonut ? "donut" : "pie",
                 ...((_a = extraOptions.chart) !== null && _a !== void 0 ? _a : {}),
             }),
@@ -165,6 +168,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
         };
     }, [
         variant,
+        chartId,
         labels,
         seriesColors,
         legend,
@@ -182,6 +186,6 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
         ink.muted,
         ink.text,
     ]);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ApexChartFallback_1.default, { height: height, width: width }), children: (0, jsx_runtime_1.jsx)(LazyReactApexChart_1.default, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }) }));
 };
 exports.default = ApexPieChart;

package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.js

@@ -5,24 +5,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const react_2 = require("@chakra-ui/react");
 const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
 const chartBase_1 = require("../chartBase");
+const LazyReactApexChart_1 = __importDefault(require("../LazyReactApexChart"));
+const ApexChartFallback_1 = __importDefault(require("../ApexChartFallback"));
 /** Polar-area chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
 const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartColors, titlePosition = "center", titleStyle, legendStyle, variant = "basic", }) => {
     const theme = (0, react_2.useTheme)();
     const palette = theme.colors;
     const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
+    const chartId = `apex-polar-${(0, react_1.useId)().replace(/:/g, "")}`;
     const mergedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
     const mergedLegendStyle = (0, react_1.useMemo)(() => {
         const defaults = {
-            colors: palette.text[900],
+            colors: ink.text,
             position: "bottom",
             useSeriesColors: false,
         };
         return { ...defaults, ...legendStyle };
-    }, [palette, legendStyle]);
+    }, [legendStyle, ink.text]);
     const resolvedChartColors = (0, react_1.useMemo)(() => chartColors !== null && chartColors !== void 0 ? chartColors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette), [chartColors, palette]);
     const options = (0, react_1.useMemo)(() => {
         let extraOptions = {};
@@ -50,7 +52,7 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
                 break;
         }
         return {
-            chart: (0, chartBase_1.baseChart)(palette, { type: "polarArea" }),
+            chart: (0, chartBase_1.baseChart)(palette, { id: chartId, type: "polarArea" }),
             labels,
             colors: resolvedChartColors,
             legend: {
@@ -79,6 +81,7 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
         };
     }, [
         variant,
+        chartId,
         labels,
         resolvedChartColors,
         mergedLegendStyle,
@@ -89,6 +92,6 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
         ink.surface,
         ink.grid,
     ]);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: data, type: "polarArea", height: height, width: width }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ApexChartFallback_1.default, { height: height, width: width }), children: (0, jsx_runtime_1.jsx)(LazyReactApexChart_1.default, { options: options, series: data, type: "polarArea", height: height, width: width }) }) }));
 };
 exports.default = ApexPolarChart;

package/dist/Components/Apexcharts/ApexRadialChart/ApexRadialChart.js

@@ -5,17 +5,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
 const chartBase_1 = require("../chartBase");
+const LazyReactApexChart_1 = __importDefault(require("../LazyReactApexChart"));
+const ApexChartFallback_1 = __importDefault(require("../ApexChartFallback"));
 /** Radial/gauge chart (gauge/multi/semi); `hollowSize` is silently overridden to a fixed `"52%"` whenever `variant="multi"`. */
 const ApexRadialChart = ({ variant = "gauge", data, labels, title, titlePosition = "left", height = 320, width = "100%", colors, totalLabel = "Total", trackColor, hollowSize = "62%", }) => {
     const { colors: palette } = (0, useCustomTheme_1.useCustomTheme)();
     const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
+    const chartId = `apex-radial-${(0, react_1.useId)().replace(/:/g, "")}`;
     const seriesColors = (0, react_1.useMemo)(() => colors !== null && colors !== void 0 ? colors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette), [colors, palette]);
     const options = (0, react_1.useMemo)(() => ({
-        chart: (0, chartBase_1.baseChart)(palette, { type: "radialBar" }),
+        chart: (0, chartBase_1.baseChart)(palette, { id: chartId, type: "radialBar" }),
         colors: seriesColors,
         labels: labels !== null && labels !== void 0 ? labels : [],
         stroke: { lineCap: "round" },
@@ -56,7 +58,7 @@ const ApexRadialChart = ({ variant = "gauge", data, labels, title, titlePosition
         },
         title: { text: title, align: titlePosition, style: (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette) },
         legend: { ...(0, chartBase_1.baseLegend)(palette, "bottom"), show: variant === "multi" },
-    }), [palette, variant, seriesColors, labels, title, titlePosition, totalLabel, trackColor, hollowSize, ink.muted, ink.text]);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: data, type: "radialBar", height: height, width: width }) }));
+    }), [palette, chartId, variant, seriesColors, labels, title, titlePosition, totalLabel, trackColor, hollowSize, ink.muted, ink.text]);
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ApexChartFallback_1.default, { height: height, width: width }), children: (0, jsx_runtime_1.jsx)(LazyReactApexChart_1.default, { options: options, series: data, type: "radialBar", height: height, width: width }) }) }));
 };
 exports.default = ApexRadialChart;

package/dist/Components/Apexcharts/LazyReactApexChart.d.ts

@@ -0,0 +1,2 @@
+declare const LazyReactApexChart: import("react").LazyExoticComponent<typeof import("react-apexcharts").default>;
+export default LazyReactApexChart;

package/dist/Components/Apexcharts/LazyReactApexChart.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const lazyWithRetry_1 = require("../../Utils/lazyWithRetry");
+// Keeps apexcharts/react-apexcharts (99% of the wrapper's weight) out of the main
+// bundle; shared so all six chart wrappers resolve the same dynamic chunk once.
+const LazyReactApexChart = (0, lazyWithRetry_1.lazyWithRetry)(() => Promise.resolve().then(() => __importStar(require("react-apexcharts"))));
+exports.default = LazyReactApexChart;

package/dist/Components/AppSwitcher/AppMark.d.ts

@@ -1,11 +1,6 @@
 import React from "react";
 import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme";
 import { type AppOption } from "./AppSwitcherProps";
-/**
- * One hue per app. `avatarColor` hashes into an 8-hue series, so six apps collide more often than
- * not — Billing and Account shipped identical marks. Assigned over the WHOLE list, never the
- * filtered one, so searching cannot repaint a mark.
- */
 export declare const assignAppHues: (apps: readonly AppOption[], mode: ReturnType<typeof chartMode>) => string[];
 export declare const appTint: (hue: string, surface: string, white: string) => string;
 export declare const appTintInk: (fill: string, white: string, black: string) => string;

package/dist/Components/AppSwitcher/AppMark.js

@@ -15,11 +15,7 @@ const OrgSwitcherProps_1 = require("../OrgSwitcher/OrgSwitcherProps");
 const AppSwitcherProps_1 = require("./AppSwitcherProps");
 // The app's own hue at 85% strength — the solid mark, softened just off full saturation.
 const FILL_STRENGTH = 0.85;
-/**
- * One hue per app. `avatarColor` hashes into an 8-hue series, so six apps collide more often than
- * not — Billing and Account shipped identical marks. Assigned over the WHOLE list, never the
- * filtered one, so searching cannot repaint a mark.
- */
+// NOTE: assigned over the WHOLE app list, never the filtered one, so searching can't repaint a mark.
 const assignAppHues = (apps, mode) => {
     const ramp = chartColorsFromTheme_1.CATEGORICAL_SERIES[mode].map(statusTone_1.resolveAvatarFill);
     const taken = new Set(apps.flatMap((a) => (a.color ? [a.color] : [])));

package/dist/Components/AppSwitcher/AppSwitcher.js

@@ -208,15 +208,10 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
         return null;
     const rowHoverBg = (0, rowStates_1.listRowBackgrounds)(theme.colors).active;
     const footerRule = (0, outlineRung_1.ruleInk)(theme.colors.boxborder[200], [theme.colors.backgroundColor.subtle], outlineRung_1.CHROME_RULE);
-    // Neutral, not `backgroundColor.tertiary`: that rung is brand-tinted in the hand-authored light
-    // palettes, so lifting it painted the row a saturated block. The rail identifies the row, so the
-    // fill only has to be perceptible — pushed further it is a mid-grey slab that reads disabled.
+    // NOTE: neutral, not backgroundColor.tertiary — that rung is brand-tinted and lifting it painted a saturated block.
     const currentBg = (0, outlineRung_1.neutralStep)(theme.colors.backgroundColor.light, outlineRung_1.MIN_PERCEPTIBLE_STEP);
-    // The brand rail is the whole marker — no ring, no badge. `accentText` already clears AA as ink
-    // on the canvas; lifting it to AA_NON_TEXT here guarantees it on the row's own fill too, for a
-    // brand whose accent is pale.
     const currentBar = (0, outlineRung_1.liftToContrast)(theme.colors.accentText, currentBg, outlineRung_1.AA_NON_TEXT);
-    // A derived surface is outside what `withSurfaceRungs` settled, so its ink is resolved here.
+    // NOTE: a derived surface is outside what withSurfaceRungs settled, so its ink is resolved here.
     const currentName = (0, outlineRung_1.liftToContrast)(theme.colors.text[900], currentBg, accentText_1.AA_NORMAL_TEXT);
     const currentSub = (0, outlineRung_1.liftToContrast)(theme.colors.textMuted, currentBg, accentText_1.AA_NORMAL_TEXT);
     const width = panelWidth !== null && panelWidth !== void 0 ? panelWidth : "28rem";
@@ -230,7 +225,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                             return;
                         }
                         handlePanelKeyDown(e);
-                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Grip, { size: s.icon + 1 }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.backgroundColor.light, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1" }), hint && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "kbd", fontSize: "0.6875rem", fontFamily: "inherit", color: theme.colors.textMuted, border: "1px solid", borderRadius: "base", px: 1.5, py: 0.5, children: hint }))] }), showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, pb: 2, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
+                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Grip, { size: s.icon + 1 }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1" }), hint && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "kbd", fontSize: "0.6875rem", fontFamily: "inherit", color: theme.colors.textMuted, border: "1px solid", borderRadius: "full", px: 1.5, py: 0.5, children: hint }))] }), showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, pb: 2, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && visible.length > 0) {
                                                 e.preventDefault();
                                                 focusItem(0);
@@ -243,7 +238,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                                                     closeAndRefocus();
                                             }
                                         } })] }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "menu", "aria-label": HEADING, maxH: maxHeight, overflowY: "auto", px: 2, pb: 2, display: "grid", gridTemplateColumns: `repeat(${COLUMNS}, minmax(0, 1fr))`, gap: "2px", children: [isLoading
-                                    ? [0, 1, 2, 3].map((i) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, px: 2, py: 2, minH: s.row, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { boxSize: s.mark, borderRadius: "lg" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "0.75rem", flex: "1", borderRadius: "base" })] }, i)))
+                                    ? [0, 1, 2, 3].map((i) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, px: 2, py: 2, minH: s.row, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { boxSize: s.mark, borderRadius: "lg" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "0.75rem", flex: "1", borderRadius: "lg" })] }, i)))
                                     : visible.map((app, idx) => {
                                         var _a;
                                         const isCurrent = app.id === currentAppId;

package/dist/Components/Avatar/Avatar.d.ts

@@ -0,0 +1,3 @@
+import type { AvatarProps } from "./AvatarProps";
+declare const Avatar: ({ name, src, size, status, ariaLabel, getInitials, "data-testid": testId }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default Avatar;

package/dist/Components/Avatar/Avatar.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const avatarColorway_1 = require("./avatarColorway");
+const avatarSizing_1 = require("./avatarSizing");
+const STATUS_TONE = {
+    online: "success", away: "warning", busy: "error", offline: "neutral",
+};
+const STATUS_LABEL = {
+    online: "Online", away: "Away", busy: "Busy", offline: "Offline",
+};
+const Avatar = ({ name, src, size = "md", status, ariaLabel, getInitials, "data-testid": testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const [imageFailed, setImageFailed] = (0, react_1.useState)(false);
+    const px = avatarSizing_1.SIZE_PX[size];
+    const showImage = Boolean(src) && !imageFailed;
+    const { bg, color } = (0, avatarColorway_1.resolveAvatarColorway)(name, colors);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", boxSize: `${px}px`, flexShrink: 0, "data-testid": testId, children: [showImage ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: src, alt: name, boxSize: `${px}px`, borderRadius: "full", objectFit: "cover", onError: () => setImageFailed(true) })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "img", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, align: "center", justify: "center", boxSize: `${px}px`, borderRadius: "full", bg: bg, color: color, fontSize: avatarSizing_1.FONT_SIZE[size], fontWeight: 600, userSelect: "none", children: (getInitials !== null && getInitials !== void 0 ? getInitials : avatarColorway_1.initialsFor)(name) })), status ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: "0", right: "0", boxSize: avatarSizing_1.DOT_SIZE[size], borderRadius: "full", bg: (0, tone_1.toneInk)(colors, STATUS_TONE[status]), border: "2px solid", borderColor: colors.background[50] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: STATUS_LABEL[status] })] })) : null] }));
+};
+exports.default = Avatar;

package/dist/Components/Avatar/AvatarGroup.d.ts

@@ -0,0 +1,3 @@
+import type { AvatarGroupProps } from "./AvatarGroupProps";
+declare const AvatarGroup: ({ people, max, size, ariaLabel, "data-testid": testId }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default AvatarGroup;

package/dist/Components/Avatar/AvatarGroup.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const Avatar_1 = __importDefault(require("./Avatar"));
+const avatarSizing_1 = require("./avatarSizing");
+const summarize = (names, overflow) => {
+    if (overflow <= 0)
+        return names.join(", ");
+    return `${names.join(", ")} and ${overflow} more`;
+};
+const AvatarGroup = ({ people, max = 4, size = "md", ariaLabel, "data-testid": testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const shown = people.slice(0, max);
+    const overflow = people.length - shown.length;
+    const px = avatarSizing_1.SIZE_PX[size];
+    const ring = { border: "2px solid", borderColor: colors.background[50] };
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "group", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : summarize(people.map((p) => p.name), overflow), "data-testid": testId, children: [shown.map((person, i) => ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": true, ml: i === 0 ? 0 : `-${avatarSizing_1.OVERLAP[size]}`, borderRadius: "full", ...ring, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { name: person.name, src: person.src, size: size }) }, `${person.name}-${i}`))), overflow > 0 ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "aria-hidden": true, ml: `-${avatarSizing_1.OVERLAP[size]}`, align: "center", justify: "center", boxSize: `${px}px`, borderRadius: "full", bg: colors.backgroundColor.secondary, color: colors.text[700], fontSize: avatarSizing_1.FONT_SIZE[size], fontWeight: 600, ...ring, children: ["+", overflow] })) : null] }));
+};
+exports.default = AvatarGroup;

package/dist/Components/Avatar/AvatarGroupProps.d.ts

@@ -0,0 +1,19 @@
+import type { AvatarSize } from "./AvatarProps";
+/** One member of an AvatarGroup stack. */
+export type AvatarGroupMember = {
+    name: string;
+    src?: string;
+};
+/** Overlapping stack of Avatars with a "+N" overflow chip past `max`. */
+export interface AvatarGroupProps {
+    /** Rendered left to right; only the first `max` show as avatars. */
+    people: AvatarGroupMember[];
+    /** Default 4. */
+    max?: number;
+    /** Applies to every avatar and the overflow chip. Default "md". */
+    size?: AvatarSize;
+    /** Overrides the auto-generated group `aria-label`. */
+    ariaLabel?: string;
+    /** Test hook on the root. */
+    "data-testid"?: string;
+}

package/dist/Components/Avatar/AvatarProps.d.ts

@@ -0,0 +1,22 @@
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** ControlSize plus "2xs" for a badge-sized overlay and "xl" for a profile header. */
+export type AvatarSize = ControlSize | "2xs" | "xl";
+/** Presence indicator; the dot color and its accessible label both follow this. */
+export type AvatarStatus = "online" | "away" | "busy" | "offline";
+/** Image with graceful initials fallback, a deterministic per-name fill, and an optional presence dot. */
+export interface AvatarProps {
+    /** Used for initials, alt text, the deterministic fill color, and the status label prefix. */
+    name: string;
+    /** Image URL. Falls back to initials on a missing src or a failed load. */
+    src?: string;
+    /** Default "md". */
+    size?: AvatarSize;
+    /** Presence dot in the bottom-right corner; omitted entirely when unset. */
+    status?: AvatarStatus;
+    /** Overrides the auto-generated `aria-label` (defaults to `name`). */
+    ariaLabel?: string;
+    /** Replaces the built-in two-letter initials derivation. */
+    getInitials?: (name: string) => string;
+    /** Test hook on the root. */
+    "data-testid"?: string;
+}

package/dist/Components/Avatar/AvatarProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Avatar/avatarColorway.d.ts

@@ -0,0 +1,11 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+declare const AVATAR_SCALE_KEYS: readonly ["red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink"];
+export type AvatarScaleKey = (typeof AVATAR_SCALE_KEYS)[number];
+export declare const avatarScaleKeyFor: (seed: string) => AvatarScaleKey;
+export type AvatarColorway = {
+    bg: string;
+    color: string;
+};
+export declare const resolveAvatarColorway: (seed: string, colors: PaletteProps) => AvatarColorway;
+export declare const initialsFor: (name: string) => string;
+export {};

package/dist/Components/Avatar/avatarColorway.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initialsFor = exports.resolveAvatarColorway = exports.avatarScaleKeyFor = void 0;
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const AVATAR_SCALE_KEYS = [
+    "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink",
+];
+const hashSeed = (seed) => {
+    let hash = 0;
+    for (let i = 0; i < seed.length; i += 1)
+        hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;
+    return hash;
+};
+const avatarScaleKeyFor = (seed) => AVATAR_SCALE_KEYS[hashSeed(seed) % AVATAR_SCALE_KEYS.length];
+exports.avatarScaleKeyFor = avatarScaleKeyFor;
+// Always via resolveFilledSurface, never scale[500] + a guessed ink.
+const resolveAvatarColorway = (seed, colors) => {
+    const scale = colors[(0, exports.avatarScaleKeyFor)(seed)];
+    const { fill, color } = (0, filledSurface_1.resolveFilledSurface)(scale, colors);
+    return { bg: fill, color };
+};
+exports.resolveAvatarColorway = resolveAvatarColorway;
+const initialsFor = (name) => {
+    const words = name.trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0)
+        return "";
+    if (words.length === 1)
+        return words[0].slice(0, 2).toUpperCase();
+    return (words[0][0] + words[1][0]).toUpperCase();
+};
+exports.initialsFor = initialsFor;

package/dist/Components/Avatar/avatarSizing.d.ts

@@ -0,0 +1,5 @@
+import type { AvatarSize } from "./AvatarProps";
+export declare const SIZE_PX: Record<AvatarSize, number>;
+export declare const FONT_SIZE: Record<AvatarSize, string>;
+export declare const DOT_SIZE: Record<AvatarSize, string>;
+export declare const OVERLAP: Record<AvatarSize, string>;

package/dist/Components/Avatar/avatarSizing.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OVERLAP = exports.DOT_SIZE = exports.FONT_SIZE = exports.SIZE_PX = void 0;
+exports.SIZE_PX = {
+    "2xs": 16, xs: 24, sm: 32, md: 40, lg: 48, xl: 64,
+};
+exports.FONT_SIZE = {
+    "2xs": "0.5rem", xs: "0.625rem", sm: "0.75rem", md: "0.875rem", lg: "1rem", xl: "1.25rem",
+};
+exports.DOT_SIZE = {
+    "2xs": "5px", xs: "6px", sm: "8px", md: "9px", lg: "10px", xl: "12px",
+};
+exports.OVERLAP = {
+    "2xs": "5px", xs: "8px", sm: "10px", md: "12px", lg: "14px", xl: "18px",
+};

package/dist/Components/Backdrop/Backdrop.d.ts

@@ -0,0 +1,3 @@
+import { BackdropProps } from "./BackdropProps";
+/** Fading scrim that blocks (or optionally lets through) the page behind; prefer it over a hand-rolled overlay. */
+export default function Backdrop({ open, variant, loader, text, invisible, allowBackgroundInteraction, onClick, transitionDuration, container, zIndex, children, ariaLabel, }: BackdropProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Backdrop/Backdrop.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Backdrop;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const Spinner_1 = __importDefault(require("../Spinner/Spinner"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const scrim_1 = require("../../Theme/tokens/builders/scrim");
+const overlay_styles_1 = require("../../Theme/chakra/overlay.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+const ENTER_MS = 225;
+const EXIT_MS = 195;
+const SPINNER_BOX = "2.5rem";
+const SPINNER_THICKNESS = "0.225rem";
+/** Fading scrim that blocks (or optionally lets through) the page behind; prefer it over a hand-rolled overlay. */
+function Backdrop({ open, variant = "dim", loader = false, text, invisible = false, allowBackgroundInteraction = false, onClick, transitionDuration, container = false, zIndex, children, ariaLabel, }) {
+    var _a, _b;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const durations = typeof transitionDuration === "number"
+        ? { enter: transitionDuration, exit: transitionDuration }
+        : { enter: (_a = transitionDuration === null || transitionDuration === void 0 ? void 0 : transitionDuration.enter) !== null && _a !== void 0 ? _a : ENTER_MS, exit: (_b = transitionDuration === null || transitionDuration === void 0 ? void 0 : transitionDuration.exit) !== null && _b !== void 0 ? _b : EXIT_MS };
+    const isDim = variant === "dim";
+    const scrim = invisible ? "transparent" : isDim ? (0, scrim_1.backdropScrim)(colors) : (0, scrim_1.overlayScrim)(colors);
+    const label = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (loader ? "Loading" : undefined);
+    return ((0, jsx_runtime_1.jsx)(react_1.Fade, { in: open, unmountOnExit: true, transition: { enter: { duration: durations.enter / 1000 }, exit: { duration: durations.exit / 1000 } }, style: {
+            position: container ? "absolute" : "fixed",
+            inset: 0,
+            zIndex: Number(zIndex !== null && zIndex !== void 0 ? zIndex : (container ? 10 : 1300)),
+            pointerEvents: allowBackgroundInteraction ? "none" : "auto",
+        }, children: (0, jsx_runtime_1.jsx)(react_1.Box, { role: loader ? "status" : "presentation", "aria-live": loader ? "polite" : undefined, "aria-busy": loader || undefined, "aria-label": label, onClick: allowBackgroundInteraction ? undefined : onClick, position: "absolute", inset: "0", bg: scrim, backdropFilter: !isDim && !invisible ? overlay_styles_1.OVERLAY_BLUR : undefined, color: colors.white, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 3, pointerEvents: allowBackgroundInteraction ? "none" : "auto", cursor: onClick && !allowBackgroundInteraction ? "pointer" : undefined, sx: { WebkitTapHighlightColor: "transparent", ...(0, motion_1.reducedMotionSx)() }, children: children !== null && children !== void 0 ? children : (loader ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spinner_1.default, { size: "lg", boxSize: SPINNER_BOX, thickness: SPINNER_THICKNESS, color: colors.white, label: text ? "" : "Loading" }), text && (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.875rem", children: text })] })) : null) }) }));
+}

package/dist/Components/Backdrop/BackdropProps.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+/** Scrim treatment: `dim` darkens only (black 0.5, no blur); `frosted` is the heavier Modal/Drawer scrim (black 0.6 + 4px blur). */
+export type BackdropVariant = "dim" | "frosted";
+/** Props for Backdrop, a fading full-viewport (or container-scoped) scrim that optionally centres a loader. */
+export type BackdropProps = {
+    /** Mounts the scrim and fades it in; `false` fades out and unmounts. */
+    open: boolean;
+    /** Defaults to "dim". */
+    variant?: BackdropVariant;
+    /** Centres a 40px spinner in the library's `Spinner`, inheriting the scrim's foreground colour. */
+    loader?: boolean;
+    /** Caption under the loader; ignored unless `loader` is set. */
+    text?: string;
+    /** Keeps the scrim blocking every click while painting nothing. */
+    invisible?: boolean;
+    /** Lets clicks reach the page behind; `onClick` cannot fire while this is set. */
+    allowBackgroundInteraction?: boolean;
+    /** Fires on scrim clicks — the usual "click away to dismiss" hook. */
+    onClick?: () => void;
+    /** Fade length in ms, or separate enter/exit. Defaults to 225 in / 195 out. */
+    transitionDuration?: number | {
+        enter?: number;
+        exit?: number;
+    };
+    /** Scopes the scrim to the nearest positioned ancestor instead of the viewport. */
+    container?: boolean;
+    /** Defaults to the 1300 modal layer full-viewport, or 10 when `container`. */
+    zIndex?: number | string;
+    /** Rendered centred; replaces the built-in loader when both are given. */
+    children?: ReactNode;
+    /** Announced to screen readers while open; defaults to "Loading" when `loader` is set. */
+    ariaLabel?: string;
+};