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

package/dist/esm/Components/PdfViewer/PdfViewer.js

@@ -5,6 +5,6 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 const PdfViewer = ({ pdfUrl, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "xl", }) => {
     const theme = useCustomTheme();
-    return (_jsxs(Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && (_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.gray[50], children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(FileText, { size: 18, color: theme.colors.primary[500] }), _jsx(Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsx(ToolTip, { label: "Open in new tab", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] }, children: _jsx(ExternalLink, { size: 16 }) }) }), _jsx(ToolTip, { label: "Download", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, download: fileName, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] }, children: _jsx(Download, { size: 16 }) }) })] })] })), _jsx(Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
+    return (_jsxs(Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && (_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.gray[50], children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(FileText, { size: 18, color: theme.colors.accentText }), _jsx(Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsx(ToolTip, { label: "Open in new tab", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] }, children: _jsx(ExternalLink, { size: 16 }) }) }), _jsx(ToolTip, { label: "Download", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, download: fileName, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] }, children: _jsx(Download, { size: 16 }) }) })] })] })), _jsx(Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
 };
 export default PdfViewer;

package/dist/esm/Components/PinInputs/PinInputs.js

@@ -1,23 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
-import { Box, HStack, Input, useTheme } from "@chakra-ui/react";
+import { Box, HStack, Input } from "@chakra-ui/react";
 import Label from "../Common/Label.js";
 import ErrorComponent from "../Common/ErrorComponent.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 const PinInputs = ({ length = 3, label, error, onChange, onComplete, mask = false, placeholder = "*", }) => {
-    var _a, _b, _c, _d, _e;
-    const theme = useTheme();
-    const { colors } = theme;
+    const { colors } = useCustomTheme();
     const [values, setValues] = useState(Array(length).fill(""));
     const inputsRef = useRef([]);
-    // [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 borderColor = error
-        ? (_b = (_a = colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]
-        : (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[800];
-    const focusRing = error ? (_d = colors.boxShadow) === null || _d === void 0 ? void 0 : _d.error : (_e = colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary;
-    const focusShadow = focusRing
-        ? `0 0 0 0.125rem ${focusRing}`
-        : undefined;
+        ? colors.semanticText.error
+        : colors.boxborder[500];
+    const focusRing = error ? colors.boxShadow.error : colors.boxShadow.primary;
+    const focusShadow = `0 0 0 0.125rem ${focusRing}`;
     const handleChange = (index, value) => {
         var _a;
         if (!/^[0-9]?$/.test(value))
@@ -41,8 +36,6 @@ const PinInputs = ({ length = 3, label, error, onChange, onComplete, mask = fals
     };
     return (_jsxs(Box, { children: [label && _jsx(Label, { label: label }), _jsx(HStack, { spacing: 2, children: Array.from({ length }).map((_, index) => (_jsx(Input, { ref: (el) => {
                         inputsRef.current[index] = el;
-                    }, type: mask ? "password" : "text", inputMode: "numeric", maxLength: 1, placeholder: placeholder, value: values[index], onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(e, index), w: 12, h: 12, textAlign: "center", fontSize: "lg", borderWidth: "1px", borderColor: borderColor, borderRadius: "md", _focus: focusShadow
-                        ? { boxShadow: focusShadow, outline: "none" }
-                        : { outline: "none" } }, index))) }), error && _jsx(ErrorComponent, { error: error })] }));
+                    }, type: mask ? "password" : "text", inputMode: "numeric", maxLength: 1, placeholder: placeholder, value: values[index], onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(e, index), w: 12, h: 12, textAlign: "center", fontSize: "lg", borderWidth: "1px", borderColor: borderColor, borderRadius: "md", _focus: { boxShadow: focusShadow, outline: "none" } }, index))) }), error && _jsx(ErrorComponent, { error: error })] }));
 };
 export default PinInputs;

package/dist/esm/Components/PlanPill/PlanPill.js

@@ -3,7 +3,7 @@ import { Box, Flex, Text } from "@chakra-ui/react";
 import { AlertCircle, Clock, Sparkles } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { onGradient } from "../../Theme/tokens/builders/accentText.js";
-import { ACCENT_GRADIENT } from "./planPillGradient.js";
+import { chipBorder, chipFill, inkSafeGradient, statusGradient, } from "./planPillGradient.js";
 const TONE_ICON = {
     normal: Sparkles,
     warning: Clock,
@@ -13,15 +13,12 @@ const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient,
     const theme = useCustomTheme();
     const c = theme.colors;
     const toneGradient = {
-        normal: ACCENT_GRADIENT,
-        warning: { from: c.semantic.warning[400], to: c.semantic.warning[600] },
-        danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
+        normal: inkSafeGradient(c.gradient),
+        warning: statusGradient(c.semantic.warning),
+        danger: statusGradient(c.semantic.error),
     };
-    const resolved = gradient !== null && gradient !== void 0 ? gradient : toneGradient[tone];
+    const resolved = inkSafeGradient(gradient !== null && gradient !== void 0 ? gradient : toneGradient[tone]);
     const ink = onGradient(resolved.from, resolved.to, c.white, c.black);
-    // The chip is a translucent inset of the pill itself, so it tints with whichever
-    // ink won — a white wash under black text would wash the chip out entirely.
-    const onDark = ink === c.white;
     const Icon = icon === undefined ? TONE_ICON[tone] : icon;
     const hasMobile = !!mobileLabel && mobileLabel !== label;
     return (_jsxs(Box, { as: "button", type: "button", "aria-label": ariaLabel || (status ? `${label} — ${status}` : label), onClick: onClick, display: "inline-flex", alignItems: "center", gap: "7px", pl: "12px", pr: status ? "5px" : "12px", py: "3px", bgImage: `linear-gradient(135deg, ${resolved.from} 0%, ${resolved.to} 100%)`, color: ink, borderRadius: "full", whiteSpace: "nowrap", cursor: "pointer", transition: "transform 0.2s ease, box-shadow 0.2s ease", _hover: {
@@ -35,6 +32,6 @@ const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient,
                 transition: "none",
                 _hover: { transform: "none" },
             },
-        }, children: [Icon ? _jsx(Icon, { size: 12, strokeWidth: 2.5, "aria-hidden": true }) : null, _jsx(Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", overflow: "hidden", textOverflow: "ellipsis", maxW: maxLabelWidth, display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile ? (_jsx(Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", display: { base: "block", md: "none" }, children: mobileLabel })) : null, status ? (_jsx(Flex, { as: "span", align: "center", px: "8px", borderRadius: "full", bg: onDark ? "rgba(255,255,255,0.22)" : "rgba(0,0,0,0.12)", border: "1px solid", borderColor: onDark ? "rgba(255,255,255,0.28)" : "rgba(0,0,0,0.08)", fontSize: "11px", fontWeight: "700", lineHeight: "18px", sx: { fontVariantNumeric: "tabular-nums" }, children: status })) : null] }));
+        }, children: [Icon ? _jsx(Icon, { size: 12, strokeWidth: 2.5, "aria-hidden": true }) : null, _jsx(Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", overflow: "hidden", textOverflow: "ellipsis", maxW: maxLabelWidth, display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile ? (_jsx(Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", display: { base: "block", md: "none" }, children: mobileLabel })) : null, status ? (_jsx(Flex, { as: "span", align: "center", px: "8px", borderRadius: "full", bg: chipFill(resolved), border: "1px solid", borderColor: chipBorder(resolved), fontSize: "11px", fontWeight: "700", lineHeight: "18px", sx: { fontVariantNumeric: "tabular-nums" }, children: status })) : null] }));
 };
 export default PlanPill;

package/dist/esm/Components/PlanPill/planPillGradient.js

@@ -1,3 +1,6 @@
+import { resolveAvatarFill } from "../../Theme/tokens/builders/statusTone.js";
+import { relativeLuminance } from "../../Theme/tokens/builders/color.js";
+export const STATUS_INK = "#ffffff";
 /**
  * The plan badge's `normal` tone is a single fixed accent — not brand-driven, and
  * not mode-dependent.
@@ -15,3 +18,24 @@
  * Consumers who genuinely want another colour still pass `gradient`.
  */
 export const ACCENT_GRADIENT = { from: "#8B3FC8", to: "#df187a" };
+/**
+ * Sinks both stops until WHITE ink clears AA, keeping each stop's hue. Any mid-tone gradient —
+ * a brand `gradient` token, a status scale — otherwise flips `onGradient` to black ink, so the
+ * same badge reads white-on-colour in one brand and black-on-pastel in the next.
+ */
+export const inkSafeGradient = (gradient) => ({
+    from: resolveAvatarFill(gradient.from),
+    to: resolveAvatarFill(gradient.to),
+});
+/** Status tones are semantic scales, not designed as label backdrops. */
+export const statusGradient = (scale) => inkSafeGradient({ from: scale[400], to: scale[600] });
+const CHIP_INK_CONTRAST = 7;
+export const darkerStop = (g) => relativeLuminance(g.from) <= relativeLuminance(g.to) ? g.from : g.to;
+/**
+ * Solid inset chip in the pill's own hue. A translucent scrim was a guessed alpha that
+ * composited into a muddy dark lozenge on every mid-tone gradient; a derived rung reads as
+ * one step down from the pill in every brand and both modes.
+ */
+export const chipFill = (g) => resolveAvatarFill(darkerStop(g), CHIP_INK_CONTRAST);
+/** The pill's lighter stop — guaranteed lighter than `chipFill`, so it draws the inset edge. */
+export const chipBorder = (g) => relativeLuminance(g.from) > relativeLuminance(g.to) ? g.from : g.to;

package/dist/esm/Components/ProductCard/ProductPrice.js

@@ -91,20 +91,20 @@ const ProductPrice = ({ options, size, onSelect, rightSlot }) => {
     useEffect(() => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
     }, [selected, onSelect]);
-    return (_jsxs(_Fragment, { children: [isSingleOption ? (_jsx(Box, { border: "0.063rem solid", borderColor: "red.300", bg: "red.50", px: cfg.px, 
+    return (_jsxs(_Fragment, { children: [isSingleOption ? (_jsx(Box, { border: "0.063rem solid", borderColor: theme.colors.red[300], bg: theme.colors.red[50], px: cfg.px, 
                 // py={cfg.py}
-                rounded: "md", display: "inline-block", w: "100%", children: _jsx(Text, { fontSize: cfg.label, fontWeight: "medium", children: options[0].label }) })) : (_jsxs(Box, { ref: buttonRef, onClick: () => setIsOpen(!isOpen), border: "0.063rem solid", borderColor: "red.300", bg: "red.50", px: cfg.px, 
+                rounded: "md", display: "inline-block", w: "100%", children: _jsx(Text, { fontSize: cfg.label, fontWeight: "medium", children: options[0].label }) })) : (_jsxs(Box, { ref: buttonRef, onClick: () => setIsOpen(!isOpen), border: "0.063rem solid", borderColor: theme.colors.red[300], bg: theme.colors.red[50], px: cfg.px, 
                 // py={cfg.py}
-                rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [_jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "top", maxWidth: "100%", fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap", children: selected.label }) }), _jsx(Text, { fontSize: cfg.font, color: accentTextOnCanvas(theme.colors.red, theme.colors.red[50]), transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s", children: "\u25BE" })] })), !isSingleOption && isOpen && (_jsx(Portal, { children: _jsx(Box, { ref: dropdownRef, position: "fixed", top: `${dropdownPosition.top}px`, left: `${dropdownPosition.left}px`, width: `${dropdownPosition.width}px`, bg: theme.colors.background[50], border: "0.063rem solid", borderColor: "red.300", borderRadius: "md", overflow: "hidden", maxH: "13rem", overflowY: "auto", shadow: "md", zIndex: 100000, children: options.map((option) => {
+                rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [_jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "top", maxWidth: "100%", fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap", children: selected.label }) }), _jsx(Text, { fontSize: cfg.font, color: accentTextOnCanvas(theme.colors.red, theme.colors.red[50]), transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s", children: "\u25BE" })] })), !isSingleOption && isOpen && (_jsx(Portal, { children: _jsx(Box, { ref: dropdownRef, position: "fixed", top: `${dropdownPosition.top}px`, left: `${dropdownPosition.left}px`, width: `${dropdownPosition.width}px`, bg: theme.colors.background[50], border: "0.063rem solid", borderColor: theme.colors.red[300], borderRadius: "md", overflow: "hidden", maxH: "13rem", overflowY: "auto", shadow: "md", zIndex: 100000, children: options.map((option) => {
                         const discounted = getDiscountedPrice(option);
                         const isSelected = selected.var_id === option.var_id;
-                        return (_jsxs(Grid, { px: 1, py: 0.5, cursor: "pointer", bg: isSelected ? 'red.50' : theme.colors.background[50], borderLeft: isSelected ? '0.25rem solid' : '0.25rem solid transparent', borderLeftColor: isSelected ? 'red.300' : 'transparent', _hover: { bg: 'red.100' }, onClick: () => {
+                        return (_jsxs(Grid, { px: 1, py: 0.5, cursor: "pointer", bg: isSelected ? theme.colors.red[50] : theme.colors.background[50], borderLeft: isSelected ? '0.25rem solid' : '0.25rem solid transparent', borderLeftColor: isSelected ? theme.colors.red[300] : "transparent", _hover: { bg: theme.colors.red[100] }, onClick: () => {
                                 setSelected(option);
                                 setIsOpen(false);
                             }, templateColumns: { base: '1fr auto', md: '1fr auto' }, 
                             // columnGap={{ base: 2, md: 3 }}
                             // rowGap={{ base: 1.5, md: 2 }}
-                            alignItems: "center", children: [_jsx(HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0, children: _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap", children: option.label }) }) }), _jsx(Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left", children: _jsxs(HStack, { spacing: 2, align: "center", children: [option.offer > 0 && (_jsx(Badge, { bg: "green.100", color: "green.700", borderRadius: "md", px: { base: 0, md: 0.5 }, py: { base: 0, md: 0.25 }, fontWeight: "bold", fontSize: "10px", flexShrink: 0, children: isMobile ? `${option.offer}%` : `${option.offer}% OFF` })), _jsxs(Text, { fontSize: "sm", fontWeight: "bold", color: accentTextOnCanvas(theme.colors.red, isSelected ? theme.colors.red[50] : theme.colors.background[50]), whiteSpace: "nowrap", children: ["\u20B9", discounted] }), option.offer > 0 && (_jsxs(Text, { fontSize: "xs", color: "gray.500", textDecoration: "line-through", whiteSpace: "nowrap", children: ["\u20B9", option.price] }))] }) }), _jsx(Box, { gridColumn: 2, gridRow: 1, ml: { base: 0, md: 0 }, justifySelf: "end", w: { base: "0.625rem", md: "0.75rem" }, h: { base: "0.625rem", md: "0.75rem" }, minW: { base: "0.625rem", md: "0.75rem" }, borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? 'red.500' : 'gray.600', bg: theme.colors.background[50], display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "none", children: isSelected && (_jsx(Box, { w: { base: "0.25rem", md: "0.3125rem" }, h: { base: "0.25rem", md: "0.3125rem" }, bg: "red.500", borderRadius: "full" })) })] }, option.var_id));
-                    }) }) })), _jsxs(Flex, { mt: 2, w: "full", gap: 3, direction: { base: "column", md: "row" }, align: { base: "flex-start", md: "center" }, justify: { base: "flex-start", md: rightSlot ? "space-between" : "flex-start" }, children: [_jsxs(Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0, children: [selected.offer > 0 && (_jsxs(Text, { color: "gray.500", textDecoration: "line-through", children: ["\u20B9", selected.price] })), _jsxs(Text, { color: accentTextOnCanvas(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "semibold", children: ["\u20B9", getDiscountedPrice(selected)] })] }), rightSlot && (_jsx(Box, { flexShrink: 0, mt: { base: 2, md: 0 }, children: rightSlot }))] })] }));
+                            alignItems: "center", children: [_jsx(HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0, children: _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap", children: option.label }) }) }), _jsx(Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left", children: _jsxs(HStack, { spacing: 2, align: "center", children: [option.offer > 0 && (_jsx(Badge, { bg: theme.colors.green[100], color: accentTextOnCanvas(theme.colors.green, theme.colors.green[100]), borderRadius: "md", px: { base: 0, md: 0.5 }, py: { base: 0, md: 0.25 }, fontWeight: "bold", fontSize: "10px", flexShrink: 0, children: isMobile ? `${option.offer}%` : `${option.offer}% OFF` })), _jsxs(Text, { fontSize: "sm", fontWeight: "bold", color: accentTextOnCanvas(theme.colors.red, isSelected ? theme.colors.red[50] : theme.colors.background[50]), whiteSpace: "nowrap", children: ["\u20B9", discounted] }), option.offer > 0 && (_jsxs(Text, { fontSize: "xs", color: theme.colors.textMuted, textDecoration: "line-through", whiteSpace: "nowrap", children: ["\u20B9", option.price] }))] }) }), _jsx(Box, { gridColumn: 2, gridRow: 1, ml: { base: 0, md: 0 }, justifySelf: "end", w: { base: "0.625rem", md: "0.75rem" }, h: { base: "0.625rem", md: "0.75rem" }, minW: { base: "0.625rem", md: "0.75rem" }, borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? theme.colors.red[500] : theme.colors.boxborder[800], bg: theme.colors.background[50], display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "none", children: isSelected && (_jsx(Box, { w: { base: "0.25rem", md: "0.3125rem" }, h: { base: "0.25rem", md: "0.3125rem" }, bg: theme.colors.red[500], borderRadius: "full" })) })] }, option.var_id));
+                    }) }) })), _jsxs(Flex, { mt: 2, w: "full", gap: 3, direction: { base: "column", md: "row" }, align: { base: "flex-start", md: "center" }, justify: { base: "flex-start", md: rightSlot ? "space-between" : "flex-start" }, children: [_jsxs(Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0, children: [selected.offer > 0 && (_jsxs(Text, { color: theme.colors.textMuted, textDecoration: "line-through", children: ["\u20B9", selected.price] })), _jsxs(Text, { color: accentTextOnCanvas(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "semibold", children: ["\u20B9", getDiscountedPrice(selected)] })] }), rightSlot && (_jsx(Box, { flexShrink: 0, mt: { base: 2, md: 0 }, children: rightSlot }))] })] }));
 };
 export default ProductPrice;

package/dist/esm/Components/ProductCard/ProductReview.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Text, Icon } from '@chakra-ui/react';
 import { BookCheck, Star } from 'lucide-react';
+import { useCustomTheme } from '../../Theme/useCustomTheme.js';
+import { accentTextOnCanvas } from '../../Theme/tokens/builders/accentText.js';
 // The theme's `yellow` scale reverses index roles in dark mode (like every utility hue), so
 // pulling it through the theme would silently flip this decorative "filled star" from gold to
 // pale. A rating star is a universal, brand-independent gold — not something that should follow
@@ -8,12 +10,13 @@ import { BookCheck, Star } from 'lucide-react';
 // "rating gold") to pixelize-design-library if this pattern is needed elsewhere.
 const RATING_STAR_FILL = "#ECC94B";
 const ProductReview = ({ rating, reviewCount, mb = 0 }) => {
+    const { colors } = useCustomTheme();
     const hasRating = rating !== undefined && rating !== null;
     const hasReviewCount = reviewCount !== undefined && reviewCount !== null;
     // Convert rating to number and ensure it's between 0 and 5
     // Calculate fill percentage: (rating / 5) * 100%
     const numericRating = hasRating ? Math.min(Math.max(Number(rating), 0), 5) : 0;
     const fillPercentage = (numericRating / 6) * 100;
-    return (_jsxs(Flex, { align: "center", gap: 2, mb: mb, children: [hasRating && (_jsxs(Flex, { align: "center", gap: 1, bg: "teal.50", color: "teal.900", px: 2, borderRadius: "md", children: [_jsxs(Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0, children: [_jsx(Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px", children: _jsx(Star, { size: 14, fill: "none", strokeWidth: 1.5 }) }), fillPercentage > 0 && (_jsx(Box, { position: "absolute", top: 0, left: 0, width: `${fillPercentage}%`, height: "100%", overflow: "hidden", children: _jsx(Star, { size: 14, color: RATING_STAR_FILL, fill: RATING_STAR_FILL }) }))] }), _jsx(Text, { fontSize: "sm", fontWeight: "bold", children: numericRating })] })), hasRating && hasReviewCount && _jsx(Box, { h: "4", w: "0.063rem", bg: "gray.400" }), hasReviewCount && (_jsxs(Flex, { align: "center", gap: "1", children: [_jsx(Icon, { as: BookCheck, boxSize: 3.5 }), _jsxs(Text, { fontSize: "sm", color: "gray.600", children: ["(", reviewCount, ")"] })] }))] }));
+    return (_jsxs(Flex, { align: "center", gap: 2, mb: mb, children: [hasRating && (_jsxs(Flex, { align: "center", gap: 1, bg: colors.teal[50], color: accentTextOnCanvas(colors.teal, colors.teal[50]), px: 2, borderRadius: "md", children: [_jsxs(Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0, children: [_jsx(Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px", children: _jsx(Star, { size: 14, fill: "none", strokeWidth: 1.5 }) }), fillPercentage > 0 && (_jsx(Box, { position: "absolute", top: 0, left: 0, width: `${fillPercentage}%`, height: "100%", overflow: "hidden", children: _jsx(Star, { size: 14, color: RATING_STAR_FILL, fill: RATING_STAR_FILL }) }))] }), _jsx(Text, { fontSize: "sm", fontWeight: "bold", children: numericRating })] })), hasRating && hasReviewCount && _jsx(Box, { h: "4", w: "0.063rem", bg: colors.boxborder[500] }), hasReviewCount && (_jsxs(Flex, { align: "center", gap: "1", children: [_jsx(Icon, { as: BookCheck, boxSize: 3.5 }), _jsxs(Text, { fontSize: "sm", color: colors.textMuted, children: ["(", reviewCount, ")"] })] }))] }));
 };
 export default ProductReview;

package/dist/esm/Components/ProductCard/ProductTags.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Box, Flex, useTheme } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import ToolTip from '../ToolTip/ToolTip.js';
+import { useCustomTheme } from '../../Theme/useCustomTheme.js';
 const ProductTags = ({ tags, className, size = 'sm' }) => {
     const getRows = (tags) => {
         const count = tags.length;
@@ -18,10 +19,9 @@ const ProductTags = ({ tags, className, size = 'sm' }) => {
     return (_jsx(Flex, { direction: "column", gap: "1", className: className, w: "full", children: getRows(tags).map((row, rowIndex) => (_jsx(Flex, { gap: "1", children: row.map((tag, tagIndex) => (_jsx(Tag, { fullWidth: row.length === 1, size: size, children: tag }, tagIndex))) }, rowIndex))) }));
 };
 const Tag = ({ children, fullWidth = false, size = 'sm', }) => {
-    var _a, _b, _c, _d;
-    const theme = useTheme();
-    const tagBorder = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = theme.colors.red) === null || _d === void 0 ? void 0 : _d[200];
-    const tagText = theme.colors.text[900];
+    const { colors } = useCustomTheme();
+    const tagBorder = colors.semanticText.error;
+    const tagText = colors.text[900];
     // Size map for tags
     const tagSizes = {
         xs: { fontSize: '0.625rem', px: '0.5rem', py: '0.125rem' },

package/dist/esm/Components/ProductDetails/ProductDetails.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Box, Flex, Text, HStack, IconButton, useBreakpointValue } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import ProductImageSlider from "./ProductImageSlider.js";
 import ProductLabel from "../ProductCard/ProductLabel.js";
 import ProductTags from "../ProductCard/ProductTags.js";
@@ -11,6 +12,7 @@ import ProductReview from "../ProductCard/ProductReview.js";
 import FormattedDescription from "../Common/FormattedDescription.js";
 const ProductDetails = ({ id, price, label, shortdesc, tags, images, batch, onAddToCart, onNotifyMe, onOptionChange, addToCart, goToCart, OnGoToCart, rating, reviews, notifyMe, isQtyEditable = false, displayRating = true, }) => {
     var _a, _b, _c, _d, _e;
+    const { colors } = useCustomTheme();
     const isMobile = useBreakpointValue({ base: true, md: false });
     const [selectedOption, setSelectedOption] = React.useState(price === null || price === void 0 ? void 0 : price[0]);
     const [qty, setQty] = React.useState(1);
@@ -29,7 +31,7 @@ const ProductDetails = ({ id, price, label, shortdesc, tags, images, batch, onAd
     const handleDecrement = () => {
         setQty((prev) => (prev > 1 ? prev - 1 : 1));
     };
-    return (_jsxs(Flex, { direction: ["column", "row"], maxW: "6xl", mx: "auto", align: "start", gap: 5, children: [_jsx(Box, { position: "relative", color: "white", borderRadius: "md", flex: "1", minH: isMobile ? undefined : "31.25rem", children: _jsx(ProductImageSlider, { images: images, thumbHeight: isMobile ? 48 : 80, imageSize: isMobile ? 360 : 480, thumbnailsToShow: isMobile ? 4 : 6, batch: batch }) }), _jsxs(Box, { flex: "1", children: [label && _jsx(ProductLabel, { label: label, size: "sm" }), shortdesc && _jsx(Box, { my: 3, children: _jsx(FormattedDescription, { content: shortdesc }) }), ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)) && displayRating && (_jsx(ProductReview, { rating: rating, reviewCount: reviews, mb: 3 })), tags && _jsx(ProductTags, { tags: tags, size: "sm" }), price && (_jsx(ProductDtlPrice, { price: price, onSelect: (option) => {
+    return (_jsxs(Flex, { direction: ["column", "row"], maxW: "6xl", mx: "auto", align: "start", gap: 5, children: [_jsx(Box, { position: "relative", color: colors.text[500], borderRadius: "md", flex: "1", minH: isMobile ? undefined : "31.25rem", children: _jsx(ProductImageSlider, { images: images, thumbHeight: isMobile ? 48 : 80, imageSize: isMobile ? 360 : 480, thumbnailsToShow: isMobile ? 4 : 6, batch: batch }) }), _jsxs(Box, { flex: "1", children: [label && _jsx(ProductLabel, { label: label, size: "sm" }), shortdesc && _jsx(Box, { my: 3, children: _jsx(FormattedDescription, { content: shortdesc }) }), ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)) && displayRating && (_jsx(ProductReview, { rating: rating, reviewCount: reviews, mb: 3 })), tags && _jsx(ProductTags, { tags: tags, size: "sm" }), price && (_jsx(ProductDtlPrice, { price: price, onSelect: (option) => {
                             setSelectedOption(option);
                             onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
                         } })), typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _a !== void 0 ? _a : 0) <= 0 && (_jsx(Box, { sx: { ml: "1.1rem", mt: "0.5rem", mb: "0.5rem" }, children: _jsx(Button, { colorScheme: "gray", size: "sm", 

package/dist/esm/Components/ProductDetails/ProductDtlPrice.js

@@ -11,12 +11,12 @@ const ProductDtlPrice = ({ price, onSelect }) => {
     useEffect(() => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
     }, [selected, onSelect]);
-    return (_jsxs(VStack, { align: "start", spacing: 3, p: 4, borderRadius: "md", w: "full", children: [_jsxs(HStack, { spacing: 2, align: "center", children: [selected.offer > 0 && (_jsxs(Text, { fontSize: "lg", color: theme.colors.gray[500], as: "s", children: ["\u20B9", selected.price] })), _jsxs(Text, { fontSize: "xl", color: accentTextOnCanvas(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "bold", children: ["\u20B9", discounted] }), selected.offer > 0 && (_jsxs(Badge, { colorScheme: "pink", fontSize: "xs", borderRadius: "sm", px: 2, py: 0.5, children: ["SAVE ", selected.offer, "%"] }))] }), _jsx(Text, { fontSize: "sm", color: theme.colors.gray[600], children: "(Incl. of all taxes)" }), _jsxs(Box, { children: [_jsxs(Text, { fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", mb: 1, children: ["Packs : ", selected.label] }), _jsx(HStack, { spacing: 2, children: price.map((pack, idx) => (_jsx(Button, { size: "xs", variant: "outline", borderColor: idx === selectedIndex ? "orange.400" : "orange.200", bg: idx === selectedIndex ? "orange.50" : theme.colors.background[50], 
+    return (_jsxs(VStack, { align: "start", spacing: 3, p: 4, borderRadius: "md", w: "full", children: [_jsxs(HStack, { spacing: 2, align: "center", children: [selected.offer > 0 && (_jsxs(Text, { fontSize: "lg", color: theme.colors.textMuted, as: "s", children: ["\u20B9", selected.price] })), _jsxs(Text, { fontSize: "xl", color: accentTextOnCanvas(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "bold", children: ["\u20B9", discounted] }), selected.offer > 0 && (_jsxs(Badge, { colorScheme: "pink", fontSize: "xs", borderRadius: "sm", px: 2, py: 0.5, children: ["SAVE ", selected.offer, "%"] }))] }), _jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, children: "(Incl. of all taxes)" }), _jsxs(Box, { children: [_jsxs(Text, { fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", mb: 1, children: ["Packs : ", selected.label] }), _jsx(HStack, { spacing: 2, children: price.map((pack, idx) => (_jsx(Button, { size: "xs", variant: "outline", borderColor: idx === selectedIndex ? theme.colors.orange[400] : theme.colors.orange[200], bg: idx === selectedIndex ? theme.colors.orange[50] : theme.colors.background[50], 
                             // orange.600 fails AA against both possible bg states — walk the scale per canvas
                             color: accentTextOnCanvas(theme.colors.orange, idx === selectedIndex ? theme.colors.orange[50] : theme.colors.background[50]), borderRadius: "md", fontWeight: "medium", _hover: {
-                                bg: "orange.100",
+                                bg: theme.colors.orange[100],
                             }, _active: {
-                                bg: "orange.100",
+                                bg: theme.colors.orange[100],
                             }, onClick: () => setSelectedIndex(idx), children: pack.label }, pack.var_id))) })] })] }));
 };
 export default ProductDtlPrice;

package/dist/esm/Components/ProfileCard/ProfileCard.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Card as ChakraCard, CardBody, CardFooter, CardHeader, Divider, useTheme, } from "@chakra-ui/react";
+import { Card as ChakraCard, CardBody, CardFooter, CardHeader, Divider, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 export const ProfileCardHeader = ({ children, }) => {
     return _jsx(_Fragment, { children: children });
 };
@@ -11,10 +12,9 @@ export const ProfileCardFooter = ({ children, }) => {
     return _jsx(_Fragment, { children: children });
 };
 export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize = "0.5px", dividervariant = "solid", CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }) {
-    var _a, _b, _c, _d;
-    const theme = useTheme();
-    const resolvedDividerColor = (_b = dividercolor !== null && dividercolor !== void 0 ? dividercolor : (_a = theme.colors.border) === null || _a === void 0 ? void 0 : _a[400]) !== null && _b !== void 0 ? _b : (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[300];
-    const accentBorder = `2px solid ${(_d = theme.colors.primary) === null || _d === void 0 ? void 0 : _d[500]}`;
+    const { colors } = useCustomTheme();
+    const resolvedDividerColor = dividercolor !== null && dividercolor !== void 0 ? dividercolor : colors.border[400];
+    const accentBorder = `2px solid ${colors.primary[500]}`;
     const isReactElement = (child) => {
         return child !== null && typeof child === "object" && "type" in child;
     };

package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -3,13 +3,13 @@ import { useRef, useState } from "react";
 import { Box, Image, IconButton, Input, Text, Tooltip, HStack, } from "@chakra-ui/react";
 import { Eye, FileText, SquarePen, User } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { DEFAULT_WHITE } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
 export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", imageAlt = "Profile Photo", imageObjectFit = "cover", imageBorderRadius = "full", editIconSize = "sm", editIconPositionRight = "0px", editIconPositionBottom = "0px", isRound = true, boxStyle, isEditable = false, isView = false, style, handleIsView, fallbackText, revealOnHover = true, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    var _a, _b, _c, _d, _e;
     const [photo, setPhoto] = useState(photoUrl);
     const fileInputRef = useRef(null);
     const theme = useCustomTheme();
-    const c = (_a = theme.colors) !== null && _a !== void 0 ? _a : {};
+    const c = theme.colors;
     const handlePhotoChange = (event) => {
         var _a;
         if (!isEditable)
@@ -35,37 +35,40 @@ export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth
     // [800], not [300]: the edit IconButton's border is a control boundary — WCAG 1.4.11 needs
     // >=3.0 against any named surface up to `muted` (lightest); [300] fails there, [800] clears
     // all with margin.
-    const border = (_c = (_b = c.boxborder) === null || _b === void 0 ? void 0 : _b[800]) !== null && _c !== void 0 ? _c : (_d = c.gray) === null || _d === void 0 ? void 0 : _d[200];
+    const border = c.boxborder[800];
     // Shared modern frame for whichever media we render (photo / pdf / fallback).
     const mediaFrame = {
         boxSize: imageWidth,
         borderRadius: imageBorderRadius,
         border: `0.063rem solid ${border}`,
-        boxShadow: (_e = theme.shadows) === null || _e === void 0 ? void 0 : _e.sm,
+        boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.sm,
     };
     const renderMedia = () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         if (photo) {
-            return isPdf ? (_jsx(Box, { ...mediaFrame, bg: (_b = (_a = c.gray) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "gray.100", color: (_c = c.gray) === null || _c === void 0 ? void 0 : _c[500], display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", children: _jsx(FileText, { size: "45%" }) })) : (_jsx(Image, { src: photo, alt: imageAlt, objectFit: imageObjectFit, ...mediaFrame }));
+            return isPdf ? (_jsx(Box, { ...mediaFrame, bg: c.gray[100], color: accentTextOnCanvas(c.gray, c.gray[100]), display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", children: _jsx(FileText, { size: "45%" }) })) : (_jsx(Image, { src: photo, alt: imageAlt, objectFit: imageObjectFit, ...mediaFrame }));
         }
         // Fallback: branded tinted avatar (initials or user glyph).
-        return (_jsx(Box, { ...mediaFrame, display: "flex", alignItems: "center", justifyContent: "center", bg: (_f = (_e = (_d = c.primary) === null || _d === void 0 ? void 0 : _d.opacity) === null || _e === void 0 ? void 0 : _e[16]) !== null && _f !== void 0 ? _f : (_g = c.gray) === null || _g === void 0 ? void 0 : _g[100], color: (_j = (_h = c.primary) === null || _h === void 0 ? void 0 : _h[600]) !== null && _j !== void 0 ? _j : (_k = c.gray) === null || _k === void 0 ? void 0 : _k[500], children: fallbackText ? (_jsx(Text, { fontSize: "1.75rem", fontWeight: 700, lineHeight: "1", children: fallbackText })) : (_jsx(User, { size: "48%" })) }));
+        return (_jsx(Box, { ...mediaFrame, display: "flex", alignItems: "center", justifyContent: "center", bg: c.primary.opacity[16], color: accentTextOnCanvas(c.primary, c.backgroundColor.main), children: fallbackText ? (_jsx(Text, { fontSize: "1.75rem", fontWeight: 700, lineHeight: "1", children: fallbackText })) : (_jsx(User, { size: "48%" })) }));
     };
     const hasActions = isEditable || isView;
     return (_jsxs(Box, { position: "relative", display: "inline-block", style: boxStyle, borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", sx: {
             "&:hover .ppv-overlay": { opacity: 1 },
             "&:hover .ppv-actions": { opacity: 1 },
             "&:hover .ppv-media": {
-                boxShadow: `0 0 0 0.1875rem ${(_h = (_g = (_f = c.primary) === null || _f === void 0 ? void 0 : _f.opacity) === null || _g === void 0 ? void 0 : _g[24]) !== null && _h !== void 0 ? _h : "transparent"}`,
+                boxShadow: `0 0 0 0.1875rem ${c.primary.opacity[24]}`,
             },
-        }, children: [_jsx(Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", children: renderMedia() }), hasActions && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }), _jsxs(HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease", children: [isEditable && (_jsx(Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: (_j = c.primary) === null || _j === void 0 ? void 0 : _j[500], color: (_k = c.white) !== null && _k !== void 0 ? _k : DEFAULT_WHITE, border: `0.125rem solid ${(_l = c.white) !== null && _l !== void 0 ? _l : DEFAULT_WHITE}`, boxShadow: (_m = theme.shadows) === null || _m === void 0 ? void 0 : _m.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
-                                        bg: (_o = c.primary) === null || _o === void 0 ? void 0 : _o[600],
+        }, children: [_jsx(Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", children: renderMedia() }), hasActions && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }), _jsxs(HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease", children: [isEditable && (_jsx(Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: c.primary[500], color: onFilled(c.primary[500], c.white, c.black), border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
+                                        bg: c.primary[600],
+                                        color: onFilled(c.primary[600], c.white, c.black),
                                         transform: "scale(1.1)",
-                                        boxShadow: (_p = theme.shadows) === null || _p === void 0 ? void 0 : _p.lg,
-                                    }, _active: { bg: (_q = c.primary) === null || _q === void 0 ? void 0 : _q[700] } }) })), isView && (_jsx(Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: (_s = (_r = c.background) === null || _r === void 0 ? void 0 : _r[50]) !== null && _s !== void 0 ? _s : DEFAULT_WHITE, color: (_t = c.gray) === null || _t === void 0 ? void 0 : _t[700], border: `0.063rem solid ${border}`, boxShadow: (_u = theme.shadows) === null || _u === void 0 ? void 0 : _u.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
-                                        bg: (_v = c.gray) === null || _v === void 0 ? void 0 : _v[50],
-                                        color: (_w = c.primary) === null || _w === void 0 ? void 0 : _w[600],
+                                        boxShadow: (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.lg,
+                                    }, _active: {
+                                        bg: c.primary[700],
+                                        color: onFilled(c.primary[700], c.white, c.black),
+                                    } }) })), isView && (_jsx(Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `0.063rem solid ${border}`, boxShadow: (_d = theme.shadows) === null || _d === void 0 ? void 0 : _d.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
+                                        bg: c.gray[50],
+                                        color: accentTextOnCanvas(c.primary, c.gray[50]),
                                         transform: "scale(1.1)",
-                                        boxShadow: (_x = theme.shadows) === null || _x === void 0 ? void 0 : _x.lg,
-                                    }, _active: { bg: (_y = c.gray) === null || _y === void 0 ? void 0 : _y[100] } }) }))] }), isEditable && (_jsx(Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))] }))] }));
+                                        boxShadow: (_e = theme.shadows) === null || _e === void 0 ? void 0 : _e.lg,
+                                    }, _active: { bg: c.gray[100] } }) }))] }), isEditable && (_jsx(Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))] }))] }));
 }

package/dist/esm/Components/Reorder/Reorder.js

@@ -4,7 +4,6 @@ import { DragDropContext, Droppable, Draggable, } from "@hello-pangea/dnd";
 import { BetweenHorizonalStart, GripVertical, X } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 const ReorderList = ({ label = "", items, onReorder, showRemoveIcon = false, onRemove, }) => {
-    var _a;
     const { colors } = useCustomTheme();
     const handleDragEnd = (result) => {
         if (!result.destination)
@@ -14,9 +13,9 @@ const ReorderList = ({ label = "", items, onReorder, showRemoveIcon = false, onR
         reordered.splice(result.destination.index, 0, moved);
         onReorder(reordered);
     };
-    return (_jsxs(Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(BetweenHorizonalStart, {}), _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: label })] }), _jsx(Divider, {}), _jsx("br", {}), _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "item-list", direction: "horizontal", children: (provided) => (_jsxs(HStack, { ref: provided.innerRef, ...provided.droppableProps, spacing: 4, overflowX: "auto", children: [items.map((item, index) => (_jsx(Draggable, { draggableId: item.id, index: index, children: (provided) => {
-                                    var _a, _b, _c, _d;
-                                    return (_jsxs(Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, position: "relative", border: "0.063rem solid", borderColor: (_a = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _a === void 0 ? void 0 : _a[300], borderRadius: "md", overflow: "hidden", children: [_jsx(Image, { src: item.previewUrl, alt: (_b = item.name) !== null && _b !== void 0 ? _b : `item-${index}`, boxSize: "7.5rem", objectFit: "cover" }), _jsx(IconButton, { icon: _jsx(GripVertical, { size: 16, color: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[500] }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }), _jsx(Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1, children: index + 1 }), showRemoveIcon && (_jsx(IconButton, { icon: _jsx(X, { size: 16, color: (_d = colors === null || colors === void 0 ? void 0 : colors.red) === null || _d === void 0 ? void 0 : _d[500] }), "aria-label": "Remove", size: "sm", position: "absolute", top: 1, right: 1, variant: "ghost", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(item.id) }))] }));
+    return (_jsxs(Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(BetweenHorizonalStart, {}), _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: label })] }), _jsx(Divider, {}), _jsx("br", {}), _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "item-list", direction: "horizontal", children: (provided) => (_jsxs(HStack, { ref: provided.innerRef, ...provided.droppableProps, spacing: 4, overflowX: "auto", children: [items.map((item, index) => (_jsx(Draggable, { draggableId: item.id, index: index, children: (provided) => {
+                                    var _a;
+                                    return (_jsxs(Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, position: "relative", border: "0.063rem solid", borderColor: colors.boxborder[300], borderRadius: "md", overflow: "hidden", children: [_jsx(Image, { src: item.previewUrl, alt: (_a = item.name) !== null && _a !== void 0 ? _a : `item-${index}`, boxSize: "7.5rem", objectFit: "cover" }), _jsx(IconButton, { icon: _jsx(GripVertical, { size: 16, color: colors.textMuted }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }), _jsx(Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1, children: index + 1 }), showRemoveIcon && (_jsx(IconButton, { icon: _jsx(X, { size: 16, color: colors.semanticText.error }), "aria-label": "Remove", size: "sm", position: "absolute", top: 1, right: 1, variant: "ghost", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(item.id) }))] }));
                                 } }, item.id))), provided.placeholder] })) }) })] }));
 };
 export default ReorderList;

package/dist/esm/Components/RolesPermission/DeleteRoleModal.js

@@ -2,12 +2,13 @@ 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 { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
 import Button from "../Button/Button.js";
 const DeleteRoleModal = ({ isOpen, onClose, onConfirm, isLoading, labels, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { colors } = useCustomTheme();
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], borderRadius: "2xl", overflow: "hidden", 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", 
-                                // Pale badge bg: `red` reverses in dark; `semantic.error` is lifted and would stay near-white.
-                                bg: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[50], color: (_h = (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _f === void 0 ? void 0 : _f.error) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : (_j = colors === null || colors === void 0 ? void 0 : colors.red) === null || _j === void 0 ? void 0 : _j[500], children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.deleteRole })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Text, { color: (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[600], fontSize: "sm", mb: 5, children: labels.deleteRoleConfirm }), _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 }) })] })] })] })] }));
+    const mode = isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light";
+    const errorTone = resolveStatusTone(colors.semantic.error, mode);
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", 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: errorTone.bg, color: errorTone.fg, children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.deleteRole })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: labels.deleteRoleConfirm }), _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 DeleteRoleModal;

package/dist/esm/Components/RolesPermission/RolesPermission.js

@@ -3,6 +3,7 @@ import { useMemo, useState } from "react";
 import { Badge, Box, Checkbox, Divider, Flex, Heading, HStack, IconButton, Skeleton, Table, Tbody, Td, Text, Th, Thead, Tooltip, Tr, VStack, } from "@chakra-ui/react";
 import { ArrowLeft, Check, Pencil, Plus, ShieldCheck, SquareArrowOutUpRight, Trash2, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import Button from "../Button/Button.js";
 import TextInput from "../Input/TextInput.js";
 import EmptyState from "../EmptyState/EmptyState.js";
@@ -51,15 +52,15 @@ const DEFAULT_KEYS = [
     "export",
 ];
 const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false, permissions, permissionKeys = DEFAULT_KEYS, roleName, roleNameError, isSuperAdmin, isTrackLocation, isShowRecords, isEditing = false, isSaving = false, onNewRole, onViewRole, onEditRole, onDeleteRole, onBack, onRoleNameChange, onToggleSuperAdmin, onToggleTrackLocation, onToggleShowRecords, onPermissionChange, onSave, onCancelForm, footerSlot, checkIcon, labels: labelOverrides, padding = "16px", }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { colors } = useCustomTheme();
     const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const [deleteId, setDeleteId] = 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 = (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[50];
-    const muted = (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[500];
-    const heading = (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[800];
-    const headBg = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[50];
+    const border = colors.boxborder[200];
+    const surface = colors.background[50];
+    const muted = colors.textMuted;
+    const heading = colors.text[900];
+    const headBg = colors.gray[50];
+    const rowHover = resolveHoverTint(colors.gray[50], surface);
     const isViewMode = mode === "view";
     const columnLabels = {
         read: labels.read,
@@ -92,18 +93,15 @@ const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false,
         borderColor: border,
         py: 3,
     };
-    const renderGrantedCheck = () => {
-        var _a;
-        return checkIcon !== null && checkIcon !== void 0 ? checkIcon : (_jsx(Box, { color: (_a = colors === null || colors === void 0 ? void 0 : colors.green) === null || _a === void 0 ? void 0 : _a[500], display: "inline-flex", children: _jsx(Check, { size: 18, strokeWidth: 3 }) }));
-    };
+    const renderGrantedCheck = () => checkIcon !== null && checkIcon !== void 0 ? checkIcon : (_jsx(Box, { color: colors.semanticText.success, display: "inline-flex", children: _jsx(Check, { size: 18, strokeWidth: 3 }) }));
     const renderListView = () => (_jsxs(VStack, { align: "stretch", spacing: 4, children: [_jsxs(Box, { ...cardSx, children: [_jsxs(Flex, { ...cardHeaderSx, alignItems: "center", justifyContent: "space-between", children: [_jsxs(HStack, { spacing: 2, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 16 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })), _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }), !isRolesLoading && (_jsxs(Badge, { colorScheme: "blue", variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", textTransform: "none", children: [labels.totalRoles, ": ", roles.length] }))] }), _jsx(Button, { label: labels.newRole, onClick: onNewRole, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", leftIcon: _jsx(Plus, { size: 15 }) })] }), _jsx(Box, { overflowX: "auto", children: isRolesLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 6 }).map((_, idx) => (_jsx(Skeleton, { height: "18px", borderRadius: "md" }, idx))) })) : roles.length === 0 ? (_jsx(EmptyState, { icon: ShieldCheck, title: labels.noRoles, size: "sm", minH: "200px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, width: "56px", children: labels.sNo }), _jsx(Th, { ...thStyle, children: labels.roleNameColumn }), _jsx(Th, { ...thStyle, children: labels.createdBy }), _jsx(Th, { ...thStyle, children: labels.createdTime }), _jsx(Th, { ...thStyle, textAlign: "right", children: labels.actions })] }) }), _jsx(Tbody, { children: roles.map((role, index) => {
-                                        var _a, _b;
-                                        return (_jsxs(Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: border, color: muted, fontSize: "sm", children: index + 1 }), _jsx(Td, { borderColor: border, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontSize: "sm", fontWeight: 600, color: heading, children: role.roleName }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: role.createdBy }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: role.created_at }), _jsx(Td, { borderColor: border, children: _jsxs(HStack, { spacing: 1, justifyContent: "flex-end", children: [_jsx(Tooltip, { label: labels.view, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquareArrowOutUpRight, { size: 15 }), "aria-label": labels.view, variant: "ghost", size: "xs", color: muted, onClick: () => onViewRole === null || onViewRole === void 0 ? void 0 : onViewRole(role) }) }), _jsx(Tooltip, { label: labels.edit, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Pencil, { size: 15 }), "aria-label": labels.edit, variant: "ghost", size: "xs", color: muted, onClick: () => onEditRole === null || onEditRole === void 0 ? void 0 : onEditRole(role) }) }), _jsx(Tooltip, { label: labels.delete, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Trash2, { size: 15 }), "aria-label": labels.delete, variant: "ghost", size: "xs", colorScheme: "red", color: (_a = colors === null || colors === void 0 ? void 0 : colors.red) === null || _a === void 0 ? void 0 : _a[400], onClick: () => setDeleteId(Number(role.roles_id)) }) })] }) })] }, (_b = role.roles_id) !== null && _b !== void 0 ? _b : role.roleName));
+                                        var _a;
+                                        return (_jsxs(Tr, { _hover: { bg: rowHover }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: border, color: muted, fontSize: "sm", children: index + 1 }), _jsx(Td, { borderColor: border, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontSize: "sm", fontWeight: 600, color: heading, children: role.roleName }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: role.createdBy }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: role.created_at }), _jsx(Td, { borderColor: border, children: _jsxs(HStack, { spacing: 1, justifyContent: "flex-end", children: [_jsx(Tooltip, { label: labels.view, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquareArrowOutUpRight, { size: 15 }), "aria-label": labels.view, variant: "ghost", size: "xs", color: muted, onClick: () => onViewRole === null || onViewRole === void 0 ? void 0 : onViewRole(role) }) }), _jsx(Tooltip, { label: labels.edit, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Pencil, { size: 15 }), "aria-label": labels.edit, variant: "ghost", size: "xs", color: muted, onClick: () => onEditRole === null || onEditRole === void 0 ? void 0 : onEditRole(role) }) }), _jsx(Tooltip, { label: labels.delete, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Trash2, { size: 15 }), "aria-label": labels.delete, variant: "ghost", size: "xs", colorScheme: "red", color: colors.semanticText.error, onClick: () => setDeleteId(Number(role.roles_id)) }) })] }) })] }, (_a = role.roles_id) !== null && _a !== void 0 ? _a : role.roleName));
                                     }) })] })) })] }), footerSlot] }));
     const renderFormView = () => (_jsxs(VStack, { align: "stretch", spacing: 4, children: [_jsxs(Box, { ...cardSx, children: [_jsxs(Flex, { ...cardHeaderSx, alignItems: "center", gap: 2, children: [onCancelForm && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 16 }), variant: "ghost", size: "xs", color: muted, onClick: onCancelForm })), _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.roleInformation })] }), _jsxs(Box, { p: 4, children: [_jsx(Box, { maxW: "320px", children: _jsx(Tooltip, { label: isViewMode ? labels.readOnly : "", isDisabled: !isViewMode, children: _jsx(Box, { children: _jsx(TextInput, { label: labels.roleName, value: roleName, placeholder: labels.roleNamePlaceholder, error: !!roleNameError, errorMessage: roleNameError, onChange: (e) => onRoleNameChange === null || onRoleNameChange === void 0 ? void 0 : onRoleNameChange(e.target.value), isRequired: true, width: "100%", isDisabled: isViewMode }) }) }) }), _jsxs(VStack, { align: "stretch", spacing: 3, mt: 4, children: [_jsx(Checkbox, { isChecked: isSuperAdmin, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleSuperAdmin === null || onToggleSuperAdmin === void 0 ? void 0 : onToggleSuperAdmin(e.target.checked), children: _jsx(Text, { fontSize: "sm", color: heading, children: labels.enableAllPermissions }) }), _jsx(Checkbox, { isChecked: isTrackLocation, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleTrackLocation === null || onToggleTrackLocation === void 0 ? void 0 : onToggleTrackLocation(e.target.checked), children: _jsx(Text, { fontSize: "sm", color: heading, children: labels.trackLocation }) }), _jsx(Checkbox, { isChecked: isShowRecords, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleShowRecords === null || onToggleShowRecords === void 0 ? void 0 : onToggleShowRecords(e.target.checked), children: _jsx(Text, { fontSize: "sm", color: heading, children: labels.showAllUserRecords }) })] })] })] }), _jsxs(Box, { ...cardSx, children: [_jsx(Flex, { ...cardHeaderSx, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.permissionSettings }) }), _jsx(Box, { overflowX: "auto", children: _jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.moduleName }), permissionKeys.map((key) => (_jsx(Th, { ...thStyle, textAlign: "center", children: columnLabels[key] }, key)))] }) }), _jsx(Tbody, { children: permissions.length === 0 ? (_jsx(Tr, { children: _jsx(Td, { colSpan: permissionKeys.length + 1, textAlign: "center", borderColor: border, children: _jsx(Text, { color: muted, fontSize: "sm", py: 4, children: labels.noPermissions }) }) })) : (permissions.map((perm) => {
                                         var _a;
                                         const isAutomationModule = ((_a = perm.module) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "automation";
-                                        return (_jsxs(Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: border, color: heading, fontSize: "sm", fontWeight: 500, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: perm.module }), permissionKeys.map((key) => {
+                                        return (_jsxs(Tr, { _hover: { bg: rowHover }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: border, color: heading, fontSize: "sm", fontWeight: 500, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: perm.module }), permissionKeys.map((key) => {
                                                     const isRead = key === "read";
                                                     return (_jsx(Td, { textAlign: "center", borderColor: border, children: _jsx(Flex, { justify: "center", children: isViewMode ? (isAutomationModule ? (isRead &&
                                                                 perm.automation &&
@@ -112,7 +110,7 @@ const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false,
                                                                     : perm[key], isDisabled: isAutomationModule && !isRead, onChange: () => onPermissionChange === null || onPermissionChange === void 0 ? void 0 : onPermissionChange(perm.module, isAutomationModule ? "automation" : key) })) }) }, key));
                                                 })] }, perm.module));
                                     })) })] }) }), !isViewMode && (_jsxs(_Fragment, { children: [_jsx(Divider, { borderColor: border }), _jsxs(Flex, { justifyContent: "flex-end", gap: 3, p: 4, children: [_jsx(Button, { onClick: onCancelForm, size: "sm", sx: { fontSize: "xs" }, label: labels.cancel, colorScheme: "red", variant: "outline" }), _jsx(Button, { onClick: onSave, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", isLoading: isSaving, label: isEditing ? labels.updateChanges : labels.saveChanges })] })] }))] })] }));
-    return (_jsxs(Box, { p: padding, backgroundColor: (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[50], minHeight: "100%", children: [view === "list" ? renderListView() : renderFormView(), _jsx(DeleteRoleModal, { isOpen: deleteId !== null, onClose: () => setDeleteId(null), onConfirm: () => {
+    return (_jsxs(Box, { p: padding, backgroundColor: colors.backgroundColor.main, minHeight: "100%", children: [view === "list" ? renderListView() : renderFormView(), _jsx(DeleteRoleModal, { isOpen: deleteId !== null, onClose: () => setDeleteId(null), onConfirm: () => {
                     if (deleteId !== null)
                         onDeleteRole === null || onDeleteRole === void 0 ? void 0 : onDeleteRole(deleteId);
                     setDeleteId(null);

package/dist/esm/Components/ScrollToTop/ScrollToTop.js

@@ -6,7 +6,6 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
 const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300, duration = 600, useWindow = false, bottom = "2rem", right = "2rem", }) => {
-    var _a;
     const [visible, setVisible] = useState(false);
     const anchorRef = useRef(null);
     const theme = useCustomTheme();
@@ -58,8 +57,8 @@ const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [useWindow, threshold]);
-    return (_jsxs(Box, { ref: anchorRef, position: "relative", children: [children, _jsx(ToolTip, { label: tooltipLabel, placement: "left", children: _jsx(Box, { as: "button", type: "button", onClick: scrollToTop, "aria-label": tooltipLabel, border: "none", position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: theme.colors.primary[500], color: theme.colors.white, boxShadow: "md", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: "all 0.25s cubic-bezier(0.16, 1, 0.3, 1)", _hover: {
-                        bg: (_a = theme.colors.primary[600]) !== null && _a !== void 0 ? _a : theme.colors.primary[500],
+    return (_jsxs(Box, { ref: anchorRef, position: "relative", children: [children, _jsx(ToolTip, { label: tooltipLabel, placement: "left", children: _jsx(Box, { as: "button", type: "button", onClick: scrollToTop, "aria-label": tooltipLabel, border: "none", position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: theme.colors.primary[500], color: theme.colors.onPrimary, boxShadow: "md", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: "all 0.25s cubic-bezier(0.16, 1, 0.3, 1)", _hover: {
+                        bg: theme.colors.primary[600],
                         transform: "translateY(-2px) scale(1.05)",
                         boxShadow: "lg",
                     }, _active: { transform: "scale(0.95)" }, children: _jsx(ChevronUp, { size: 24, strokeWidth: 2.5 }) }) })] }));