pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

package/dist/Components/Apexcharts/ApexAreaChart/ApexAreaChart.js

@@ -5,17 +5,21 @@ 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"));
+/** Filled line chart (basic/stacked/gradient/sparkline); unlike `ApexLineChart`, `data`/`series` are read fresh via `useMemo` every render, not frozen at mount. */
 const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePosition = "left", height = 320, width = "100%", colors, showLegend = true, legendPosition = "bottom", yAxisFormatter, }) => {
     const { colors: palette } = (0, useCustomTheme_1.useCustomTheme)();
+    const chartId = `apex-area-${(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 resolvedSeries = (0, react_1.useMemo)(() => series !== null && series !== void 0 ? series : [{ name: title !== null && title !== void 0 ? title : "Series 1", data: data !== null && data !== void 0 ? data : [] }], [series, data, title]);
     const isSpark = variant === "sparkline";
     const options = (0, react_1.useMemo)(() => ({
         chart: (0, chartBase_1.baseChart)(palette, {
+            id: chartId,
             type: "area",
             stacked: variant === "stacked",
             sparkline: { enabled: isSpark },
@@ -54,6 +58,7 @@ const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePo
         tooltip: (0, chartBase_1.baseTooltip)(palette),
     }), [
         palette,
+        chartId,
         variant,
         isSpark,
         seriesColors,
@@ -65,6 +70,6 @@ const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePo
         resolvedSeries.length,
         yAxisFormatter,
     ]);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: resolvedSeries, type: "area", 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: resolvedSeries, type: "area", height: height, width: width }) }) }));
 };
 exports.default = ApexAreaChart;

package/dist/Components/Apexcharts/ApexAreaChart/ApexAreaChartProps.d.ts

@@ -1,10 +1,14 @@
+/** "sparkline" strips axes, legend and title for a compact inline trend; the others only change fill/stacking. */
 export type AreaChartVariant = "basic" | "stacked" | "gradient" | "sparkline";
+/** One named line in a multi-series area chart; `name` becomes its legend label. */
 export type ApexAreaSeries = {
     name: string;
     data: number[];
 };
+/** Props for the area chart; unlike ApexLineChart, `data`/`series` are re-read every render, not frozen at mount. */
 export type ApexAreaChartProps = {
     variant?: AreaChartVariant;
+    /** Ignored entirely once `series` is also passed — `series` always wins, no merge. */
     data?: number[];
     series?: ApexAreaSeries[];
     labels?: string[];

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

@@ -1,2 +1,3 @@
 import { ApexBarChartProps } from "./ApexBarChartProps";
+/** Bar chart wrapper around react-apexcharts (horizontal/stacked/distributed via props), themed via chartColorsFromTheme + chartBase. */
 export default function ApexBarChart({ data, labels, title, titlePosition, height, width, barColor, xAxisStyle, yAxisStyle, titleStyle, horizontal, distributed, seriesName, series, stacked, showLegend, legendPosition, }: ApexBarChartProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,13 +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);
@@ -20,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,
@@ -49,6 +52,7 @@ function ApexBarChart({ data, labels, title, titlePosition, height = 400, width
         colors: resolvedBarColors,
     }), [
         palette,
+        chartId,
         labels,
         mergedXAxis,
         mergedYAxis,
@@ -63,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/ApexBarChart/ApexBarChartProps.d.ts

@@ -1,10 +1,14 @@
+/** Renders grouped/stacked/distributed bars from `series`, or one series from `data`+`seriesName`; not a substitute for ApexLineChart on trend-over-time data. */
 export type ApexBarChartProps = {
+    /** Ignored whenever `series` is also passed — series wins outright and data is silently dropped, not merged. */
     data?: number[];
     labels: string[];
     title?: string;
+    /** No default here (renders ApexCharts' native left-align) — every sibling chart in this family defaults it to "center". */
     titlePosition?: "left" | "center" | "right";
     height?: number | string;
     width?: number | string;
+    /** Array paints per-bar only when `distributed` is true; otherwise only barColor[0] applies and the rest are silently unused. */
     barColor?: string[];
     xAxisStyle?: StyleProps;
     yAxisStyle?: StyleProps;
@@ -12,11 +16,13 @@ export type ApexBarChartProps = {
     horizontal?: boolean;
     distributed?: boolean;
     seriesName?: string;
+    /** Multi-series bars — {name, data}[], not data's flat number[]; passing this alongside `data` makes data a no-op. */
     series?: {
         name: string;
         data: number[];
     }[];
     stacked?: boolean;
+    /** Unset default isn't fixed — shows only when `series` has more than one entry; the single-`data` path stays legend-less. */
     showLegend?: boolean;
     legendPosition?: "top" | "right" | "bottom" | "left";
 };

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.d.ts

@@ -1,3 +1,4 @@
 import { ApexLineChartProps } from "./ApexLineChartProps";
+/** Line chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
 declare const ApexLineChart: ({ data, labels, title, height, width, lineColors, titlePosition, titleStyle, compact, toolbarBreakpointPct, titleClampLines, showTitleEllipsis, showSeries, series: seriesNames, variant, }: ApexLineChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexLineChart;

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

@@ -5,14 +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";
@@ -86,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 } }
@@ -122,6 +126,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
         },
     }), [
         variant,
+        chartId,
         showToolbar,
         resolvedLineColors,
         labels,
@@ -153,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/ApexLineChart/ApexLineChartProps.d.ts

@@ -1,13 +1,19 @@
+/** Renders exactly one line from `data`; not a substitute for ApexBarChart/ApexPieChart when comparing multiple series side by side. */
 export type ApexLineChartProps = {
+    /** "realtime" doesn't animate your data — after mount it overwrites the series with Math.random() values every second instead. */
     variant?: LineChartVariant;
+    /** Read only at mount — later prop updates are silently ignored unless this component remounts (new `key`). */
     data: number[];
     labels?: string[];
+    /** Only series[0] is read, as the single line's name — there is no way to render more than one line here. */
     series?: string[];
     title?: string;
     height?: number | string;
     width?: number | string;
     lineColors?: string[];
+    /** Ignored once the chart renders in compact/small mode — the fallback title there is always left-aligned regardless of this value. */
     titlePosition?: "left" | "center" | "right";
+    /** Despite the name, gates only the tooltip and hover markers — the line itself still renders when this is false. */
     showSeries?: boolean;
     titleStyle?: {
         color?: string;
@@ -18,6 +24,7 @@ export type ApexLineChartProps = {
     compact?: boolean;
     titleClampLines?: number;
     showTitleEllipsis?: boolean;
+    /** Declared but never read by this component — has zero effect here; ApexPieChart/ApexPolarCharts implement the same shape and apply it. */
     legendStyle?: {
         colors?: string | string[];
         useSeriesColors?: boolean;
@@ -25,4 +32,5 @@ export type ApexLineChartProps = {
     };
     toolbarBreakpointPct?: number;
 };
+/** Chart mode: "basic" plots `data` as given; "realtime" instead free-runs on random values — see `variant` below. */
 export type LineChartVariant = "basic" | "realtime";

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

@@ -1,3 +1,4 @@
 import { ApexPieChartProps } from "./ApexPieChartProps";
+/** Pie/donut chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
 declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendPosition, legendStyle, variant, showDataLabels, minLabelPercent, surfaceColor, donutSize, totalLabel, labelPlacement, }: ApexPieChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexPieChart;

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)) {
@@ -17,11 +18,13 @@ const getValidLegendPosition = (position) => {
     console.warn(`Invalid legend position: ${position}. Defaulting to 'bottom'.`);
     return "bottom";
 };
+/** Pie/donut chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
 const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutColors, chartColor, titlePosition = "center", titleStyle, legendPosition = "bottom", legendStyle, variant = "pie", showDataLabels = true, minLabelPercent = 8, surfaceColor, donutSize = "68%", totalLabel = "Total", labelPlacement = "auto", }) => {
     var _a;
     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]);
@@ -147,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 : {}),
             }),
@@ -164,6 +168,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
         };
     }, [
         variant,
+        chartId,
         labels,
         seriesColors,
         legend,
@@ -181,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/ApexPieChart/ApexPieChartProps.d.ts

@@ -1,11 +1,14 @@
+/** Renders pie/donut slices from parallel `data`+`labels` arrays; not a substitute for ApexPolarCharts, whose wedges vary by radius, not arc share. */
 export type ApexPieChartProps = {
     variant?: DonutPieVariant;
     data: number[];
+    /** Must be the same length and order as `data` — index i labels index i; a mismatched length misaligns slices silently, no warning. */
     labels: string[];
     title?: string;
     height?: number | string;
     width?: number | string;
     donutColors?: string[];
+    /** Wins over `donutColors` when both are set — donutColors is then silently ignored, not merged with it. */
     chartColor?: string[];
     titlePosition?: "left" | "center" | "right";
     titleStyle?: {
@@ -15,7 +18,9 @@ export type ApexPieChartProps = {
         fontFamily?: string;
     };
     legendPosition?: "left" | "right" | "top" | "bottom";
+    /** True alone doesn't guarantee labels — with the default labelPlacement="auto", a numeric height under 240 forces them off, no warning. */
     showDataLabels?: boolean;
+    /** Slices below this render an empty-string label, not a hidden one — text silently vanishes on small slices even with showDataLabels true. */
     minLabelPercent?: number;
     surfaceColor?: string;
     donutSize?: string;
@@ -31,4 +36,5 @@ export type ApexPieChartProps = {
         markerOffsetY?: number;
     };
 };
+/** Visual preset for the pie/donut fill; "pie-with-image" is fixed to two placeholder images, not configurable via props. */
 export type DonutPieVariant = "pie" | "donut" | "update-donut" | "monochrome-pie" | "gradient-donut" | "semi-donut" | "donut-with-pattern" | "pie-with-image";

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

@@ -1,3 +1,4 @@
 import { ApexPolarChartProps } from "./ApexPolarChartsProps";
+/** Polar-area chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
 declare const ApexPolarChart: ({ data, labels, title, height, width, chartColors, titlePosition, titleStyle, legendStyle, variant, }: ApexPolarChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexPolarChart;

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

@@ -5,23 +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 = {};
@@ -49,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: {
@@ -78,6 +81,7 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
         };
     }, [
         variant,
+        chartId,
         labels,
         resolvedChartColors,
         mergedLegendStyle,
@@ -88,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/ApexPolarCharts/ApexPolarChartsProps.d.ts

@@ -1,6 +1,8 @@
+/** Renders polarArea wedges (radius varies by value, angles equal) from parallel `data`+`labels`; not a substitute for ApexPieChart's equal-radius arcs. */
 export type ApexPolarChartProps = {
     variant?: PolarVariant;
     data: number[];
+    /** Must be the same length and order as `data` — index i labels index i; a mismatched length misaligns wedges silently, no warning. */
     labels: string[];
     title?: string;
     height?: number | string;
@@ -19,4 +21,5 @@ export type ApexPolarChartProps = {
         position?: "top" | "right" | "bottom" | "left";
     };
 };
+/** "monochrome" recolors every wedge as shades of one hue instead of the palette's distinct series colors. */
 export type PolarVariant = "basic" | "monochrome";

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

@@ -1,3 +1,4 @@
 import { ApexRadialChartProps } from "./ApexRadialChartProps";
+/** Radial/gauge chart (gauge/multi/semi); `hollowSize` is silently overridden to a fixed `"52%"` whenever `variant="multi"`. */
 declare const ApexRadialChart: ({ variant, data, labels, title, titlePosition, height, width, colors, totalLabel, trackColor, hollowSize, }: ApexRadialChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexRadialChart;

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

@@ -5,16 +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" },
@@ -55,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/ApexRadialChart/ApexRadialChartProps.d.ts

@@ -1,4 +1,6 @@
+/** "semi" draws a half-circle gauge; "multi" stacks several bars and forces its own hollow size (see `hollowSize`). */
 export type RadialChartVariant = "gauge" | "multi" | "semi";
+/** Props for the radial/gauge chart; `totalLabel` only renders when `variant="multi"`, which also ignores `hollowSize`. */
 export type ApexRadialChartProps = {
     variant?: RadialChartVariant;
     data: number[];
@@ -10,5 +12,6 @@ export type ApexRadialChartProps = {
     colors?: string[];
     totalLabel?: string;
     trackColor?: string;
+    /** Ignored when `variant="multi"` — the ring width is hardcoded to `"52%"` in that variant. */
     hollowSize?: string;
 };

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme";
+import { type AppOption } from "./AppSwitcherProps";
+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;
+declare const AppMark: React.FC<{
+    app: AppOption;
+    hue: string;
+    boxSize: string;
+    iconSize: number;
+    muted?: boolean;
+}>;
+export default AppMark;

package/dist/Components/AppSwitcher/AppMark.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appTintInk = exports.appTint = exports.assignAppHues = void 0;
+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 color_1 = require("../../Theme/tokens/builders/color");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const accentText_2 = require("../../Theme/tokens/builders/accentText");
+const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
+const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+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;
+// 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] : [])));
+    return apps.map((app) => {
+        if (app.color)
+            return app.color;
+        const seed = (0, OrgSwitcherProps_1.avatarColor)(app.id || app.name, mode);
+        const start = Math.max(0, ramp.indexOf(seed));
+        for (let i = 0; i < ramp.length; i += 1) {
+            const next = ramp[(start + i) % ramp.length];
+            if (!taken.has(next)) {
+                taken.add(next);
+                return next;
+            }
+        }
+        // More apps than the series has hues; past this point a repeat is unavoidable.
+        return seed;
+    });
+};
+exports.assignAppHues = assignAppHues;
+// Softening costs the fill contrast, so it is walked back until a WHITE glyph clears AA — every
+// mark keeps the same white icon instead of some flipping to black.
+const appTint = (hue, surface, white) => (0, outlineRung_1.liftToContrast)((0, color_1.mix)(hue, surface, 1 - FILL_STRENGTH), white, accentText_2.AA_NORMAL_TEXT);
+exports.appTint = appTint;
+const appTintInk = (fill, white, black) => (0, accentText_1.onFilled)(fill, white, black);
+exports.appTintInk = appTintInk;
+const AppMark = ({ app, hue, boxSize, iconSize, muted = false, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    if (app.iconUrl) {
+        return ((0, jsx_runtime_1.jsx)(react_2.Image, { src: app.iconUrl, alt: "", boxSize: boxSize, borderRadius: "lg", objectFit: "cover", flexShrink: 0, opacity: muted ? 0.55 : 1 }));
+    }
+    const surface = colors.backgroundColor.light;
+    const fill = muted ? colors.backgroundColor.quaternary : (0, exports.appTint)(hue, surface, colors.white);
+    const ink = muted ? colors.textMuted : (0, exports.appTintInk)(fill, colors.white, colors.black);
+    // lucide icons are forwardRef objects, not functions — a typeof check silently drops them.
+    const isElement = (0, react_1.isValidElement)(app.icon);
+    const Icon = !isElement && app.icon ? app.icon : null;
+    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "lg", flexShrink: 0, bg: fill, color: ink, fontSize: `${Math.round(iconSize * 0.72)}px`, fontWeight: 700, "aria-hidden": true, children: Icon ? ((0, jsx_runtime_1.jsx)(Icon, { size: iconSize, color: ink })) : (0, react_1.isValidElement)(app.icon) ? ((0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", color: ink, children: app.icon })) : ((0, AppSwitcherProps_1.appInitials)(app.name)) }));
+};
+exports.default = AppMark;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { type AppSwitcherProps } from "./AppSwitcherProps";
+declare const AppSwitcher: React.FC<AppSwitcherProps>;
+export default AppSwitcher;