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

package/dist/Components/Accordion/Accordion.js

@@ -8,28 +8,26 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const accordionColors_1 = require("./accordionColors");
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const c = (_a = theme.colors) !== null && _a !== void 0 ? _a : {};
-    const isDark = (0, accentText_1.isDarkCanvas)((_c = (_b = c.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : accentText_1.DEFAULT_CANVAS);
-    const border = (_e = (_d = c.boxborder) === null || _d === void 0 ? void 0 : _d[300]) !== null && _e !== void 0 ? _e : (_f = c.gray) === null || _f === void 0 ? void 0 : _f[200];
-    const headingColor = (_h = (_g = c.text) === null || _g === void 0 ? void 0 : _g[800]) !== null && _h !== void 0 ? _h : (_j = c.gray) === null || _j === void 0 ? void 0 : _j[800];
-    const bodyColor = (_l = (_k = c.text) === null || _k === void 0 ? void 0 : _k[600]) !== null && _l !== void 0 ? _l : (_m = c.gray) === null || _m === void 0 ? void 0 : _m[600];
-    const { expandedBg, softHover } = (0, react_1.useMemo)(() => { var _a; return (0, accordionColors_1.getAccordionHoverColors)((_a = theme.colors) !== null && _a !== void 0 ? _a : {}, isDark); }, [theme.colors, isDark]);
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const isDark = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main);
+    const border = colors.boxborder[300];
+    const headingColor = colors.text[800];
+    const bodyColor = colors.text[600];
+    const { expandedBg, softHover } = (0, react_1.useMemo)(() => (0, accordionColors_1.getAccordionHoverColors)(colors, isDark), [colors, isDark]);
     return ((0, jsx_runtime_1.jsx)(react_2.Accordion, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            return ((0, jsx_runtime_1.jsx)(react_2.AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: (_b = (_a = c.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : (_c = c.backgroundColor) === null || _c === void 0 ? void 0 : _c.light, mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: (_e = (_d = c.boxborder) === null || _d === void 0 ? void 0 : _d[400]) !== null && _e !== void 0 ? _e : (_f = c.gray) === null || _f === void 0 ? void 0 : _f[300] }, ...item.itemProps, sx: (_g = item.customStyles) === null || _g === void 0 ? void 0 : _g.itemStyle, children: ({ isExpanded }) => {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            var _a;
+            return ((0, jsx_runtime_1.jsx)(react_2.AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: colors.background[50], mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: colors.boxborder[400] }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
+                    var _a, _b, _c;
                     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
                                         boxShadow: "none",
-                                        outline: `0.125rem solid ${(_b = (_a = c.primary) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : (_c = c.gray) === null || _c === void 0 ? void 0 : _c[300]}`,
+                                        outline: `0.125rem solid ${colors.primary[300]}`,
                                         outlineOffset: "-0.125rem",
                                     }, ...item.buttonProps, sx: {
-                                        ...(_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.buttonStyle,
+                                        ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,
                                         "&:hover": {
-                                            ...(_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.hoverbuttonStyle,
+                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.hoverbuttonStyle,
                                         },
-                                    }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "md", color: isExpanded ? ((_g = (_f = c.primary) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : headingColor) : (_h = c.gray) === null || _h === void 0 ? void 0 : _h[500], bg: isExpanded ? ((_l = (_k = (_j = c.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : "transparent") : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_m = item.customStyles) === null || _m === void 0 ? void 0 : _m.panelStyle, children: item.content })] }));
+                                    }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "md", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
                 } }, idx));
         }) }));
 };

package/dist/Components/Accordion/accordionColors.js

@@ -12,23 +12,20 @@ const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
  */
 const MIN_HOVER_STEP = 1.15;
 const getAccordionHoverColors = (colors, isDark) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     if (isDark) {
         // primary.opacity[8] composited over the dark canvas collapses to ~1.07:1 (near-black on
         // near-black) — gray[200] is an opaque rung that stays visibly above canvas (~1.6:1) without
         // being as loud as the gray[300] hover fill FilterSidebar/Table already use.
         return {
-            expandedBg: (_d = (_b = (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[50],
-            softHover: (_j = (_g = (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[300]) !== null && _j !== void 0 ? _j : (_k = colors.gray) === null || _k === void 0 ? void 0 : _k[50],
+            expandedBg: colors.gray[200],
+            softHover: colors.gray[200],
         };
     }
-    const rest = (_m = (_l = colors.background) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : (_o = colors.backgroundColor) === null || _o === void 0 ? void 0 : _o.light;
-    const expandedTint = ((_q = (_p = colors.primary) === null || _p === void 0 ? void 0 : _p.opacity) === null || _q === void 0 ? void 0 : _q[8])
-        ? (0, color_1.compositeOver)(colors.primary.opacity[8], rest)
-        : ((_s = (_r = colors.gray) === null || _r === void 0 ? void 0 : _r[50]) !== null && _s !== void 0 ? _s : rest);
+    const rest = colors.background[50];
+    const expandedTint = (0, color_1.compositeOver)(colors.primary.opacity[8], rest);
     return {
-        expandedBg: (0, outlineRung_1.liftToContrast)(expandedTint, rest, "light", MIN_HOVER_STEP),
-        softHover: (0, outlineRung_1.liftToContrast)((_v = (_u = (_t = colors.table) === null || _t === void 0 ? void 0 : _t.hover) === null || _u === void 0 ? void 0 : _u[100]) !== null && _v !== void 0 ? _v : (_w = colors.gray) === null || _w === void 0 ? void 0 : _w[50], rest, "light", MIN_HOVER_STEP),
+        expandedBg: (0, outlineRung_1.liftToContrast)(expandedTint, rest, MIN_HOVER_STEP),
+        softHover: (0, outlineRung_1.liftToContrast)(colors.table.hover[100], rest, MIN_HOVER_STEP),
     };
 };
 exports.getAccordionHoverColors = getAccordionHoverColors;

package/dist/Components/AlertDialog/AlertDialog.js

@@ -4,8 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText = "Yes", cancelButtonText = "No", isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }) => {
-    var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogOverlay, {}), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], sx: ContentStyle, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogHeader, { sx: headerStyle, children: title }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogCloseButton, { sx: closeButtonStyle }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogBody, { sx: bodyStyle, children: content }), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogFooter, { sx: footerStyle, children: [(0, jsx_runtime_1.jsx)(react_1.Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), (0, jsx_runtime_1.jsx)(react_1.Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));
+    return ((0, jsx_runtime_1.jsxs)(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogOverlay, {}), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogContent, { bg: colors.background[50], sx: ContentStyle, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogHeader, { sx: headerStyle, children: title }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogCloseButton, { sx: closeButtonStyle }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogBody, { sx: bodyStyle, children: content }), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogFooter, { sx: footerStyle, children: [(0, jsx_runtime_1.jsx)(react_1.Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), (0, jsx_runtime_1.jsx)(react_1.Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));
 };
 exports.default = AlertDialog;

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

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
-const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
 const chartBase_1 = require("../chartBase");
 const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePosition = "left", height = 320, width = "100%", colors, showLegend = true, legendPosition = "bottom", yAxisFormatter, }) => {
-    const theme = (0, react_2.useTheme)();
-    const palette = theme.colors;
+    const { colors: palette } = (0, useCustomTheme_1.useCustomTheme)();
     const seriesColors = (0, react_1.useMemo)(() => colors !== null && colors !== void 0 ? colors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette), [colors, palette]);
     const resolvedSeries = (0, react_1.useMemo)(() => series !== null && series !== void 0 ? series : [{ name: title !== null && title !== void 0 ? title : "Series 1", data: data !== null && data !== void 0 ? data : [] }], [series, data, title]);
     const isSpark = variant === "sparkline";

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
-const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
 const chartBase_1 = require("../chartBase");
 const getValidLegendPosition = (position) => {
@@ -19,8 +19,7 @@ const getValidLegendPosition = (position) => {
 };
 const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutColors, chartColor, titlePosition = "center", titleStyle, legendPosition = "bottom", legendStyle, variant = "pie", showDataLabels = true, minLabelPercent = 8, surfaceColor, donutSize = "68%", totalLabel = "Total", labelPlacement = "auto", }) => {
     var _a;
-    const theme = (0, react_2.useTheme)();
-    const palette = theme.colors;
+    const { colors: palette } = (0, useCustomTheme_1.useCustomTheme)();
     const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
     const gap = surfaceColor !== null && surfaceColor !== void 0 ? surfaceColor : ink.surface;
     const mergedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);

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

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
-const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
 const chartBase_1 = require("../chartBase");
 const ApexRadialChart = ({ variant = "gauge", data, labels, title, titlePosition = "left", height = 320, width = "100%", colors, totalLabel = "Total", trackColor, hollowSize = "62%", }) => {
-    const theme = (0, react_2.useTheme)();
-    const palette = theme.colors;
+    const { colors: palette } = (0, useCustomTheme_1.useCustomTheme)();
     const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
     const seriesColors = (0, react_1.useMemo)(() => colors !== null && colors !== void 0 ? colors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette), [colors, palette]);
     const options = (0, react_1.useMemo)(() => ({

package/dist/Components/AppearanceSettings/AppearanceSettings.js

@@ -10,20 +10,22 @@ const react_2 = require("@chakra-ui/react");
 const Theme_1 = require("../../Theme");
 const provider_1 = require("../../Theme/provider");
 const fontSize_1 = require("../../Theme/provider/fontSize");
+const brands_1 = require("../../Theme/tokens/brands");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const SelectV2_1 = __importDefault(require("../SelectV2/SelectV2"));
-const FieldLabel = ({ children }) => ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", color: "gray.600", mb: 2, children: children }));
-const brandSwatch = (name) => {
-    var _a, _b, _c;
-    const brand = Theme_1.ThemesList[name];
-    return ((0, jsx_runtime_1.jsx)(react_2.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 } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", color: colors.textMuted, mb: 2, children: children }));
 };
+const brandSwatch = (name, colors) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "14px", h: "14px", borderRadius: "full", bg: brands_1.lightPalettes[name].primary[500], border: "1px solid", borderColor: colors.boxborder[500] }));
 const AppearanceSettings = ({ brand, fontSize, onBrandChange, onFontSizeChange, showBrand = true, showColorMode = true, showFontSize = true, size = "sm", labels, }) => {
     var _a, _b, _c;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const brandOptions = (0, react_1.useMemo)(() => Object.keys(Theme_1.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/Components/Button/Button.styles.js

@@ -16,9 +16,8 @@ const onCanvasText = (theme, colorScheme) => (0, accentText_1.accentTextOnCanvas
  * `[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
@@ -139,15 +138,10 @@ exports.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/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -6,11 +6,11 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const color_1 = require("../../Theme/tokens/builders/color");
 const rafThrottle_1 = require("../../Utils/rafThrottle");
 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 = (0, useCustomTheme_1.useCustomTheme)();
     const [isDropdownOpen, setIsDropdownOpen] = (0, react_1.useState)(false);
     const textRef = (0, react_1.useRef)(null);
@@ -49,31 +49,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 = (0, accentText_1.onGradient)(gradientStops.from, gradientStops.to, theme.colors.white, theme.colors.black);
+    const whiteRgb = (0, color_1.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 ((0, jsx_runtime_1.jsxs)(react_2.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 && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated, children: (0, jsx_runtime_1.jsx)(react_2.Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: "whiteAlpha.400", maxW: "200px", sx: gradientItemSx, children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%", children: buttonText }) }) }), rightIcon && rightIconDropdown ? ((0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: isDropdownOpen, onClose: () => setIsDropdownOpen(false), children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }), (0, jsx_runtime_1.jsx)(react_2.Box, { sx: { zIndex: 99 }, children: (0, jsx_runtime_1.jsx)(react_2.MenuList, { style: menulistStyle, bg: theme.colors.backgroundColor.light, 
+            : undefined, children: [leftIcon && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated, children: (0, jsx_runtime_1.jsx)(react_2.Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: whiteOverlay(0.24), maxW: "200px", sx: gradientItemSx, children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%", children: buttonText }) }) }), rightIcon && rightIconDropdown ? ((0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: isDropdownOpen, onClose: () => setIsDropdownOpen(false), children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }), (0, jsx_runtime_1.jsx)(react_2.Box, { sx: { zIndex: 99 }, children: (0, jsx_runtime_1.jsx)(react_2.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) => ((0, jsx_runtime_1.jsxs)(react_2.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) => ((0, jsx_runtime_1.jsxs)(react_2.MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
                                     display: "flex",
                                     alignItems: "center",
                                     gap: "0.5rem",
@@ -91,7 +90,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/Components/Common/ErrorComponent.js

@@ -2,16 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
-const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const ErrorComponent = ({ error, errorClassName, }) => {
-    var _a, _b, _c, _d;
-    const theme = (0, react_2.useTheme)();
-    // [500] alone fails AA on the page canvas in every brand — step to a darker rung instead.
-    const errorFill = (0, accentText_1.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 : accentText_1.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 = (0, accentText_1.onFilled)(errorFill, theme.colors.white, theme.colors.black);
+    const { colors } = (0, useCustomTheme_1.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 = (0, accentText_1.onFilled)(errorFill, colors.white, colors.black);
     return ((0, jsx_runtime_1.jsxs)(react_1.HStack, { as: "p", align: "flex-start", spacing: 1, mt: 1, fontSize: "sm", color: errorFill, className: errorClassName, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "50", cy: "50", r: "50", fill: errorFill }), (0, jsx_runtime_1.jsx)("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: markInk }), (0, jsx_runtime_1.jsx)("circle", { cx: "50", cy: "28", r: "4", fill: markInk })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", children: error })] }));
 };
 exports.default = ErrorComponent;

package/dist/Components/Common/ErrorMessage.js

@@ -4,16 +4,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
 // `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 = (0, useCustomTheme_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Flex, { id: id, align: "center", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, (_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : accentText_1.DEFAULT_CANVAS), fontSize: "0.875rem", role: "alert", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Info, { width: "0.875rem" }), (0, jsx_runtime_1.jsx)(react_1.Text, { ml: "0.188rem", children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error" })] }));
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { id: id, align: "center", color: colors.semanticText.error, fontSize: "0.875rem", role: "alert", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Info, { width: "0.875rem" }), (0, jsx_runtime_1.jsx)(react_1.Text, { ml: "0.188rem", children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error" })] }));
 };
 exports.default = ErrorMessage;

package/dist/Components/Common/FormLabel.js

@@ -7,11 +7,9 @@ exports.TextLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const lucide_react_1 = require("lucide-react");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const TextLabel = ({ label, id, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
-    var _a, _b, _c;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const clampStyles = clampLines ? {
         display: "-webkit-box",
@@ -30,7 +28,7 @@ const TextLabel = ({ label, id, isRequired = false, isInformation = false, infor
         fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : "0.8125rem",
         lineHeight: "1.2",
     };
-    const content = ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label })), isRequired && ((0, jsx_runtime_1.jsx)("span", { style: { color: (0, accentText_1.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 : accentText_1.DEFAULT_CANVAS), marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
+    const content = ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label })), isRequired && ((0, jsx_runtime_1.jsx)("span", { style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.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/Components/Common/FormattedDescription.js

@@ -2,6 +2,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");
 const InlineText = ({ text }) => {
     const nodes = [];
     let i = 0;
@@ -41,6 +42,7 @@ const InlineText = ({ text }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nodes });
 };
 const FormattedDescription = ({ content }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     if (!content)
         return null;
     const lines = content.split(/\r?\n/);
@@ -53,7 +55,7 @@ const FormattedDescription = ({ content }) => {
                 const weight = level === 1 ? "bold" : level === 2 ? "semibold" : "medium";
                 return ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: size, fontWeight: weight, mt: idx === 0 ? 0 : 2, textAlign: "left", children: (0, jsx_runtime_1.jsx)(InlineText, { text: text }) }, `h-${idx}`));
             }
-            return ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: "gray.700", mt: idx === 0 ? 0 : 2, textAlign: "justify", children: (0, jsx_runtime_1.jsx)(InlineText, { text: line }) }, `p-${idx}`));
+            return ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: colors.text[500], mt: idx === 0 ? 0 : 2, textAlign: "justify", children: (0, jsx_runtime_1.jsx)(InlineText, { text: line }) }, `p-${idx}`));
         }) }));
 };
 exports.default = FormattedDescription;

package/dist/Components/Common/Label.js

@@ -2,14 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
-const react_2 = require("@chakra-ui/react");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const Label = ({ label, htmlFor, labelClassName, isRequired, }) => {
-    var _a, _b, _c, _d, _e, _f;
-    const theme = (0, react_2.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 = (0, accentText_1.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 : accentText_1.DEFAULT_CANVAS);
-    return ((0, jsx_runtime_1.jsxs)(react_1.FormLabel, { htmlFor: htmlFor, mb: 1, fontSize: "sm", fontWeight: "medium", className: labelClassName, color: headerColor, children: [label, isRequired && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", color: errorColor, ml: 1, children: "*" }))] }));
+    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: "*" }))] }));
 };
 exports.default = Label;

package/dist/Components/Common/fieldStyles.js

@@ -12,16 +12,15 @@ exports.FIELD_TRANSITION = "border-color 0.2s, box-shadow 0.2s";
  * (e.g. SearchSelect, SingleDatePicker). Returns Chakra style props.
  */
 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: exports.FIELD_RADIUS,
         border: `${exports.FIELD_BORDER_WIDTH} solid`,
         borderColor: error ? errorColor : focused ? primary : idleBorder,
@@ -35,5 +34,5 @@ const getFieldStateStyles = (theme, { error = false, focused = false } = {}) =>
 };
 exports.getFieldStateStyles = getFieldStateStyles;
 /** Focus ring value (e.g. for `_focus` / `_focusWithin` pseudo styles). */
-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}`; };
+const fieldFocusRing = (theme, error = false) => `0 0 0 0.125rem ${error ? theme.colors.boxShadow.error : theme.colors.boxShadow.primary}`;
 exports.fieldFocusRing = fieldFocusRing;

package/dist/Components/ContactForm/ContactForm.js

@@ -12,7 +12,6 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const InputTextArea_1 = __importDefault(require("../InputTextArea/InputTextArea"));
 const Button_1 = __importDefault(require("../Button/Button"));
 const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false, organizationId, customerId, buttonColorScheme = "primary", buttonSx, }) => {
-    var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [formData, setFormData] = (0, react_1.useState)({
         firstName: "",
@@ -112,6 +111,6 @@ const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false
             setIsLoading(false);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.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 ? ((0, jsx_runtime_1.jsxs)(react_2.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) ? (0, jsx_runtime_1.jsx)(lucide_react_1.CircleCheck, {}) : (0, jsx_runtime_1.jsx)(lucide_react_1.CircleX, {}), " \u00A0", " ", response.title] })) : null, (0, jsx_runtime_1.jsx)(react_2.Heading, { textAlign: "center", size: "lg", mb: 2, children: "Contact Us" }), (0, jsx_runtime_1.jsx)(react_2.Text, { textAlign: "center", mb: 6, color: "gray.500", children: "Fill in the form below to reach out to us." }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "form", onSubmit: handleSubmit, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }) }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: (e) => handleChange("lastName", e.target.value) }) })] }), (0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }) }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors.email, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: (e) => handleChange("email", e.target.value), error: Boolean(errors.email), errorMessage: errors.email }) })] }), customFields, (0, jsx_runtime_1.jsxs)(react_2.FormControl, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", mb: 1, children: "Enquiry" }), (0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(InputTextArea_1.default, { placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: (e) => handleChange("enquiry", e.target.value) }) })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx, isLoading: isLoading, loadingText: "Sending...", children: "Send Message" })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "2xl", boxShadow: "lg", bg: colors.background[300], children: [response.title ? ((0, jsx_runtime_1.jsxs)(react_2.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) ? (0, jsx_runtime_1.jsx)(lucide_react_1.CircleCheck, {}) : (0, jsx_runtime_1.jsx)(lucide_react_1.CircleX, {}), " \u00A0", " ", response.title] })) : null, (0, jsx_runtime_1.jsx)(react_2.Heading, { textAlign: "center", size: "lg", mb: 2, children: "Contact Us" }), (0, jsx_runtime_1.jsx)(react_2.Text, { textAlign: "center", mb: 6, color: colors.textMuted, children: "Fill in the form below to reach out to us." }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "form", onSubmit: handleSubmit, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }) }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: (e) => handleChange("lastName", e.target.value) }) })] }), (0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }) }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors.email, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: (e) => handleChange("email", e.target.value), error: Boolean(errors.email), errorMessage: errors.email }) })] }), customFields, (0, jsx_runtime_1.jsxs)(react_2.FormControl, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", mb: 1, children: "Enquiry" }), (0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(InputTextArea_1.default, { placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: (e) => handleChange("enquiry", e.target.value) }) })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx, isLoading: isLoading, loadingText: "Sending...", children: "Send Message" })] }) })] }));
 };
 exports.default = ContactForm;

package/dist/Components/CopyButton/CopyButton.js

@@ -11,7 +11,6 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, }) => {
-    var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [copied, setCopied] = (0, react_1.useState)(false);
     const timer = (0, react_1.useRef)();
@@ -33,16 +32,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 = (0, accentText_1.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 ((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 })] }));
     }
     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", 
-            // 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 ? (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 })] }));
+            // [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 ? (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 }) }) }));
 };

package/dist/Components/CustomModulesTable/CustomModulesTable.js

@@ -29,16 +29,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 } = (0, useCustomTheme_1.useCustomTheme)();
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const [editTarget, setEditTarget] = (0, react_1.useState)(null);
     const [deleteTarget, setDeleteTarget] = (0, react_1.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",
@@ -47,10 +47,7 @@ const CustomModulesTable = ({ modules, isLoading = false, isUpdating = false, is
         borderColor: border,
         py: 3,
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "sm", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => {
-                        var _a, _b;
-                        return ((0, jsx_runtime_1.jsx)(react_2.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 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleName }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleOwner }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: modules.map((item) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, children: item.moduleName }) }) }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), (0, jsx_runtime_1.jsx)(EditModuleModal_1.default, { 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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "sm", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md", startColor: colors.gray[100], endColor: colors.gray[400] }, idx))) })) : modules.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleName }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleOwner }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: modules.map((item) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, children: item.moduleName }) }) }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), (0, jsx_runtime_1.jsx)(EditModuleModal_1.default, { 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/Components/CustomModulesTable/DeleteModuleModal.js

@@ -7,10 +7,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const Button_1 = __importDefault(require("../Button/Button"));
 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 } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_1.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, " ", (0, jsx_runtime_1.jsx)(react_1.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 }), "?"] }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: colors.semantic.error[50], color: (0, accentText_1.accentTextOnCanvas)(colors.semantic.error, colors.semantic.error[50]), children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: 600, color: colors.text[800], children: moduleName }), "?"] }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) })] })] })] })] }));
 };
 exports.default = DeleteModuleModal;