pixelize-design-library 2.4.2-beta.37 → 2.4.2-beta.38

package/dist/Components/Toaster/Toaster.d.ts

@@ -1,3 +1,4 @@
 import { ToasterChildren, ToasterContextType } from "./ToasterProps";
+/** Provides useToaster().showToast() — a transient, self-dismissing notification, not hover-triggered info (ToolTip) or a blocking confirmation (AlertDialog). */
 export default function ToasterProvider({ children }: ToasterChildren): import("react/jsx-runtime").JSX.Element;
 export declare const useToaster: () => ToasterContextType;

package/dist/Components/Toaster/Toaster.js

@@ -64,6 +64,7 @@ function ToastCard({ onClose, title, description, actions, isClosable, duration,
                     animationPlayState: paused ? "paused" : "running",
                 } }))] }));
 }
+/** Provides useToaster().showToast() — a transient, self-dismissing notification, not hover-triggered info (ToolTip) or a blocking confirmation (AlertDialog). */
 function ToasterProvider({ children }) {
     const toast = (0, react_2.useToast)();
     const theme = (0, useCustomTheme_1.useCustomTheme)();

package/dist/Components/Toaster/ToasterProps.d.ts

@@ -1,5 +1,6 @@
 import { ToastProps } from "@chakra-ui/react";
 import { ReactNode } from "react";
+/** children is Picked from Chakra's ToastProps but never read by showToast — a dead prop; pass description instead. */
 export type ToasterToastProps = Pick<ToastProps, 'description' | 'title' | 'isClosable' | 'duration' | 'children' | 'onClose'> & {
     position?: "top" | "bottom" | "top-right" | "top-left" | "bottom-right" | "bottom-left";
     status?: "success" | "error" | "warning" | "info" | "loading";
@@ -11,9 +12,11 @@ export type ToasterToastProps = Pick<ToastProps, 'description' | 'title' | 'isCl
      */
     actions?: (onClose: () => void) => ReactNode;
 };
+/** Shape of the ToasterContext value; useToaster() throws if called outside a mounted ToasterProvider. */
 export interface ToasterContextType {
     showToast: (children: ToasterToastProps) => void;
 }
+/** Props for ToasterProvider — just the app subtree it wraps in the toast context. */
 export interface ToasterChildren {
     children: ReactNode;
 }

package/dist/Components/Toggle/TableToggle.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { ViewToggleProps } from "./TableToggleProps";
+/** Two icon-only IconButtons (Grid/List) with no aria-pressed — selection is shown by color only; shares variant with SegmentedControl (see MODULE.md). */
 declare const TableToggle: React.FC<ViewToggleProps>;
 export default TableToggle;

package/dist/Components/Toggle/TableToggle.js

@@ -12,6 +12,7 @@ const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const MODES = ["grid", "list"];
+/** Two icon-only IconButtons (Grid/List) with no aria-pressed — selection is shown by color only; shares variant with SegmentedControl (see MODULE.md). */
 const TableToggle = ({ value, onChange, variant = "default" }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { colors } = theme;

package/dist/Components/Toggle/TableToggleProps.d.ts

@@ -1,5 +1,8 @@
+/** The two views TableToggle switches between — "list" renders as a kanban-style icon, not a literal list. */
 export type ViewMode = "grid" | "list";
+/** Visual style for TableToggle; "default" is the plain segmented control with no sliding indicator. */
 export type TableToggleVariant = "default" | "brandSlide" | "underlineSlide";
+/** Props for TableToggle — the exported type is named ViewToggleProps, not TableToggleProps. */
 export type ViewToggleProps = {
     value: ViewMode;
     onChange: (val: ViewMode) => void;

package/dist/Components/ToggleSwitch/ToggleSwitch.d.ts

@@ -1,2 +1,3 @@
 import { ToggleSwitchProps } from "./ToggleSwitchProps";
+/** Binary on/off control, role="switch"; always controlled with no internal state — distinct from the two-option Switch/SegmentedControl. */
 export default function ToggleSwitch({ isChecked, onChange, isDisabled, size, id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: ToggleSwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ToggleSwitch/ToggleSwitch.js

@@ -8,6 +8,7 @@ const SIZES = {
     sm: { w: "2rem", h: "1.125rem", knob: "0.875rem", travel: "0.75rem" },
     md: { w: "2.375rem", h: "1.375rem", knob: "1.125rem", travel: "0.875rem" },
 };
+/** Binary on/off control, role="switch"; always controlled with no internal state — distinct from the two-option Switch/SegmentedControl. */
 function ToggleSwitch({ isChecked, onChange, isDisabled = false, size = "md", id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const dims = SIZES[size];

package/dist/Components/ToggleSwitch/ToggleSwitchProps.d.ts

@@ -1,4 +1,6 @@
+/** Track/knob size preset for ToggleSwitch; exact widths and travel distance live in ToggleSwitch.tsx's SIZES map. */
 export type ToggleSwitchSize = "sm" | "md";
+/** Props for the switch — isChecked/onChange are required, so there's no uncontrolled/defaultChecked mode. */
 export type ToggleSwitchProps = {
     isChecked: boolean;
     onChange: (checked: boolean) => void;

package/dist/Components/ToolTip/ToolTip.d.ts

@@ -1,2 +1,3 @@
 import { ToolTipProps } from "./ToolTipProps";
+/** Renders a hover/focus-triggered Chakra Tooltip — not a substitute for Toaster's transient, unprompted notifications. */
 export default function ToolTip({ placement, label, children, hasArrow, fontSize, bg, color, isDisabled, overflowOnly, isOpen, defaultIsOpen, openDelay, closeDelay, arrowSize, closeOnClick, size, width, height, arrowPadding, arrowShadowColor, direction, gutter, onClose, modifiers, closeOnPointerDown, styles, }: ToolTipProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ToolTip/ToolTip.js

@@ -8,6 +8,7 @@ const useIsTruncated_1 = require("../../Hooks/useIsTruncated");
 const mergeRefs_1 = require("../../Utils/mergeRefs");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+/** Renders a hover/focus-triggered Chakra Tooltip — not a substitute for Toaster's transient, unprompted notifications. */
 function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize = "14px", bg, color, isDisabled, overflowOnly = false, isOpen, defaultIsOpen, openDelay = 0, closeDelay = 0, arrowSize = 10, closeOnClick = false, size, width, height, arrowPadding, arrowShadowColor, direction, gutter = 8, onClose, modifiers, closeOnPointerDown, styles, }) {
     // Measure the child for `overflowOnly`. The hook is always called (Rules of
     // Hooks) but is fully inert unless `overflowOnly` is set — no layout reads,

package/dist/Components/ToolTip/ToolTipProps.d.ts

@@ -1,5 +1,7 @@
 import { TooltipProps as ChakraTooltip } from "@chakra-ui/react";
+/** Closed prop list, no ...rest — shouldWrapChildren/portalProps aren't exposed; hasArrow defaults true, closeOnClick false (both flipped from Chakra). */
 export type ToolTipProps = Pick<ChakraTooltip, "placement" | "label" | "hasArrow" | "fontSize" | "isDisabled" | "isOpen" | "defaultIsOpen" | "openDelay" | "closeDelay" | "arrowSize" | "closeOnClick" | "size" | "width" | "height" | "arrowPadding" | "arrowShadowColor" | "direction" | "gutter" | "onClose" | "modifiers" | "closeOnPointerDown"> & {
+    /** bg/color default to the theme's inverted sidebar surface (near-black both modes) — override only if you own the contrast. */
     bg?: string;
     color?: string;
     children: React.ReactNode;

package/dist/Components/Trail/EditableCell.d.ts

@@ -5,7 +5,9 @@ interface EditableCellProps {
     column: Column;
     isEditable: boolean;
     handleCellClick: (rowId: number, columnId: number) => void;
+    /** Also fires on outside-click with the cell's current unchanged value — a commit signal, not only a real edit. */
     handleCellChange: (rowId: number, columnLabel: string, value: string) => void;
 }
+/** Inline editable cell driven entirely by parent-owned row state — no internal draft state of its own. */
 export declare const EditableCell: React.FC<EditableCellProps>;
 export {};

package/dist/Components/Trail/EditableCell.js

@@ -7,6 +7,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+/** Inline editable cell driven entirely by parent-owned row state — no internal draft state of its own. */
 const EditableCell = ({ row, column, isEditable, handleCellClick, handleCellChange, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const cellRef = (0, react_1.useRef)(null);

package/dist/Components/Trail/SelectAllCheckbox.d.ts

@@ -4,5 +4,6 @@ interface SelectAllCheckboxProps {
     isIndeterminate: boolean;
     handleSelectAll: () => void;
 }
+/** Purely presentational — isAllSelected/isIndeterminate must be computed and owned entirely by the parent. */
 export declare const SelectAllCheckbox: React.FC<SelectAllCheckboxProps>;
 export {};

package/dist/Components/Trail/SelectAllCheckbox.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectAllCheckbox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+/** Purely presentational — isAllSelected/isIndeterminate must be computed and owned entirely by the parent. */
 const SelectAllCheckbox = ({ isAllSelected, isIndeterminate, handleSelectAll, }) => {
     return ((0, jsx_runtime_1.jsx)(react_1.Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: handleSelectAll }));
 };

package/dist/Components/Trail/TrailWorks.d.ts

@@ -1,2 +1,3 @@
+/** Hardcoded 2-row demo table with no props at all — not a reusable grid; use Table for a real editable/selectable list. */
 declare const TrailWorks: () => import("react/jsx-runtime").JSX.Element;
 export default TrailWorks;

package/dist/Components/Trail/TrailWorks.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Hardcoded 2-row demo table with no props at all — not a reusable grid; use Table for a real editable/selectable list. */
 const TrailWorks = () => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const cellBorder = colors.boxborder[200];

package/dist/Components/UpgradeButton/UpgradeButtonProps.d.ts

@@ -1,10 +1,12 @@
 import { ElementType } from "react";
+/** Size preset for UpgradeButton; "sm" is a dense variant of the same badge, not simply a smaller one. */
 export type UpgradeButtonSize = "sm" | "md" | "lg";
 /**
  * Theme-aware color variants. Each resolves to a gradient built from the
  * active theme's tokens, so the button blends with whichever theme is active.
  */
 export type UpgradeButtonVariant = "brand" | "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+/** Prominent animated shimmer CTA button for "upgrade now" actions — not the compact plan-state pill; see PlanPill/PlanBadge for that. Reused as LimitReachedModal's own CTA. */
 export interface UpgradeButtonProps {
     /** Primary label (shown on md+ screens). */
     label: string;
@@ -14,7 +16,7 @@ export interface UpgradeButtonProps {
     subtitle?: string;
     /** Leading icon. Defaults to lucide `Sparkles`. Pass null to hide. */
     icon?: ElementType | null;
-    /** Icon color. Defaults to a gold tone. */
+    /** Defaults to gold only when gold clears AA contrast against the gradient; otherwise silently falls back to the label's ink color. */
     iconColor?: string;
     /**
      * Theme-aware color variant. Defaults to `brand` (the active theme's
@@ -29,11 +31,13 @@ export interface UpgradeButtonProps {
         from: string;
         to: string;
     };
+    /** Default "md". */
     size?: UpgradeButtonSize;
     /** Animated light sweep on hover. Default true. */
     shimmer?: boolean;
-    /** Show a spinner and block interaction. */
+    /** Blocks onClick and shows a spinner, but does NOT set the native disabled attribute or dim opacity — pair with isDisabled for that. */
     isLoading?: boolean;
+    /** Unlike isLoading, this also dims opacity and sets the native disabled attribute. */
     isDisabled?: boolean;
     /** Truncate the label beyond this width. */
     maxLabelWidth?: string;

package/dist/Components/UserDetails/UserDetailsProps.d.ts

@@ -1,8 +1,10 @@
 import { ElementType, ReactNode } from "react";
+/** One assignable role offered in the Add User and Change Role selects. */
 export type RoleOption = {
     id: number;
     label: string;
 };
+/** One row in the left-panel user list — see SelectedUserDetail for the richer shape used once selected. */
 export type UserListItem = {
     id: number;
     firstName: string;
@@ -11,16 +13,20 @@ export type UserListItem = {
     role: string;
     profile?: string;
     isActive: boolean;
+    /** isPending/isCurrent/isSuperAdmin here are decorative — only SelectedUserDetail's copies (after selection) drive any badge or action-bar behavior. */
     isPending?: boolean;
     isCurrent?: boolean;
     isSuperAdmin?: boolean;
 };
+/** One label/value row in the "Personal Information" panel; icon falls back to a generic user icon when omitted. */
 export type UserDetailRow = {
     label: string;
     value: string;
     icon?: ElementType;
 };
+/** Right-panel shape for the selected user — distinct field names from UserListItem (name, userId); not derived from it. */
 export type SelectedUserDetail = {
+    /** When null, Change Role and Resend Invitation silently no-op on click (no disabled state) — unlike Deactivate, which greys out. */
     userId?: number;
     name: string;
     role: string;
@@ -29,15 +35,18 @@ export type SelectedUserDetail = {
     isActive: boolean;
     isPending?: boolean;
     isCurrent?: boolean;
+    /** True hides the entire action bar (reinvite/change-role/deactivate), not just the deactivate button. */
     isSuperAdmin?: boolean;
     details: UserDetailRow[];
 };
+/** Form values submitted by the Add User modal; role stays null until the user picks one. */
 export type AddUserFormValues = {
     firstName: string;
     lastName: string;
     email: string;
     role: RoleOption | null;
 };
+/** Payload from the Change Role modal — just the ids, unlike AddUserFormValues which carries the full RoleOption. */
 export type ChangeRoleSubmitPayload = {
     userId: number;
     roleId: number;
@@ -83,6 +92,7 @@ export type UserDetailsLabels = {
     deactivateConfirmQuestion?: string;
     deactivateConfirmDescription?: string;
 };
+/** Two-pane user directory + detail panel with bundled Add/Change-Role/Deactivate modals; not a role editor — pair with RolesPermission for managing roles themselves. */
 export interface UserDetailsProps {
     /** Full list of users shown in the left panel. */
     users: UserListItem[];
@@ -97,6 +107,7 @@ export interface UserDetailsProps {
     /** Loading flags driven by the host app's async calls. */
     isUsersLoading?: boolean;
     isInviteLoading?: boolean;
+    /** Unlike isAddUserLoading/isChangeRoleLoading, the confirm modal closes immediately on click — this flag can't keep it open to show a spinner. */
     isDeactivateLoading?: boolean;
     isAddUserLoading?: boolean;
     isChangeRoleLoading?: boolean;
@@ -109,6 +120,7 @@ export interface UserDetailsProps {
     onAddUserSubmit?: (values: AddUserFormValues) => void | Promise<void>;
     onChangeRoleSubmit?: (payload: ChangeRoleSubmitPayload) => void | Promise<void>;
     onReinvite?: (userId: number) => void;
+    /** Not awaited — the confirm modal closes right after this fires, so a slow or failing deactivation gets no in-modal feedback. */
     onDeactivate?: (userId: number) => void;
     /** "Add New Role" actions inside the SearchSelect of each modal. */
     onAddRoleClick?: () => void;
@@ -116,9 +128,10 @@ export interface UserDetailsProps {
     addUserUpgradeNotice?: ReactNode;
     /** Translated/override strings. */
     labels?: UserDetailsLabels;
-    /** Minimum height of the outer container. Defaults to "90vh". */
+    /** Also feeds a calc() for the sidebar's max-height — a non-CSS-length value (e.g. "auto") silently breaks that calc. Defaults to "90vh". */
     minHeight?: string;
 }
+/** Self-contained invite form (first/last/email/role) with its own validation — not a generic modal; it always renders these exact fields. */
 export interface AddUserModalProps {
     isOpen: boolean;
     onClose: () => void;
@@ -129,11 +142,13 @@ export interface AddUserModalProps {
     upgradeNotice?: ReactNode;
     labels: Required<Pick<UserDetailsLabels, "addNewUser" | "firstName" | "lastName" | "email" | "role" | "firstNamePlaceholder" | "lastNamePlaceholder" | "emailPlaceholder" | "addNewRole" | "cancel" | "save" | "firstNameRequired" | "lastNameRequired" | "emailRequired" | "emailInvalid" | "roleRequired">>;
 }
+/** Reassigns one user's role only — Save stays disabled until a genuinely different role is picked (see currentRole below). */
 export interface ChangeRoleModalProps {
     isOpen: boolean;
     onClose: () => void;
     userId: number | null;
     email?: string;
+    /** Matched to roleOptions by case-insensitive label text; no match silently pre-selects nothing and leaves Save disabled. */
     currentRole?: string;
     roleOptions: RoleOption[];
     isLoading?: boolean;
@@ -141,6 +156,7 @@ export interface ChangeRoleModalProps {
     onAddRoleClick?: () => void;
     labels: Required<Pick<UserDetailsLabels, "changeRoleTitle" | "email" | "role" | "addNewRole" | "cancel" | "save" | "roleRequired">>;
 }
+/** Confirm dialog for deactivating one user — closes immediately on confirm (see isDeactivateLoading); not a delete, the user can be reactivated later. */
 export interface DeactivateConfirmModalProps {
     isOpen: boolean;
     onClose: () => void;

package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.d.ts

@@ -2,10 +2,11 @@ import type { ReactNode } from "react";
 /**
  * Window state for a WorkspaceWindow.
  * - "medium": default centered dialog (Jira-style)
- * - "maximized": near-full-screen
+ * - "maximized": renders IDENTICALLY to "medium" — no separate maximize size exists (see onMaximize)
  * - "minimized": collapsed to a tray pill (rendered by WorkspaceTray, not the window)
  */
 export type WorkspaceWindowState = "medium" | "maximized" | "minimized";
+/** Props for one WorkspaceWindow instance; minimized windows render separately via WorkspaceTrayProps below. */
 export interface WorkspaceWindowProps {
     /** Title shown in the window's control bar. */
     title: ReactNode;
@@ -14,6 +15,7 @@ export interface WorkspaceWindowProps {
     /** Window body. */
     children: ReactNode;
     onMinimize?: () => void;
+    /** Kept for back-compat only — no maximize/restore control is rendered; this is never called. */
     onMedium?: () => void;
     onMaximize?: () => void;
     onClose?: () => void;
@@ -31,10 +33,12 @@ export interface WorkspaceWindowProps {
     /** data-testid for the window container. */
     testId?: string;
 }
+/** One minimized window in the tray; id is passed back to onRestore/onClose so callers can target the right window. */
 export interface WorkspaceTrayItem {
     id: string;
     title: ReactNode;
 }
+/** Props for the bottom-right cluster of minimized-window pills; renders nothing when items is empty. */
 export interface WorkspaceTrayProps {
     /** Minimized items rendered as restore pills along the bottom. */
     items: WorkspaceTrayItem[];
@@ -53,6 +57,7 @@ export interface WorkspaceTrayProps {
         close: () => void;
     }) => ReactNode;
 }
+/** Props for WorkspaceTrayPreview — despite the name, works for any hover trigger, not just tray pills. */
 export interface WorkspaceTrayPreviewProps {
     /**
      * The trigger markup (typically a tray pill). The preview + trigger share one

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

@@ -6,6 +6,7 @@ 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";
+/** 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();
     const isDark = isDarkCanvas(colors.backgroundColor.main);

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

@@ -1,6 +1,7 @@
 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";
+/** 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));

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

@@ -4,6 +4,7 @@ import ReactApexChart from "react-apexcharts";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseAxisLabels, baseChart, baseGrid, baseLegend, baseTooltip } from "../chartBase.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 seriesColors = useMemo(() => colors !== null && colors !== void 0 ? colors : getDefaultSeriesColors(palette), [colors, palette]);

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

@@ -4,6 +4,7 @@ import ReactApexChart from "react-apexcharts";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { chartInk, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseChart, baseLegend } from "../chartBase.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);

package/dist/esm/Components/Checkbox/Checkbox.js

@@ -4,6 +4,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import ErrorMessage from "../Common/ErrorMessage.js";
 import HelperText from "../Common/HelperText.js";
 import ToolTip from "../ToolTip/ToolTip.js";
+/** Renders Chakra's native role="checkbox"; label is optional and falls back to aria-label — pass isInvalid (not just error) for the invalid state to register. */
 export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size = "md", value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, ...aria }) {
     const theme = useCustomTheme();
     const controlSize = size === "sm" ? "1rem"

package/dist/esm/Components/Common/ErrorComponent.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HStack, Text } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+/** Inline error row for Input/PinInputs; `error` is the message text itself, not ErrorMessage's boolean `error` + `errorMessage` pair, and there's no `id` for aria-describedby. */
 const ErrorComponent = ({ error, errorClassName, }) => {
     const { colors } = useCustomTheme();
     const errorText = colors.semanticText.error;

package/dist/esm/Components/Common/FormLabel.js

@@ -3,6 +3,7 @@ import { Box, Icon } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { InfoIcon } from "lucide-react";
 import ToolTip from "../ToolTip/ToolTip.js";
+/** Renders a real `<label htmlFor>` only when `id` is given, else a `<span>` — not a substitute for `Label` (Common/Label.tsx), which always renders a `FormLabel`. */
 export const TextLabel = ({ label, id, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
     const theme = useCustomTheme();
     const clampStyles = clampLines ? {

package/dist/esm/Components/Common/FormattedDescription.js

@@ -39,6 +39,7 @@ const InlineText = ({ text }) => {
     }
     return _jsx(_Fragment, { children: nodes });
 };
+/** Not a full Markdown renderer — lists, links and code blocks render as literal text; returns null (no wrapper) when `content` is falsy. */
 const FormattedDescription = ({ content }) => {
     const { colors } = useCustomTheme();
     if (!content)

package/dist/esm/Components/Common/HelperText.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormHelperText, Text, useFormControlContext } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+/** `id` is optional — pass one to control aria-describedby yourself; omitted, Chakra auto-generates one only inside a FormControl ancestor. */
+/** Renders `helperText` unconditionally; each field hides this while showing an error (see ErrorMessage) — HelperText itself has no `error` prop. */
 const HelperText = ({ helperText, id }) => {
     const theme = useCustomTheme();
     const field = useFormControlContext();

package/dist/esm/Components/Common/Label.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormLabel, Text } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+/** Always renders a real Chakra `<label>` (FormLabel), even without `htmlFor` — unlike `TextLabel` (FormLabel.tsx), which falls back to a plain `<span>`. */
 const Label = ({ label, htmlFor, labelClassName, isRequired, }) => {
     const { colors } = useCustomTheme();
     return (_jsxs(FormLabel, { htmlFor: htmlFor, mb: 1, fontSize: "sm", fontWeight: "medium", className: labelClassName, color: colors.header[500], children: [label, isRequired && (_jsx(Text, { as: "span", color: colors.semanticText.error, ml: 1, children: "*" }))] }));

package/dist/esm/Components/ContactForm/ContactForm.js

@@ -6,6 +6,7 @@ import { CircleCheck, CircleX } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import InputTextArea from "../InputTextArea/InputTextArea.js";
 import Button from "../Button/Button.js";
+/** Fully self-contained enquiry form — validates, POSTs to apiKey, and renders its own success/error alert; there is no onSubmit/onSuccess callback. */
 const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false, organizationId, customerId, buttonColorScheme = "primary", buttonSx, }) => {
     const { colors } = useCustomTheme();
     const [formData, setFormData] = useState({

package/dist/esm/Components/CopyButton/CopyButton.js

@@ -7,6 +7,7 @@ import { accentTextOnCanvas, AA_NORMAL_TEXT } from "../../Theme/tokens/builders/
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import ToolTip from "../ToolTip/ToolTip.js";
+/** Copies `value` to the clipboard in 3 layouts (icon/button/menu-item) — not a full share/export action. */
 const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, }) => {
     const theme = useCustomTheme();
     const [copied, setCopied] = useState(false);

package/dist/esm/Components/DatePicker/CalendarPanel.js

@@ -6,6 +6,7 @@ import Button from "../Button/Button.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import { DAY_CLASS, dayAccessibleName, dayStateClassName, resolveDayStateVisual, } from "./dayStates.js";
+/** Internal month grid shared by Single/RangeDatePicker; not published from index.ts, so only reachable via a deep import. */
 export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, dayStates, renderDayContent, }) => {
     const theme = useCustomTheme();
     const rangeBg = theme.colors.primary.opacity[16];

package/dist/esm/Components/DatePicker/DatePicker.js

@@ -18,6 +18,7 @@ const inferPickerTypeFromFormat = (formatStr) => {
         return "time";
     return "date";
 };
+/** Legacy pre-split implementation, still used internally by Table's filter pane — new code should use ThemeDatePicker (exported as DatePicker). */
 export default function CustomDatePicker(props) {
     var _a, _b;
     const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText = "Select a date", dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, isRange, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", } = props;

package/dist/esm/Components/DatePicker/RangeDatePicker.js

@@ -18,6 +18,7 @@ const setTimeFrom = (base, time) => {
     const b = base ? new Date(base) : new Date();
     return new Date(b.getFullYear(), b.getMonth(), b.getDate(), time.getHours(), time.getMinutes(), time.getSeconds(), 0);
 };
+/** Two-endpoint range field; `onChange` fires only via Apply/Escape, never on a bare day click or on outside-click close. */
 export const RangeDatePicker = (props) => {
     var _a, _b, _c, _d;
     const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "dd/MM/yyyy", minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", dayStates, renderDayContent, } = props;

package/dist/esm/Components/DatePicker/SingleDatePicker.js

@@ -219,6 +219,7 @@ const normalizeTimeBuffer = (tokenChar, rawBuffer, segmentLength, is12Hour) => {
     }
     return { value: buf, completed: buf.length >= segmentLength };
 };
+/** Date/datetime field with typed-mask input + calendar popover. Import via `DatePicker` (ThemeDatePicker) — direct import bypasses its isRange/pickerType routing. */
 export const SingleDatePicker = (props) => {
     var _a, _b;
     const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", } = props;

package/dist/esm/Components/DatePicker/ThemeDatePicker.js

@@ -12,6 +12,7 @@ const inferPickerTypeFromFormat = (formatStr) => {
         return "time";
     return "date";
 };
+/** Public DatePicker entry — routes to Range/TimeOnly/Single by `isRange`/`pickerType`; `pickerType` is silently ignored whenever `isRange` is true. */
 const ThemeDatePicker = (props) => {
     var _a, _b;
     if (props.isRange) {

package/dist/esm/Components/DatePicker/TimeOnlyPicker.js

@@ -10,9 +10,12 @@ import { TimePickerInput } from "./TimePickerInput.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
+/** Pure time field ThemeDatePicker renders for pickerType="time". Its label never receives `id`, so it is never associated with the field. */
 export const TimeOnlyPicker = (props) => {
     var _a, _b;
-    const { id, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "HH:mm", disabled, width = "100%", disableToday = false, size = "md", } = props;
+    const { id, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "HH:mm", disabled, width = "100%", disableToday = false, size = "md",
+    // NOTE: name/minDate/maxDate/disableFutureDates/disablePastDates/autoComplete exist on the type but are silently dropped here.
+     } = props;
     const theme = useCustomTheme();
     const { isOpen, onOpen, onClose } = useDisclosure();
     const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);

package/dist/esm/Components/DatePicker/TimePicker.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Select, HStack } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+/** Hour/Minute/AM-PM select trio, no seconds control — used by datetime pickers and TimeOnlyPicker; the format only toggles 12h vs 24h. */
 const TimePicker = ({ date, onChange, dateFormat, disabled = false }) => {
     const theme = useCustomTheme();
     const is12HourFormat = /(hh|h).*a/i.test(dateFormat);

package/dist/esm/Components/DatePicker/TimePickerInput.js

@@ -88,6 +88,7 @@ const caretFromDigitIndex = (digitIndex, digitsLen) => {
     return digitIndex + 1;
 };
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
+/** Masked HH:mm digit input, no seconds; has no `name`/`id` prop, so it can't be targeted by native form APIs. */
 export const TimePickerInput = ({ value, onChange, dateFormat, disabled = false, placeholder, onFocus, onBlur, error, size = "md", }) => {
     const theme = useCustomTheme();
     const sizeKey = typeof size === "string" ? size : "md";

package/dist/esm/Components/Divider/Divider.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Divider as ChakraDivider } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+/** Always vertical, fixed size/color, zero props — exported name keeps a "VeritcalDivider" typo; not interchangeable with Primitives' Divider. */
 const VeritcalDivider = () => {
     const { colors } = useCustomTheme();
     return (_jsx(ChakraDivider, { orientation: "vertical", height: 5, borderWidth: 1.2, borderColor: colors.boxborder[500] }));

package/dist/esm/Components/Dropdown/DropDown.js

@@ -17,6 +17,7 @@ const SIZE_MAP = {
     lg: { btn: "lg", fontSize: "0.9375rem", py: 2.5, px: 3.5, img: "1.25rem", chevron: 18, minW: "12rem", gap: 2.5 },
     xl: { btn: "lg", fontSize: "1.0625rem", py: 3, px: 4, img: "1.4rem", chevron: 20, minW: "13rem", gap: 3 },
 };
+/** Menu-button that triggers labelled actions — nothing is "selected"/persisted; for picking a value from a list, use Select/SelectV2. */
 const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleOptionSelect, dropdownType = "button", text, DropdownIcon, isVisibleIconShow = true, buttonProps, headStyle, ListStyle, ItemStyle, LabelStyle, ImageStyle, size, optionsSize, divider = false, ariaLabel, }, ref) => {
     var _a, _b;
     const theme = useCustomTheme();

package/dist/esm/Components/Editor/Editor.js

@@ -11,6 +11,7 @@ const JoditEditor = React.lazy(async () => {
     const mod = (await import("jodit-react"));
     return { default: ((_a = mod.default) !== null && _a !== void 0 ? _a : mod) };
 });
+/** Lazy-loaded Jodit wrapper — a `config.theme` or `config.popupRoot` you pass overrides this library's own dark-mode/popup fix; omit both keys. */
 const Editor = React.memo(function Editor({ value, key, config, editorRef, className, onChange, onBlur, }) {
     const theme = useCustomTheme();
     // Jodit portals dialogs/toolbar-dropdown popups (search & replace, image/link properties,

package/dist/esm/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -2,13 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HStack, PinInput, PinInputField, Box, Text, Button, Flex, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { MailCheck } from "lucide-react";
+/** Full verification card (icon, title, description, resend link, digits-only PinInput) — for a bare OTP field in your own layout, use PinInput or PinInputs instead. */
 export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder = "", pins = 5, description, title, isDisabled = false, isInvalid = false, styles, }) {
     const theme = useCustomTheme();
-    return (_jsxs(Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", borderColor: theme.colors.gray[200], borderRadius: "lg", children: [_jsx(Box, { mb: 4, children: _jsx(MailCheck, { size: 80, color: theme.colors.accentText }) }), _jsx(Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), _jsxs(Text, { fontSize: "md", textAlign: "center", color: theme.colors.gray[600], mb: 6, children: [description, _jsx("br", {}), "your new Pixel Account"] }), _jsx(HStack, { spacing: 3, mb: 6, children: _jsx(PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => (_jsx(PinInputField, { borderRadius: "md", border: "0.063rem solid", 
-                        // [800], not [300]: WCAG 1.4.11 needs >=3.0 for a control boundary against any
-                        // named surface up to `muted` (lightest); [300] fails there, [800] clears all
-                        // with margin.
-                        borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: {
+    return (_jsxs(Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", borderColor: theme.colors.gray[200], borderRadius: "lg", children: [_jsx(Box, { mb: 4, children: _jsx(MailCheck, { size: 80, color: theme.colors.accentText }) }), _jsx(Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), _jsxs(Text, { fontSize: "md", textAlign: "center", color: theme.colors.gray[600], mb: 6, children: [description, _jsx("br", {}), "your new Pixel Account"] }), _jsx(HStack, { spacing: 3, mb: 6, children: _jsx(PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => (_jsx(PinInputField, { borderRadius: "md", border: "0.063rem solid", borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: {
                             borderColor: theme.colors.primary[500],
                             boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
                         } }, index))) }) }), _jsx(Flex, { justify: "center", children: _jsxs(Text, { fontSize: "sm", color: theme.colors.gray[600], children: ["Didn\u2019t receive the code?", " ", _jsx(Button, { variant: "link", color: theme.colors.accentText, fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));