pixelize-design-library 2.4.2-beta.25 → 2.4.2-beta.27

package/dist/Components/Accordion/Accordion.js

@@ -6,6 +6,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const accordionColors_1 = require("./accordionColors");
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -14,13 +15,14 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
     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]);
+    const focusRing = (0, react_1.useMemo)(() => (0, outlineRung_1.liftToContrast)(colors.primary[300], colors.background[50], outlineRung_1.AA_NON_TEXT), [colors]);
     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;
             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[200] }, ...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 ${colors.primary[300]}`,
+                                        outline: `0.125rem solid ${focusRing}`,
                                         outlineOffset: "-0.125rem",
                                     }, ...item.buttonProps, sx: {
                                         ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,

package/dist/Components/Button/Button.js

@@ -4,6 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const Button = (0, react_1.forwardRef)(function Button({ label, children, onClick, opacity, variant = "solid", leftIcon, rightIcon, size, isDisabled = false, isLoading = false, loadingText = "Loading", type, width, w, sx, colorScheme, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }, ref) {
-    return ((0, jsx_runtime_1.jsx)(react_2.Button, { ...aria, type: type, onClick: onClick, width: width || w || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children !== null && children !== void 0 ? children : label }));
+    const isIconOnly = !children && !label && !!(leftIcon || rightIcon);
+    return ((0, jsx_runtime_1.jsx)(react_2.Button, { ...aria, type: type, onClick: onClick, width: width || w || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, iconSpacing: isIconOnly ? 0 : undefined, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children !== null && children !== void 0 ? children : label }));
 });
 exports.default = (0, react_1.memo)(Button);

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

@@ -107,22 +107,22 @@ exports.Button = {
             };
         },
         outline: ({ theme, colorScheme = "primary" }) => {
-            const hoverFill = theme.colors[colorScheme][500];
+            // Same rung as `solid`'s fill, not raw [500] — keeps hover bg AA-safe for white text.
+            const hoverFill = theme.colors[colorScheme][solidRung(theme, colorScheme)];
             const activeFill = darkerFill(theme, colorScheme, 0);
+            const ink = onCanvasText(theme, colorScheme);
             return {
                 border: "0.1rem solid",
-                borderColor: theme.colors[colorScheme][500],
-                color: onCanvasText(theme, colorScheme),
+                borderColor: ink,
+                color: ink,
                 bg: "transparent",
                 _hover: {
                     bg: hoverFill,
                     borderColor: activeFill,
-                    // Was a hardcoded `theme.colors.white` — fails AA for any colorScheme whose [500]
-                    // doesn't clear white contrast (e.g. emerald/rosewood primary in dark, 3.38/3.46).
                     color: labelFor(theme, hoverFill),
                     _disabled: {
                         //  bg: theme.colors[colorScheme][500],
-                        color: onCanvasText(theme, colorScheme),
+                        color: ink,
                     },
                 },
                 _active: {
@@ -131,7 +131,7 @@ exports.Button = {
                 },
                 _loading: {
                     // bg: theme.colors[colorScheme][500],
-                    color: onCanvasText(theme, colorScheme),
+                    color: ink,
                 },
             };
         },

package/dist/Components/Card/PaymentCard/PaymentCard.js

@@ -20,6 +20,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
             badgeColor: `0.125rem solid ${theme.colors.green[500]}`,
             buttonColor: theme.colors.green[500],
             buttonColor50: theme.colors.green[50],
+            colorScheme: "green",
         });
     }
     if (isNextUpgrade) {
@@ -28,6 +29,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
             badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
             buttonColor50: theme.colors.primary[50],
+            colorScheme: "primary",
         });
     }
     if (popular) {
@@ -36,6 +38,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
             badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
             buttonColor50: theme.colors.primary[50],
+            colorScheme: "primary",
         });
     }
     return withOnButtonColor({
@@ -43,17 +46,14 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
         badgeColor: "",
         buttonColor: theme.colors.primary[500],
         buttonColor50: theme.colors.primary[50],
+        colorScheme: "primary",
     });
 };
 const PaymentCard = ({ plan, isActive = false, isNextUpgrade = false, billingCycle, onSelect, onHover, buttonLoading, isLoading = false, isRenewal = false, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const { badgeText, badgeColor, buttonColor, buttonColor50, onButtonColor } = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme);
+    const { badgeText, badgeColor, buttonColor, buttonColor50, onButtonColor, colorScheme } = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme);
     const variantStyles = plan.buttonVariant === "outline"
-        ? {
-            borderColor: buttonColor,
-            color: buttonColor,
-            _hover: { bg: buttonColor50 },
-        }
+        ? {}
         : {
             bg: buttonColor,
             color: onButtonColor,
@@ -65,6 +65,6 @@ const PaymentCard = ({ plan, isActive = false, isNextUpgrade = false, billingCyc
             // 🔹 Actual Card Content
             (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [badgeText && ((0, jsx_runtime_1.jsx)(react_1.Badge, { position: "absolute", top: "-0.75rem", left: "50%", transform: "translateX(-50%)", bg: buttonColor, color: onButtonColor, fontSize: "sm", px: 4, py: 1, borderRadius: "full", children: badgeText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "center", mb: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: buttonColor, mx: "auto", mb: 4, children: plan.icon }), (0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.gray[800], children: plan.name }), (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && ((0, jsx_runtime_1.jsxs)(react_1.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.gray[800], display: "flex", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "1.5rem", children: "\u20B9" }), billingCycle === "yearly"
                                         ? plan.yearlyPrice
-                                        : plan.monthlyPrice, (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.billing }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.tax })] })] })), plan.priceDescription && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.green[800], mt: 2, children: plan === null || plan === void 0 ? void 0 : plan.priceDescription })), (0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.gray[600], mt: 2, children: plan.description })] }), ((!isActive && plan.buttonText) || isRenewal) && ((0, jsx_runtime_1.jsx)(Button_1.default, { isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, size: "lg", onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id), onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true), onMouseLeave: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false), ...variantStyles, children: plan.buttonText })), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: plan.features.map((feature, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: feature })] }, i))) })] })) }) }));
+                                        : plan.monthlyPrice, (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.billing }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.tax })] })] })), plan.priceDescription && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.green[800], mt: 2, children: plan === null || plan === void 0 ? void 0 : plan.priceDescription })), (0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.gray[600], mt: 2, children: plan.description })] }), ((!isActive && plan.buttonText) || isRenewal) && ((0, jsx_runtime_1.jsx)(Button_1.default, { isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, colorScheme: colorScheme, size: "lg", onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id), onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true), onMouseLeave: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false), ...variantStyles, children: plan.buttonText })), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: plan.features.map((feature, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: feature })] }, i))) })] })) }) }));
 };
 exports.default = PaymentCard;

package/dist/Components/Checkbox/Checkbox.styles.js

@@ -2,16 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 exports.Checkbox = {
     baseStyle: ({ theme, colorScheme = "primary" }) => {
         var _a;
         const palette = (_a = theme.colors[colorScheme]) !== null && _a !== void 0 ? _a : theme.colors.primary;
-        // A browser probe found the checked checkbox's hover repeating its own resting `[600]` fill.
-        // Chakra's stock control also carries a checked-hover at `_checked._hover` (this override
-        // nests the other way, `_hover._checked`) — two different key paths landing on the same
-        // selector, so whichever one the cascade picks must still differ from resting. Setting both
-        // paths to the same lifted value removes that ambiguity outright.
+        // Both `_checked._hover` and `_hover._checked` paths get the same lifted value.
         const hoverChecked = (0, outlineRung_1.resolveHoverTint)(palette[600], palette[600]);
+        const checkedIcon = (0, accentText_1.onFilled)(palette[600], theme.colors.white, theme.colors.black);
+        const hoverCheckedIcon = (0, accentText_1.onFilled)(hoverChecked, theme.colors.white, theme.colors.black);
+        const focusRing = (0, outlineRung_1.liftToContrast)(palette[300], theme.colors.backgroundColor.main, outlineRung_1.AA_NON_TEXT);
         return {
             control: {
                 width: "1.25rem",
@@ -54,7 +54,7 @@ exports.Checkbox = {
                     },
                 },
                 _focus: {
-                    boxShadow: `0 0 0 2px ${palette[300]}`,
+                    boxShadow: `0 0 0 2px ${focusRing}`,
                     borderColor: palette[500],
                 },
                 _active: {
@@ -63,7 +63,10 @@ exports.Checkbox = {
                 },
             },
             icon: {
-                color: theme.colors.background[50],
+                color: checkedIcon,
+                _hover: {
+                    color: hoverCheckedIcon,
+                },
             },
         };
     },

package/dist/Components/CopyButton/CopyButton.js

@@ -9,6 +9,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 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, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -34,7 +35,10 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
     const accent = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.backgroundColor.main);
     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 })] }));
+        // Ink also sits on the row's own hover fill (gray[100]), not just the canvas — resolve against it.
+        const hoverAccent = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.gray[100]);
+        const hoverSuccess = (0, outlineRung_1.liftToContrast)(theme.colors.semantic.success[500], theme.colors.gray[100], accentText_1.AA_NORMAL_TEXT);
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: "background 0.15s ease", _hover: { bg: theme.colors.gray[100] }, onClick: handleCopy, children: [copied ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize, color: hoverSuccess })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize, color: hoverAccent })), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "14px", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }));
     }
     if (variant === "button") {
         return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid", 

package/dist/Components/Dropdown/DropDown.js

@@ -6,6 +6,7 @@ const react_2 = require("@chakra-ui/react");
 const framer_motion_1 = require("framer-motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const lucide_react_1 = require("lucide-react");
 const rafThrottle_1 = require("../../Utils/rafThrottle");
 const MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, ...props }))));
@@ -214,16 +215,17 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
     };
     const DropdownContentRender = () => {
         var _a;
+        const hoverTint = (0, outlineRung_1.resolveHoverTint)(theme.colors.primary[500], theme.colors.background[50]);
         return ((0, jsx_runtime_1.jsx)(react_2.List, { id: menuId, role: "menu", onKeyDown: handleMenuKeyDown, bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"), style: ListStyle, children: options.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { ref: (node) => {
                     itemRefs.current[index] = node;
                 }, role: "menuitem", tabIndex: index === activeIndex ? 0 : -1, onClick: () => {
                     handleListItemClick(option.id, option.label);
                     focusTrigger();
                 }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: 1.5, px: s.px, py: s.py, borderRadius: "md", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: theme.colors.text[700], transition: "background 0.12s ease, color 0.12s ease", _hover: {
-                    bg: theme.colors.primary.opacity[8],
+                    bg: hoverTint,
                     color: theme.colors.accentText,
                 }, _focus: {
-                    bg: theme.colors.primary.opacity[8],
+                    bg: hoverTint,
                     color: theme.colors.accentText,
                 }, borderBottom: divider
                     ? `0.063rem solid ${theme.colors.boxborder[200]}`

package/dist/Components/EmptyState/EmptyState.js

@@ -5,6 +5,7 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("@emotion/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const float = (0, react_2.keyframes) `
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-8px); }
@@ -23,8 +24,8 @@ const EmptyState = ({ title = "No data found", description, icon: IconComp = luc
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const s = sizeMap[size];
     const palette = scaleFor(theme.colors, colorScheme);
-    const accent = palette[500];
     const accentSoft = palette[50];
+    const accent = (0, accentText_1.accentTextOnCanvas)(palette, accentSoft);
     const containerStyles = variant === "subtle"
         ? { bg: theme.colors.gray[50], borderRadius: "2xl" }
         : variant === "dashed"

package/dist/Components/FileUpload/FileUpload.js

@@ -92,7 +92,7 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { ...getRootProps(), border: "2px dashed", borderColor: border, borderRadius: "md", p: compact ? 3 : 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: colors.gray[100] }, position: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...getInputProps({ "aria-label": inputAriaLabel }) }), (0, jsx_runtime_1.jsxs)(react_2.Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Upload, boxSize: compact ? 4 : 6 }), (0, jsx_runtime_1.jsxs)(react_2.Stack, { spacing: 0, align: compact ? "start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "medium", fontSize: compact ? "sm" : "md", color: colors.textMuted, children: "Drag and drop files here" }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", (0, constants_1.toMB)(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] })] }), errors.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: errors.map((err, idx) => ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 2, children: uploadedFiles.map((file, index) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_2.ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
                                                                 ".hover-icon": {
                                                                     opacity: 1,
-                                                                    bg: colors.secondary.opacity[16],
+                                                                    bg: "blackAlpha.500",
                                                                 },
                                                             }, onClick: () => {
                                                                 setPreviewUrl(URL.createObjectURL(file));
@@ -103,7 +103,7 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
                                                                         height: "100%",
                                                                         objectFit: "cover",
                                                                         borderRadius: radii.base,
-                                                                    } }), (0, jsx_runtime_1.jsx)(react_2.Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { color: colors.background[100] }) })] })) : ((0, jsx_runtime_1.jsx)(react_2.ListIcon, { as: lucide_react_1.FileText, color: (0, accentText_1.accentTextOnCanvas)(colors.blue, colors.background[50]), boxSize: 8 })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: [(0, constants_1.toMB)(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && ((0, jsx_runtime_1.jsx)(react_2.Progress, { value: progress === null || progress === void 0 ? void 0 : progress[file.name], size: "xs", mt: 1, hasStripe: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, isAnimated: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, colorScheme: (progress === null || progress === void 0 ? void 0 : progress[file.name]) >= 100 ? "green" : "blue", borderRadius: "md" }))] }, index))) })] }))] }), (0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: () => {
+                                                                    } }), (0, jsx_runtime_1.jsx)(react_2.Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { color: "white" }) })] })) : ((0, jsx_runtime_1.jsx)(react_2.ListIcon, { as: lucide_react_1.FileText, color: (0, accentText_1.accentTextOnCanvas)(colors.blue, colors.background[50]), boxSize: 8 })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: [(0, constants_1.toMB)(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && ((0, jsx_runtime_1.jsx)(react_2.Progress, { value: progress === null || progress === void 0 ? void 0 : progress[file.name], size: "xs", mt: 1, hasStripe: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, isAnimated: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, colorScheme: (progress === null || progress === void 0 ? void 0 : progress[file.name]) >= 100 ? "green" : "blue", borderRadius: "md" }))] }, index))) })] }))] }), (0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: () => {
                     onClose();
                     setPreviewUrl(null);
                     setPreviewTitle(null);

package/dist/Components/FilterSidebar/filterHoverStyle.d.ts

@@ -1,11 +1,2 @@
 import type { PaletteProps } from "../../Theme/tokens/types";
-/**
- * FilterSidebar's hover fill for option rows, popover list items, and the accordion trigger.
- * `gray[50]` (a pale near-white tint in light mode) sits within ~1 lightness point of the
- * dark-mode canvas once the whole scale flips (~1.08:1 contrast) — invisible, the QA-reported
- * "checkbox hover invisible" bug. `gray[300]` clears the resting canvas (~2.3:1, a clear visible
- * cue) while staying dark enough that the existing `gray[700]`/`gray[800]` row text (tuned for a
- * near-black canvas) still reads at/above AA (~4.9:1+) on top of it — no text-color flip needed
- * here, unlike the Table row hover fix.
- */
 export declare const getFilterHoverBg: (colors: PaletteProps, isDark: boolean) => string;

package/dist/Components/FilterSidebar/filterHoverStyle.js

@@ -1,14 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFilterHoverBg = void 0;
-/**
- * FilterSidebar's hover fill for option rows, popover list items, and the accordion trigger.
- * `gray[50]` (a pale near-white tint in light mode) sits within ~1 lightness point of the
- * dark-mode canvas once the whole scale flips (~1.08:1 contrast) — invisible, the QA-reported
- * "checkbox hover invisible" bug. `gray[300]` clears the resting canvas (~2.3:1, a clear visible
- * cue) while staying dark enough that the existing `gray[700]`/`gray[800]` row text (tuned for a
- * near-black canvas) still reads at/above AA (~4.9:1+) on top of it — no text-color flip needed
- * here, unlike the Table row hover fix.
- */
-const getFilterHoverBg = (colors, isDark) => isDark ? colors.gray[300] : colors.gray[50];
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+// The fill itself must clear AA against `text[500]`, the only ink these rows ever use.
+const getFilterHoverBg = (colors, isDark) => isDark ? (0, outlineRung_1.liftToContrast)(colors.gray[300], colors.text[500], accentText_1.AA_NORMAL_TEXT) : colors.gray[50];
 exports.getFilterHoverBg = getFilterHoverBg;

package/dist/Components/Header/components/mobileMenu.js

@@ -7,7 +7,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const react_2 = __importDefault(require("react"));
 const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, onClose, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [openMenuLabel, setOpenMenuLabel] = react_2.default.useState(null);
     react_2.default.useEffect(() => {
         if (!isOpen)
@@ -15,7 +18,9 @@ const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rig
     }, [isOpen]);
     return ((0, jsx_runtime_1.jsx)(react_1.Collapse, { in: isOpen, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { pb: 4, display: { md: "none" }, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { spacing: 4, children: [menuItems.map((item) => {
                         var _a, _b, _c, _d, _e;
-                        return item.children ? ((0, jsx_runtime_1.jsxs)(react_1.Box, { px: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => setOpenMenuLabel((prev) => (prev === item.label ? null : item.label)), variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: item.children.some((subItem) => isActive(subItem.href))
+                        return item.children ? ((0, jsx_runtime_1.jsxs)(react_1.Box, { px: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => setOpenMenuLabel((prev) => (prev === item.label ? null : item.label)), variant: "ghost", w: "full", justifyContent: "flex-start", color: item.children.some((subItem) => isActive(subItem.href))
+                                        ? (0, accentText_1.onFilled)(activeBg, colors.white, colors.black)
+                                        : color, bg: item.children.some((subItem) => isActive(subItem.href))
                                         ? activeBg
                                         : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })), px: 2, children: (0, jsx_runtime_1.jsx)(react_1.HStack, { w: "full", justify: "space-between", align: "center", children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", px: 2, py: 0.5, children: item.badge.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: "bold", children: item.label })] }) }) }), (0, jsx_runtime_1.jsx)(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
                                             var _a, _b, _c;
@@ -23,8 +28,12 @@ const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rig
                                                     var _a;
                                                     (_a = subItem.onClick) === null || _a === void 0 ? void 0 : _a.call(subItem);
                                                     onClose === null || onClose === void 0 ? void 0 : onClose();
-                                                }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [subItem.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", px: 2, py: 0.5, children: (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label })), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: subItem.label })] })] }) }, subItem.label));
-                                        }) }) })] }, item.label)) : ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", px: 2, py: 0.5, children: (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }, item.label));
+                                                }, variant: "ghost", w: "full", justifyContent: "flex-start", color: isActive(subItem.href)
+                                                    ? (0, accentText_1.onFilled)(activeBg, colors.white, colors.black)
+                                                    : color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [subItem.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", px: 2, py: 0.5, children: (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label })), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: subItem.label })] })] }) }, subItem.label));
+                                        }) }) })] }, item.label)) : ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: isActive(item.href)
+                                ? (0, accentText_1.onFilled)(activeBg, colors.white, colors.black)
+                                : color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", px: 2, py: 0.5, children: (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }, item.label));
                     }), rightSlot && (0, jsx_runtime_1.jsx)(react_1.Box, { mt: 4, children: rightSlot })] }) }) }));
 };
 exports.default = MobileMenu;

package/dist/Components/Loading/Loading.js

@@ -2,26 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Loading;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-const react_2 = require("@emotion/react");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const react_3 = require("@emotion/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const colorTransition = (0, react_2.keyframes) `
-  0% {
-    color: black;
-  }
-  50% {
-    color: gray;
-  }
-  100% {
-    color: black;
-  }
-`;
 function Loading({ text, isLoading, onlytext, container }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const colorTransition = (0, react_1.useMemo)(() => (0, react_3.keyframes) `
+      0% {
+        color: ${theme.colors.text[900]};
+      }
+      50% {
+        color: ${theme.colors.textMuted};
+      }
+      100% {
+        color: ${theme.colors.text[900]};
+      }
+    `, [theme.colors.text, theme.colors.textMuted]);
     if (!isLoading) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { position: container ? "absolute" : "fixed", top: "0", right: "0", bottom: "0", left: "0", backgroundColor: container ? "blackAlpha.500" : "blackAlpha.600", backdropFilter: container ? undefined : "blur(60px)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", zIndex: container ? "10" : "9999", children: (0, jsx_runtime_1.jsx)(react_1.Center, { height: container ? "100%" : "100vh", children: !onlytext ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: theme.colors.accentText, size: "xl" }), (0, jsx_runtime_1.jsx)(react_1.Text, { mt: "2", ml: "5", children: text })] })) : ((0, jsx_runtime_1.jsx)(react_1.Text, { mt: "2", ml: "5", fontSize: "50px", textTransform: "uppercase", fontWeight: 500, css: (0, react_2.css) `
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { position: container ? "absolute" : "fixed", top: "0", right: "0", bottom: "0", left: "0", backgroundColor: container ? "blackAlpha.500" : "blackAlpha.600", backdropFilter: container ? undefined : "blur(60px)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", zIndex: container ? "10" : "9999", children: (0, jsx_runtime_1.jsx)(react_2.Center, { height: container ? "100%" : "100vh", children: !onlytext ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: theme.colors.accentText, size: "xl" }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: "2", ml: "5", children: text })] })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { mt: "2", ml: "5", fontSize: "50px", textTransform: "uppercase", fontWeight: 500, css: (0, react_3.css) `
               animation: ${colorTransition} 2s infinite;
             `, children: text })) }) }));
 }

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -7,6 +7,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const fieldStyles_1 = require("../Common/fieldStyles");
 const countWords = (text = "") => {
     const t = text.trim();
@@ -118,7 +119,9 @@ function NoteTextArea({ width = "100%", handleSubmit, handleCancel, value, title
     };
     const noteWordCount = countWords(noteValue);
     const isOverLimit = noteWordCount > maxNoteWordCount;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: width, borderRadius: fieldStyles_1.FIELD_RADIUS, overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[500] : theme.colors.boxborder[500], bg: isActive ? theme.colors.gray[50] : theme.colors.background[50], transition: "border-color 0.2s", children: [!isActive && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 3, gap: 2, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.background[50], borderRadius: fieldStyles_1.FIELD_RADIUS, minH: "2.5rem", transition: "background 0.15s", _hover: { bg: theme.colors.gray[50] }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: customPlaceholder })] })), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], children: [titleShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, value: titleValue, onChange: (e) => {
+    const collapsedHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[50], theme.colors.background[50]);
+    const activeControlHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[100], theme.colors.gray[50]);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: width, borderRadius: fieldStyles_1.FIELD_RADIUS, overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[500] : theme.colors.boxborder[500], bg: isActive ? theme.colors.gray[50] : theme.colors.background[50], transition: "border-color 0.2s", children: [!isActive && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 3, gap: 2, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.background[50], borderRadius: fieldStyles_1.FIELD_RADIUS, minH: "2.5rem", transition: "background 0.15s", _hover: { bg: collapsedHoverBg }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: customPlaceholder })] })), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], children: [titleShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, value: titleValue, onChange: (e) => {
                                             if (e.target.value.length === 0)
                                                 setTitleShow(false);
                                             setTitleValue(e.target.value);
@@ -126,7 +129,7 @@ function NoteTextArea({ width = "100%", handleSubmit, handleCancel, value, title
                                             color: (0, placeholderInk_1.placeholderInk)(theme.colors),
                                         } }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.background[50], minH: "76px", px: 3, pt: 2.5, position: "relative", children: (0, jsx_runtime_1.jsx)(react_2.Textarea, { ref: noteAreaRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, variant: "unstyled", resize: "none", minH: "76px", fontSize: "0.75rem", color: theme.colors.text[700], _placeholder: {
                                         color: (0, placeholderInk_1.placeholderInk)(theme.colors),
-                                    }, style: { overflow: "hidden" }, p: 0 }) })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { px: 3, py: 2.5, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "100%", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Attach files", hasArrow: true, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "label", htmlFor: "file-upload", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", w: "1.75rem", h: "1.75rem", borderRadius: "md", color: theme.colors.textMuted, transition: "background 0.15s", _hover: { bg: theme.colors.gray[100] }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1rem", w: "1px", bg: theme.colors.gray[200] }), !titleShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: () => setTitleShow(true), px: 2, py: 1, borderRadius: "md", color: theme.colors.textMuted, fontWeight: 500, fontSize: "sm", transition: "background 0.15s", _hover: { bg: theme.colors.gray[100] }, children: "+ Add a title" })) : ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue, children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "180px", children: titleValue || "Title" }) }))] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2.5, align: "center", ml: "auto", flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", fontWeight: 500, color: isOverLimit ? theme.colors.semanticText.error : theme.colors.textMuted, whiteSpace: "nowrap", children: [noteWordCount, "/", maxNoteWordCount] }), cancelButtonHide ? null : ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleCloseTextArea, children: "Cancel" })), (0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "solid", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: () => handleSubmit(noteValue, titleValue, files), children: [saveButtonLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null, "Save"] })] })] }), (0, jsx_runtime_1.jsx)("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: (e) => {
+                                    }, style: { overflow: "hidden" }, p: 0 }) })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { px: 3, py: 2.5, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "100%", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Attach files", hasArrow: true, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "label", htmlFor: "file-upload", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", w: "1.75rem", h: "1.75rem", borderRadius: "md", color: theme.colors.textMuted, transition: "background 0.15s", _hover: { bg: activeControlHoverBg }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1rem", w: "1px", bg: theme.colors.gray[200] }), !titleShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: () => setTitleShow(true), px: 2, py: 1, borderRadius: "md", color: theme.colors.textMuted, fontWeight: 500, fontSize: "sm", transition: "background 0.15s", _hover: { bg: activeControlHoverBg }, children: "+ Add a title" })) : ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue, children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "180px", children: titleValue || "Title" }) }))] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2.5, align: "center", ml: "auto", flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", fontWeight: 500, color: isOverLimit ? theme.colors.semanticText.error : theme.colors.textMuted, whiteSpace: "nowrap", children: [noteWordCount, "/", maxNoteWordCount] }), cancelButtonHide ? null : ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleCloseTextArea, children: "Cancel" })), (0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "solid", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: () => handleSubmit(noteValue, titleValue, files), children: [saveButtonLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null, "Save"] })] })] }), (0, jsx_runtime_1.jsx)("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: (e) => {
                                     const newFiles = Array.from(e.target.files || []);
                                     const validFiles = newFiles.filter((f) => f.size <= maxFileSize);
                                     const invalidFiles = newFiles.filter((f) => f.size > maxFileSize);

package/dist/Components/PdfViewer/PdfViewer.js

@@ -7,9 +7,14 @@ 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 outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const PdfViewer = ({ pdfUrl, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "xl", }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && ((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 18, color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Open in new tab", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }) }) })] })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
+    const toolbarSurface = theme.colors.gray[50];
+    const iconHoverInk = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, toolbarSurface);
+    const iconHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.primary[50], toolbarSurface);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && ((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 18, color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Open in new tab", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, download: fileName, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }) }) })] })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
 };
 exports.default = PdfViewer;

package/dist/Components/ProductCard/ProductReview.js

@@ -5,6 +5,8 @@ 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 color_1 = require("../../Theme/tokens/builders/color");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 // 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
@@ -19,6 +21,9 @@ const ProductReview = ({ rating, reviewCount, mb = 0 }) => {
     // Calculate fill percentage: (rating / 5) * 100%
     const numericRating = hasRating ? Math.min(Math.max(Number(rating), 0), 5) : 0;
     const fillPercentage = (numericRating / 6) * 100;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, mb: mb, children: [hasRating && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, bg: colors.teal[50], color: (0, accentText_1.accentTextOnCanvas)(colors.teal, colors.teal[50]), px: 2, borderRadius: "md", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, fill: "none", strokeWidth: 1.5 }) }), fillPercentage > 0 && ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: `${fillPercentage}%`, height: "100%", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, color: RATING_STAR_FILL, fill: RATING_STAR_FILL }) }))] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: "bold", children: numericRating })] })), hasRating && hasReviewCount && (0, jsx_runtime_1.jsx)(react_1.Box, { h: "4", w: "0.063rem", bg: colors.boxborder[500] }), hasReviewCount && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "1", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.BookCheck, boxSize: 3.5 }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: colors.textMuted, children: ["(", reviewCount, ")"] })] }))] }));
+    const chipBg = colors.teal[50];
+    const chipInk = (0, accentText_1.accentTextOnCanvas)(colors.teal, chipBg);
+    const starFill = (0, color_1.contrastRatio)(RATING_STAR_FILL, chipBg) >= outlineRung_1.AA_NON_TEXT ? RATING_STAR_FILL : chipInk;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, mb: mb, children: [hasRating && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, bg: chipBg, color: chipInk, px: 2, borderRadius: "md", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, fill: "none", strokeWidth: 1.5 }) }), fillPercentage > 0 && ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: `${fillPercentage}%`, height: "100%", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, color: starFill, fill: starFill }) }))] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: "bold", children: numericRating })] })), hasRating && hasReviewCount && (0, jsx_runtime_1.jsx)(react_1.Box, { h: "4", w: "0.063rem", bg: colors.boxborder[500] }), hasReviewCount && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "1", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.BookCheck, boxSize: 3.5 }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: colors.textMuted, children: ["(", reviewCount, ")"] })] }))] }));
 };
 exports.default = ProductReview;

package/dist/Components/ProductCard/ProductTags.js

@@ -25,8 +25,8 @@ const ProductTags = ({ tags, className, size = 'sm' }) => {
 };
 const Tag = ({ children, fullWidth = false, size = 'sm', }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const tagBorder = colors.semanticText.error;
     const tagText = colors.text[900];
+    const tagBorder = colors.boxborder[500];
     // Size map for tags
     const tagSizes = {
         xs: { fontSize: '0.625rem', px: '0.5rem', py: '0.125rem' },

package/dist/Components/RadioButton/RadioButton.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const FormLabel_1 = require("../Common/FormLabel");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const RadioButton = ({ label, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize = "0.75rem", labelClampLines = 2, showLabelTooltip = (label || "").length > 18, labelTooltip = label, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsx)(react_1.Radio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.boxborder[500], borderWidth: "1.6px", _hover: {
@@ -18,7 +19,7 @@ const RadioButton = ({ label, colorScheme, isChecked, onChange, isDisabled, size
             "&[data-checked]:hover": {
                 backgroundColor: theme.colors.primary[500],
                 borderColor: theme.colors.primary[500],
-                boxShadow: `0 0 0 2px ${theme.colors.primary[200]}`,
+                boxShadow: `0 0 0 2px ${(0, outlineRung_1.liftToContrast)(theme.colors.primary[200], theme.colors.backgroundColor.main, outlineRung_1.AA_NON_TEXT)}`,
             },
         }, children: (0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, inline: true }) }));
 };

package/dist/Components/ScrollToTop/ScrollToTop.js

@@ -10,6 +10,7 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const rafThrottle_1 = require("../../Utils/rafThrottle");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300, duration = 600, useWindow = false, bottom = "2rem", right = "2rem", }) => {
     const [visible, setVisible] = (0, react_1.useState)(false);
     const anchorRef = (0, react_1.useRef)(null);
@@ -64,6 +65,7 @@ const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300
     }, [useWindow, threshold]);
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: anchorRef, position: "relative", children: [children, (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel, placement: "left", children: (0, jsx_runtime_1.jsx)(react_2.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],
+                        color: (0, accentText_1.onFilled)(theme.colors.primary[600], theme.colors.white, theme.colors.black),
                         transform: "translateY(-2px) scale(1.05)",
                         boxShadow: "lg",
                     }, _active: { transform: "scale(0.95)" }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 24, strokeWidth: 2.5 }) }) })] }));