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

package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts

@@ -1,23 +1,29 @@
 import type { ReactNode } from "react";
 import { OptionProp } from "../Select/SelectProps";
-/** Index allows extra scalar fields; known string fields are explicit so they do not widen to `() => ReactNode`. */
+/** Extra string keys render as label:value rows on the card; number values (also allowed here) are silently never shown. */
 export type Account = {
+    /** Used as the React key and the dnd draggableId — must be unique and stable across renders. */
     id: string;
+    /** Fully replaces AccountCard for this card — onDelete/onOpen/isDeletable and expand/collapse never apply when set. */
     customNode?: () => ReactNode;
+    /** Excluded from the generic row list; shown as separate description text, only when expanded. */
     details?: string;
+    /** No special rendering — just another label:value row like any extra string key. */
     name?: string;
+    /** Same generic row treatment as `name` — not validated or used for an avatar. */
     email?: string;
+    /** Same generic row treatment as `name`/`email` — plain string, not a number. */
     rating?: string;
     [key: string]: string | number | null | undefined | (() => ReactNode);
 };
+/** One Kanban column: id, title, accent color, and its `Account` items. */
 export type ColumnType = {
     id: string;
     title: string;
+    /** Falls back to `colors.primary[500]` when omitted — used for the accent dot/border. */
     color: string;
     items: Account[];
-    /**
-     * Column-level slot (e.g. totals). Shown below the title when expanded, and in the collapsed narrow rail (rotated).
-     */
+    /** Column-level slot (e.g. totals); shown below the title expanded, and rotated in the collapsed rail. */
     customNode?: () => ReactNode;
 };
 /** Fired after a column rail is collapsed or expanded via the board UI. */
@@ -28,79 +34,116 @@ export type ColumnCollapseChangePayload = {
     /** Full collapsed map for all columns (same shape as `collapsedColumns` initial prop). */
     collapsedColumns: Record<string, boolean>;
 };
+/** Payload of `onDrag` — the moved card, its source/target column ids and indexes, and the next column map. */
+export type KanbanDragPayload = {
+    from: string;
+    to: string;
+    item: Account;
+    columns: Record<string, ColumnType>;
+    fromIndex: number;
+    toIndex: number;
+};
+/** Board permission gates; every flag defaults to true when omitted. */
+export type KanbanPermissions = {
+    /** Also gates the `kanbanEdit` button and card drag; column-reorder drag ignores this. */
+    isEditable?: boolean;
+    /** Also gates the `kanbanCreate` button. */
+    isCreatable?: boolean;
+    /** Also hides the column-delete trash icon on column-header hover, not just per-card delete. */
+    isDeletable?: boolean;
+    /** false returns null for the whole board — nothing renders, not even header actions. */
+    isViewable?: boolean;
+};
+/** Props for KanbanBoard — keyed columns (`data`) of draggable `Account` cards. */
 export type KanbanBoardProps = {
+    /** Base columns; `customColumns` below is merged on top, not into, this. */
     data: Record<string, ColumnType>;
+    /** Merged on top of `data` — a matching column id in both silently overwrites the `data` entry, not merges its fields. */
     customColumns?: Record<string, ColumnType>;
+    /** `isVisible` renders an inline dashed column when others exist, or a centered empty-state overlay when there are none. */
     customizeColumn?: {
         isVisible?: boolean;
+        /** Defaults to "Add column". */
         buttonText?: string;
+        /** Fires from both the inline dashed column and the empty-board overlay variant. */
         onAddColumn?: () => void;
     };
+    /** Never fires for a `customNode` card — it owns its own delete UI, and is not gated by `permissions.isDeletable`. */
     onDelete?: (account: Account) => void;
+    /** Same `customNode` exemption as `onDelete`; unlike delete, `onOpen` has no permission gate at all. */
     onOpen?: (account: Account) => void;
+    /** Receives the deleted column's item ids, not the column's own id — the column identity itself is not passed. */
     onColumnDelete?: (colId: (string | number)[]) => void;
-    onDrag?: ({ from, to, item, columns, fromIndex, toIndex, }: {
-        from: string;
-        to: string;
-        item: Account;
-        columns: Record<string, ColumnType>;
-        fromIndex: number;
-        toIndex: number;
-    }) => void;
+    /** Fires after `columns` state already updated internally — a notification, not a gate; it cannot veto or revert the move. */
+    onDrag?: (payload: KanbanDragPayload) => void;
+    /** Also true (skeletons show) whenever `preferences.baseurl` is set and its own fetch is still loading. */
     isLoading?: boolean;
+    /** Header filter select; renders only when `isSelect` is true. */
     kanbanSelect?: {
+        /** Gates the whole select — unlike `kanbanEdit`/`kanbanCreate`, never checked against `permissions`. */
         isSelect?: boolean;
         options?: OptionProp[];
+        /** Never fires with undefined — picking the placeholder row again fires nothing. */
         onSelectChange?: (option?: OptionProp) => void;
         selectPlaceholderText?: string;
+        /** Defaults to `"12.5rem"` when omitted. */
         width?: string;
+        /** Controlled value passed straight to the underlying Select. */
         value?: string;
+        /** False renders the themed popup, which looks identical on Windows and macOS; a native select's list is OS-drawn. */
+        native?: boolean;
     };
+    /** Button shows only when this `isEditable` AND `permissions.isEditable` (default true) both allow it. */
     kanbanEdit?: {
         isEditable?: boolean;
         onEdit?: () => void;
+        /** Defaults to "Edit Layout". */
         label?: string;
     };
+    /** Same `permissions.isCreatable` AND-gate as `kanbanEdit`. */
     kanbanCreate?: {
         isCreatable?: boolean;
         onCreate?: () => void;
+        /** Defaults to "Create New". */
         label?: string;
     };
+    /** Renders cards via a virtualized react-window list; omitted, it auto-enables above 30 cards in that column — true/false always overrides. */
     virtualization?: boolean;
-    permissions?: {
-        isEditable?: boolean;
-        isCreatable?: boolean;
-        isDeletable?: boolean;
-        isViewable?: boolean;
-    };
+    permissions?: KanbanPermissions;
+    /** Per-column empty state for columns with no items. */
     noItems?: {
+        /** Also requires the column to have zero items — evaluated per column, not board-wide. */
         isVisible?: boolean;
+        /** Defaults to "No items in this column". */
         text?: string;
+        /** Defaults to "Add Item"; hidden entirely when `isEmptyTextOnly` is true. */
         buttonText?: string;
+        /** Receives the empty column the button was clicked in. */
         onClick?: (column: ColumnType) => void;
+        /** When true, the button never renders — only the text line shows. */
         isEmptyTextOnly?: boolean;
     };
     /** When true, columns can collapse to a narrow horizontal rail (full height). */
     enableColumnCollapse?: boolean;
-    /**
-     * Initial collapsed state keyed by column id (`data` / `customColumns` object keys).
-     * Merged on mount; when `preferences.url` is set, server `json.collapsedColumns` overrides these keys after load.
-     */
+    /** Seeds collapsed state once on mount only — later prop changes are ignored unless `preferences.baseurl` is set to sync from saved prefs. */
     collapsedColumns?: Record<string, boolean>;
     /** Called when the user collapses or expands a column (after internal state updates). */
     onColumnCollapseChange?: (payload: ColumnCollapseChangePayload) => void;
-    /** When true, columns can be reordered via the header grip handle. */
+    /** Column drag ignores `permissions.isEditable` — reordering stays possible even when item drag is permission-locked. */
     enableColumnReorder?: boolean;
     /** Called after column order changes (same shape as `data` keys order). */
     onColumnReorder?: (columns: Record<string, ColumnType>) => void;
-    /**
-     * Optional user-preferences API (same shape as `Table` `preferences`).
-     * When `url` is set, column collapse state is loaded from and saved to `json.collapsedColumns`
-     * (record of column id → collapsed).
-     */
+    /** Board height (CSS length, e.g. `"100%"` to fill a sized parent); columns fill it. Defaults to the viewport minus 100px, min 500px. */
+    height?: string | number;
+    /** Caps the board height; columns shrink to fit. */
+    maxH?: string | number;
+    /** Same shape as Table's `preferences`; collapse state loads/saves to `json.collapsedColumns` only when `baseurl` is set. */
     preferences?: {
+        /** Must be non-empty to activate preferences loading/saving at all. */
         baseurl: string;
+        /** Sent verbatim as the `Authorization` header — include any `Bearer ` prefix yourself. */
         token: string;
+        /** The load fetch re-runs only when `baseurl` changes — changing key/name/page/orgId alone never refetches. */
         key?: string;
         name?: string;
         page?: string;

package/dist/Components/KanbanBoard/MeasuredItem.d.ts

@@ -4,5 +4,6 @@ type MeasuredItemProps = {
     setSize: (index: number, size: number) => void;
     children: React.ReactNode;
 };
+/** Wraps one virtualized row to report its rendered height to KanbanBoard's row-size cache; not exported, virtualization-only. */
 declare const MeasuredItem: React.FC<MeasuredItemProps>;
 export default MeasuredItem;

package/dist/Components/KanbanBoard/MeasuredItem.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+/** Wraps one virtualized row to report its rendered height to KanbanBoard's row-size cache; not exported, virtualization-only. */
 const MeasuredItem = ({ index, setSize, children, }) => {
     const ref = (0, react_1.useRef)(null);
     const prevHeight = (0, react_1.useRef)(null);

package/dist/Components/KanbanBoard/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./KanbanBoard";
+export type { Account, ColumnType, ColumnCollapseChangePayload, KanbanBoardProps, KanbanDragPayload, KanbanPermissions, } from "./KanbanBoardProps";

package/dist/Components/KanbanBoard/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var KanbanBoard_1 = require("./KanbanBoard");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(KanbanBoard_1).default; } });

package/dist/Components/LazyWrapper/LazyWrapper.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
 export interface LazyWrapperProps {
     children: React.ReactNode;
-    /** Custom fallback node. Overrides the default spinner. */
+    /** Overrides the default spinner entirely — `minHeight` below then has no effect. */
     fallback?: React.ReactNode;
-    /** Min height of the default fallback container. */
+    /** Sizes only the built-in spinner — ignored once a custom `fallback` is passed. */
     minHeight?: string;
 }
+/** Suspense boundary + themed spinner only — wrap an already-lazy() child; a non-lazy child never suspends. */
 declare const LazyWrapper: React.FC<LazyWrapperProps>;
 export default LazyWrapper;

package/dist/Components/LazyWrapper/LazyWrapper.js

@@ -8,5 +8,6 @@ const DefaultFallback = ({ minHeight }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: minHeight, width: "100%", p: "2rem", children: (0, jsx_runtime_1.jsx)(react_2.Spinner, { thickness: "3px", speed: "0.65s", size: "lg", emptyColor: theme.colors.gray[100], color: theme.colors.accentText }) }));
 };
+/** Suspense boundary + themed spinner only — wrap an already-lazy() child; a non-lazy child never suspends. */
 const LazyWrapper = ({ children, fallback, minHeight = "400px", }) => ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: fallback !== null && fallback !== void 0 ? fallback : (0, jsx_runtime_1.jsx)(DefaultFallback, { minHeight: minHeight }), children: children }));
 exports.default = LazyWrapper;

package/dist/Components/LimitReachedModal/LimitReachedModal.js

@@ -27,6 +27,6 @@ const LimitReachedModal = ({ isOpen, onClose, kind, limit = null, used = null, c
     // Header banner uses the brand gradient so it reads correctly across all 9 brands.
     const gradient = (0, gradientInk_1.resolveGradient)(colors.gradient, colors.white, colors.black);
     const ink = gradient.ink;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, size: "lg", motionPreset: "slideInBottom", children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(5px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { borderRadius: "xl", overflow: "hidden", boxShadow: "2xl", mx: 4, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { bgGradient: `linear(to-r, ${gradient.from}, ${gradient.to})`, color: ink, children: [(0, jsx_runtime_1.jsx)(react_1.ModalHeader, { pb: 4, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: KindIcon, boxSize: "24px", mr: "12px" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xl", fontWeight: "bold", children: title !== null && title !== void 0 ? title : copy.title })] }) }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { "aria-label": "Dismiss", color: ink, _hover: { opacity: 0.7 } })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "md", fontWeight: 600, color: colors.text[700], children: message !== null && message !== void 0 ? message : copy.message }), usage && ((0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "sm", color: colors.textMuted, mt: 2, children: usage })), features && features.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.List, { spacing: 2, mt: 5, children: features.map((feature) => ((0, jsx_runtime_1.jsxs)(react_1.ListItem, { display: "flex", alignItems: "center", fontSize: "sm", color: colors.text[600], children: [(0, jsx_runtime_1.jsx)(react_1.ListIcon, { as: lucide_react_1.CheckCircle, color: colors.semanticText.success }), feature] }, feature))) }))] }), (0, jsx_runtime_1.jsx)(react_1.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.ModalFooter, { children: (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: canManageBilling ? "Maybe later" : "Close", variant: "outline", colorScheme: "gray", size: "md", onClick: onClose }), canManageBilling && ((0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade plan", size: "md", onClick: () => onUpgrade === null || onUpgrade === void 0 ? void 0 : onUpgrade() }))] }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, size: "lg", motionPreset: "slideInBottom", children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { overflow: "hidden", boxShadow: "2xl", mx: 4, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { bgGradient: `linear(to-r, ${gradient.from}, ${gradient.to})`, color: ink, children: [(0, jsx_runtime_1.jsx)(react_1.ModalHeader, { color: "inherit", borderBottomWidth: 0, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: KindIcon, boxSize: "24px", mr: "12px" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xl", fontWeight: "bold", children: title !== null && title !== void 0 ? title : copy.title })] }) }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { "aria-label": "Dismiss", color: ink, _hover: { opacity: 0.7 } })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "md", fontWeight: 600, color: colors.text[700], children: message !== null && message !== void 0 ? message : copy.message }), usage && ((0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "sm", color: colors.textMuted, mt: 2, children: usage })), features && features.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.List, { spacing: 2, mt: 5, children: features.map((feature) => ((0, jsx_runtime_1.jsxs)(react_1.ListItem, { display: "flex", alignItems: "center", fontSize: "sm", color: colors.text[600], children: [(0, jsx_runtime_1.jsx)(react_1.ListIcon, { as: lucide_react_1.CheckCircle, color: colors.semanticText.success }), feature] }, feature))) }))] }), (0, jsx_runtime_1.jsx)(react_1.ModalFooter, { children: (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: canManageBilling ? "Maybe later" : "Close", variant: "outline", colorScheme: "gray", size: "md", onClick: onClose }), canManageBilling && ((0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade plan", size: "md", onClick: () => onUpgrade === null || onUpgrade === void 0 ? void 0 : onUpgrade() }))] }) })] })] }));
 };
 exports.default = LimitReachedModal;

package/dist/Components/LimitReachedModal/LimitReachedModalProps.d.ts

@@ -1,13 +1,16 @@
+/** Which plan limit was hit; selects the modal's icon and copy via `resolveLimitCopy`. */
 export type LimitKind = "record" | "automation" | "custom_modules" | "user" | "projects" | "tickets";
+/** Fully controlled (isOpen/onClose only, no internal useDisclosure/autoOpen); closed prop list — modal size is fixed at "lg", not configurable. */
 export interface LimitReachedModalProps {
     isOpen: boolean;
     onClose: () => void;
     kind: LimitKind;
-    /** Plan limit for `kind`. Pass with `used` to show an inline usage line. */
+    /** Inline usage line needs BOTH limit and used — either alone silently renders nothing. */
     limit?: number | null;
     used?: number | null;
     /** false hides the upgrade CTA and swaps in "contact your administrator" copy. */
     canManageBilling: boolean;
+    /** Clicking the CTA calls only this — it does not also call onClose. Close the modal yourself if upgrading should dismiss it. */
     onUpgrade?: () => void;
     title?: string;
     message?: string;

package/dist/Components/LimitReachedModal/limitReachedCopy.d.ts

@@ -1,6 +1,8 @@
 import { LimitKind } from "./LimitReachedModalProps";
+/** title is the same for both audiences — only message swaps between admin and member copy. */
 export declare function resolveLimitCopy(kind: LimitKind, canManageBilling: boolean): {
     title: string;
     message: string;
 };
+/** Returns null unless BOTH used and limit are non-null — no partial "X used" line. */
 export declare function formatLimitUsage(kind: LimitKind, used?: number | null, limit?: number | null): string | null;

package/dist/Components/LimitReachedModal/limitReachedCopy.js

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveLimitCopy = resolveLimitCopy;
 exports.formatLimitUsage = formatLimitUsage;
-// Canonical strings ported from crm-frontend's orgPlanLimits.ts / orgRecordLimit.ts and
-// account-frontend's useSeatLimitGate.ts, kept verbatim so the promoted modal reads exactly
-// like the copies it replaces. `projects`/`tickets` are new — matched to the same voice.
+// NOTE: strings ported verbatim from crm-frontend/account-frontend's limit gates; projects/tickets are new, matched voice.
 const COPY = {
     record: {
         title: "Record limit reached",
@@ -43,10 +41,12 @@ const COPY = {
         member: "Your organization has reached its ticket limit. Contact your organization administrator to upgrade the plan.",
     },
 };
+/** title is the same for both audiences — only message swaps between admin and member copy. */
 function resolveLimitCopy(kind, canManageBilling) {
     const c = COPY[kind];
     return { title: c.title, message: canManageBilling ? c.admin : c.member };
 }
+/** Returns null unless BOTH used and limit are non-null — no partial "X used" line. */
 function formatLimitUsage(kind, used, limit) {
     if (used == null || limit == null)
         return null;

package/dist/Components/Loading/Loading.d.ts

@@ -1,2 +1,3 @@
 import { LoadingProps } from "./LoadingProps";
-export default function Loading({ text, isLoading, onlytext, container }: LoadingProps): import("react/jsx-runtime").JSX.Element | null;
+/** Full-viewport (or container-scoped) blocking overlay gated on isLoading; not a substitute for Button's own isLoading spinner on one control. */
+export default function Loading({ text, isLoading, onlytext, container, variant, allowBackgroundInteraction, }: LoadingProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/Components/Loading/Loading.js

@@ -1,27 +1,29 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Loading;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const react_2 = require("@emotion/react");
+const Spinner_1 = __importDefault(require("../Spinner/Spinner"));
+const Backdrop_1 = __importDefault(require("../Backdrop/Backdrop"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const colorTransition = (0, react_2.keyframes) `
-  0% {
-    color: black;
-  }
-  50% {
-    color: gray;
-  }
-  100% {
-    color: black;
-  }
+const overlay_styles_1 = require("../../Theme/chakra/overlay.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+const pulse = (0, react_2.keyframes) `
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
 `;
-function Loading({ text, isLoading, onlytext, container }) {
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
+/** Full-viewport (or container-scoped) blocking overlay gated on isLoading; not a substitute for Button's own isLoading spinner on one control. */
+function Loading({ text, isLoading, onlytext, container, variant = "frosted", allowBackgroundInteraction, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    if (variant === "dim" && !onlytext) {
+        return ((0, jsx_runtime_1.jsx)(Backdrop_1.default, { open: isLoading, loader: true, text: text, container: container, allowBackgroundInteraction: allowBackgroundInteraction }));
+    }
     if (!isLoading) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { position: container ? "absolute" : "fixed", top: "0", right: "0", bottom: "0", left: "0", backgroundColor: container ? "blackAlpha.500" : "blackAlpha.600", backdropFilter: container ? undefined : "blur(60px)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", zIndex: container ? "10" : "9999", children: (0, jsx_runtime_1.jsx)(react_1.Center, { height: container ? "100%" : "100vh", children: !onlytext ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: theme.colors.accentText, size: "xl" }), (0, jsx_runtime_1.jsx)(react_1.Text, { mt: "2", ml: "5", children: text })] })) : ((0, jsx_runtime_1.jsx)(react_1.Text, { mt: "2", ml: "5", fontSize: "50px", textTransform: "uppercase", fontWeight: 500, css: (0, react_2.css) `
-              animation: ${colorTransition} 2s infinite;
-            `, children: text })) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "status", "aria-live": "polite", "aria-busy": true, position: container ? "absolute" : "fixed", inset: "0", ...(0, overlay_styles_1.overlayScrimStyles)(colors), color: colors.white, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 3, zIndex: container ? "10" : "9999", children: onlytext ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "3.125rem", textTransform: "uppercase", fontWeight: 500, animation: `${pulse} 2s ease-in-out infinite`, sx: (0, motion_1.reducedMotionSx)(), children: text })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spinner_1.default, { size: "lg", color: colors.white, label: text ? "" : "Loading" }), text && (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.875rem", children: text })] })) }));
 }

package/dist/Components/Loading/LoadingProps.d.ts

@@ -1,7 +1,13 @@
+/** Props for Loading, a full-viewport (or container-scoped) blocking overlay gated on `isLoading`. */
 export type LoadingProps = {
     text?: string;
     isLoading: boolean;
+    /** Swaps the spinner+label for a large pulsing 50px uppercase heading — a different treatment, not just "no spinner". */
     onlytext?: boolean;
-    /** Scope the overlay to the nearest positioned ancestor with a MUI-style scrim, instead of full-viewport. */
+    /** Scope the overlay to the nearest positioned ancestor instead of full-viewport. */
     container?: boolean;
+    /** "dim" renders through Backdrop: lighter scrim, no blur, fades in. Defaults to "frosted" so existing screens are unchanged. */
+    variant?: "frosted" | "dim";
+    /** Only with `variant="dim"` — lets clicks reach the page behind the scrim. */
+    allowBackgroundInteraction?: boolean;
 };

package/dist/Components/MediaViewer/MediaViewer.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { type MediaViewerProps } from "./MediaViewerProps";
+/** Full-viewport lightbox: stage switches by item kind, with filmstrip + keyboard/swipe navigation. */
+declare const MediaViewer: React.FC<MediaViewerProps>;
+export default MediaViewer;

package/dist/Components/MediaViewer/MediaViewer.js

@@ -0,0 +1,234 @@
+"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;
+    };
+})();
+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("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const date_fns_1 = require("date-fns");
+const Modal_1 = __importStar(require("../Modal/Modal"));
+const useViewerChrome_1 = require("./useViewerChrome");
+const ViewerIconButton_1 = __importDefault(require("./components/ViewerIconButton"));
+const VideoPoster_1 = __importDefault(require("./components/VideoPoster"));
+const TileChip_1 = __importDefault(require("./components/TileChip"));
+const MediaImageViewer_1 = __importDefault(require("./components/MediaImageViewer"));
+const MediaVideoPlayer_1 = __importDefault(require("./components/MediaVideoPlayer"));
+const MediaAudioPlayer_1 = __importDefault(require("./components/MediaAudioPlayer"));
+const MediaDocumentStage_1 = __importDefault(require("./components/MediaDocumentStage"));
+const mediaKindIcon_1 = require("./components/mediaKindIcon");
+const mediaItems_1 = require("./mediaItems");
+const MediaViewerProps_1 = require("./MediaViewerProps");
+const viewportHeight_1 = require("../../Theme/tokens/builders/viewportHeight");
+const SWIPE_MIN_PX = 50;
+const NO_SWIPE_ZONE = '[role="toolbar"], [role="slider"], [role="group"]';
+const COPIED_FEEDBACK_MS = 1500;
+const DOCUMENT_KINDS = new Set(["pdf", "doc", "text", "spreadsheet", "presentation", "archive", "file"]);
+const isDocumentKind = (kind) => DOCUMENT_KINDS.has(kind);
+const KIND_LABEL_KEY = {
+    video: "kindVideo",
+    youtube: "kindYoutube",
+    pdf: "kindPdf",
+    doc: "kindDoc",
+    file: "kindFile",
+    audio: "kindAudio",
+    text: "kindText",
+    spreadsheet: "kindSpreadsheet",
+    presentation: "kindPresentation",
+    archive: "kindArchive",
+};
+/** Full-viewport lightbox: stage switches by item kind, with filmstrip + keyboard/swipe navigation. */
+const MediaViewer = ({ isOpen, onClose, items, index, onIndexChange, defaultIndex, title, resolveDocument, labels: labelOverrides, imageLabels, videoLabels, audioLabels, documentLabels, }) => {
+    const labels = { ...MediaViewerProps_1.defaultMediaViewerLabels, ...labelOverrides };
+    const isIndexControlled = index !== undefined;
+    const [uncontrolledIndex, setUncontrolledIndex] = (0, react_1.useState)(defaultIndex !== null && defaultIndex !== void 0 ? defaultIndex : 0);
+    const activeIndex = isIndexControlled ? index : uncontrolledIndex;
+    if (process.env.NODE_ENV !== "production" && isIndexControlled && !onIndexChange) {
+        console.warn("MediaViewer: index is set without onIndexChange, so navigation cannot move past it.");
+    }
+    const latestIndex = (0, react_1.useRef)(0);
+    const setIndex = (next) => {
+        latestIndex.current = next;
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(next);
+        if (!isIndexControlled)
+            setUncontrolledIndex(next);
+    };
+    const chrome = (0, useViewerChrome_1.useViewerChrome)();
+    const stageRef = (0, react_1.useRef)(null);
+    const stripRef = (0, react_1.useRef)(null);
+    const [videoAt, setVideoAt] = (0, react_1.useState)(0);
+    const [imageZoom, setImageZoom] = (0, react_1.useState)(100);
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const [filmstripOverflows, setFilmstripOverflows] = (0, react_1.useState)(false);
+    const touchStart = (0, react_1.useRef)(null);
+    const total = items.length;
+    const safeIndex = total === 0 ? 0 : (0, mediaItems_1.wrapIndex)(activeIndex, total);
+    const item = items[safeIndex];
+    // NOTE: several arrow presses land in one tick; relative moves must compose, not restate.
+    latestIndex.current = safeIndex;
+    const go = (0, react_1.useRef)((delta) => void delta);
+    go.current = (delta) => {
+        if (total <= 1)
+            return;
+        setVideoAt(0);
+        setIndex((0, mediaItems_1.wrapIndex)(latestIndex.current + delta, total));
+    };
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return undefined;
+        const onKeyDown = (event) => {
+            var _a, _b;
+            if (event.ctrlKey || event.metaKey || event.altKey || (0, mediaItems_1.isTypingTarget)(event.target))
+                return;
+            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+                return;
+            const claimedByVideo = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, "[data-media-video-shell]");
+            if (claimedByVideo)
+                return;
+            go.current(event.key === "ArrowLeft" ? -1 : 1);
+            event.preventDefault();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [isOpen]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const active = (_a = stripRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[aria-current="true"]');
+        active === null || active === void 0 ? void 0 : active.scrollIntoView({ block: "nearest", inline: "center" });
+    }, [safeIndex, isOpen]);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return undefined;
+        let observer;
+        let rafId;
+        // Modal mounts its portaled content a tick after isOpen flips, so stripRef.current can still be null here.
+        const attach = () => {
+            const el = stripRef.current;
+            if (!el) {
+                rafId = requestAnimationFrame(attach);
+                return;
+            }
+            const check = () => setFilmstripOverflows(el.scrollWidth > el.clientWidth + 1);
+            check();
+            if (typeof ResizeObserver === "undefined")
+                return;
+            observer = new ResizeObserver(check);
+            observer.observe(el);
+        };
+        attach();
+        return () => {
+            if (rafId !== undefined)
+                cancelAnimationFrame(rafId);
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        };
+    }, [items, isOpen]);
+    (0, react_1.useEffect)(() => {
+        setCopied(false);
+    }, [safeIndex]);
+    if (!item)
+        return null;
+    const canSwipe = total > 1 && (item.kind !== "image" || imageZoom <= 100);
+    const onTouchStart = (event) => {
+        const target = event.target;
+        if (event.touches.length !== 1 || target.closest(NO_SWIPE_ZONE)) {
+            touchStart.current = null;
+            return;
+        }
+        touchStart.current = { x: event.touches[0].clientX, y: event.touches[0].clientY };
+    };
+    const onTouchMove = (event) => {
+        if (event.touches.length > 1)
+            touchStart.current = null;
+    };
+    const onTouchEnd = (event) => {
+        const start = touchStart.current;
+        touchStart.current = null;
+        if (!start || !canSwipe)
+            return;
+        const touch = event.changedTouches[0];
+        const dx = touch.clientX - start.x;
+        const dy = touch.clientY - start.y;
+        if (Math.abs(dx) > SWIPE_MIN_PX && Math.abs(dx) > Math.abs(dy))
+            go.current(dx < 0 ? 1 : -1);
+    };
+    const copyLink = async () => {
+        try {
+            await navigator.clipboard.writeText((0, mediaItems_1.mediaLink)(item, videoAt));
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
+        }
+        catch {
+            setCopied(false);
+        }
+    };
+    const kindLabelKey = KIND_LABEL_KEY[item.kind];
+    const renderStage = () => {
+        var _a, _b, _c, _d;
+        if (item.kind === "image") {
+            return ((0, jsx_runtime_1.jsx)(MediaImageViewer_1.default, { item: item, label: (_a = item.name) !== null && _a !== void 0 ? _a : title, onZoomChange: setImageZoom, labels: imageLabels }, item.key));
+        }
+        if (isDocumentKind(item.kind)) {
+            if (!resolveDocument) {
+                throw new Error("MediaViewer: resolveDocument is required when items include a pdf/doc/text/spreadsheet/presentation/archive/file item");
+            }
+            return ((0, jsx_runtime_1.jsx)(MediaDocumentStage_1.default, { item: item, label: (_b = item.name) !== null && _b !== void 0 ? _b : title, resolveDocument: resolveDocument, labels: documentLabels }, item.key));
+        }
+        if (item.kind === "video") {
+            return ((0, jsx_runtime_1.jsx)(MediaVideoPlayer_1.default, { item: item, label: (_c = item.name) !== null && _c !== void 0 ? _c : title, onTimeChange: setVideoAt, onPrevious: total > 1 ? () => go.current(-1) : undefined, onNext: total > 1 ? () => go.current(1) : undefined, labels: videoLabels }, item.key));
+        }
+        if (item.kind === "audio") {
+            return ((0, jsx_runtime_1.jsx)(MediaAudioPlayer_1.default, { item: item, label: (_d = item.name) !== null && _d !== void 0 ? _d : title, onTimeChange: setVideoAt, labels: audioLabels }, item.key));
+        }
+        return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "iframe", position: "absolute", inset: 0, src: (0, mediaItems_1.youtubeEmbed)(item.src), title: labels.youtubeTitle, border: "none", allowFullScreen: true }, item.key));
+    };
+    const meta = (() => {
+        const type = (0, mediaItems_1.fileTypeLabel)(item.src);
+        const parts = [type, item.fileSize ? (0, mediaItems_1.formatFileSize)(item.fileSize) : null].filter(Boolean);
+        const uploaded = item.uploadedAt ? labels.uploadedOn((0, date_fns_1.format)(new Date(item.uploadedAt), "MMM d, yyyy")) : null;
+        return [parts.join(" · "), uploaded].filter(Boolean).join(" — ");
+    })();
+    return ((0, jsx_runtime_1.jsx)(Modal_1.default, { isOpen: isOpen, onClose: onClose, size: "full", hideCloseButton: true, initialFocusRef: stageRef, contentProps: { bg: chrome.stage, m: 0, borderRadius: 0 }, children: (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { p: 0, display: "flex", flexDirection: "column", sx: viewportHeight_1.fullViewportHeight, children: [total > 1 && ((0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { "aria-live": "polite", children: labels.nowShowing(safeIndex + 1, total) })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, px: 4, py: 3, bg: chrome.raised, color: chrome.ink, "data-testid": "media-viewer-header", children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { as: "h2", size: "sm", noOfLines: 1, color: chrome.ink, children: title }), total > 1 && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", color: chrome.muted, fontSize: "sm", "data-testid": "media-viewer-counter", children: labels.counter(safeIndex + 1, total) })), kindLabelKey && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", px: 2, py: 0.5, borderRadius: "4px", bg: chrome.hover, color: chrome.ink, fontSize: "xs", fontWeight: 600, children: labels[kindLabelKey] })), (0, jsx_runtime_1.jsx)(react_2.Flex, { flex: 1 }), item.kind === "youtube" ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.openOnYoutube, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16 }), href: (0, mediaItems_1.youtubeWatch)(item.src) })) : ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.download, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }), href: item.src })), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: copied ? labels.copied : labels.copyLink, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 16 }), onClick: copyLink, testId: "media-viewer-copy-link" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.close, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18 }), onClick: onClose, testId: "media-viewer-close" })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: stageRef, tabIndex: -1, flex: 1, position: "relative", minH: 0, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, "data-testid": "media-viewer-stage", children: [renderStage(), total > 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "50%", left: { base: 2, md: 4 }, transform: "translateY(-50%)", zIndex: 2, children: (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.previous, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 24 }), onClick: () => go.current(-1), round: true, testId: "media-viewer-prev" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "50%", right: { base: 2, md: 4 }, transform: "translateY(-50%)", zIndex: 2, children: (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.next, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 24 }), onClick: () => go.current(1), round: true, testId: "media-viewer-next" }) })] }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { bg: chrome.raised, py: 3, minW: 0, children: [meta && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: chrome.muted, mb: 2, px: 4, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", title: meta, children: meta })), total > 1 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { as: "nav", "aria-label": labels.filmstrip, ref: stripRef, gap: 2, px: 4, overflowX: "auto", justifyContent: filmstripOverflows ? "flex-start" : "center", "data-testid": "media-viewer-filmstrip", children: items.map((tile, i) => {
+                                const isSelected = i === safeIndex;
+                                const showPoster = tile.kind === "video" && !(0, mediaItems_1.isUnsupportedVideoSrc)(tile.src);
+                                const showThumb = !showPoster && tile.thumb && !(tile.kind === "image" && (0, mediaItems_1.isUnsupportedImageSrc)(tile.src));
+                                const extLabel = (0, mediaItems_1.fileTypeLabel)(tile.src);
+                                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", onClick: () => setIndex(i), "aria-current": isSelected, "aria-label": `${tile.kind} ${tile.ordinal}`, position: "relative", flexShrink: 0, w: "112px", h: "70px", borderRadius: "10px", overflow: "hidden", bg: chrome.track, opacity: isSelected ? 1 : 0.85, boxShadow: isSelected
+                                        ? `0 0 0 2px ${chrome.accentGlow(0.9)}, 0 0 12px 2px ${chrome.accentGlow(0.45)}`
+                                        : "none", transition: "box-shadow 0.15s ease, opacity 0.15s ease", _hover: { opacity: 1 }, children: [showPoster ? ((0, jsx_runtime_1.jsx)(VideoPoster_1.default, { item: tile })) : showThumb ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "img", src: tile.thumb, alt: "", w: "100%", h: "100%", objectFit: "cover" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", w: "100%", h: "100%", color: chrome.muted, children: (0, react_1.cloneElement)((0, mediaKindIcon_1.iconForKind)(tile.kind), { size: 20, "aria-hidden": true }) }), extLabel && (0, jsx_runtime_1.jsx)(TileChip_1.default, { place: "br", children: extLabel })] })), isSelected && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", top: 1, right: 1, align: "center", justify: "center", w: "16px", h: "16px", borderRadius: "full", bg: chrome.accent, color: chrome.onAccent, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 10, "aria-hidden": true }) }))] }, tile.key));
+                            }) }))] })] }) }));
+};
+exports.default = MediaViewer;