pixelize-design-library 2.4.2-beta.4 → 2.4.2-beta.40

package/dist/Components/Common/Label.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");
+/** 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 } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsxs)(react_1.FormLabel, { htmlFor: htmlFor, mb: 1, fontSize: "sm", fontWeight: "medium", className: labelClassName, color: colors.header[500], children: [label, isRequired && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", color: colors.semanticText.error, ml: 1, children: "*" }))] }));

package/dist/Components/Common/fieldStyles.js

@@ -20,7 +20,7 @@ const getFieldStateStyles = (theme, { error = false, focused = false } = {}) =>
     const ringPrimary = theme.colors.boxShadow.primary;
     const ringError = theme.colors.boxShadow.error;
     return {
-        bg: theme.colors.gray[50],
+        bg: theme.colors.background[50],
         borderRadius: exports.FIELD_RADIUS,
         border: `${exports.FIELD_BORDER_WIDTH} solid`,
         borderColor: error ? errorColor : focused ? primary : idleBorder,

package/dist/Components/ContactForm/ContactForm.d.ts

@@ -1,3 +1,4 @@
 import { ContactFormProps } from "./ContactFormProps";
+/** Fully self-contained enquiry form — validates, POSTs to apiKey, and renders its own success/error alert; there is no onSubmit/onSuccess callback. */
 declare const ContactForm: ({ apiKey, customFields, getCustomValues, isDisabled, organizationId, customerId, buttonColorScheme, buttonSx, }: ContactFormProps) => import("react/jsx-runtime").JSX.Element;
 export default ContactForm;

package/dist/Components/ContactForm/ContactForm.js

@@ -11,6 +11,7 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const InputTextArea_1 = __importDefault(require("../InputTextArea/InputTextArea"));
 const Button_1 = __importDefault(require("../Button/Button"));
+/** 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 } = (0, useCustomTheme_1.useCustomTheme)();
     const [formData, setFormData] = (0, react_1.useState)({

package/dist/Components/ContactForm/ContactFormProps.d.ts

@@ -1,11 +1,15 @@
 import { SystemStyleObject } from "@chakra-ui/react";
 import { ReactNode } from "react";
+/** apiKey is optional — omitting it fails submission silently with an inline "API key missing" alert, not a thrown error. */
 export interface ContactFormProps {
+    /** The POST endpoint URL the form fetches to — not an auth token; a real API key/secret string fails silently as an invalid URL. */
     apiKey?: string;
     customerId: string | number;
     organizationId: string | number;
     isDisabled?: boolean;
+    /** Rendered markup only — its values are never read automatically; pair with getCustomValues or they're dropped from the submitted payload. */
     customFields?: ReactNode;
+    /** Return value spreads into the payload after the built-in fields — a key like "email" silently overwrites the typed value; customerId/organizationId can't be overridden this way. */
     getCustomValues?: () => Record<string, unknown>;
     buttonColorScheme?: "primary" | "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "secondary" | "tertiary" | undefined;
     buttonSx?: SystemStyleObject;

package/dist/Components/CopyButton/CopyButton.d.ts

@@ -14,9 +14,11 @@ export interface CopyButtonProps {
     feedbackDuration?: number;
     /** Icon px size. */
     iconSize?: number;
+    /** Only affects the default "icon" variant's IconButton — "button" and "menu-item" ignore it. */
     size?: "xs" | "sm" | "md";
-    /** Called after a successful copy. */
+    /** Fires only if the clipboard write resolves — a denied/insecure-context failure is swallowed silently. */
     onCopy?: (value: string) => void;
 }
+/** Copies `value` to the clipboard in 3 layouts (icon/button/menu-item) — not a full share/export action. */
 declare const CopyButton: React.FC<CopyButtonProps>;
 export default CopyButton;

package/dist/Components/CopyButton/CopyButton.js

@@ -9,7 +9,10 @@ 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");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+/** 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 = (0, useCustomTheme_1.useCustomTheme)();
     const [copied, setCopied] = (0, react_1.useState)(false);
@@ -33,14 +36,17 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
     // nearest rung that clears AA against the canvas this button actually sits on.
     const accent = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.backgroundColor.main);
     const success = theme.colors.semanticText.success;
+    const rowBackgrounds = (0, rowStates_1.listRowBackgrounds)(theme.colors);
     if (variant === "menu-item") {
-        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: "background 0.15s ease", _hover: { bg: theme.colors.gray[100] }, onClick: handleCopy, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize, color: success }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize, color: accent }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "14px", fontWeight: 500, color: copied ? success : accent, children: copied ? copiedLabel : label })] }));
+        const hoverAccent = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, rowBackgrounds.active);
+        const hoverSuccess = (0, outlineRung_1.liftToContrast)(theme.colors.semantic.success[500], rowBackgrounds.active, accentText_1.AA_NORMAL_TEXT);
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: "background 0.15s ease", _hover: { bg: rowBackgrounds.active }, onClick: handleCopy, children: [copied ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize, color: hoverSuccess })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize, color: hoverAccent })), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "14px", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }));
     }
     if (variant === "button") {
         return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid", 
             // [800], not [500]: a real control boundary needs >=3:1 on every surface up to `muted`.
-            borderColor: copied ? success : theme.colors.boxborder[500], bg: "transparent", color: copied ? success : theme.colors.gray[700], fontSize: "14px", fontWeight: 500, transition: "all 0.15s ease", _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: copied ? copiedLabel : label })] }));
+            borderColor: copied ? success : theme.colors.boxborder[500], bg: "transparent", color: copied ? success : theme.colors.text[700], fontSize: "14px", fontWeight: 500, transition: "all 0.15s ease", _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: copied ? copiedLabel : label })] }));
     }
-    return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: copied ? copiedLabel : tooltip, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.gray[500], _hover: { color: accent, bg: theme.colors.primary[50] }, icon: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }) }) }));
+    return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: copied ? copiedLabel : tooltip, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.textMuted, _hover: { color: accent, bg: rowBackgrounds.active }, icon: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }) }) }));
 };
 exports.default = CopyButton;

package/dist/Components/CustomModulesTable/CustomModulesTableProps.d.ts

@@ -1,8 +1,11 @@
+/** One row in the modules table; `ownerLabel` is display-only and has no counterpart in UpdateModulePayload. */
 export type ModuleItem = {
+    /** snake_case, unlike moduleName/ownerLabel here and unlike UpdateModulePayload.moduleId — casing isn't symmetric. */
     module_id: number;
     moduleName: string;
     ownerLabel?: string;
 };
+/** Shape passed to onUpdateModule — `moduleId` identifies the item being edited, `moduleName` is the new value from the modal. */
 export type UpdateModulePayload = {
     moduleId: number;
     moduleName: string;
@@ -27,15 +30,19 @@ export type CustomModulesTableLabels = {
     confirmDeletion?: string;
     deleteConfirmPrefix?: string;
 };
+/** Fixed 2-column module list (name, owner) built on raw Chakra table parts, not the library Table — closed props, no ref/...rest reach the root Box. */
 export interface CustomModulesTableProps {
     modules: ModuleItem[];
     isLoading?: boolean;
     isUpdating?: boolean;
     isDeleting?: boolean;
+    /** Edit modal closes once this promise resolves; a rejection is unhandled (never caught) and isUpdating only toggles the button spinner, not the close. */
     onUpdateModule?: (payload: UpdateModulePayload) => void | Promise<void>;
+    /** Delete modal closes once this promise resolves; a rejection is unhandled (never caught) and isDeleting only toggles the button spinner, not the close. */
     onDeleteModule?: (moduleId: number) => void | Promise<void>;
     labels?: CustomModulesTableLabels;
 }
+/** Internal edit-name dialog rendered by CustomModulesTable; `labels` must already be fully resolved, not per-key optional. */
 export interface EditModuleModalProps {
     isOpen: boolean;
     onClose: () => void;
@@ -44,6 +51,7 @@ export interface EditModuleModalProps {
     onSubmit: (name: string) => void | Promise<void>;
     labels: Required<Pick<CustomModulesTableLabels, "editModuleTitle" | "moduleNamePlaceholder" | "cancel" | "update">>;
 }
+/** Internal delete-confirmation dialog rendered by CustomModulesTable; `moduleName` is optional since the target can be cleared mid-close. */
 export interface DeleteModuleModalProps {
     isOpen: boolean;
     onClose: () => void;

package/dist/Components/DatePicker/CalendarPanel.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { type DayStates, type RenderDayContent } from "./dayStates";
 export type CalendarPanelProps = {
     currentMonth: Date;
     setCurrentMonth: (updater: (prev: Date) => Date) => void;
@@ -19,6 +20,11 @@ export type CalendarPanelProps = {
     hoveredDate?: Date | null;
     onDayHover?: (d: Date | null) => void;
     renderWeekdays?: React.ReactNode;
+    /** Marks individual days (weekly off, holiday, …). See `dayStates.ts`. Omit for the plain grid. */
+    dayStates?: DayStates;
+    /** Custom content inside a day cell, replacing that day's built-in marker dot. */
+    renderDayContent?: RenderDayContent;
 };
+/** Internal month grid shared by Single/RangeDatePicker; not published from index.ts, so only reachable via a deep import. */
 export declare const CalendarPanel: React.FC<CalendarPanelProps>;
 export default CalendarPanel;

package/dist/Components/DatePicker/CalendarPanel.js

@@ -10,8 +10,10 @@ const date_fns_1 = require("date-fns");
 const lucide_react_1 = require("lucide-react");
 const Button_1 = __importDefault(require("../Button/Button"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, }) => {
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const dayStates_1 = require("./dayStates");
+/** Internal month grid shared by Single/RangeDatePicker; not published from index.ts, so only reachable via a deep import. */
+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 = (0, useCustomTheme_1.useCustomTheme)();
     const rangeBg = theme.colors.primary.opacity[16];
     const isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
@@ -51,6 +53,7 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
         },
     };
     const renderDays = () => {
+        var _a;
         const monthStart = (0, date_fns_1.startOfMonth)(currentMonth);
         const monthEnd = (0, date_fns_1.endOfMonth)(currentMonth);
         const startDate = (0, date_fns_1.startOfWeek)(monthStart);
@@ -69,12 +72,17 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
                 const isSelected = !!(!isRange && tempDate && isSameDay(thisDay, tempDate));
                 const isTentativeEnd = isEnd && isTentative;
                 const circleSolid = !!(isSelected || (isRange && isStart) || (isEnd && !isTentative));
+                // Marking is not disabling: only the `disabled` state key blocks selection, and only
+                // because the caller asked for it by name.
+                const states = (_a = dayStates === null || dayStates === void 0 ? void 0 : dayStates(thisDay)) !== null && _a !== void 0 ? _a : [];
+                const stateVisual = states.length ? (0, dayStates_1.resolveDayStateVisual)(states, theme.colors) : null;
                 const disabled = !isInCurrentMonth ||
                     !!(minDate && isBefore(thisDay, minDate)) ||
                     !!(maxDate && isAfter(thisDay, maxDate)) ||
                     !!(disablePastDates && isBefore(thisDay, today) && !isSameDay(thisDay, today)) ||
                     !!(disableFutureDates && isAfter(thisDay, today) && !isSameDay(thisDay, today)) ||
-                    !!(disableToday && isToday);
+                    !!(disableToday && isToday) ||
+                    !!(stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.blocksSelection);
                 // Connected range band painted on the cell background; start/end use a
                 // half gradient so the band meets the solid day circle cleanly.
                 let cellBg;
@@ -88,19 +96,21 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
                     else if (isEnd)
                         cellBg = `linear-gradient(to right, ${rangeBg} 50%, transparent 50%)`;
                 }
+                // Selection feedback outranks a state tint — the band is what tells the user what they picked.
+                if (!cellBg && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.cellBg))
+                    cellBg = stateVisual.cellBg;
                 // Solid fill (selected/range-endpoint) needs the ink checked against that
                 // specific fill — `primary[500]` doesn't reliably clear AA for white text on
                 // every brand/mode (same gap the solid Button variant already accounts for).
-                const solidFill = theme.colors.primary[500];
-                const solidHoverFill = theme.colors.primary[600];
+                const primarySolid = (0, filledSurface_1.resolveFilledSurface)(theme.colors.primary, theme.colors);
+                const solidFill = primarySolid.fill;
+                const solidHoverFill = primarySolid.hoverFill;
                 const circleColor = circleSolid
-                    ? (0, accentText_1.onFilled)(solidFill, theme.colors.white, theme.colors.black)
+                    ? primarySolid.color
                     : isInCurrentMonth
                         ? theme.colors.text[700]
                         : theme.colors.gray[400];
-                const circleHoverColor = circleSolid
-                    ? (0, accentText_1.onFilled)(solidHoverFill, theme.colors.white, theme.colors.black)
-                    : circleColor;
+                const circleHoverColor = circleSolid ? primarySolid.hoverColor : circleColor;
                 const circleBorder = circleSolid
                     ? "1px solid transparent"
                     : isTentativeEnd
@@ -108,21 +118,33 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
                         : isToday
                             ? `1px solid ${theme.colors.primary[300]}`
                             : "1px solid transparent";
-                days.push((0, jsx_runtime_1.jsx)(react_1.Box, { h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", disabled: disabled, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.8125rem", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: circleColor, border: circleBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
+                // A filled circle owns its own ink (checked against that fill by `onFilled`), so a state
+                // never repaints a selected day — it would undo that contrast guarantee.
+                const dayColor = !circleSolid && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.color) ? stateVisual.color : circleColor;
+                const dayBorder = !circleSolid && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.border) ? stateVisual.border : circleBorder;
+                const customContent = renderDayContent ? renderDayContent(thisDay, states) : null;
+                const markerColor = customContent == null && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.markerColor) ? stateVisual.markerColor : null;
+                const hasDayOverlay = customContent != null || markerColor != null;
+                const dayLabel = dayStates
+                    ? (0, dayStates_1.dayAccessibleName)((0, date_fns_1.format)(thisDay, "d MMMM yyyy"), states)
+                    : (0, date_fns_1.format)(thisDay, "d MMMM yyyy");
+                days.push((0, jsx_runtime_1.jsx)(react_1.Box, { role: "gridcell", h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", disabled: disabled, className: dayStates ? (0, dayStates_1.dayStateClassName)(states) : undefined, "aria-label": dayLabel, "aria-selected": isSelected || isStart || isEnd || undefined, "aria-current": isToday ? "date" : undefined, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), position: hasDayOverlay ? "relative" : undefined, w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.8125rem", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: dayColor, textDecoration: (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.strikethrough) ? "line-through" : undefined, border: dayBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
                             ? {}
                             : circleSolid
                                 ? { bg: solidHoverFill, color: circleHoverColor }
-                                : { bg: rangeBg }, children: (0, date_fns_1.format)(thisDay, "d") }) }, thisDay.toString()));
+                                : { bg: rangeBg }, children: [(0, date_fns_1.format)(thisDay, "d"), hasDayOverlay && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: `${dayStates_1.DAY_CLASS}__content`, position: "absolute", left: 0, right: 0, bottom: "0.0625rem", display: "flex", alignItems: "flex-end", justifyContent: "center", lineHeight: "1", fontSize: "0.5rem", 
+                                // The overlay is decoration: clicks belong to the day button under it.
+                                pointerEvents: "none", children: customContent !== null && customContent !== void 0 ? customContent : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: `${dayStates_1.DAY_CLASS}__marker`, w: "0.25rem", h: "0.25rem", borderRadius: "full", bg: markerColor })) }))] }) }, thisDay.toString()));
                 day = (0, date_fns_1.addDays)(day, 1);
             }
-            rows.push((0, jsx_runtime_1.jsx)(react_1.Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, children: days }, day.toString()));
+            rows.push((0, jsx_runtime_1.jsx)(react_1.Box, { role: "row", display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 0, children: days }, day.toString()));
         }
         return rows;
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, gap: 1, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1)), "aria-label": "Previous month", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeftIcon, { size: 16 }) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 1.5, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "select", value: currentMonth.getMonth(), onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, gap: 1, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1)), "aria-label": "Previous month", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeftIcon, { size: 16 }) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 1.5, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "select", "aria-label": "Month", value: currentMonth.getMonth(), onChange: (e) => {
                                     const newMonth = parseInt(e.target.value, 10);
                                     setCurrentMonth((prev) => new Date(prev.getFullYear(), newMonth, 1));
-                                }, ...selectStyles, children: Array.from({ length: 12 }).map((_, i) => ((0, jsx_runtime_1.jsx)("option", { value: i, children: (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM") }, i))) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "select", value: currentMonth.getFullYear(), onChange: (e) => {
+                                }, ...selectStyles, children: Array.from({ length: 12 }).map((_, i) => ((0, jsx_runtime_1.jsx)("option", { value: i, children: (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM") }, i))) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "select", "aria-label": "Year", value: currentMonth.getFullYear(), onChange: (e) => {
                                     const newYear = parseInt(e.target.value, 10);
                                     setCurrentMonth((prev) => new Date(newYear, prev.getMonth(), 1));
                                 }, ...selectStyles, children: Array.from({ length: 100 }).map((_, i) => {
@@ -133,7 +155,7 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
                                     if (!disableToday) {
                                         onDaySelect(new Date(today));
                                     }
-                                }, "aria-label": "Today", sx: { fontSize: "0.7rem", px: 2, flexShrink: 0 }, isDisabled: disableToday, children: "Today" })), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1)), "aria-label": "Next month", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, { size: 16 }) })] })] }), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : ((0, jsx_runtime_1.jsx)(react_1.Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => ((0, jsx_runtime_1.jsx)(react_1.Box, { textAlign: "center", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: theme.colors.textMuted, py: 1, children: day }, day))) })), (0, jsx_runtime_1.jsx)(react_1.Box, { onMouseLeave: () => onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(null), children: renderDays() })] }));
+                                }, "aria-label": "Today", sx: { fontSize: "0.7rem", px: 2, flexShrink: 0 }, isDisabled: disableToday, children: "Today" })), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1)), "aria-label": "Next month", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, { size: 16 }) })] })] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { role: "grid", "aria-label": "Calendar", children: [renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "row", display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 0, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "columnheader", textAlign: "center", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: theme.colors.textMuted, py: 1, children: day }, day))) })), (0, jsx_runtime_1.jsx)(react_1.Box, { onMouseLeave: () => onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(null), children: renderDays() })] })] }));
 };
 exports.CalendarPanel = CalendarPanel;
 exports.default = exports.CalendarPanel;

package/dist/Components/DatePicker/DatePicker.d.ts

@@ -1,2 +1,3 @@
 import { DatePickerProps } from "./DatePickerProps";
+/** 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: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/DatePicker/DatePicker.js

@@ -24,6 +24,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). */
 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/Components/DatePicker/DatePickerProps.d.ts

@@ -1,4 +1,7 @@
+import type { DayStates, RenderDayContent } from "./dayStates";
+/** Governs which UI renders inside the popover — date grid, time selects, or both; inferred from dateFormat when omitted. */
 export type PickerType = "date" | "time" | "datetime";
+/** Fields shared by both picker variants — combined via `&` with Single/RangeDatePickerProps below, never used on its own. */
 export type BaseDatePickerProps = {
     id?: string;
     name?: string;
@@ -11,6 +14,7 @@ export type BaseDatePickerProps = {
     helperText?: string;
     placeholderText?: string;
     dateFormat?: string;
+    /** Ignored by RangeDatePicker — only `dateFormat`'s time tokens decide whether time inputs render, never this. */
     pickerType?: PickerType;
     minDate?: Date;
     maxDate?: Date;
@@ -23,6 +27,7 @@ export type BaseDatePickerProps = {
     /** Chakra `Input` / `InputGroup` size for the field and chevron (calendar/clock) scale. */
     size?: "xs" | "sm" | "md" | "lg";
 };
+/** Single-date variant — `isRange` must be false or omitted; this is the discriminant the DatePickerProps union switches on. */
 export type SingleDatePickerProps = BaseDatePickerProps & {
     isRange?: false;
     selectedDate?: Date | null;
@@ -30,18 +35,43 @@ export type SingleDatePickerProps = BaseDatePickerProps & {
     value?: Date | null;
     onChange: (date: Date | null) => void;
 };
+/** A date range's two endpoints, each independently nullable — used for both the controlled value and onChange's payload. */
 export type RangeDate = {
     from: Date | null;
     to: Date | null;
 };
+/** Range variant — `isRange` must be true; adds dayStates/renderDayContent day-marking on top of the shared base fields. */
 export type RangeDatePickerProps = BaseDatePickerProps & {
     isRange: true;
     selectedDate?: RangeDate | null;
     /** Alias for `selectedDate` (legacy / form libraries). */
     value?: RangeDate | null;
+    /** Only fires via Apply or Escape once both ends are picked — clicking outside the popover discards the pending range instead of committing it. */
     onChange: (range: RangeDate | null) => void;
+    /**
+     * Marks individual days with zero or more state keys — `["weekly-off"]`, `["Onam", "holiday"]`,
+     * `["excluded"]`. The keys in `DAY_STATE_KEYS` (`weekly-off`, `holiday`, `optional-holiday`,
+     * `excluded`, `disabled`) carry built-in, token-driven styling; any other key is announced to a
+     * screen reader but left unstyled, which is how a day gets named without a second prop.
+     *
+     * Marking is not disabling: a marked day stays selectable unless the caller also returns
+     * `"disabled"`, or blocks the day with `minDate`/`maxDate`/`disablePastDates`/`disableFutureDates`.
+     *
+     * Supplying this also spells each day's accessible name out in full — "16 September 2025, Onam,
+     * holiday" instead of "16". Called once per rendered day (42 per month), so keep it cheap and pure.
+     */
+    dayStates?: DayStates;
+    /**
+     * Custom content rendered inside the day cell, centred under the day number — a dot, a short
+     * label, a tooltip trigger. Receives that day's resolved state keys. Returning a node replaces
+     * the built-in marker dot for that day; the number, the accessible name and hit target are
+     * unchanged (the overlay does not take pointer events).
+     */
+    renderDayContent?: RenderDayContent;
 };
+/** Discriminated union consumed by ThemeDatePicker (exported as DatePicker) — `isRange` selects Single vs Range at the type level. */
 export type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;
+/** Props for the Hour/Minute/AM-PM trio; `dateFormat` only toggles 12h vs 24h display — seconds aren't supported. */
 export type TimePickerProps = {
     date: Date;
     onChange: (date: Date) => void;

package/dist/Components/DatePicker/RangeDatePicker.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { RangeDatePickerProps } from "./DatePickerProps";
+/** Two-endpoint range field; `onChange` fires only via Apply/Escape, never on a bare day click or on outside-click close. */
 export declare const RangeDatePicker: React.FC<RangeDatePickerProps>;
 export default RangeDatePicker;

package/dist/Components/DatePicker/RangeDatePicker.js

@@ -18,19 +18,24 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const textInputIconSize_1 = require("../Input/textInputIconSize");
 const TimePicker_1 = __importDefault(require("./TimePicker"));
 const TimePickerInput_1 = require("./TimePickerInput");
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 // helper to set time on date while preserving date part
 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. */
 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", } = props;
+    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;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const sizeKey = typeof size === "string" ? size : "md";
     const calendarIconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
     const calendarIconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
+    const errorFieldId = id ? `${id}-error` : undefined;
+    const calendarLabel = label !== null && label !== void 0 ? label : "Choose date range";
     const inputRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
     const popoverRef = (0, react_1.useRef)(null);
@@ -97,8 +102,20 @@ const RangeDatePicker = (props) => {
         onClose();
     };
     const handleOpen = () => {
+        requestExclusiveOpen();
         onOpen();
     };
+    const handleInputKeyDown = (e) => {
+        if (e.key === "Escape" && isOpen) {
+            e.preventDefault();
+            onClose();
+            return;
+        }
+        if (!isOpen && (e.key === "ArrowDown" || e.key === "Enter")) {
+            e.preventDefault();
+            handleOpen();
+        }
+    };
     const handleDaySelect = (day) => {
         const updated = new Date(day);
         if (selectingStart) {
@@ -165,7 +182,7 @@ const RangeDatePicker = (props) => {
             return `${(0, date_fns_1.format)(tempRangeStart, dateFormat)} -`;
         return "";
     }, [inputValue, tempRangeStart, tempRangeEnd, dateFormat]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: id, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: finalize, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, id: id, name: name, size: sizeKey, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, autoComplete: autoComplete, onFocus: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: id, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: finalize, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, id: id, name: name, size: sizeKey, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, isInvalid: error, isRequired: isRequired, "aria-describedby": error && errorMessage ? errorFieldId : undefined, autoComplete: autoComplete, onKeyDown: handleInputKeyDown, onFocus: () => {
                                             if (!isOpen)
                                                 handleOpen();
                                         }, onClick: () => {
@@ -178,10 +195,18 @@ const RangeDatePicker = (props) => {
                                                 : `0 0 0 1px ${theme.colors.primary[500]}`,
                                         }, _hover: {
                                             borderColor: error ? theme.colors.semanticText.error : undefined,
-                                        }, cursor: "pointer" }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", style: { cursor: "pointer" }, onClick: () => (isOpen ? onClose() : handleOpen()), children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", border: "1px solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
+                                        }, cursor: "pointer" }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Open calendar", variant: "ghost", size: "sm", minW: "auto", h: "auto", isDisabled: disabled, onClick: (e) => {
+                                                e.stopPropagation();
+                                                if (!isOpen) {
+                                                    handleOpen();
+                                                }
+                                                else {
+                                                    onClose();
+                                                }
+                                            }, icon: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.background[50], role: "dialog", "aria-label": calendarLabel, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
                                             const [from, to] = p.getRange();
                                             applyPreset(from, to);
-                                        }, children: p.label }, p.label))) }), (0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect }), formatHasTime && ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: startTimeBaseDate, onChange: (updated) => {
+                                        }, children: p.label }, p.label))) }), (0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect, dayStates: dayStates, renderDayContent: renderDayContent }), formatHasTime && ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: startTimeBaseDate, onChange: (updated) => {
                                                         if (!tempRangeStart) {
                                                             setTempRangeStart(updated);
                                                             return;
@@ -207,7 +232,7 @@ const RangeDatePicker = (props) => {
                                                             return;
                                                         }
                                                         setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), error && errorMessage && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
+                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), error && errorMessage && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { id: errorFieldId, errorMessage: errorMessage })), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
 };
 exports.RangeDatePicker = RangeDatePicker;
 exports.default = exports.RangeDatePicker;

package/dist/Components/DatePicker/SingleDatePicker.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { SingleDatePickerProps } from "./DatePickerProps";
+/** Date/datetime field with typed-mask input + calendar popover. Import via `DatePicker` (ThemeDatePicker) — direct import bypasses its isRange/pickerType routing. */
 export declare const SingleDatePicker: React.FC<SingleDatePickerProps>;
 export default SingleDatePicker;