pixelize-design-library 2.4.2-beta.0 → 2.4.2-beta.2

package/dist/esm/Components/AppearanceSettings/AppearanceSettings.js

@@ -4,20 +4,22 @@ import { Box, Text, VStack } from "@chakra-ui/react";
 import { ThemesList } from "../../Theme/index.js";
 import { ThemeSwitcher } from "../../Theme/provider/index.js";
 import { FONT_SIZE_OPTIONS } from "../../Theme/provider/fontSize.js";
+import { lightPalettes } from "../../Theme/tokens/brands/index.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import SelectV2 from "../SelectV2/SelectV2.js";
-const FieldLabel = ({ children }) => (_jsx(Text, { fontSize: "sm", fontWeight: "medium", color: "gray.600", mb: 2, children: children }));
-const brandSwatch = (name) => {
-    var _a, _b, _c;
-    const brand = ThemesList[name];
-    return (_jsx(Box, { w: "14px", h: "14px", borderRadius: "full", bg: (_c = (_b = (_a = brand === null || brand === void 0 ? void 0 : brand.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "gray.300", border: "1px solid", borderColor: "whiteAlpha.300" }));
+const FieldLabel = ({ children }) => {
+    const { colors } = useCustomTheme();
+    return (_jsx(Text, { fontSize: "sm", fontWeight: "medium", color: colors.textMuted, mb: 2, children: children }));
 };
+const brandSwatch = (name, colors) => (_jsx(Box, { w: "14px", h: "14px", borderRadius: "full", bg: lightPalettes[name].primary[500], border: "1px solid", borderColor: colors.boxborder[500] }));
 export const AppearanceSettings = ({ brand, fontSize, onBrandChange, onFontSizeChange, showBrand = true, showColorMode = true, showFontSize = true, size = "sm", labels, }) => {
     var _a, _b, _c;
+    const { colors } = useCustomTheme();
     const brandOptions = useMemo(() => Object.keys(ThemesList).map((name) => ({
         id: name,
         label: name.charAt(0).toUpperCase() + name.slice(1),
-        icon: brandSwatch(name),
-    })), []);
+        icon: brandSwatch(name, colors),
+    })), [colors]);
     const themeLabel = (_a = labels === null || labels === void 0 ? void 0 : labels.theme) !== null && _a !== void 0 ? _a : "Theme";
     const colorModeLabel = (_b = labels === null || labels === void 0 ? void 0 : labels.colorMode) !== null && _b !== void 0 ? _b : "Color mode";
     const fontSizeLabel = (_c = labels === null || labels === void 0 ? void 0 : labels.fontSize) !== null && _c !== void 0 ? _c : "Font Size";

package/dist/esm/Components/Button/Button.styles.js

@@ -13,9 +13,8 @@ const onCanvasText = (theme, colorScheme) => accentTextOnCanvas(theme.colors[col
  * `[50]`.
  */
 const onCanvasHoverBg = (theme, colorScheme, step) => {
-    var _a, _b;
     const scale = theme.colors[colorScheme];
-    return (_b = (_a = scale.opacity) === null || _a === void 0 ? void 0 : _a[step]) !== null && _b !== void 0 ? _b : scale[50];
+    return "opacity" in scale ? scale.opacity[step] : scale[50];
 };
 /**
  * The rung one/two steps DARKER than the accent — what a filled button's hover/active needs so its
@@ -136,15 +135,10 @@ export const Button = {
                 bg: "transparent",
             },
         }),
-        // Theme-based two-tone gradient: each theme defines its own `gradient`
-        // {from,to} pair (see palettes); falls back to the primary scale. Ignores
-        // colorScheme. Hover/active shift brightness so it works for any pair.
+        // Theme-based two-tone gradient: each theme defines its own `gradient` {from,to} pair.
+        // Ignores colorScheme; hover/active shift brightness so it works for any pair.
         gradient: ({ theme }) => {
-            var _a;
-            const g = (_a = theme.colors.gradient) !== null && _a !== void 0 ? _a : {
-                from: theme.colors.primary[400],
-                to: theme.colors.primary[700],
-            };
+            const g = theme.colors.gradient;
             const bg = `linear-gradient(135deg, ${g.from} 0%, ${g.to} 100%)`;
             return {
                 bgImage: bg,

package/dist/esm/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -3,11 +3,11 @@ import { useState, useRef, useEffect } from "react";
 import { Box, Button, ButtonGroup, IconButton, Menu, MenuButton, MenuItem, MenuList, Tooltip, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { onGradient } from "../../Theme/tokens/builders/accentText.js";
+import { hexToRgb } from "../../Theme/tokens/builders/color.js";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
 export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
 onDropdownOptionClick, // New prop to handle option clicks
 rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, leftIconLoading, RightIconLoading, }) {
-    var _a;
     const theme = useCustomTheme();
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
     const textRef = useRef(null);
@@ -46,31 +46,30 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
     // keep the segments transparent (so it doesn't restart per button/icon), with a
     // translucent-white hover overlay for per-segment feedback.
     const isGradient = variant === "gradient";
-    const gradientStops = (_a = theme.colors.gradient) !== null && _a !== void 0 ? _a : {
-        from: theme.colors.primary[400],
-        to: theme.colors.primary[700],
-    };
+    const gradientStops = theme.colors.gradient;
     const gradientBg = `linear-gradient(135deg, ${gradientStops.from} 0%, ${gradientStops.to} 100%)`;
     const gradientInk = onGradient(gradientStops.from, gradientStops.to, theme.colors.white, theme.colors.black);
+    const whiteRgb = hexToRgb(theme.colors.white);
+    const whiteOverlay = (alpha) => `rgba(${whiteRgb.r}, ${whiteRgb.g}, ${whiteRgb.b}, ${alpha})`;
     const gradientItemSx = isGradient
         ? {
             color: gradientInk,
             bg: "transparent",
             bgImage: "none",
             boxShadow: "none",
-            _hover: { bg: "whiteAlpha.200", boxShadow: "none" },
-            _active: { bg: "whiteAlpha.300" },
+            _hover: { bg: whiteOverlay(0.08), boxShadow: "none" },
+            _active: { bg: whiteOverlay(0.16) },
         }
         : undefined;
     return (_jsxs(ButtonGroup, { size: size, isAttached: true, variant: isGradient ? "solid" : variant, onClick: onButtongroupClick, colorScheme: color, style: buttonGroupStyle, sx: isGradient
             ? { bgImage: gradientBg, color: gradientInk, borderRadius: "lg", overflow: "hidden" }
-            : undefined, children: [leftIcon && (_jsx(IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })), _jsx(Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated, children: _jsx(Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: "whiteAlpha.400", maxW: "200px", sx: gradientItemSx, children: _jsx(Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%", children: buttonText }) }) }), rightIcon && rightIconDropdown ? (_jsxs(Menu, { isOpen: isDropdownOpen, onClose: () => setIsDropdownOpen(false), children: [_jsx(MenuButton, { as: IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }), _jsx(Box, { sx: { zIndex: 99 }, children: _jsx(MenuList, { style: menulistStyle, bg: theme.colors.backgroundColor.light, 
+            : undefined, children: [leftIcon && (_jsx(IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })), _jsx(Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated, children: _jsx(Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: whiteOverlay(0.24), maxW: "200px", sx: gradientItemSx, children: _jsx(Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%", children: buttonText }) }) }), rightIcon && rightIconDropdown ? (_jsxs(Menu, { isOpen: isDropdownOpen, onClose: () => setIsDropdownOpen(false), children: [_jsx(MenuButton, { as: IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }), _jsx(Box, { sx: { zIndex: 99 }, children: _jsx(MenuList, { style: menulistStyle, bg: theme.colors.backgroundColor.light, 
                             // Chakra's own MenuItem renders `background: var(--menu-bg)` at rest, and its
                             // MenuList baseStyle sets that var to a hardcoded "#fff" (never our `_dark`, which
                             // this theme-swap app never triggers) — our `bg` prop above only recolors the list
                             // itself, not the inherited var, so items fell back to white until hover/focus (which
                             // our own sx already overrides). Setting the var here fixes the rest state too.
-                            sx: { "--menu-bg": theme.colors.backgroundColor.light }, border: "1px solid", borderColor: "blackAlpha.100", borderRadius: "xl", boxShadow: "lg", py: "0.375rem", minW: "12rem", overflow: "hidden", children: dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => (_jsxs(MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
+                            sx: { "--menu-bg": theme.colors.backgroundColor.light }, border: "1px solid", borderColor: theme.colors.boxborder[500], borderRadius: "xl", boxShadow: "lg", py: "0.375rem", minW: "12rem", overflow: "hidden", children: dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => (_jsxs(MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
                                     display: "flex",
                                     alignItems: "center",
                                     gap: "0.5rem",
@@ -88,7 +87,7 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                                             mx: 0,
                                             borderRadius: "none",
                                             borderBottom: "1px solid",
-                                            borderColor: "blackAlpha.100",
+                                            borderColor: theme.colors.boxborder[300],
                                         }
                                         : {}),
                                     _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },

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

@@ -1,15 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HStack, Text } from "@chakra-ui/react";
-import { useTheme } from "@chakra-ui/react";
-import { DEFAULT_CANVAS, accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { onFilled } from "../../Theme/tokens/builders/accentText.js";
 const ErrorComponent = ({ error, errorClassName, }) => {
-    var _a, _b, _c, _d;
-    const theme = useTheme();
-    // [500] alone fails AA on the page canvas in every brand — step to a darker rung instead.
-    const errorFill = accentTextOnCanvas((_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) !== null && _b !== void 0 ? _b : theme.colors.red, (_d = (_c = theme.colors.backgroundColor) === null || _c === void 0 ? void 0 : _c.main) !== null && _d !== void 0 ? _d : DEFAULT_CANVAS);
-    // errorFill is tuned for text-on-page-canvas, not for carrying a white mark on top of itself —
-    // pick the mark ink structurally (onFilled) instead of assuming white always clears AA on it.
-    const markInk = onFilled(errorFill, theme.colors.white, theme.colors.black);
+    const { colors } = useCustomTheme();
+    const errorFill = colors.semanticText.error;
+    // errorFill is ink, not a fill tuned to carry a mark — pick the mark's ink structurally.
+    const markInk = onFilled(errorFill, colors.white, colors.black);
     return (_jsxs(HStack, { as: "p", align: "flex-start", spacing: 1, mt: 1, fontSize: "sm", color: errorFill, className: errorClassName, children: [_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [_jsx("circle", { cx: "50", cy: "50", r: "50", fill: errorFill }), _jsx("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: markInk }), _jsx("circle", { cx: "50", cy: "28", r: "4", fill: markInk })] }), _jsx(Text, { as: "span", children: error })] }));
 };
 export default ErrorComponent;

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

@@ -2,16 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex, Text, } from "@chakra-ui/react";
 import { Info } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { DEFAULT_CANVAS, accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 // `id` lets a field point `aria-describedby` here so the message is part of the control's
 // description on every focus. `role="alert"` alone announces once, when it first renders.
 const ErrorMessage = ({ errorMessage, id }) => {
-    var _a, _b;
-    const theme = useCustomTheme();
-    // red[500] alone fails AA on the page canvas (~3.4:1 vs the ~4.5 bar) in every brand — step
-    // to a darker rung of the same scale instead of hardcoding one, since a manual retune of a
-    // vivid-alert red collides with its own darker rungs before it clears AA (see red/error
-    // scale comments in each brand's palette.light.ts).
-    return (_jsxs(Flex, { id: id, align: "center", color: accentTextOnCanvas(theme.colors.red, (_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : DEFAULT_CANVAS), fontSize: "0.875rem", role: "alert", children: [_jsx(Info, { width: "0.875rem" }), _jsx(Text, { ml: "0.188rem", children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error" })] }));
+    const { colors } = useCustomTheme();
+    return (_jsxs(Flex, { id: id, align: "center", color: colors.semanticText.error, fontSize: "0.875rem", role: "alert", children: [_jsx(Info, { width: "0.875rem" }), _jsx(Text, { ml: "0.188rem", children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error" })] }));
 };
 export default ErrorMessage;

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

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Icon } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { DEFAULT_CANVAS, accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { InfoIcon } from "lucide-react";
 import ToolTip from "../ToolTip/ToolTip.js";
 export const TextLabel = ({ label, id, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
-    var _a, _b, _c;
     const theme = useCustomTheme();
     const clampStyles = clampLines ? {
         display: "-webkit-box",
@@ -24,7 +22,7 @@ export const TextLabel = ({ label, id, isRequired = false, isInformation = false
         fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : "0.8125rem",
         lineHeight: "1.2",
     };
-    const content = (_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? (_jsx(ToolTip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Box, { as: "span", sx: clampStyles, children: label }) })) : (_jsx(Box, { as: "span", sx: clampStyles, children: label })), isRequired && (_jsx("span", { style: { color: accentTextOnCanvas((_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error, (_c = (_b = theme.colors.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : DEFAULT_CANVAS), marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && (_jsx(ToolTip, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Icon, { as: InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
+    const content = (_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? (_jsx(ToolTip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Box, { as: "span", sx: clampStyles, children: label }) })) : (_jsx(Box, { as: "span", sx: clampStyles, children: label })), isRequired && (_jsx("span", { style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && (_jsx(ToolTip, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Icon, { as: InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
     // A real <label> only when there is a control id to point at. Without one it would name
     // nothing, and TextLabel also renders `inline` inside controls that are themselves a <label>
     // (Checkbox/Radio) — nesting labels there would be invalid markup.

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 const InlineText = ({ text }) => {
     const nodes = [];
     let i = 0;
@@ -39,6 +40,7 @@ const InlineText = ({ text }) => {
     return _jsx(_Fragment, { children: nodes });
 };
 const FormattedDescription = ({ content }) => {
+    const { colors } = useCustomTheme();
     if (!content)
         return null;
     const lines = content.split(/\r?\n/);
@@ -51,7 +53,7 @@ const FormattedDescription = ({ content }) => {
                 const weight = level === 1 ? "bold" : level === 2 ? "semibold" : "medium";
                 return (_jsx(Text, { fontSize: size, fontWeight: weight, mt: idx === 0 ? 0 : 2, textAlign: "left", children: _jsx(InlineText, { text: text }) }, `h-${idx}`));
             }
-            return (_jsx(Text, { fontSize: "sm", color: "gray.700", mt: idx === 0 ? 0 : 2, textAlign: "justify", children: _jsx(InlineText, { text: line }) }, `p-${idx}`));
+            return (_jsx(Text, { fontSize: "sm", color: colors.text[500], mt: idx === 0 ? 0 : 2, textAlign: "justify", children: _jsx(InlineText, { text: line }) }, `p-${idx}`));
         }) }));
 };
 export default FormattedDescription;

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

@@ -1,13 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormLabel, Text } from "@chakra-ui/react";
-import { useTheme } from "@chakra-ui/react";
-import { DEFAULT_CANVAS, accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 const Label = ({ label, htmlFor, labelClassName, isRequired, }) => {
-    var _a, _b, _c, _d, _e, _f;
-    const theme = useTheme();
-    const headerColor = (_b = (_a = theme.colors.header) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : (_c = theme.colors.text) === null || _c === void 0 ? void 0 : _c[500];
-    // [500] alone fails AA on the page canvas in every brand — step to a darker rung instead.
-    const errorColor = accentTextOnCanvas((_d = theme.colors.semantic) === null || _d === void 0 ? void 0 : _d.error, (_f = (_e = theme.colors.backgroundColor) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : DEFAULT_CANVAS);
-    return (_jsxs(FormLabel, { htmlFor: htmlFor, mb: 1, fontSize: "sm", fontWeight: "medium", className: labelClassName, color: headerColor, children: [label, isRequired && (_jsx(Text, { as: "span", color: errorColor, ml: 1, children: "*" }))] }));
+    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: "*" }))] }));
 };
 export default Label;

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

@@ -9,16 +9,15 @@ export const FIELD_TRANSITION = "border-color 0.2s, box-shadow 0.2s";
  * (e.g. SearchSelect, SingleDatePicker). Returns Chakra style props.
  */
 export const getFieldStateStyles = (theme, { error = false, focused = false } = {}) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
     // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary against any named surface
     // up to `muted` (lightest); [500] fails there, [800] clears all with margin.
-    const idleBorder = (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[800]) !== null && _b !== void 0 ? _b : (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[300];
+    const idleBorder = theme.colors.boxborder[800];
     const primary = theme.colors.primary[500];
-    const errorColor = (_e = (_d = theme.colors.semantic) === null || _d === void 0 ? void 0 : _d.error) === null || _e === void 0 ? void 0 : _e[500];
-    const ringPrimary = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary;
-    const ringError = (_g = theme.colors.boxShadow) === null || _g === void 0 ? void 0 : _g.error;
+    const errorColor = theme.colors.semanticText.error;
+    const ringPrimary = theme.colors.boxShadow.primary;
+    const ringError = theme.colors.boxShadow.error;
     return {
-        bg: (_h = theme.colors.gray) === null || _h === void 0 ? void 0 : _h[50],
+        bg: theme.colors.gray[50],
         borderRadius: FIELD_RADIUS,
         border: `${FIELD_BORDER_WIDTH} solid`,
         borderColor: error ? errorColor : focused ? primary : idleBorder,
@@ -31,4 +30,4 @@ export const getFieldStateStyles = (theme, { error = false, focused = false } =
     };
 };
 /** Focus ring value (e.g. for `_focus` / `_focusWithin` pseudo styles). */
-export const fieldFocusRing = (theme, error = false) => { var _a, _b; return `0 0 0 0.125rem ${error ? (_a = theme.colors.boxShadow) === null || _a === void 0 ? void 0 : _a.error : (_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.primary}`; };
+export const fieldFocusRing = (theme, error = false) => `0 0 0 0.125rem ${error ? theme.colors.boxShadow.error : theme.colors.boxShadow.primary}`;

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

@@ -7,7 +7,6 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import InputTextArea from "../InputTextArea/InputTextArea.js";
 import Button from "../Button/Button.js";
 const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false, organizationId, customerId, buttonColorScheme = "primary", buttonSx, }) => {
-    var _a;
     const { colors } = useCustomTheme();
     const [formData, setFormData] = useState({
         firstName: "",
@@ -107,6 +106,6 @@ const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false
             setIsLoading(false);
         }
     };
-    return (_jsxs(Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "2xl", boxShadow: "lg", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[300], children: [response.title ? (_jsxs(Alert, { status: (response === null || response === void 0 ? void 0 : response.isSuccess) ? "success" : "error", fontWeight: "bold", variant: "solid", mb: 1, children: [(response === null || response === void 0 ? void 0 : response.isSuccess) ? _jsx(CircleCheck, {}) : _jsx(CircleX, {}), " \u00A0", " ", response.title] })) : null, _jsx(Heading, { textAlign: "center", size: "lg", mb: 2, children: "Contact Us" }), _jsx(Text, { textAlign: "center", mb: 6, color: "gray.500", children: "Fill in the form below to reach out to us." }), _jsx(Box, { as: "form", onSubmit: handleSubmit, children: _jsxs(VStack, { spacing: 4, children: [_jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "First Name", placeholder: "Enter first name", value: formData.firstName, onChange: (e) => handleChange("firstName", e.target.value), error: Boolean(errors.firstName), errorMessage: errors.firstName, isRequired: true }) }), _jsx(FormControl, { children: _jsx(TextInput, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: (e) => handleChange("lastName", e.target.value) }) })] }), _jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "Phone", placeholder: "Enter phone number", value: formData.phone, onChange: (e) => handleChange("phone", e.target.value), isRequired: true, error: Boolean(errors.phone), errorMessage: errors.phone }) }), _jsx(FormControl, { isInvalid: !!errors.email, children: _jsx(TextInput, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: (e) => handleChange("email", e.target.value), error: Boolean(errors.email), errorMessage: errors.email }) })] }), customFields, _jsxs(FormControl, { children: [_jsx(Text, { fontSize: "sm", mb: 1, children: "Enquiry" }), _jsx(Box, { children: _jsx(InputTextArea, { placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: (e) => handleChange("enquiry", e.target.value) }) })] }), _jsx(Button, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx, isLoading: isLoading, loadingText: "Sending...", children: "Send Message" })] }) })] }));
+    return (_jsxs(Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "2xl", boxShadow: "lg", bg: colors.background[300], children: [response.title ? (_jsxs(Alert, { status: (response === null || response === void 0 ? void 0 : response.isSuccess) ? "success" : "error", fontWeight: "bold", variant: "solid", mb: 1, children: [(response === null || response === void 0 ? void 0 : response.isSuccess) ? _jsx(CircleCheck, {}) : _jsx(CircleX, {}), " \u00A0", " ", response.title] })) : null, _jsx(Heading, { textAlign: "center", size: "lg", mb: 2, children: "Contact Us" }), _jsx(Text, { textAlign: "center", mb: 6, color: colors.textMuted, children: "Fill in the form below to reach out to us." }), _jsx(Box, { as: "form", onSubmit: handleSubmit, children: _jsxs(VStack, { spacing: 4, children: [_jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "First Name", placeholder: "Enter first name", value: formData.firstName, onChange: (e) => handleChange("firstName", e.target.value), error: Boolean(errors.firstName), errorMessage: errors.firstName, isRequired: true }) }), _jsx(FormControl, { children: _jsx(TextInput, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: (e) => handleChange("lastName", e.target.value) }) })] }), _jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "Phone", placeholder: "Enter phone number", value: formData.phone, onChange: (e) => handleChange("phone", e.target.value), isRequired: true, error: Boolean(errors.phone), errorMessage: errors.phone }) }), _jsx(FormControl, { isInvalid: !!errors.email, children: _jsx(TextInput, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: (e) => handleChange("email", e.target.value), error: Boolean(errors.email), errorMessage: errors.email }) })] }), customFields, _jsxs(FormControl, { children: [_jsx(Text, { fontSize: "sm", mb: 1, children: "Enquiry" }), _jsx(Box, { children: _jsx(InputTextArea, { placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: (e) => handleChange("enquiry", e.target.value) }) })] }), _jsx(Button, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx, isLoading: isLoading, loadingText: "Sending...", children: "Send Message" })] }) })] }));
 };
 export default ContactForm;

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

@@ -6,7 +6,6 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, }) => {
-    var _a, _b;
     const theme = useCustomTheme();
     const [copied, setCopied] = useState(false);
     const timer = useRef();
@@ -28,16 +27,14 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
     // canvas — it fails AA here in 5 of 7 brands in dark mode. accentTextOnCanvas steps to the
     // nearest rung that clears AA against the canvas this button actually sits on.
     const accent = accentTextOnCanvas(theme.colors.primary, theme.colors.backgroundColor.main);
-    const success = theme.colors.semantic.success[500];
+    const success = theme.colors.semanticText.success;
     if (variant === "menu-item") {
         return (_jsxs(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 ? _jsx(Check, { size: iconSize, color: success }) : _jsx(Copy, { size: iconSize, color: accent }), _jsx(Box, { fontSize: "14px", fontWeight: 500, color: copied ? success : accent, children: copied ? copiedLabel : label })] }));
     }
     if (variant === "button") {
         return (_jsxs(Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid", 
-            // boxborder[800], not raw gray[200]: this renders as a real `<button>` (as="button"),
-            // so its border is a control boundary — WCAG 1.4.11 needs >=3.0 against any named
-            // surface up to `muted` (lightest); gray[200] fails there in dark mode.
-            borderColor: copied ? success : ((_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[800]) !== null && _b !== void 0 ? _b : theme.colors.gray[200]), 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 ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }), _jsx(Text, { children: copied ? copiedLabel : label })] }));
+            // [800], not [500]: a real control boundary needs >=3:1 on every surface up to `muted`.
+            borderColor: copied ? success : theme.colors.boxborder[800], 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 ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }), _jsx(Text, { children: copied ? copiedLabel : label })] }));
     }
     return (_jsx(ToolTip, { label: copied ? copiedLabel : tooltip, placement: "top", children: _jsx(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 ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }) }) }));
 };

package/dist/esm/Components/CustomModulesTable/CustomModulesTable.js

@@ -24,16 +24,16 @@ const DEFAULT_LABELS = {
     deleteConfirmPrefix: "Are you sure you want to delete",
 };
 const CustomModulesTable = ({ modules, isLoading = false, isUpdating = false, isDeleting = false, onUpdateModule, onDeleteModule, labels: labelOverrides, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _a;
     const { colors } = useCustomTheme();
     const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const [editTarget, setEditTarget] = useState(null);
     const [deleteTarget, setDeleteTarget] = useState(null);
-    const border = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200];
-    const surface = (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _f === void 0 ? void 0 : _f.light;
-    const muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[500];
-    const heading = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[800]) !== null && _l !== void 0 ? _l : (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[800];
-    const headBg = (_p = (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[50]) !== null && _p !== void 0 ? _p : (_q = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _q === void 0 ? void 0 : _q.tableHeader;
+    const border = colors.boxborder[200];
+    const surface = colors.background[50];
+    const muted = colors.textMuted;
+    const heading = colors.text[800];
+    const headBg = colors.backgroundColor.tableHeader;
     const thStyle = {
         fontSize: "0.7rem",
         textTransform: "uppercase",
@@ -42,10 +42,7 @@ const CustomModulesTable = ({ modules, isLoading = false, isUpdating = false, is
         borderColor: border,
         py: 3,
     };
-    return (_jsxs(Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "sm", overflow: "hidden", children: [_jsx(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), _jsx(Box, { overflowX: "auto", children: isLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => {
-                        var _a, _b;
-                        return (_jsx(Skeleton, { height: "18px", borderRadius: "md", startColor: (_a = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _a === void 0 ? void 0 : _a[100], endColor: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[400] }, idx));
-                    }) })) : modules.length === 0 ? (_jsx(EmptyState, { icon: Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.moduleName }), _jsx(Th, { ...thStyle, children: labels.moduleOwner }), _jsx(Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), _jsx(Tbody, { children: modules.map((item) => (_jsxs(Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: _jsx(Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: _jsx(Text, { noOfLines: 1, children: item.moduleName }) }) }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), _jsx(Td, { borderColor: border, children: _jsxs(HStack, { spacing: 2, justifyContent: "flex-end", children: [_jsx(Button, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: _jsx(Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: _jsx(Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), _jsx(EditModuleModal, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_r = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _r !== void 0 ? _r : "", isLoading: isUpdating, onSubmit: async (name) => {
+    return (_jsxs(Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "sm", overflow: "hidden", children: [_jsx(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), _jsx(Box, { overflowX: "auto", children: isLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => (_jsx(Skeleton, { height: "18px", borderRadius: "md", startColor: colors.gray[100], endColor: colors.gray[400] }, idx))) })) : modules.length === 0 ? (_jsx(EmptyState, { icon: Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.moduleName }), _jsx(Th, { ...thStyle, children: labels.moduleOwner }), _jsx(Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), _jsx(Tbody, { children: modules.map((item) => (_jsxs(Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: _jsx(Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: _jsx(Text, { noOfLines: 1, children: item.moduleName }) }) }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), _jsx(Td, { borderColor: border, children: _jsxs(HStack, { spacing: 2, justifyContent: "flex-end", children: [_jsx(Button, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: _jsx(Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: _jsx(Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), _jsx(EditModuleModal, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_a = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _a !== void 0 ? _a : "", isLoading: isUpdating, onSubmit: async (name) => {
                     if (editTarget) {
                         await (onUpdateModule === null || onUpdateModule === void 0 ? void 0 : onUpdateModule({
                             moduleId: editTarget.module_id,

package/dist/esm/Components/CustomModulesTable/DeleteModuleModal.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, HStack, Text, } from "@chakra-ui/react";
 import { AlertTriangle, Trash2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 import Button from "../Button/Button.js";
 const DeleteModuleModal = ({ isOpen, onClose, moduleName, isLoading, onConfirm, labels, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const { colors } = useCustomTheme();
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : (_h = colors === null || colors === void 0 ? void 0 : colors.red) === null || _h === void 0 ? void 0 : _h[50], color: (_l = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _j === void 0 ? void 0 : _j.error) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : (_m = colors === null || colors === void 0 ? void 0 : colors.red) === null || _m === void 0 ? void 0 : _m[500], children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsxs(Text, { color: (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[600], fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", _jsx(Text, { as: "span", fontWeight: 600, color: (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[800], children: moduleName }), "?"] }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 15 }) })] })] })] })] }));
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: colors.background[50], children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: colors.semantic.error[50], color: accentTextOnCanvas(colors.semantic.error, colors.semantic.error[50]), children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsxs(Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", _jsx(Text, { as: "span", fontWeight: 600, color: colors.text[800], children: moduleName }), "?"] }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 15 }) })] })] })] })] }));
 };
 export default DeleteModuleModal;

package/dist/esm/Components/CustomModulesTable/EditModuleModal.js

@@ -4,17 +4,16 @@ import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, Modal
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import Button from "../Button/Button.js";
 const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, labels, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
     const { colors } = useCustomTheme();
     const [name, setName] = useState(initialName);
     useEffect(() => {
         if (isOpen)
             setName(initialName);
     }, [isOpen, initialName]);
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, 
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: colors.background[50], children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, 
                                 // [200] is the decorative divider rung (~1.2:1, correct for the ModalHeader border
                                 // above) — a real control's resting outline needs 1.4.11's 3:1, which is what every
                                 // other input in this library (TextInput, NumberInput, DatePicker) reads from [800].
-                                borderColor: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _e === void 0 ? void 0 : _e[800]) !== null && _f !== void 0 ? _f : (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[400], mb: 5 }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
+                                borderColor: colors.boxborder[800], mb: 5 }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
 };
 export default EditModuleModal;

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

@@ -6,7 +6,6 @@ import Button from "../Button/Button.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { onFilled } from "../../Theme/tokens/builders/accentText.js";
 export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, }) => {
-    var _a;
     const theme = useCustomTheme();
     const rangeBg = theme.colors.primary.opacity[16];
     const isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
@@ -23,7 +22,7 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
         border: "1px solid",
         // boxborder[500] is the control-outline rung the sibling pickers already use; boxborder[300]
         // is decorative and measured 1.85:1 on the dark canvas — the select read as borderless.
-        borderColor: (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[500],
+        borderColor: theme.colors.boxborder[500],
         borderRadius: "md",
         px: 2,
         py: 1,
@@ -128,6 +127,6 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
                                     if (!disableToday) {
                                         onDaySelect(new Date(today));
                                     }
-                                }, "aria-label": "Today", sx: { fontSize: "0.7rem", px: 2, flexShrink: 0 }, isDisabled: disableToday, children: "Today" })), _jsx(Button, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1)), "aria-label": "Next month", children: _jsx(ChevronRightIcon, { size: 16 }) })] })] }), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (_jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx(Box, { textAlign: "center", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: theme.colors.gray[500], py: 1, children: day }, day))) })), _jsx(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" })), _jsx(Button, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1)), "aria-label": "Next month", children: _jsx(ChevronRightIcon, { size: 16 }) })] })] }), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (_jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx(Box, { textAlign: "center", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: theme.colors.textMuted, py: 1, children: day }, day))) })), _jsx(Box, { onMouseLeave: () => onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(null), children: renderDays() })] }));
 };
 export default CalendarPanel;

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

@@ -18,7 +18,7 @@ const setTimeFrom = (base, time) => {
     return new Date(b.getFullYear(), b.getMonth(), b.getDate(), time.getHours(), time.getMinutes(), time.getSeconds(), 0);
 };
 export const RangeDatePicker = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    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 theme = useCustomTheme();
     const sizeKey = typeof size === "string" ? size : "md";
@@ -165,17 +165,17 @@ export const RangeDatePicker = (props) => {
                                         }, onClick: () => {
                                             if (!isOpen)
                                                 handleOpen();
-                                        }, borderColor: error ? (_f = (_e = theme.colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[500] : undefined, _focus: {
-                                            borderColor: error ? (_h = (_g = theme.colors.semantic) === null || _g === void 0 ? void 0 : _g.error) === null || _h === void 0 ? void 0 : _h[500] : theme.colors.primary[500],
+                                        }, borderColor: error ? theme.colors.semanticText.error : undefined, _focus: {
+                                            borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
                                             boxShadow: error
-                                                ? `0 0 0 1px ${(_k = (_j = theme.colors.semantic) === null || _j === void 0 ? void 0 : _j.error) === null || _k === void 0 ? void 0 : _k[500]}`
+                                                ? `0 0 0 1px ${theme.colors.semanticText.error}`
                                                 : `0 0 0 1px ${theme.colors.primary[500]}`,
                                         }, _hover: {
-                                            borderColor: error ? (_m = (_l = theme.colors.semantic) === null || _l === void 0 ? void 0 : _l.error) === null || _m === void 0 ? void 0 : _m[500] : undefined,
-                                        }, cursor: "pointer" }), _jsx(InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", style: { cursor: "pointer" }, onClick: () => (isOpen ? onClose() : handleOpen()), children: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.gray[500] }) }) })] }) }) }), _jsx(PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", border: "1px solid", borderColor: (_o = theme.colors.boxborder) === null || _o === void 0 ? void 0 : _o[500], bg: theme.colors.background[50], children: _jsxs(PopoverBody, { p: 0, children: [_jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
+                                            borderColor: error ? theme.colors.semanticText.error : undefined,
+                                        }, cursor: "pointer" }), _jsx(InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", style: { cursor: "pointer" }, onClick: () => (isOpen ? onClose() : handleOpen()), children: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) })] }) }) }), _jsx(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: _jsxs(PopoverBody, { p: 0, children: [_jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => (_jsx(Button, { 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))) }), _jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect }), formatHasTime && (_jsxs(Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [_jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: "gray.600", mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { date: startTimeBaseDate, onChange: (updated) => {
+                                        }, children: p.label }, p.label))) }), _jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect }), formatHasTime && (_jsxs(Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [_jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { date: startTimeBaseDate, onChange: (updated) => {
                                                         if (!tempRangeStart) {
                                                             setTempRangeStart(updated);
                                                             return;
@@ -188,7 +188,7 @@ export const RangeDatePicker = (props) => {
                                                             return;
                                                         }
                                                         setTempRangeStart(setTimeFrom(startTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeStart, size: sizeKey }))] }), _jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: "gray.600", mb: 1, children: "End time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { date: endTimeBaseDate, onChange: (updated) => {
+                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeStart, size: sizeKey }))] }), _jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "End time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { date: endTimeBaseDate, onChange: (updated) => {
                                                         if (!tempRangeEnd) {
                                                             setTempRangeEnd(updated);
                                                             return;
@@ -201,6 +201,6 @@ export const RangeDatePicker = (props) => {
                                                             return;
                                                         }
                                                         setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: (_p = theme.colors.boxborder) === null || _p === void 0 ? void 0 : _p[300], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), error && errorMessage && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[300], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), error && errorMessage && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
 };
 export default RangeDatePicker;

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

@@ -219,7 +219,7 @@ const normalizeTimeBuffer = (tokenChar, rawBuffer, segmentLength, is12Hour) => {
     return { value: buf, completed: buf.length >= segmentLength };
 };
 export const SingleDatePicker = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    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;
     const theme = useCustomTheme();
     const sizeKey = typeof size === "string" ? size : "md";
@@ -939,16 +939,16 @@ export const SingleDatePicker = (props) => {
                         return;
                     }
                     finalize();
-                }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: inputRef, id: id, name: name, size: sizeKey, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDownMask, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, autoComplete: autoComplete, bg: (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[50], borderColor: error
-                                            ? (_e = (_d = theme.colors.semantic) === null || _d === void 0 ? void 0 : _d.error) === null || _e === void 0 ? void 0 : _e[500]
-                                            : (_f = theme.colors.boxborder) === null || _f === void 0 ? void 0 : _f[800], _focus: {
-                                            borderColor: error ? (_h = (_g = theme.colors.semantic) === null || _g === void 0 ? void 0 : _g.error) === null || _h === void 0 ? void 0 : _h[500] : theme.colors.primary[500],
+                }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: inputRef, id: id, name: name, size: sizeKey, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDownMask, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, autoComplete: autoComplete, bg: theme.colors.gray[50], borderColor: error
+                                            ? theme.colors.semanticText.error
+                                            : theme.colors.boxborder[500], _focus: {
+                                            borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
                                             boxShadow: error
-                                                ? `0 0 0 0.125rem ${(_j = theme.colors.boxShadow) === null || _j === void 0 ? void 0 : _j.error}`
-                                                : `0 0 0 0.125rem ${(_k = theme.colors.boxShadow) === null || _k === void 0 ? void 0 : _k.primary}`,
+                                                ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}`
+                                                : `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
                                         }, _hover: {
-                                            borderColor: error ? (_m = (_l = theme.colors.semantic) === null || _l === void 0 ? void 0 : _l.error) === null || _m === void 0 ? void 0 : _m[500] : theme.colors.primary[500],
-                                        }, cursor: "text", boxShadow: error ? `0 0 0 0.125rem ${(_o = theme.colors.boxShadow) === null || _o === void 0 ? void 0 : _o.error}` : `` }), _jsx(InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", onClick: (e) => {
+                                            borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
+                                        }, cursor: "text", boxShadow: error ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}` : `` }), _jsx(InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", onClick: (e) => {
                                             e.stopPropagation();
                                             if (!isOpen) {
                                                 handleOpen();
@@ -956,7 +956,7 @@ export const SingleDatePicker = (props) => {
                                             else {
                                                 onClose();
                                             }
-                                        }, style: { cursor: "pointer" }, children: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.gray[500] }) }) })] }) }) }), _jsx(PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", border: "1px solid", borderColor: (_p = theme.colors.boxborder) === null || _p === void 0 ? void 0 : _p[500], bg: theme.colors.background[50], children: _jsxs(PopoverBody, { p: 0, children: [showDate && (_jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => updater(prev)), today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })), showTime && (_jsx(Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? (_jsx(TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
+                                        }, style: { cursor: "pointer" }, children: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) })] }) }) }), _jsx(PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", border: "1px solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50], children: _jsxs(PopoverBody, { p: 0, children: [showDate && (_jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => updater(prev)), today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })), showTime && (_jsx(Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? (_jsx(TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
                                             setTempDate(updatedDate);
                                             setInputValue(updatedDate ? format(updatedDate, resolvedDateFormat) : "");
                                             setIsTyping(false);
@@ -964,7 +964,7 @@ export const SingleDatePicker = (props) => {
                                             setTempDate(updatedDate);
                                             setInputValue(format(updatedDate, resolvedDateFormat));
                                             setIsTyping(false);
-                                        }, disabled: disabled })) })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: (_q = theme.colors.boxborder) === null || _q === void 0 ? void 0 : _q[300], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
+                                        }, disabled: disabled })) })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[300], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
                                                 setTempDate(null);
                                                 requestClose(null);
                                             }, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) })] }), error && errorMessage && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));