pixelize-design-library 2.4.2-beta.9 → 3.0.0

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

@@ -0,0 +1,8 @@
+export type BoardStore<T> = {
+    get: () => T;
+    set: (next: T) => void;
+    subscribe: (listener: () => void) => () => void;
+};
+/** Board-local state that only the components selecting a changed slice re-render for. */
+export declare const createBoardStore: <T>(initial: T) => BoardStore<T>;
+export declare const useBoardStore: <T, S>(store: BoardStore<T>, select: (value: T) => S) => S;

package/dist/Components/KanbanBoard/boardStore.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBoardStore = exports.createBoardStore = void 0;
+const react_1 = require("react");
+/** Board-local state that only the components selecting a changed slice re-render for. */
+const createBoardStore = (initial) => {
+    let value = initial;
+    const listeners = new Set();
+    return {
+        get: () => value,
+        set: (next) => {
+            if (Object.is(next, value))
+                return;
+            value = next;
+            listeners.forEach((listener) => listener());
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+    };
+};
+exports.createBoardStore = createBoardStore;
+const useBoardStore = (store, select) => (0, react_1.useSyncExternalStore)(store.subscribe, () => select(store.get()));
+exports.useBoardStore = useBoardStore;

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

@@ -0,0 +1,7 @@
+import type { KbdProps, KbdShortcutProps } from "./KbdProps";
+export declare const detectApple: () => boolean;
+/** One keyboard key cap; decorative hint rows should wrap it in `aria-hidden`. */
+declare const Kbd: ({ children, size, "data-testid": testId }: KbdProps) => import("react/jsx-runtime").JSX.Element;
+/** Renders a chord such as `mod+k` as one `Kbd` per key, announced as a single spoken label. */
+export declare const KbdShortcut: ({ shortcut, size, isApple, "data-testid": testId }: KbdShortcutProps) => import("react/jsx-runtime").JSX.Element;
+export default Kbd;

package/dist/Components/Kbd/Kbd.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KbdShortcut = exports.detectApple = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const AppSwitcherProps_1 = require("../AppSwitcher/AppSwitcherProps");
+const HEIGHT = { xs: "1rem", sm: "1.25rem" };
+const SPOKEN = {
+    mod: "Command",
+    cmd: "Command",
+    ctrl: "Control",
+    alt: "Option",
+    shift: "Shift",
+    enter: "Enter",
+    esc: "Escape",
+};
+const detectApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+exports.detectApple = detectApple;
+/** One keyboard key cap; decorative hint rows should wrap it in `aria-hidden`. */
+const Kbd = ({ children, size = "sm", "data-testid": testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "kbd", "data-testid": testId, display: "inline-flex", alignItems: "center", justifyContent: "center", minW: HEIGHT[size], h: HEIGHT[size], px: 1.5, fontFamily: "inherit", fontSize: "xs-minus", fontWeight: 600, lineHeight: 1, whiteSpace: "nowrap", borderWidth: "1px", borderColor: colors.boxborder[200], borderRadius: "base", bg: colors.backgroundColor.subtle, color: colors.textMuted, children: children }));
+};
+/** Renders a chord such as `mod+k` as one `Kbd` per key, announced as a single spoken label. */
+const KbdShortcut = ({ shortcut, size, isApple, "data-testid": testId }) => {
+    const parts = shortcut.split("+").map((p) => p.trim()).filter(Boolean);
+    const apple = isApple !== null && isApple !== void 0 ? isApple : (0, exports.detectApple)();
+    const spoken = parts.map((p) => { var _a; return (_a = SPOKEN[p.toLowerCase()]) !== null && _a !== void 0 ? _a : p.toUpperCase(); }).join(" ");
+    const keys = (0, AppSwitcherProps_1.shortcutKeys)(shortcut, apple);
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: "inline-flex", gap: 1, role: "img", "aria-label": spoken, "data-testid": testId, children: keys.map((key, i) => ((0, jsx_runtime_1.jsx)(Kbd, { size: size, children: key }, `${key}-${i}`))) }));
+};
+exports.KbdShortcut = KbdShortcut;
+exports.default = Kbd;

package/dist/Components/Kbd/KbdProps.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+/** Props for a single keyboard key cap. */
+export interface KbdProps {
+    /** Key glyph or word shown on the cap. */
+    children: ReactNode;
+    /** `sm` is 20px tall (default); `xs` is 16px. */
+    size?: "xs" | "sm";
+    /** Test id on the `<kbd>` element. */
+    "data-testid"?: string;
+}
+/** Props for a key chord such as `mod+k`, rendered as one `Kbd` per key. */
+export interface KbdShortcutProps {
+    /** Chord in `AppSwitcher` notation, e.g. `mod+shift+k`. */
+    shortcut: string;
+    /** Cap size of every key; same scale as `Kbd`. */
+    size?: KbdProps["size"];
+    /** Forces Apple glyphs (⌘ ⇧) or Ctrl/Shift words; defaults to platform detection. */
+    isApple?: boolean;
+    /** Test id on the wrapper that carries the spoken chord label. */
+    "data-testid"?: string;
+}

package/dist/Components/Kbd/KbdProps.js

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

package/dist/Components/LauncherTrigger/LauncherTrigger.d.ts

@@ -0,0 +1,5 @@
+import type { LauncherTriggerProps } from "./LauncherTriggerProps";
+export declare const keyShortcutsFor: (shortcut: string) => string;
+/** Chip or icon button that opens an app-owned launcher; shows the shortcut hint but binds no key. */
+declare const LauncherTrigger: ({ onClick, isOpen, label, shortcut, icon: Icon, display, "aria-label": ariaLabel, "data-testid": testId, }: LauncherTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export default LauncherTrigger;

package/dist/Components/LauncherTrigger/LauncherTrigger.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.keyShortcutsFor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_2 = require("../../Theme/tokens/primitives/motion");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
+const Kbd_1 = require("../Kbd/Kbd");
+const AppSwitcherProps_1 = require("../AppSwitcher/AppSwitcherProps");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const MD_QUERY = "(min-width: 48em)";
+const KEY_NAMES = {
+    mod: ["Meta", "Control"],
+    cmd: ["Meta"],
+    ctrl: ["Control"],
+    alt: ["Alt"],
+    shift: ["Shift"],
+    esc: ["Escape"],
+};
+const keyShortcutsFor = (shortcut) => {
+    const options = shortcut
+        .split("+")
+        .map((p) => p.trim())
+        .filter(Boolean)
+        .map((p) => { var _a; return (_a = KEY_NAMES[p.toLowerCase()]) !== null && _a !== void 0 ? _a : [p.length === 1 ? p.toUpperCase() : p]; });
+    const variants = Math.max(1, ...options.map((o) => o.length));
+    const chords = Array.from({ length: variants }, (_, v) => options.map((o) => o[Math.min(v, o.length - 1)]).join("+"));
+    return Array.from(new Set(chords)).join(" ");
+};
+exports.keyShortcutsFor = keyShortcutsFor;
+/** Chip or icon button that opens an app-owned launcher; shows the shortcut hint but binds no key. */
+const LauncherTrigger = ({ onClick, isOpen, label = "Menu", shortcut = "mod+k", icon: Icon = lucide_react_1.Compass, display = "chip", "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const showHint = (0, useMatchMedia_1.useMatchMedia)(MD_QUERY, true);
+    const ring = (0, focusRing_styles_1.focusVisibleRing)(colors);
+    const hint = shortcut ? (0, AppSwitcherProps_1.formatShortcut)(shortcut, (0, Kbd_1.detectApple)()) : "";
+    if (display === "icon") {
+        return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: hint ? `${label} (${hint})` : label, placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label, "aria-keyshortcuts": shortcut ? (0, exports.keyShortcutsFor)(shortcut) : undefined, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, w: "36px", h: "36px", borderRadius: "10px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.primary[50], color: colors.accentText, cursor: "pointer", transition: (0, motion_2.transitionFor)(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: ring, ...(0, motion_1.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(Icon, { size: 17, "aria-hidden": "true" }) }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel, "aria-keyshortcuts": shortcut ? (0, exports.keyShortcutsFor)(shortcut) : undefined, display: "inline-flex", alignItems: "center", gap: 2, flexShrink: 0, h: "2.25rem", pl: "0.625rem", pr: "0.375rem", borderRadius: "10px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.primary[50], color: colors.accentText, fontSize: "0.84375rem", fontWeight: 600, lineHeight: 1, cursor: "pointer", transition: (0, motion_2.transitionFor)(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: ring, ...(0, motion_1.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 2, "aria-hidden": ariaLabel ? true : undefined, children: [(0, jsx_runtime_1.jsx)(Icon, { size: 17, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { children: label })] }), hint && showHint && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "kbd", "aria-hidden": "true", fontFamily: "inherit", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "normal", px: "6px", py: "2px", borderRadius: "md", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.surfaceRaised, children: hint }))] }));
+};
+exports.default = LauncherTrigger;

package/dist/Components/LauncherTrigger/LauncherTriggerProps.d.ts

@@ -0,0 +1,19 @@
+import type { ElementType } from "react";
+/** Props for the chip that opens an app-owned launcher; it renders the trigger only and binds no shortcut. */
+export interface LauncherTriggerProps {
+    /** Fires when the trigger is activated; toggle your launcher's open state here. */
+    onClick: () => void;
+    /** Whether the launcher is open; drives `aria-expanded`. */
+    isOpen: boolean;
+    /** Visible text. Default "Menu". */
+    label?: string;
+    /** Chord in `AppSwitcher` notation shown as a hint above `md` and exposed as `aria-keyshortcuts`; `null` hides both. Default "mod+k". */
+    shortcut?: string | null;
+    /** Component rendered at 17px before the label. Default lucide `Compass`. */
+    icon?: ElementType;
+    /** `"chip"` shows icon, label and chord hint; `"icon"` is a 36px square whose label is the accessible name and tooltip. Default "chip". */
+    display?: "chip" | "icon";
+    /** Overrides the accessible name; the visible label and hint then become `aria-hidden`. */
+    "aria-label"?: string;
+    "data-testid"?: string;
+}

package/dist/Components/LauncherTrigger/LauncherTriggerProps.js

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

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

@@ -1,10 +1,12 @@
 import React from "react";
+/** Suspense boundary around lazy children, with a themed spinner by default. */
 export interface LazyWrapperProps {
     children: React.ReactNode;
-    /** Custom fallback node. Overrides the default spinner. */
+    /** Replaces the spinner, `null` included (renders nothing); `minHeight` 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 }) }));
 };
-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 }));
+/** 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 === undefined ? (0, jsx_runtime_1.jsx)(DefaultFallback, { minHeight: minHeight }) : fallback, children: children }));
 exports.default = LazyWrapper;

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { LimitReachedModalProps } from "./LimitReachedModalProps";
+/** Controlled plan-limit modal: kind-specific title and message, optional usage line and feature list, upgrade CTA only for billing managers. */
 declare const LimitReachedModal: React.FC<LimitReachedModalProps>;
 export default LimitReachedModal;

package/dist/Components/LimitReachedModal/LimitReachedModal.js

@@ -19,6 +19,7 @@ const KIND_ICON = {
     projects: lucide_react_1.Crown,
     tickets: lucide_react_1.Crown,
 };
+/** Controlled plan-limit modal: kind-specific title and message, optional usage line and feature list, upgrade CTA only for billing managers. */
 const LimitReachedModal = ({ isOpen, onClose, kind, limit = null, used = null, canManageBilling, onUpgrade, title, message, features, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const copy = (0, limitReachedCopy_1.resolveLimitCopy)(kind, canManageBilling);
@@ -27,6 +28,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: 700, 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,15 +1,25 @@
+/** 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 {
+    /** Controlled visibility; the modal renders nothing while false. */
     isOpen: boolean;
+    /** Called by the X button, Esc, overlay click and the Maybe later or Close button. */
     onClose: () => void;
+    /** Picks the icon, default title and default message; `user` gets a users icon, the rest a crown. */
     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;
+    /** Amount already consumed; shown with `limit` as "X of Y <unit> used". */
     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;
+    /** Overrides the kind's default heading. */
     title?: string;
+    /** Overrides the default body text, which also differs by `canManageBilling`. */
     message?: string;
+    /** Optional check-marked bullets listed under the message, e.g. what the next plan unlocks. */
     features?: 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: "sm", children: text })] })) }));
 }

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

@@ -1,7 +1,15 @@
+/** Props for Loading, a full-viewport (or container-scoped) blocking overlay gated on `isLoading`. */
 export type LoadingProps = {
+    /** Label under the spinner; without it the spinner is named "Loading". With `onlytext` it is the heading. */
     text?: string;
+    /** Shows the overlay; renders nothing when false. */
     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/MediaGallery/MediaFrame.d.ts

@@ -0,0 +1,31 @@
+import type { ProductMedia } from "../Commerce/commerceTypes";
+export type FrameZoom = {
+    scale: number;
+    x: number;
+    y: number;
+};
+type MediaFrameProps = {
+    media: ProductMedia;
+    alt: string;
+    fit?: "cover" | "contain";
+    /** False for frames the viewer is not looking at: lazy-loads images and stops any playing video. */
+    active?: boolean;
+    eager?: boolean;
+    autoPlay?: boolean;
+    zoom?: FrameZoom;
+    surface?: string;
+    playLabel: string;
+    unavailableLabel: string;
+};
+/** One frame: skeleton, then image fade-in with the ratio already reserved; broken images become a tile. */
+export declare const FrameImage: ({ src, alt, fit, eager, zoom, unavailableLabel, }: {
+    src: string;
+    alt: string;
+    fit: "cover" | "contain";
+    eager: boolean;
+    zoom?: FrameZoom;
+    unavailableLabel: string;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Image, or a video that shows its poster behind a play button until asked to play. */
+declare const MediaFrame: ({ media, alt, fit, active, eager, autoPlay, zoom, surface, playLabel, unavailableLabel, }: MediaFrameProps) => import("react/jsx-runtime").JSX.Element;
+export default MediaFrame;

package/dist/Components/MediaGallery/MediaFrame.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FrameImage = void 0;
+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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const glass_1 = require("./glass");
+const mediaGalleryModel_1 = require("./mediaGalleryModel");
+const CENTER = { position: "absolute", inset: 0 };
+/** One frame: skeleton, then image fade-in with the ratio already reserved; broken images become a tile. */
+const FrameImage = ({ src, alt, fit, eager, zoom, unavailableLabel, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const [state, setState] = (0, react_1.useState)("loading");
+    const settle = (0, react_1.useCallback)((node) => {
+        if (node && node.complete && node.naturalWidth > 0)
+            setState("loaded");
+    }, []);
+    if (state === "failed") {
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ...CENTER, direction: "column", align: "center", justify: "center", gap: 2, color: colors.textMuted, role: "img", "aria-label": `${unavailableLabel}: ${alt}`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ImageOff, { size: 24, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "xs", children: unavailableLabel })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state === "loading" && ((0, jsx_runtime_1.jsx)(react_2.Box, { ...CENTER, "data-testid": "media-skeleton", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "100%", width: "100%", borderRadius: "0" }) })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "img", ref: settle, src: src, alt: alt, loading: eager ? "eager" : "lazy", decoding: "async", draggable: false, onLoad: () => setState("loaded"), onError: () => setState("failed"), ...CENTER, w: "100%", h: "100%", objectFit: fit, opacity: state === "loaded" ? 1 : 0, transform: zoom ? `scale(${zoom.scale})` : undefined, transformOrigin: zoom ? `${zoom.x}% ${zoom.y}%` : undefined, transition: (0, motion_1.transitionFor)(["opacity", "transform"], "base"), sx: (0, motion_2.reducedMotionSx)() })] }));
+};
+exports.FrameImage = FrameImage;
+/** Image, or a video that shows its poster behind a play button until asked to play. */
+const MediaFrame = ({ media, alt, fit = "cover", active = true, eager = true, autoPlay = false, zoom, surface, playLabel, unavailableLabel, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const kind = (0, mediaGalleryModel_1.frameKind)(media);
+    const [playing, setPlaying] = (0, react_1.useState)(autoPlay);
+    (0, react_1.useEffect)(() => {
+        if (!active)
+            setPlaying(false);
+    }, [active]);
+    const poster = (0, mediaGalleryModel_1.framePoster)(media);
+    let content;
+    if (kind === "image") {
+        content = (0, jsx_runtime_1.jsx)(exports.FrameImage, { src: media.src, alt: alt, fit: fit, eager: eager, zoom: zoom, unavailableLabel: unavailableLabel }, media.src);
+    }
+    else if (playing) {
+        const embed = (0, mediaGalleryModel_1.parseEmbed)(media.src);
+        content = embed ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "iframe", ...CENTER, w: "100%", h: "100%", border: "0", src: embed.src, title: alt, allow: "autoplay; encrypted-media; picture-in-picture; fullscreen", allowFullScreen: true })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "video", ...CENTER, w: "100%", h: "100%", objectFit: "contain", src: media.src, poster: media.poster, controls: true, autoPlay: true, playsInline: true, "aria-label": alt }));
+    }
+    else {
+        content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [poster ? ((0, jsx_runtime_1.jsx)(exports.FrameImage, { src: poster, alt: alt, fit: fit, eager: eager, unavailableLabel: unavailableLabel }, poster)) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { ...CENTER, align: "center", justify: "center", color: colors.textMuted, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Video, { size: 32 }) })), (0, jsx_runtime_1.jsx)(glass_1.GlassIconButton, { label: playLabel, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 20, "aria-hidden": true, fill: "currentColor" }), onClick: () => setPlaying(true), size: 56, left: "calc(50% - 28px)", top: "calc(50% - 28px)", tabIndex: active ? 0 : -1 })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", w: "100%", h: "100%", overflow: "hidden", bg: surface !== null && surface !== void 0 ? surface : colors.background[100], "data-frame-kind": kind, children: content }));
+};
+exports.default = MediaFrame;

package/dist/Components/MediaGallery/MediaGallery.d.ts

@@ -0,0 +1,4 @@
+import type { MediaGalleryProps } from "./MediaGalleryProps";
+/** Product media carousel: scroll-snap track, thumbnail rail or dots, lightbox, colour-linked frame sets. */
+declare const MediaGallery: ({ media, layout, aspectRatio, zoom, index, defaultIndex, onIndexChange, activeMediaIds, badges, actions, sticky, stickyTop, rounded, isLoading, labels: labelOverrides, lightboxLabels, "aria-label": ariaLabel, "data-testid": testId, }: MediaGalleryProps) => import("react/jsx-runtime").JSX.Element;
+export default MediaGallery;