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

package/dist/Utils/validation.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultValidationMessages = exports.EMAIL_REGEX = void 0;
+exports.validateEmail = validateEmail;
+exports.validatePassword = validatePassword;
+exports.validateRequired = validateRequired;
+exports.validatePositiveNumber = validatePositiveNumber;
+exports.validateFileType = validateFileType;
+exports.validateFileSize = validateFileSize;
+exports.validateFile = validateFile;
+exports.validateVideoFileType = validateVideoFileType;
+exports.validateVideoFile = validateVideoFile;
+exports.validateYoutubeUrl = validateYoutubeUrl;
+exports.EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+exports.defaultValidationMessages = {
+    email_required: "Email is required",
+    email_invalid: "Enter a valid email address",
+    password_required: "Password is required",
+    password_min: "Password must be at least {min} characters",
+    required: "{label} is required",
+    positive_number: "{label} must be a positive number",
+    file_type: "Unsupported file type",
+    file_too_large: "File must be smaller than {max}MB",
+    video_type: "Unsupported video type",
+    youtube_required: "YouTube URL is required",
+    youtube_invalid: "Enter a valid YouTube URL",
+};
+function validateEmail(value) {
+    if (!value.trim())
+        return "email_required";
+    if (!exports.EMAIL_REGEX.test(value.trim()))
+        return "email_invalid";
+    return undefined;
+}
+function validatePassword(value, minLength = 6) {
+    if (!value)
+        return "password_required";
+    if (value.length < minLength)
+        return "password_min";
+    return undefined;
+}
+function validateRequired(value) {
+    if (!value.trim())
+        return "required";
+    return undefined;
+}
+function validatePositiveNumber(value) {
+    if (!value.trim())
+        return "required";
+    const n = Number(value);
+    if (Number.isNaN(n) || n <= 0)
+        return "positive_number";
+    return undefined;
+}
+const DEFAULT_FILE_TYPES = new Set(["application/pdf", "image/jpeg", "image/png", "image/jpg"]);
+function validateFileType(file, allowed = DEFAULT_FILE_TYPES) {
+    return allowed.has(file.type) ? undefined : "file_type";
+}
+function validateFileSize(file, maxMB) {
+    return file.size > maxMB * 1024 * 1024 ? "file_too_large" : undefined;
+}
+function validateFile(file, maxMB, allowed) {
+    var _a;
+    return (_a = validateFileType(file, allowed)) !== null && _a !== void 0 ? _a : validateFileSize(file, maxMB);
+}
+const DEFAULT_VIDEO_TYPES = new Set(["video/mp4", "video/quicktime"]);
+function validateVideoFileType(file, allowed = DEFAULT_VIDEO_TYPES) {
+    return allowed.has(file.type) ? undefined : "video_type";
+}
+function validateVideoFile(file, maxMB, allowed) {
+    var _a;
+    return (_a = validateVideoFileType(file, allowed)) !== null && _a !== void 0 ? _a : validateFileSize(file, maxMB);
+}
+const YOUTUBE_HOSTS = new Set(["youtube.com", "www.youtube.com", "m.youtube.com", "youtu.be"]);
+function validateYoutubeUrl(value) {
+    if (!value.trim())
+        return "youtube_required";
+    let url;
+    try {
+        url = new URL(value.trim());
+    }
+    catch {
+        return "youtube_invalid";
+    }
+    return YOUTUBE_HOSTS.has(url.hostname.toLowerCase()) ? undefined : "youtube_invalid";
+}

package/dist/esm/Components/Accordion/Accordion.js

@@ -4,8 +4,9 @@ import { Accordion as ChakraAccordian, AccordionItem, AccordionButton, Accordion
 import { ChevronDown } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { liftToContrast, AA_NON_TEXT } from "../../Theme/tokens/builders/outlineRung.js";
-import { getAccordionHoverColors } from "./accordionColors.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { accordionFocusRing, getAccordionHoverColors } from "./accordionColors.js";
 /** Chakra Accordion wrapper for header/content pairs; FilterSidebar composes this directly for its collapsible filter sections. */
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
     const { colors } = useCustomTheme();
@@ -14,21 +15,18 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
     const headingColor = colors.text[800];
     const bodyColor = colors.text[600];
     const { expandedBg, softHover } = useMemo(() => getAccordionHoverColors(colors, isDark), [colors, isDark]);
-    const focusRing = useMemo(() => liftToContrast(colors.primary[300], colors.background[50], AA_NON_TEXT), [colors]);
+    const focusRing = useMemo(() => accordionFocusRing(colors), [colors]);
     return (_jsx(ChakraAccordian, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
             var _a;
-            return (_jsx(AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: colors.background[50], mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: colors.boxborder[200] }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
+            return (_jsx(AccordionItem, { border: "1px solid", borderColor: border, borderRadius: "xl", bg: colors.background[50], boxShadow: "none", mb: 3, overflow: "hidden", _last: { mb: 0 }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
                     var _a, _b, _c;
-                    return (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
-                                        boxShadow: "none",
-                                        outline: `0.125rem solid ${focusRing}`,
-                                        outlineOffset: "-0.125rem",
-                                    }, ...item.buttonProps, sx: {
+                    return (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: transitionFor(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
+                                        ...reducedMotionSx(),
                                         ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,
                                         "&:hover": {
                                             ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.hoverbuttonStyle,
                                         },
-                                    }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "md", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
+                                    }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform", "color", "background-color"], "base"), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
                 } }, idx));
         }) }));
 };

package/dist/esm/Components/Accordion/accordionColors.js

@@ -1,18 +1,10 @@
 import { compositeOver } from "../../Theme/tokens/builders/color.js";
 import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
-/**
- * Same perceptibility floor the SideBar ladder uses — a state a user cannot see is not a state.
- * Light mode `softHover` measured 1.042-1.105 across all 9 brands (invisible) while dark sat at
- * 1.58-1.85; `expandedBg` (`primary.opacity[8]`, an 8%-alpha tint) is the same bug class — an
- * 8% tint composited over a near-white canvas is itself near-white. Both are resolved against
- * the rest surface so light and dark actually agree on "you can see this".
- */
+import { FOCUS_HALO_WIDTH, FOCUS_RING_WIDTH } from "../../Theme/chakra/focusRing.styles.js";
+// NOTE: light softHover measured 1.04-1.11 (invisible) unresolved — both modes now resolve against the rest surface.
 const MIN_HOVER_STEP = 1.15;
 export const getAccordionHoverColors = (colors, isDark) => {
     if (isDark) {
-        // primary.opacity[8] composited over the dark canvas collapses to ~1.07:1 (near-black on
-        // near-black) — gray[200] is an opaque rung that stays visibly above canvas (~1.6:1) without
-        // being as loud as the gray[300] hover fill FilterSidebar/Table already use.
         return {
             expandedBg: colors.gray[200],
             softHover: colors.gray[200],
@@ -25,3 +17,10 @@ export const getAccordionHoverColors = (colors, isDark) => {
         softHover: liftToContrast(colors.table.hover[100], rest, MIN_HOVER_STEP),
     };
 };
+/** The Button's two-tone `focusRing`, drawn inset because the item clips overflow. */
+export const accordionFocusRing = (colors) => ({
+    outline: "2px solid transparent",
+    outlineOffset: "-2px",
+    boxShadow: `inset 0 0 0 ${FOCUS_RING_WIDTH - FOCUS_HALO_WIDTH}px ${colors.focusRing.ring}, ` +
+        `inset 0 0 0 ${FOCUS_RING_WIDTH}px ${colors.focusRing.halo}`,
+});

package/dist/esm/Components/AlertDialog/AlertDialog.js

@@ -1,9 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertDialog as ChakraAlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, } from "@chakra-ui/react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { AlertDialog as ChakraAlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, } from "@chakra-ui/react";
+import Button from "../Button/Button.js";
 /** Renders a fixed Cancel/Confirm AlertDialog from title+content props — not a substitute for Modal when you need custom footer buttons or slots. */
-const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText = "Yes", cancelButtonText = "No", isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }) => {
-    const { colors } = useCustomTheme();
-    return (_jsxs(ChakraAlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [_jsx(AlertDialogOverlay, {}), _jsxs(AlertDialogContent, { bg: colors.background[50], sx: ContentStyle, children: [_jsx(AlertDialogHeader, { sx: headerStyle, children: title }), _jsx(AlertDialogCloseButton, { sx: closeButtonStyle }), _jsx(AlertDialogBody, { sx: bodyStyle, children: content }), _jsxs(AlertDialogFooter, { sx: footerStyle, children: [_jsx(Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), _jsx(Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));
-};
+const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, closeOnOverlayClick, closeOnEsc, content, title, confirmButtonText = "Confirm", cancelButtonText = "Cancel", isConfirmLoading, onConfirm, tone = "default", ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, }) => (_jsxs(ChakraAlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [_jsx(AlertDialogOverlay, {}), _jsxs(AlertDialogContent, { sx: ContentStyle, children: [_jsx(AlertDialogHeader, { sx: headerStyle, children: title }), _jsx(AlertDialogCloseButton, { sx: closeButtonStyle }), _jsx(AlertDialogBody, { sx: bodyStyle, children: content }), _jsxs(AlertDialogFooter, { sx: footerStyle, children: [_jsx(Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm", sx: button1Style, label: cancelButtonText }), _jsx(Button, { colorScheme: tone === "danger" ? "red" : "primary", onClick: onConfirm, isLoading: isConfirmLoading, size: "sm", sx: button2Style, label: confirmButtonText })] })] })] }));
 export default AlertDialog;

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

@@ -1,17 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import ReactApexChart from "react-apexcharts";
+import { Suspense, useId, useMemo } from "react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseAxisLabels, baseChart, baseGrid, baseLegend, baseTooltip } from "../chartBase.js";
+import LazyReactApexChart from "../LazyReactApexChart.js";
+import ApexChartFallback from "../ApexChartFallback.js";
 /** 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 } = useCustomTheme();
+    const chartId = `apex-area-${useId().replace(/:/g, "")}`;
     const seriesColors = useMemo(() => colors !== null && colors !== void 0 ? colors : getDefaultSeriesColors(palette), [colors, palette]);
     const resolvedSeries = 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 = useMemo(() => ({
         chart: baseChart(palette, {
+            id: chartId,
             type: "area",
             stacked: variant === "stacked",
             sparkline: { enabled: isSpark },
@@ -50,6 +53,7 @@ const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePo
         tooltip: baseTooltip(palette),
     }), [
         palette,
+        chartId,
         variant,
         isSpark,
         seriesColors,
@@ -61,6 +65,6 @@ const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePo
         resolvedSeries.length,
         yAxisFormatter,
     ]);
-    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: resolvedSeries, type: "area", height: height, width: width }) }));
+    return (_jsx("div", { children: _jsx(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: resolvedSeries, type: "area", height: height, width: width }) }) }));
 };
 export default ApexAreaChart;

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

@@ -1,13 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import ReactApexChart from "react-apexcharts";
+import { Suspense, useId, useMemo } from "react";
 import { useTheme } from "@chakra-ui/react";
 import { chartAxisLabelColor, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseAxisLabels, baseChart, baseGrid, baseLegend, baseTooltip } from "../chartBase.js";
+import LazyReactApexChart from "../LazyReactApexChart.js";
+import ApexChartFallback from "../ApexChartFallback.js";
 /** Bar chart wrapper around react-apexcharts (horizontal/stacked/distributed via props), themed via chartColorsFromTheme + chartBase. */
 export default 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 = useTheme();
     const palette = theme.colors;
+    const chartId = `apex-bar-${useId().replace(/:/g, "")}`;
     const seriesColors = useMemo(() => getDefaultSeriesColors(palette), [palette]);
     const resolvedBarColors = useMemo(() => barColor !== null && barColor !== void 0 ? barColor : (distributed ? seriesColors : [seriesColors[1]]), [barColor, distributed, seriesColors]);
     const axisColor = chartAxisLabelColor(palette);
@@ -15,7 +17,7 @@ export default function ApexBarChart({ data, labels, title, titlePosition, heigh
     const mergedYAxis = useMemo(() => { var _a; return ({ ...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 = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
     const options = useMemo(() => ({
-        chart: baseChart(palette, { type: "bar", stacked }),
+        chart: baseChart(palette, { id: chartId, type: "bar", stacked }),
         plotOptions: {
             bar: {
                 borderRadius: 4,
@@ -44,6 +46,7 @@ export default function ApexBarChart({ data, labels, title, titlePosition, heigh
         colors: resolvedBarColors,
     }), [
         palette,
+        chartId,
         labels,
         mergedXAxis,
         mergedYAxis,
@@ -58,6 +61,6 @@ export default function ApexBarChart({ data, labels, title, titlePosition, heigh
         legendPosition,
         series,
     ]);
-    const resolvedSeries = series !== null && series !== void 0 ? series : [{ name: seriesName, data: data !== null && data !== void 0 ? data : [] }];
-    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: resolvedSeries, type: "bar", height: height, width: width }) }));
+    const resolvedSeries = useMemo(() => series !== null && series !== void 0 ? series : [{ name: seriesName, data: data !== null && data !== void 0 ? data : [] }], [series, seriesName, data]);
+    return (_jsx("div", { children: _jsx(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: resolvedSeries, type: "bar", height: height, width: width }) }) }));
 }

package/dist/esm/Components/Apexcharts/ApexChartFallback.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Skeletons from "../Skeletons/Skeletons.js";
+/** Suspense fallback while the lazy react-apexcharts chunk loads — reserves the chart's own footprint. */
+const ApexChartFallback = ({ height = "320px", width = "100%" }) => (_jsx(Skeletons, { type: "skeleton", height: height, width: width, borderRadius: "lg" }));
+export default ApexChartFallback;

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

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
-import ReactApexChart from "react-apexcharts";
+import { Suspense, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useTheme } from "@chakra-ui/react";
 import ToolTip from "../../ToolTip/ToolTip.js";
 import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseAxisLabels, baseChart, baseGrid, baseTooltip } from "../chartBase.js";
+import LazyReactApexChart from "../LazyReactApexChart.js";
+import ApexChartFallback from "../ApexChartFallback.js";
 /** 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 = useTheme();
     const palette = theme.colors;
+    const chartId = `apex-line-${useId().replace(/:/g, "")}`;
     const resolvedLineColors = lineColors !== null && lineColors !== void 0 ? lineColors : getDefaultSeriesColors(palette);
     const resolvedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
     const initialName = Array.isArray(seriesNames) && seriesNames.length ? seriesNames[0] : "Series 1";
@@ -82,6 +84,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
     const showToolbar = !isSmall && ratio >= toolbarBreakpointPct;
     const options = useMemo(() => ({
         chart: baseChart(palette, {
+            id: chartId,
             type: "line",
             animations: variant === "realtime"
                 ? { enabled: true, speed: 1000, dynamicAnimation: { speed: 1000 } }
@@ -118,6 +121,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
         },
     }), [
         variant,
+        chartId,
         showToolbar,
         resolvedLineColors,
         labels,
@@ -149,6 +153,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 }) })), _jsx(ReactApexChart, { options: options, series: apexSeries, type: "line", height: height, width: width })] }));
+                    }, children: title }) })), _jsx(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: apexSeries, type: "line", height: height, width: width }) })] }));
 };
 export default ApexLineChart;

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import ReactApexChart from "react-apexcharts";
+import { Suspense, useId, useMemo } from "react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { chartInk, chartMode, getDefaultSeriesColors, labelOnSeries, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseChart, baseLegend, baseTooltip } from "../chartBase.js";
+import LazyReactApexChart from "../LazyReactApexChart.js";
+import ApexChartFallback from "../ApexChartFallback.js";
 const getValidLegendPosition = (position) => {
     const validPositions = ["left", "right", "top", "bottom"];
     if (validPositions.includes(position)) {
@@ -18,6 +19,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
     const { colors: palette } = useCustomTheme();
     const ink = chartInk(palette);
     const gap = surfaceColor !== null && surfaceColor !== void 0 ? surfaceColor : ink.surface;
+    const chartId = `apex-pie-${useId().replace(/:/g, "")}`;
     const mergedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
     const seriesColors = useMemo(() => { var _a; return (_a = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _a !== void 0 ? _a : getDefaultSeriesColors(palette); }, [chartColor, donutColors, palette]);
     const labelInks = useMemo(() => seriesColors.map((c) => labelOnSeries(c, palette)), [seriesColors, palette]);
@@ -143,6 +145,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
             states: { hover: { filter: { type: "lighten", value: 0.08 } } },
             ...extraOptions,
             chart: baseChart(palette, {
+                id: chartId,
                 type: isDonut ? "donut" : "pie",
                 ...((_a = extraOptions.chart) !== null && _a !== void 0 ? _a : {}),
             }),
@@ -160,6 +163,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
         };
     }, [
         variant,
+        chartId,
         labels,
         seriesColors,
         legend,
@@ -177,6 +181,6 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
         ink.muted,
         ink.text,
     ]);
-    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }));
+    return (_jsx("div", { children: _jsx(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }) }));
 };
 export default ApexPieChart;

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

@@ -1,23 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import ReactApexChart from "react-apexcharts";
+import { Suspense, useId, useMemo } from "react";
 import { useTheme } from "@chakra-ui/react";
 import { chartInk, chartMode, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseChart, baseLegend, baseTooltip } from "../chartBase.js";
+import LazyReactApexChart from "../LazyReactApexChart.js";
+import ApexChartFallback from "../ApexChartFallback.js";
 /** 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 = useTheme();
     const palette = theme.colors;
     const ink = chartInk(palette);
+    const chartId = `apex-polar-${useId().replace(/:/g, "")}`;
     const mergedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
     const mergedLegendStyle = useMemo(() => {
         const defaults = {
-            colors: palette.text[900],
+            colors: ink.text,
             position: "bottom",
             useSeriesColors: false,
         };
         return { ...defaults, ...legendStyle };
-    }, [palette, legendStyle]);
+    }, [legendStyle, ink.text]);
     const resolvedChartColors = useMemo(() => chartColors !== null && chartColors !== void 0 ? chartColors : getDefaultSeriesColors(palette), [chartColors, palette]);
     const options = useMemo(() => {
         let extraOptions = {};
@@ -45,7 +47,7 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
                 break;
         }
         return {
-            chart: baseChart(palette, { type: "polarArea" }),
+            chart: baseChart(palette, { id: chartId, type: "polarArea" }),
             labels,
             colors: resolvedChartColors,
             legend: {
@@ -74,6 +76,7 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
         };
     }, [
         variant,
+        chartId,
         labels,
         resolvedChartColors,
         mergedLegendStyle,
@@ -84,6 +87,6 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
         ink.surface,
         ink.grid,
     ]);
-    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: data, type: "polarArea", height: height, width: width }) }));
+    return (_jsx("div", { children: _jsx(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: data, type: "polarArea", height: height, width: width }) }) }));
 };
 export default ApexPolarChart;

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

@@ -1,16 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import ReactApexChart from "react-apexcharts";
+import { Suspense, useId, useMemo } from "react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { chartInk, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseChart, baseLegend } from "../chartBase.js";
+import LazyReactApexChart from "../LazyReactApexChart.js";
+import ApexChartFallback from "../ApexChartFallback.js";
 /** 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 } = useCustomTheme();
     const ink = chartInk(palette);
+    const chartId = `apex-radial-${useId().replace(/:/g, "")}`;
     const seriesColors = useMemo(() => colors !== null && colors !== void 0 ? colors : getDefaultSeriesColors(palette), [colors, palette]);
     const options = useMemo(() => ({
-        chart: baseChart(palette, { type: "radialBar" }),
+        chart: baseChart(palette, { id: chartId, type: "radialBar" }),
         colors: seriesColors,
         labels: labels !== null && labels !== void 0 ? labels : [],
         stroke: { lineCap: "round" },
@@ -51,7 +53,7 @@ const ApexRadialChart = ({ variant = "gauge", data, labels, title, titlePosition
         },
         title: { text: title, align: titlePosition, style: mergeChartTitleStyle(palette) },
         legend: { ...baseLegend(palette, "bottom"), show: variant === "multi" },
-    }), [palette, variant, seriesColors, labels, title, titlePosition, totalLabel, trackColor, hollowSize, ink.muted, ink.text]);
-    return (_jsx("div", { children: _jsx(ReactApexChart, { 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 (_jsx("div", { children: _jsx(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: data, type: "radialBar", height: height, width: width }) }) }));
 };
 export default ApexRadialChart;

package/dist/esm/Components/Apexcharts/LazyReactApexChart.js

@@ -0,0 +1,5 @@
+import { lazyWithRetry } from "../../Utils/lazyWithRetry.js";
+// 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 = lazyWithRetry(() => import("react-apexcharts"));
+export default LazyReactApexChart;

package/dist/esm/Components/AppSwitcher/AppMark.js

@@ -12,11 +12,7 @@ import { avatarColor } from "../OrgSwitcher/OrgSwitcherProps.js";
 import { appInitials } from "./AppSwitcherProps.js";
 // 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.
 export const assignAppHues = (apps, mode) => {
     const ramp = CATEGORICAL_SERIES[mode].map(resolveAvatarFill);
     const taken = new Set(apps.flatMap((a) => (a.color ? [a.color] : [])));

package/dist/esm/Components/AppSwitcher/AppSwitcher.js

@@ -173,15 +173,10 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
         return null;
     const rowHoverBg = listRowBackgrounds(theme.colors).active;
     const footerRule = ruleInk(theme.colors.boxborder[200], [theme.colors.backgroundColor.subtle], 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 = neutralStep(theme.colors.backgroundColor.light, 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 = liftToContrast(theme.colors.accentText, currentBg, 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 = liftToContrast(theme.colors.text[900], currentBg, AA_NORMAL_TEXT);
     const currentSub = liftToContrast(theme.colors.textMuted, currentBg, AA_NORMAL_TEXT);
     const width = panelWidth !== null && panelWidth !== void 0 ? panelWidth : "28rem";
@@ -195,7 +190,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                             return;
                         }
                         handlePanelKeyDown(e);
-                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(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: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && (_jsx(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 && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
+                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(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: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && (_jsx(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 && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(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);
@@ -208,7 +203,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                                                     closeAndRefocus();
                                             }
                                         } })] }) })), _jsxs(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) => (_jsxs(Flex, { align: "center", gap: 3, px: 2, py: 2, minH: s.row, children: [_jsx(Skeleton, { boxSize: s.mark, borderRadius: "lg" }), _jsx(Skeleton, { h: "0.75rem", flex: "1", borderRadius: "base" })] }, i)))
+                                    ? [0, 1, 2, 3].map((i) => (_jsxs(Flex, { align: "center", gap: 3, px: 2, py: 2, minH: s.row, children: [_jsx(Skeleton, { boxSize: s.mark, borderRadius: "lg" }), _jsx(Skeleton, { h: "0.75rem", flex: "1", borderRadius: "lg" })] }, i)))
                                     : visible.map((app, idx) => {
                                         var _a;
                                         const isCurrent = app.id === currentAppId;

package/dist/esm/Components/Avatar/Avatar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Flex, Image, VisuallyHidden } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { toneInk } from "../../Theme/tokens/builders/tone.js";
+import { resolveAvatarColorway, initialsFor } from "./avatarColorway.js";
+import { DOT_SIZE, FONT_SIZE, SIZE_PX } from "./avatarSizing.js";
+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 } = useCustomTheme();
+    const [imageFailed, setImageFailed] = useState(false);
+    const px = SIZE_PX[size];
+    const showImage = Boolean(src) && !imageFailed;
+    const { bg, color } = resolveAvatarColorway(name, colors);
+    return (_jsxs(Box, { position: "relative", boxSize: `${px}px`, flexShrink: 0, "data-testid": testId, children: [showImage ? (_jsx(Image, { src: src, alt: name, boxSize: `${px}px`, borderRadius: "full", objectFit: "cover", onError: () => setImageFailed(true) })) : (_jsx(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: FONT_SIZE[size], fontWeight: 600, userSelect: "none", children: (getInitials !== null && getInitials !== void 0 ? getInitials : initialsFor)(name) })), status ? (_jsxs(_Fragment, { children: [_jsx(Box, { position: "absolute", bottom: "0", right: "0", boxSize: DOT_SIZE[size], borderRadius: "full", bg: toneInk(colors, STATUS_TONE[status]), border: "2px solid", borderColor: colors.background[50] }), _jsx(VisuallyHidden, { children: STATUS_LABEL[status] })] })) : null] }));
+};
+export default Avatar;

package/dist/esm/Components/Avatar/AvatarGroup.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import Avatar from "./Avatar.js";
+import { FONT_SIZE, OVERLAP, SIZE_PX } from "./avatarSizing.js";
+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 } = useCustomTheme();
+    const shown = people.slice(0, max);
+    const overflow = people.length - shown.length;
+    const px = SIZE_PX[size];
+    const ring = { border: "2px solid", borderColor: colors.background[50] };
+    return (_jsxs(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) => (_jsx(Box, { "aria-hidden": true, ml: i === 0 ? 0 : `-${OVERLAP[size]}`, borderRadius: "full", ...ring, children: _jsx(Avatar, { name: person.name, src: person.src, size: size }) }, `${person.name}-${i}`))), overflow > 0 ? (_jsxs(Flex, { "aria-hidden": true, ml: `-${OVERLAP[size]}`, align: "center", justify: "center", boxSize: `${px}px`, borderRadius: "full", bg: colors.backgroundColor.secondary, color: colors.text[700], fontSize: FONT_SIZE[size], fontWeight: 600, ...ring, children: ["+", overflow] })) : null] }));
+};
+export default AvatarGroup;

package/dist/esm/Components/Avatar/AvatarProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Avatar/avatarColorway.js

@@ -0,0 +1,25 @@
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+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;
+};
+export const avatarScaleKeyFor = (seed) => AVATAR_SCALE_KEYS[hashSeed(seed) % AVATAR_SCALE_KEYS.length];
+// Always via resolveFilledSurface, never scale[500] + a guessed ink.
+export const resolveAvatarColorway = (seed, colors) => {
+    const scale = colors[avatarScaleKeyFor(seed)];
+    const { fill, color } = resolveFilledSurface(scale, colors);
+    return { bg: fill, color };
+};
+export 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();
+};

package/dist/esm/Components/Avatar/avatarSizing.js

@@ -0,0 +1,12 @@
+export const SIZE_PX = {
+    "2xs": 16, xs: 24, sm: 32, md: 40, lg: 48, xl: 64,
+};
+export const FONT_SIZE = {
+    "2xs": "0.5rem", xs: "0.625rem", sm: "0.75rem", md: "0.875rem", lg: "1rem", xl: "1.25rem",
+};
+export const DOT_SIZE = {
+    "2xs": "5px", xs: "6px", sm: "8px", md: "9px", lg: "10px", xl: "12px",
+};
+export const OVERLAP = {
+    "2xs": "5px", xs: "8px", sm: "10px", md: "12px", lg: "14px", xl: "18px",
+};