@mohasinac/appkit 3.0.3 → 3.0.4

package/dist/features/filters/FilterFacetSection.js

@@ -9,7 +9,7 @@ const __O = {
 const CLS_OPTION_SELECTED = "border-success bg-success-surface text-success dark:border-success/60 dark:bg-success-surface dark:text-success";
 const CLS_OPTION_DOT = "inline-flex h-4 w-4 items-center justify-center rounded-full bg-success-surface text-[10px] text-white";
 const CLS_CLEAR_BTN = "w-full py-1 text-xs text-zinc-400 transition-colors hover:text-error";
-const CLS_BADGE_COUNT = "inline-flex items-center justify-center w-5 h-5 rounded-full bg-success-surface dark:bg-success-surface text-success dark:text-success ring-1 ring-emerald-600/20 dark:ring-emerald-400/20";
+const CLS_BADGE_COUNT = "inline-flex items-center justify-center w-5 h-5 rounded-full bg-success-surface dark:bg-success-surface text-success dark:text-success ring-1 ring-success/20";
 const CLS_CLEAR_ICON = "inline-flex items-center justify-center w-5 h-5 p-0 text-zinc-500 dark:text-zinc-400 hover:text-error dark:hover:text-error hover:bg-zinc-100 dark:hover:bg-slate-700 transition-colors rounded-full";
 /**
  * FilterFacetSection — collapsible checkbox/radio filter section.
@@ -71,12 +71,12 @@ export function FilterFacetSection({ title, options, selected, onChange, selecti
                         ? CLS_OPTION_SELECTED
                         : "border-zinc-200 bg-white text-zinc-700 hover:border-zinc-400 dark:border-slate-700 dark:bg-slate-900 dark:text-zinc-200 dark:hover:border-slate-500"), children: [title, hasValue && (_jsx(Span, { weight: "bold", className: CLS_OPTION_DOT, children: selected.length })), _jsx("svg", { className: cn("h-3.5 w-3.5 text-zinc-400 transition-transform", dropdownOpen ? "rotate-180" : ""), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), dropdownOpen && (_jsxs(Div, { className: "absolute left-0 top-full z-[var(--appkit-z-dropdown,50)] mt-1 min-w-[180px] max-w-[260px]", surface: "default", rounded: "xl", shadow: "lg", border: "default", children: [searchable && (_jsx(Div, { border: "subtle", className: "border-b", padding: "xs", children: _jsx(Input, { type: "search", placeholder: "Search\u2026", value: search, onChange: (e) => handleSearch(e.target.value), className: "w-full rounded-md border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-900 focus:outline-none dark:border-slate-700 dark:bg-slate-800/60 dark:text-zinc-100" }) })), _jsxs(Div, { className: `max-h-56 ${__O.yAuto}`, padding: "y-2xs", children: [filtered.map((option) => {
                                     const isSelected = selected.includes(option.value);
-                                    return (_jsxs(Row, { gap: "xs", className: "cursor-pointer py-1.5 hover:bg-zinc-50 dark:hover:bg-slate-800 mx-1", padding: "x-sm", rounded: "lg", onClick: () => toggle(option.value), children: [_jsx("input", { type: selectionMode === "single" ? "radio" : "checkbox", checked: isSelected, onChange: () => toggle(option.value), "aria-label": option.label, className: "h-3.5 w-3.5 flex-shrink-0 cursor-pointer rounded border-zinc-300 text-primary-600 dark:border-slate-600 dark:text-secondary-500" }), _jsx(Span, { size: "xs", className: "flex-1 truncate", color: "muted", children: option.label }), option.count !== undefined && (_jsx(Span, { className: "flex-shrink-0 text-[10px] tabular-nums", color: "faint", children: option.count }))] }, option.value));
-                                }), filtered.length === 0 && (_jsx(Text, { paddingY: "xs", className: "px-3", color: "faint", size: "xs", children: "No results" }))] }), hasValue && (_jsx(Div, { border: "subtle", className: "border-t p-1", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: CLS_CLEAR_BTN, onClick: () => { onChange([]); onClear?.(); setDropdownOpen(false); }, children: "Clear" }) }))] }))] }));
+                                    return (_jsxs(Row, { gap: "xs", className: "cursor-pointer py-[0.375rem] hover:bg-[var(--appkit-color-bg)] mx-1", padding: "x-sm", rounded: "lg", onClick: () => toggle(option.value), children: [_jsx("input", { type: selectionMode === "single" ? "radio" : "checkbox", checked: isSelected, onChange: () => toggle(option.value), "aria-label": option.label, className: "h-3.5 w-3.5 flex-shrink-0 cursor-pointer rounded border-zinc-300 text-primary-600 dark:border-slate-600 dark:text-secondary-500" }), _jsx(Span, { size: "xs", className: "flex-1 truncate", color: "muted", children: option.label }), option.count !== undefined && (_jsx(Span, { className: "flex-shrink-0 text-[10px] tabular-nums", color: "faint", children: option.count }))] }, option.value));
+                                }), filtered.length === 0 && (_jsx(Text, { paddingY: "xs", paddingX: "x-sm", color: "faint", size: "xs", children: "No results" }))] }), hasValue && (_jsx(Div, { border: "subtle", className: "border-t p-[0.25rem]", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: CLS_CLEAR_BTN, onClick: () => { onChange([]); onClear?.(); setDropdownOpen(false); }, children: "Clear" }) }))] }))] }));
     }
     // ── Accordion variant (default) ─────────────────────────────────────────
-    return (_jsxs(Div, { className: cn("p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0", className), children: [_jsxs(Row, { gap: "xs", children: [_jsxs(Button, { type: "button", onClick: handleToggle, variant: "ghost", size: "sm", className: "flex-1 justify-between text-sm font-semibold text-zinc-900 dark:text-zinc-50 py-1 hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsxs(Row, { as: Span, gap: "xs", children: [title, hasValue && (_jsx(Span, { size: "xs", className: CLS_BADGE_COUNT, children: selected.length }))] }), _jsx("svg", { className: cn("w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200", isCollapsed ? "" : "rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), onClear && hasValue && (_jsx(Button, { type: "button", onClick: onClear, variant: "ghost", size: "sm", className: CLS_CLEAR_ICON, "aria-label": "Clear filter", children: _jsx("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), isCollapsed && hasValue && (_jsxs(Row, { wrap: true, gap: "xs", className: "mt-2", children: [selectedLabels.map((label) => (_jsx(Span, { layout: "inline-flex", size: "xs", className: "border border-zinc-200 dark:border-slate-600", rounded: "full", padding: "pill-xs", surface: "subtle", color: "muted", children: label }, label))), selected.length > 3 && (_jsxs(Span, { layout: "inline-flex", size: "xs", rounded: "full", padding: "pill-xs", color: "faint", children: ["+", selected.length - 3, " more"] }))] })), searchable && (_jsx(Div, { className: "mt-2", children: _jsx(Input, { type: "search", placeholder: "Search\u2026", value: search, onChange: (e) => handleSearch(e.target.value), className: "w-full rounded-md border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-2.5 py-1.5 text-xs text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20" }) })), !isCollapsed && (_jsxs(Stack, { className: "mt-3", gap: "xs", children: [filtered.map((option) => {
+    return (_jsxs(Div, { className: cn("p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0", className), children: [_jsxs(Row, { gap: "xs", children: [_jsxs(Button, { type: "button", onClick: handleToggle, variant: "ghost", size: "sm", className: "flex-1 justify-[space-between] text-[0.875rem] font-[600] text-[var(--appkit-color-text)] py-[0.25rem] hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsxs(Row, { as: Span, gap: "xs", children: [title, hasValue && (_jsx(Span, { size: "xs", className: CLS_BADGE_COUNT, children: selected.length }))] }), _jsx("svg", { className: cn("w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200", isCollapsed ? "" : "rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), onClear && hasValue && (_jsx(Button, { type: "button", onClick: onClear, variant: "ghost", size: "sm", className: CLS_CLEAR_ICON, "aria-label": "Clear filter", children: _jsx("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), isCollapsed && hasValue && (_jsxs(Row, { wrap: true, gap: "xs", className: "mt-2", children: [selectedLabels.map((label) => (_jsx(Span, { layout: "inline-flex", size: "xs", className: "border border-[var(--appkit-color-border)]", rounded: "full", padding: "pill-xs", surface: "subtle", color: "muted", children: label }, label))), selected.length > 3 && (_jsxs(Span, { layout: "inline-flex", size: "xs", rounded: "full", padding: "pill-xs", color: "faint", children: ["+", selected.length - 3, " more"] }))] })), searchable && (_jsx(Div, { className: "mt-2", children: _jsx(Input, { type: "search", placeholder: "Search\u2026", value: search, onChange: (e) => handleSearch(e.target.value), className: "w-full rounded-md border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-2.5 py-1.5 text-xs text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20" }) })), !isCollapsed && (_jsxs(Stack, { className: "mt-3", gap: "xs", children: [filtered.map((option) => {
                         const isSelected = selected.includes(option.value);
-                        return (_jsxs(Row, { gap: "2.5", className: "cursor-pointer group", padding: "y-2xs", children: [selectionMode === "single" ? (_jsx("input", { type: "radio", checked: isSelected, onChange: () => toggle(option.value), "aria-label": option.label, className: cn("flex-shrink-0 border-zinc-300 dark:border-slate-600 cursor-pointer", "w-4 h-4 rounded-full text-primary-600 dark:text-secondary-500", "focus:ring-primary-500/30 dark:focus:ring-secondary-400/30") })) : (_jsx("input", { type: "checkbox", checked: isSelected, onChange: () => toggle(option.value), "aria-label": option.label, className: cn("flex-shrink-0 border-zinc-300 dark:border-slate-600 cursor-pointer", "w-4 h-4 rounded text-primary-600 dark:text-secondary-500 checked:bg-primary-600 dark:checked:bg-secondary-500", "focus:ring-primary-500/30 dark:focus:ring-secondary-400/30") })), _jsx(Span, { size: "sm", className: "flex-1 group-hover:text-zinc-900 dark:group-hover:text-zinc-100 transition-colors truncate", color: "muted", children: option.label }), option.count !== undefined && (_jsx(Span, { size: "xs", className: "tabular-nums flex-shrink-0", color: "faint", children: option.count }))] }, option.value));
-                    }), filtered.length === 0 && (_jsx(Text, { className: "py-1", color: "faint", size: "xs", children: "No results" }))] }))] }));
+                        return (_jsxs(Row, { gap: "2.5", className: "cursor-pointer group", padding: "y-2xs", children: [selectionMode === "single" ? (_jsx("input", { type: "radio", checked: isSelected, onChange: () => toggle(option.value), "aria-label": option.label, className: cn("flex-shrink-0 border-zinc-300 dark:border-slate-600 cursor-pointer", "w-4 h-4 rounded-full text-primary-600 dark:text-secondary-500", "focus:ring-primary-500/30 dark:focus:ring-secondary-400/30") })) : (_jsx("input", { type: "checkbox", checked: isSelected, onChange: () => toggle(option.value), "aria-label": option.label, className: cn("flex-shrink-0 border-zinc-300 dark:border-slate-600 cursor-pointer", "w-4 h-4 rounded text-primary-600 dark:text-secondary-500 checked:bg-primary-600 dark:checked:bg-secondary-500", "focus:ring-primary-500/30 dark:focus:ring-secondary-400/30") })), _jsx(Span, { size: "sm", className: "flex-1 group-hover:text-[var(--appkit-color-text)] transition-colors truncate", color: "muted", children: option.label }), option.count !== undefined && (_jsx(Span, { size: "xs", className: "tabular-nums flex-shrink-0", color: "faint", children: option.count }))] }, option.value));
+                    }), filtered.length === 0 && (_jsx(Text, { paddingY: "2xs", color: "faint", size: "xs", children: "No results" }))] }))] }));
 }

package/dist/features/filters/RangeFilter.js

@@ -3,7 +3,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { Button, Div, Input, Row, Slider, Span, Stack, Text } from "../../ui";
 import { cn } from "./filterUtils";
-const CLS_BADGE_COUNT = "inline-flex items-center justify-center w-5 h-5 rounded-full bg-success-surface dark:bg-success-surface text-success dark:text-success ring-1 ring-emerald-600/20";
+const CLS_BADGE_COUNT = "inline-flex items-center justify-center w-5 h-5 rounded-full bg-success-surface dark:bg-success-surface text-success dark:text-success ring-1 ring-success/20";
 const CLS_CLEAR_BTN = "inline-flex items-center justify-center w-5 h-5 text-zinc-500 dark:text-zinc-400 hover:text-error dark:hover:text-error rounded-full transition-colors";
 function DualSlider({ minValue, maxValue, onMinChange, onMaxChange, minBound, maxBound, step = 1, prefix = "", }) {
     const minNum = Math.max(minBound, Math.min(parseFloat(minValue) || minBound, maxBound));
@@ -26,5 +26,5 @@ export function RangeFilter({ title, minLabel, maxLabel, minValue, maxValue, onM
         maxBound !== undefined;
     const hasValue = !!(minValue || maxValue);
     const inputClass = "w-full rounded-md border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-2.5 py-1.5 text-xs text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20";
-    return (_jsxs(Div, { role: "group", "aria-labelledby": `rf-${title}`, className: cn("p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0", className), children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsxs(Button, { type: "button", id: `rf-${title}`, onClick: handleToggle, variant: "ghost", size: "sm", className: "flex-1 justify-between text-sm font-semibold text-zinc-900 dark:text-zinc-50 py-1 hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsxs(Span, { layout: "flex", gap: "md", children: [title, hasValue && (_jsx(Span, { size: "xs", className: CLS_BADGE_COUNT, children: "1" }))] }), _jsx("svg", { className: cn("w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200", isCollapsed ? "" : "rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), onClear && hasValue && (_jsx(Button, { type: "button", onClick: onClear, variant: "ghost", size: "sm", className: CLS_CLEAR_BTN, "aria-label": "Clear", children: _jsx("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), !isCollapsed && (_jsxs(Stack, { gap: "3", className: "mt-3", children: [canShowSlider && (_jsx(DualSlider, { minValue: minValue, maxValue: maxValue, onMinChange: onMinChange, onMaxChange: onMaxChange, minBound: minBound, maxBound: maxBound, step: step, prefix: prefix })), _jsxs(Row, { align: "end", gap: "sm", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [minLabel && (_jsx(Text, { className: "mb-1", color: "muted", size: "xs", children: minLabel })), _jsxs(Div, { className: "relative", children: [prefix && (_jsx(Span, { size: "xs", className: "absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none", color: "faint", children: prefix })), _jsx(Input, { type: type, value: minValue, onChange: (e) => onMinChange(e.target.value), placeholder: minPlaceholder ?? (type === "date" ? "From" : "Min"), className: cn(inputClass, prefix ? "pl-5" : "") })] })] }), _jsx(Span, { size: "xs", className: "flex-shrink-0 pb-1.5", color: "faint", children: "-" }), _jsxs(Div, { className: "flex-1 min-w-0", children: [maxLabel && (_jsx(Text, { className: "mb-1", color: "muted", size: "xs", children: maxLabel })), _jsxs(Div, { className: "relative", children: [prefix && (_jsx(Span, { size: "xs", className: "absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none", color: "faint", children: prefix })), _jsx(Input, { type: type, value: maxValue, onChange: (e) => onMaxChange(e.target.value), placeholder: maxPlaceholder ?? (type === "date" ? "To" : "Max"), className: cn(inputClass, prefix ? "pl-5" : "") })] })] })] })] }))] }));
+    return (_jsxs(Div, { role: "group", "aria-labelledby": `rf-${title}`, className: cn("p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0", className), children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsxs(Button, { type: "button", id: `rf-${title}`, onClick: handleToggle, variant: "ghost", size: "sm", className: "flex-1 justify-[space-between] text-[0.875rem] font-[600] text-[var(--appkit-color-text)] py-[0.25rem] hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsxs(Span, { layout: "flex", gap: "md", children: [title, hasValue && (_jsx(Span, { size: "xs", className: CLS_BADGE_COUNT, children: "1" }))] }), _jsx("svg", { className: cn("w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200", isCollapsed ? "" : "rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), onClear && hasValue && (_jsx(Button, { type: "button", onClick: onClear, variant: "ghost", size: "sm", className: CLS_CLEAR_BTN, "aria-label": "Clear", children: _jsx("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), !isCollapsed && (_jsxs(Stack, { gap: "3", className: "mt-3", children: [canShowSlider && (_jsx(DualSlider, { minValue: minValue, maxValue: maxValue, onMinChange: onMinChange, onMaxChange: onMaxChange, minBound: minBound, maxBound: maxBound, step: step, prefix: prefix })), _jsxs(Row, { align: "end", gap: "sm", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [minLabel && (_jsx(Text, { className: "mb-1", color: "muted", size: "xs", children: minLabel })), _jsxs(Div, { className: "relative", children: [prefix && (_jsx(Span, { size: "xs", className: "absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none", color: "faint", children: prefix })), _jsx(Input, { type: type, value: minValue, onChange: (e) => onMinChange(e.target.value), placeholder: minPlaceholder ?? (type === "date" ? "From" : "Min"), className: cn(inputClass, prefix ? "pl-5" : "") })] })] }), _jsx(Span, { size: "xs", className: "flex-shrink-0 pb-[0.375rem]", color: "faint", children: "-" }), _jsxs(Div, { className: "flex-1 min-w-0", children: [maxLabel && (_jsx(Text, { className: "mb-1", color: "muted", size: "xs", children: maxLabel })), _jsxs(Div, { className: "relative", children: [prefix && (_jsx(Span, { size: "xs", className: "absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none", color: "faint", children: prefix })), _jsx(Input, { type: type, value: maxValue, onChange: (e) => onMaxChange(e.target.value), placeholder: maxPlaceholder ?? (type === "date" ? "To" : "Max"), className: cn(inputClass, prefix ? "pl-5" : "") })] })] })] })] }))] }));
 }

package/dist/features/filters/SwitchFilter.js

@@ -14,5 +14,5 @@ export function SwitchFilter({ title, label, checked, onChange, defaultCollapsed
         else
             setInternalCollapsed((c) => !c);
     };
-    return (_jsxs(Div, { role: "group", "aria-labelledby": `sf-${title}`, className: cn("p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0", className), children: [_jsxs(Row, { gap: "sm", children: [_jsxs(Button, { type: "button", id: `sf-${title}`, onClick: handleToggle, variant: "ghost", size: "sm", className: "flex-1 justify-between text-sm font-semibold text-zinc-900 dark:text-zinc-50 py-1 hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: title }), _jsx("svg", { className: cn("w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200", isCollapsed ? "" : "rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), checked && onClear && (_jsx(Button, { type: "button", onClick: onClear, variant: "ghost", size: "sm", className: CLS_CLEAR_BTN, "aria-label": "Clear", children: _jsx("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), !isCollapsed && (_jsxs(Row, { className: "mt-3", align: "center", justify: "between", gap: "3", children: [_jsx(Span, { size: "sm", color: "muted", children: label }), _jsx(Toggle, { checked: checked, onChange: onChange, size: "sm" })] }))] }));
+    return (_jsxs(Div, { role: "group", "aria-labelledby": `sf-${title}`, className: cn("p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0", className), children: [_jsxs(Row, { gap: "sm", children: [_jsxs(Button, { type: "button", id: `sf-${title}`, onClick: handleToggle, variant: "ghost", size: "sm", className: "flex-1 justify-[space-between] text-[0.875rem] font-[600] text-[var(--appkit-color-text)] py-[0.25rem] hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: title }), _jsx("svg", { className: cn("w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200", isCollapsed ? "" : "rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), checked && onClear && (_jsx(Button, { type: "button", onClick: onClear, variant: "ghost", size: "sm", className: CLS_CLEAR_BTN, "aria-label": "Clear", children: _jsx("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), !isCollapsed && (_jsxs(Row, { className: "mt-3", align: "center", justify: "between", gap: "3", children: [_jsx(Span, { size: "sm", color: "muted", children: label }), _jsx(Toggle, { checked: checked, onChange: onChange, size: "sm" })] }))] }));
 }

package/dist/features/forms/Checkbox.js

@@ -12,5 +12,5 @@ export function Checkbox({ label, suffix, error, indeterminate, className = "",
     }, [indeterminate]);
     return (_jsxs(Div, { className: "w-full", children: [_jsxs("label", { className: "flex flex-row items-center gap-3 cursor-pointer group", children: [_jsxs(Row, { className: "relative flex-shrink-0", align: "center", justify: "center", children: [_jsx("input", { ref: inputRef, type: "checkbox", checked: checked, className: cn("peer w-5 h-5 rounded-md border-2 cursor-pointer", "transition-all duration-200 appearance-none", error
                                     ? "border-error dark:border-error"
-                                    : "border-zinc-300 dark:border-slate-600", "checked:bg-primary-600 checked:border-primary-600", "dark:checked:bg-secondary-500 dark:checked:border-secondary-500", "hover:border-primary-400 dark:hover:border-secondary-400", "focus:outline-none focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-1", "dark:focus:ring-secondary-400/30 dark:focus:ring-offset-slate-900", "disabled:opacity-50 disabled:cursor-not-allowed", className), ...props }), _jsx("svg", { className: "absolute w-3 h-3 text-white pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity duration-150", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: indeterminate ? (_jsx("line", { x1: "2", y1: "6", x2: "10", y2: "6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })) : (_jsx("path", { d: "M2 6L5 9L10 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })) })] }), (label || suffix) && (_jsxs(Span, { layout: "flex", gap: "md", size: "sm", className: "group-hover:text-zinc-900 dark:group-hover:text-zinc-100 transition-colors", color: "muted", children: [label, suffix] }))] }), error && (_jsx(Text, { className: cn(ERROR_BASE, "mt-1.5"), role: "alert", children: error }))] }));
+                                    : "border-zinc-300 dark:border-slate-600", "checked:bg-primary-600 checked:border-primary-600", "dark:checked:bg-secondary-500 dark:checked:border-secondary-500", "hover:border-primary-400 dark:hover:border-secondary-400", "focus:outline-none focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-1", "dark:focus:ring-secondary-400/30 dark:focus:ring-offset-slate-900", "disabled:opacity-50 disabled:cursor-not-allowed", className), ...props }), _jsx("svg", { className: "absolute w-3 h-3 text-white pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity duration-150", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: indeterminate ? (_jsx("line", { x1: "2", y1: "6", x2: "10", y2: "6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })) : (_jsx("path", { d: "M2 6L5 9L10 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })) })] }), (label || suffix) && (_jsxs(Span, { layout: "flex", gap: "md", size: "sm", className: "group-hover:text-[var(--appkit-color-text)] transition-colors", color: "muted", children: [label, suffix] }))] }), error && (_jsx(Text, { className: cn(ERROR_BASE, "mt-1.5"), role: "alert", children: error }))] }));
 }

package/dist/features/forms/Slider.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { useRef, useEffect } from "react";
 import { Div, Row, Span, Text } from "../../ui";
 import { cn, LABEL_BASE, ERROR_BASE } from "./utils";
 /**
@@ -11,6 +11,11 @@ export function Slider({ value: controlledValue, defaultValue = 0, min = 0, max
     const value = controlledValue !== undefined ? controlledValue : internalValue;
     const sliderId = id ?? React.useId();
     const pct = ((value - min) / (max - min)) * 100;
+    const fillRef = useRef(null);
+    useEffect(() => {
+        if (fillRef.current)
+            fillRef.current.style.width = `${pct}%`;
+    }, [pct]);
     const handleChange = (e) => {
         const newVal = Number(e.target.value);
         if (controlledValue === undefined)
@@ -18,5 +23,5 @@ export function Slider({ value: controlledValue, defaultValue = 0, min = 0, max
         onChange?.(newVal);
     };
     const displayValue = formatValue ? formatValue(value) : String(value);
-    return (_jsxs(Div, { className: cn("w-full space-y-2", className), children: [(label || showValue) && (_jsxs(Row, { justify: "between", children: [label && (_jsx("label", { htmlFor: sliderId, className: LABEL_BASE, children: label })), showValue && (_jsx(Span, { size: "sm", weight: "semibold", className: "tabular-nums", color: "primary", children: displayValue }))] })), _jsxs(Row, { className: "relative h-5", children: [_jsx(Row, { className: "absolute inset-y-0 w-full", align: "center", children: _jsx(Div, { className: "w-full h-1.5", surface: "subtle", rounded: "full", children: _jsx(Div, { className: "h-full bg-primary-500 dark:bg-secondary-500 transition-all", rounded: "full", style: { width: `${pct}%` } }) }) }), _jsx("input", { type: "range", id: sliderId, min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, className: cn("relative w-full appearance-none bg-transparent cursor-pointer", "focus:outline-none", "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4", "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", "[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary-500 dark:[&::-webkit-slider-thumb]:border-secondary-500", "[&::-webkit-slider-thumb]:shadow-sm", "[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4", "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white", "[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-primary-500 dark:[&::-moz-range-thumb]:border-secondary-500", disabled && "opacity-50 cursor-not-allowed") })] }), _jsxs(Row, { color: "muted", textSize: "xs", justify: "between", children: [_jsx(Span, { children: formatValue ? formatValue(min) : min }), _jsx(Span, { children: formatValue ? formatValue(max) : max })] }), error && (_jsx(Text, { className: ERROR_BASE, role: "alert", children: error }))] }));
+    return (_jsxs(Div, { className: cn("w-full space-y-2", className), children: [(label || showValue) && (_jsxs(Row, { justify: "between", children: [label && (_jsx("label", { htmlFor: sliderId, className: LABEL_BASE, children: label })), showValue && (_jsx(Span, { size: "sm", weight: "semibold", className: "tabular-nums", color: "primary", children: displayValue }))] })), _jsxs(Row, { className: "relative h-5", children: [_jsx(Row, { className: "absolute inset-y-0 w-full", align: "center", children: _jsx(Div, { className: "w-full h-1.5", surface: "subtle", rounded: "full", children: _jsx("div", { ref: fillRef, className: "h-full bg-primary-500 dark:bg-secondary-500 transition-all rounded-full" }) }) }), _jsx("input", { type: "range", id: sliderId, min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, className: cn("relative w-full appearance-none bg-transparent cursor-pointer", "focus:outline-none", "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4", "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", "[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary-500 dark:[&::-webkit-slider-thumb]:border-secondary-500", "[&::-webkit-slider-thumb]:shadow-sm", "[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4", "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white", "[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-primary-500 dark:[&::-moz-range-thumb]:border-secondary-500", disabled && "opacity-50 cursor-not-allowed") })] }), _jsxs(Row, { color: "muted", textSize: "xs", justify: "between", children: [_jsx(Span, { children: formatValue ? formatValue(min) : min }), _jsx(Span, { children: formatValue ? formatValue(max) : max })] }), error && (_jsx(Text, { className: ERROR_BASE, role: "alert", children: error }))] }));
 }

package/dist/features/forms/utils.d.ts

@@ -1,8 +1,8 @@
 /** Simple class-name concatenation utility. */
 export declare function cn(...classes: (string | undefined | null | false)[]): string;
 export declare const INPUT_BASE = "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3.5 py-2.5 text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20 focus:border-primary-500 dark:focus:border-secondary-400 focus:outline-none transition-colors duration-150 placeholder:text-zinc-400 dark:placeholder:text-zinc-500";
-export declare const INPUT_ERROR = "border-red-400 dark:border-red-500 focus:ring-red-500/20 focus:border-red-500 bg-red-50/30 dark:bg-red-950/10";
-export declare const INPUT_SUCCESS = "border-emerald-400 dark:border-emerald-500 focus:ring-emerald-500/20 focus:border-emerald-500";
+export declare const INPUT_ERROR = "border-error focus:ring-error/20 focus:border-error bg-error-surface/30";
+export declare const INPUT_SUCCESS = "border-success focus:ring-success/20 focus:border-success";
 export declare const INPUT_DISABLED = "bg-zinc-50 dark:bg-slate-800/30 text-zinc-400 dark:text-zinc-400 cursor-not-allowed opacity-60";
 export declare const INPUT_WITH_ICON = "pl-10";
 export declare const LABEL_BASE = "block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5";

package/dist/features/forms/utils.js

@@ -4,8 +4,8 @@ export function cn(...classes) {
 }
 // --- Shared style constants ---------------------------------------------------
 export const INPUT_BASE = "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3.5 py-2.5 text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20 focus:border-primary-500 dark:focus:border-secondary-400 focus:outline-none transition-colors duration-150 placeholder:text-zinc-400 dark:placeholder:text-zinc-500";
-export const INPUT_ERROR = "border-red-400 dark:border-red-500 focus:ring-red-500/20 focus:border-red-500 bg-red-50/30 dark:bg-red-950/10";
-export const INPUT_SUCCESS = "border-emerald-400 dark:border-emerald-500 focus:ring-emerald-500/20 focus:border-emerald-500";
+export const INPUT_ERROR = "border-error focus:ring-error/20 focus:border-error bg-error-surface/30";
+export const INPUT_SUCCESS = "border-success focus:ring-success/20 focus:border-success";
 export const INPUT_DISABLED = "bg-zinc-50 dark:bg-slate-800/30 text-zinc-400 dark:text-zinc-400 cursor-not-allowed opacity-60";
 export const INPUT_WITH_ICON = "pl-10";
 export const LABEL_BASE = "block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5";

package/dist/features/history/hooks/useHistory.js

@@ -78,7 +78,7 @@ export function useHistory(userId) {
             }
         }
         catch {
-            // Data loading — silent fallback to empty
+            // toast-intentionally-silent: data loading — silent fallback to empty
         }
     }, [isAuth]);
     useEffect(() => {

package/dist/features/homepage/components/AdSlot.js

@@ -19,11 +19,11 @@ function AdsenseAd({ config }) {
             // AdSense not loaded yet — no-op
         }
     }, []);
-    return (_jsx(Div, { ref: ref, children: _jsx("ins", { className: "adsbygoogle", style: { display: "block" }, "data-ad-client": config.adsenseClient ?? "", "data-ad-slot": config.adsenseSlot ?? "", "data-ad-format": config.adsenseFormat ?? "auto", "data-full-width-responsive": "true" }) }));
+    return (_jsx(Div, { ref: ref, children: _jsx("ins", { className: "adsbygoogle block", "data-ad-client": config.adsenseClient ?? "", "data-ad-slot": config.adsenseSlot ?? "", "data-ad-format": config.adsenseFormat ?? "auto", "data-full-width-responsive": "true" }) }));
 }
 function ThirdPartyAd({ config }) {
     if (config.thirdPartyUrl) {
-        return (_jsx("iframe", { src: config.thirdPartyUrl, width: config.thirdPartyWidth ?? "100%", height: config.thirdPartyHeight ?? "90", scrolling: "no", frameBorder: "0", title: "Advertisement", style: { border: 0, overflow: "hidden" }, loading: "lazy" }));
+        return (_jsx("iframe", { src: config.thirdPartyUrl, width: config.thirdPartyWidth ?? "100%", height: config.thirdPartyHeight ?? "90", scrolling: "no", frameBorder: "0", title: "Advertisement", className: "border-0 overflow-hidden", loading: "lazy" }));
     }
     return null;
 }
@@ -31,7 +31,7 @@ function ManualAdBanner({ ad }) {
     const { creative } = ad;
     if (!creative)
         return null;
-    return (_jsxs("a", { href: creative.ctaHref || "#", target: creative.ctaHref ? "_blank" : undefined, rel: "noopener noreferrer", className: "flex items-center gap-3 w-full overflow-hidden rounded-lg bg-zinc-100 dark:bg-zinc-800 px-4 py-3 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors no-underline", children: [creative.imageUrl ? (_jsx("img", { src: creative.imageUrl, alt: creative.title || "Advertisement", className: "h-14 w-14 rounded object-cover flex-shrink-0", loading: "lazy" })) : null, _jsxs(Div, { className: "flex-1 min-w-0", children: [creative.title ? (_jsx(Text, { className: "truncate", color: "primary", size: "sm", weight: "semibold", children: creative.title })) : null, creative.body ? (_jsx(Text, { className: "truncate", color: "muted", size: "xs", children: creative.body })) : null] }), creative.ctaLabel ? (_jsx(Span, { color: "inverse", size: "xs", weight: "semibold", className: "flex-shrink-0 bg-primary py-1.5", rounded: "md", padding: "x-sm", children: creative.ctaLabel })) : null] }));
+    return (_jsxs("a", { href: creative.ctaHref || "#", target: creative.ctaHref ? "_blank" : undefined, rel: "noopener noreferrer", className: "flex items-center gap-3 w-full overflow-hidden rounded-lg bg-zinc-100 dark:bg-zinc-800 px-4 py-3 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors no-underline", children: [creative.imageUrl ? (_jsx("img", { src: creative.imageUrl, alt: creative.title || "Advertisement", className: "h-14 w-14 rounded object-cover flex-shrink-0", loading: "lazy" })) : null, _jsxs(Div, { className: "flex-1 min-w-0", children: [creative.title ? (_jsx(Text, { className: "truncate", color: "primary", size: "sm", weight: "semibold", children: creative.title })) : null, creative.body ? (_jsx(Text, { className: "truncate", color: "muted", size: "xs", children: creative.body })) : null] }), creative.ctaLabel ? (_jsx(Span, { color: "inverse", size: "xs", weight: "semibold", className: "flex-shrink-0 bg-primary py-[0.375rem]", rounded: "md", padding: "x-sm", children: creative.ctaLabel })) : null] }));
 }
 // ---------------------------------------------------------------------------
 // Primary component

package/dist/features/homepage/components/AdvertisementBanner.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CARD_ASPECT_BANNER, GRID_COLS_2_MD } from "../../../_internal/shared/styles/grid";
 import { Button, Div, Grid, Heading, Row, Scrim, Section, Span, Stack, Text } from "../../../ui";
+import { DynamicBgDiv } from "../../../ui/components/DynamicBgDiv";
 import { MediaImage } from "../../media/MediaImage";
 import { ArrowRight, Sparkles } from "lucide-react";
 const __P = {
@@ -22,13 +23,13 @@ export function AdvertisementBanner({ title, subtitle, ctaLabel = "Shop now", on
     }
     // -- Split layout: when a backgroundImage is provided --
     if (backgroundImage) {
-        return (_jsx(Section, { className: `${__P.p8} ${wrapClass} ${className}`, children: _jsx(Div, { className: CLS_CONTAINER, children: _jsx(Div, { className: `relative ${__O.hidden} bg-zinc-900`, rounded: "2xl", shadow: "xl", children: _jsxs(Grid, { className: `${GRID_COLS_2_MD} min-h-[clamp(300px,40vh,420px)]`, children: [_jsxs(Div, { className: `relative ${CARD_ASPECT_BANNER} order-last md:order-first min-h-0 min-h-[clamp(300px,40vh,420px)]`, children: [_jsx(MediaImage, { src: backgroundImage, alt: title, size: "banner", priority: true }), _jsx(Scrim, { direction: "right-to-left", intensity: "medium", className: "hidden md:block absolute inset-y-0 right-0 w-24" })] }), _jsxs(Stack, { justify: "center", className: "relative px-8 md:px-12 md:py-14", padding: "y-2xl", children: [_jsx(Div, { className: "absolute top-0 right-0 w-32 h-32 opacity-10 pointer-events-none bg-[radial-gradient(circle,_white_1px,_transparent_1px)] bg-[length:12px_12px]", "aria-hidden": true }), tagLabel && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "semibold", className: "self-start bg-white/10 /80 tracking-widest mb-5 backdrop-blur-sm", rounded: "full", padding: "pill-md", transform: "uppercase", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { color: "inverse", level: 2, variant: "none", className: "font-extrabold mb-4 leading-tight", mdSize: "4xl", lgSize: "5xl", size: "3xl", children: title }), subtitle && (_jsx(Text, { color: "inverse", variant: "none", className: "/75 mb-8 leading-relaxed", mdSize: "lg", size: "base", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { gap: "md", variant: "secondary", size: "lg", onClick: onCtaClick, className: "self-start bg-white text-zinc-900 hover:bg-zinc-100 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200 font-semibold shadow-lg", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] })] }) }) }) }));
+        return (_jsx(Section, { className: `${__P.p8} ${wrapClass} ${className}`, children: _jsx(Div, { className: CLS_CONTAINER, children: _jsx(Div, { className: `relative ${__O.hidden} bg-neutral-900`, rounded: "2xl", shadow: "xl", children: _jsxs(Grid, { className: `${GRID_COLS_2_MD} min-h-[clamp(300px,40vh,420px)]`, children: [_jsxs(Div, { className: `relative ${CARD_ASPECT_BANNER} order-last md:order-first min-h-0 min-h-[clamp(300px,40vh,420px)]`, children: [_jsx(MediaImage, { src: backgroundImage, alt: title, size: "banner", priority: true }), _jsx(Scrim, { direction: "right-to-left", intensity: "medium", className: "hidden md:block absolute inset-y-0 right-0 w-24" })] }), _jsxs(Stack, { justify: "center", className: "relative", paddingX: "x-xl", padding: "y-2xl", children: [_jsx(Div, { className: "absolute top-0 right-0 w-32 h-32 opacity-10 pointer-events-none bg-[radial-gradient(circle,_white_1px,_transparent_1px)] bg-[length:12px_12px]", "aria-hidden": true }), tagLabel && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "semibold", className: "self-start bg-[rgba(255,255,255,0.1)] /80 tracking-widest mb-5 backdrop-blur-sm", rounded: "full", padding: "pill-md", transform: "uppercase", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { color: "inverse", level: 2, variant: "none", className: "font-extrabold mb-4 leading-tight", mdSize: "4xl", lgSize: "5xl", size: "3xl", children: title }), subtitle && (_jsx(Text, { color: "inverse", variant: "none", className: "/75 mb-8 leading-relaxed", mdSize: "lg", size: "base", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { gap: "md", variant: "secondary", size: "lg", onClick: onCtaClick, className: "self-start bg-[var(--appkit-color-surface)] text-[var(--appkit-color-text)] hover:bg-neutral-100 dark:bg-neutral-100 dark:text-[var(--appkit-color-text)] dark:hover:bg-neutral-200 font-[600]", shadow: "lg", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] })] }) }) }) }));
     }
     // -- Full-width gradient layout --
-    return (_jsx(Section, { className: `${__P.p8} ${wrapClass} ${className}`, children: _jsx(Div, { className: CLS_CONTAINER, children: _jsxs(Row, { align: "center", className: [
-                    "relative overflow-hidden rounded-2xl",
+    return (_jsx(Section, { className: `${__P.p8} ${wrapClass} ${className}`, children: _jsx(Div, { className: CLS_CONTAINER, children: _jsxs(DynamicBgDiv, { color: backgroundColor, className: [
+                    "flex items-center relative overflow-hidden rounded-2xl",
                     compact
                         ? "h-[clamp(112px,16vh,160px)]"
                         : "min-h-[clamp(240px,34vh,360px)]",
-                ].join(" "), style: backgroundColor ? { backgroundColor } : undefined, children: [!backgroundColor && (_jsx(Div, { className: CLS_GRADIENT_BG, "aria-hidden": true })), _jsxs(Div, { className: `absolute inset-0 ${__O.hidden}`, "aria-hidden": true, children: [_jsx(Div, { className: "absolute -top-16 -left-16 w-64 h-64 bg-primary/20 blur-3xl animate-pulse", rounded: "full" }), _jsx(Div, { className: "absolute -bottom-16 right-0 w-80 h-80 bg-cobalt/20 blur-3xl animate-pulse", rounded: "full" })] }), compact ? (_jsxs(Row, { justify: "between", className: "relative z-10 w-full", gap: "md", padding: "inlineLg", children: [_jsxs(Span, { layout: "inline-flex", gap: "md", children: [_jsx(Sparkles, { className: "w-4 h-4 text-white/80" }), _jsx(Span, { color: "inverse", size: "sm", weight: "semibold", children: title })] }), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "sm", onClick: onCtaClick, className: CLS_CTA_BTN_SM, children: [ctaLabel, _jsx(ArrowRight, { className: "w-3.5 h-3.5" })] }))] })) : (_jsxs(Div, { className: "relative z-10 w-full max-w-4xl mx-auto md:py-16 text-center", paddingY: "y-3xl", paddingX: "x-lg", children: [tagLabel && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "semibold", className: "bg-white/15 /90 tracking-widest mb-5 backdrop-blur-sm shadow-sm", rounded: "full", padding: "pill-lg", transform: "uppercase", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { color: "inverse", level: 2, variant: "none", className: "lg:text-6xl font-extrabold mb-4 drop-shadow-lg leading-tight", mdSize: "5xl", size: "3xl", children: title }), subtitle && (_jsx(Text, { color: "inverse", variant: "none", className: "mb-10 max-w-2xl mx-auto", mdSize: "xl", size: "base", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "lg", onClick: onCtaClick, className: CLS_CTA_BTN_LG, children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] }))] }) }) }));
+                ].join(" "), children: [!backgroundColor && (_jsx(Div, { className: CLS_GRADIENT_BG, "aria-hidden": true })), _jsxs(Div, { className: `absolute inset-0 ${__O.hidden}`, "aria-hidden": true, children: [_jsx(Div, { className: "absolute -top-16 -left-16 w-64 h-64 bg-primary/20 blur-3xl animate-pulse", rounded: "full" }), _jsx(Div, { className: "absolute -bottom-16 right-0 w-80 h-80 bg-cobalt/20 blur-3xl animate-pulse", rounded: "full" })] }), compact ? (_jsxs(Row, { justify: "between", className: "relative z-10 w-full", gap: "md", padding: "inlineLg", children: [_jsxs(Span, { layout: "inline-flex", gap: "md", children: [_jsx(Sparkles, { className: "w-4 h-4 text-white/80" }), _jsx(Span, { color: "inverse", size: "sm", weight: "semibold", children: title })] }), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "sm", onClick: onCtaClick, className: CLS_CTA_BTN_SM, children: [ctaLabel, _jsx(ArrowRight, { className: "w-3.5 h-3.5" })] }))] })) : (_jsxs(Div, { className: "relative z-10 w-full max-w-4xl mx-auto md:py-[4rem] text-center", paddingY: "y-3xl", paddingX: "x-lg", children: [tagLabel && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "semibold", className: "bg-[rgba(255,255,255,0.15)] /90 tracking-widest mb-5 backdrop-blur-sm", shadow: "sm", rounded: "full", padding: "pill-lg", transform: "uppercase", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { color: "inverse", level: 2, variant: "none", className: "font-extrabold mb-4 leading-tight", mdSize: "5xl", lgSize: "6xl", size: "3xl", shadow: "lg", children: title }), subtitle && (_jsx(Text, { color: "inverse", variant: "none", className: "mb-10 max-w-2xl mx-auto", mdSize: "xl", size: "base", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "lg", onClick: onCtaClick, className: CLS_CTA_BTN_LG, children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] }))] }) }) }));
 }

package/dist/features/homepage/components/BeforeAfterCard.js

@@ -11,6 +11,8 @@ const __O = {
 };
 export function BeforeAfterCard({ item, beforeLabel = "Before", afterLabel = "After", }) {
     const containerRef = useRef(null);
+    const beforeClipRef = useRef(null);
+    const dividerRef = useRef(null);
     const [position, setPosition] = useState(50);
     const [dragging, setDragging] = useState(false);
     const updatePosition = useCallback((clientX) => {
@@ -22,6 +24,12 @@ export function BeforeAfterCard({ item, beforeLabel = "Before", afterLabel = "Af
         const pct = Math.max(0, Math.min(100, (x / rect.width) * 100));
         setPosition(pct);
     }, []);
+    useEffect(() => {
+        if (beforeClipRef.current)
+            beforeClipRef.current.style.width = `${position}%`;
+        if (dividerRef.current)
+            dividerRef.current.style.left = `${position}%`;
+    }, [position]);
     useEffect(() => {
         if (!dragging)
             return;
@@ -55,5 +63,5 @@ export function BeforeAfterCard({ item, beforeLabel = "Before", afterLabel = "Af
                         setPosition((p) => Math.max(0, p - 2));
                     if (e.key === "ArrowRight")
                         setPosition((p) => Math.min(100, p + 2));
-                }, children: [_jsx(Image, { src: item.afterImage, alt: afterLabel, fill: true, sizes: "(max-width: 640px) 100vw, 50vw", className: "object-cover" }), _jsx(Div, { className: "absolute inset-0 overflow-hidden", style: { width: `${position}%` }, children: _jsx(Image, { src: item.beforeImage, alt: beforeLabel, fill: true, sizes: "(max-width: 640px) 100vw, 50vw", className: "object-cover" }) }), _jsx(Div, { className: "absolute top-0 bottom-0 z-10 w-0.5 bg-card", shadow: "md", style: { left: `${position}%` }, children: _jsx(Row, { className: "absolute top-1/2 left-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 bg-card", align: "center", justify: "center", rounded: "full", shadow: "lg", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 8L1 5M4 8L1 11M4 8H12M12 8L15 5M12 8L15 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }), _jsx(Span, { surface: "overlay-sm", color: "inverse", size: "xs", weight: "medium", className: "absolute top-3 left-3 z-10", padding: "pill-sm", rounded: "full", children: beforeLabel }), _jsx(Span, { surface: "overlay-sm", color: "inverse", size: "xs", weight: "medium", className: "absolute top-3 right-3 z-10", padding: "pill-sm", rounded: "full", children: afterLabel })] }), _jsx(Div, { className: `${__P.p4}`, children: _jsx(Text, { className: "text-foreground", size: "sm", weight: "medium", children: item.caption }) })] }));
+                }, children: [_jsx(Image, { src: item.afterImage, alt: afterLabel, fill: true, sizes: "(max-width: 640px) 100vw, 50vw", className: "object-cover" }), _jsx("div", { ref: beforeClipRef, className: "absolute inset-0 overflow-hidden", children: _jsx(Image, { src: item.beforeImage, alt: beforeLabel, fill: true, sizes: "(max-width: 640px) 100vw, 50vw", className: "object-cover" }) }), _jsx("div", { ref: dividerRef, className: "absolute top-0 bottom-0 z-10 w-0.5 bg-[var(--appkit-color-surface)] shadow-md", children: _jsx(Row, { className: "absolute top-1/2 left-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 bg-card", align: "center", justify: "center", rounded: "full", shadow: "lg", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 8L1 5M4 8L1 11M4 8H12M12 8L15 5M12 8L15 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }), _jsx(Span, { surface: "overlay-sm", color: "inverse", size: "xs", weight: "medium", className: "absolute top-3 left-3 z-10", padding: "pill-sm", rounded: "full", children: beforeLabel }), _jsx(Span, { surface: "overlay-sm", color: "inverse", size: "xs", weight: "medium", className: "absolute top-3 right-3 z-10", padding: "pill-sm", rounded: "full", children: afterLabel })] }), _jsx(Div, { className: `${__P.p4}`, children: _jsx(Text, { className: "text-foreground", size: "sm", weight: "medium", children: item.caption }) })] }));
 }

package/dist/features/homepage/components/CharacterHotspot.js

@@ -15,6 +15,14 @@ const __O = {
 const FALLBACK_IMAGE = "/animevssuperhero.jpg";
 const FALLBACK_IMAGE_ALT = "DC, Marvel and Anime characters";
 const FONT_BANGERS = "var(--font-bangers, Bangers, cursive)";
+/* -- Franchise brand colour references — hex lives in tokens.css (exempt) -- */
+const BRAND_MARVEL = "var(--brand-marvel)";
+const BRAND_DC = "var(--brand-dc)";
+const BRAND_DC_ALT = "var(--brand-dc-alt)";
+const BRAND_ANIME_YELLOW = "var(--brand-anime-yellow)";
+const BRAND_ANIME_YELLOW_TEXT = "var(--brand-anime-yellow-text)";
+const BRAND_NARUTO = "var(--brand-naruto)";
+const BRAND_HOTSPOT_OVERLAY = "var(--brand-hotspot-overlay)";
 const DEFAULT_HOTSPOTS = [
     {
         id: "spiderman",
@@ -24,7 +32,7 @@ const DEFAULT_HOTSPOTS = [
         href: "/franchise/marvel",
         xPct: 8,
         yPct: 22,
-        accent: "#E8001C",
+        accent: BRAND_MARVEL,
         badge: "MARVEL",
         buyText: "Get Spider-Man Figures",
     },
@@ -36,7 +44,7 @@ const DEFAULT_HOTSPOTS = [
         href: "/franchise/marvel",
         xPct: 18,
         yPct: 58,
-        accent: "#E8001C",
+        accent: BRAND_MARVEL,
         badge: "MARVEL",
         buyText: "Get Iron Man Figures",
     },
@@ -48,7 +56,7 @@ const DEFAULT_HOTSPOTS = [
         href: "/franchise/dc-comics",
         xPct: 28,
         yPct: 18,
-        accent: "#4A90D9",
+        accent: BRAND_DC,
         badge: "DC",
         buyText: "Get Robin Figures",
     },
@@ -60,7 +68,7 @@ const DEFAULT_HOTSPOTS = [
         href: "/franchise/dc-comics",
         xPct: 36,
         yPct: 42,
-        accent: "#4A90D9",
+        accent: BRAND_DC,
         badge: "DC",
         buyText: "Get Batman Figures",
     },
@@ -72,7 +80,7 @@ const DEFAULT_HOTSPOTS = [
         href: "/franchise/marvel",
         xPct: 12,
         yPct: 76,
-        accent: "#0057FF",
+        accent: BRAND_DC_ALT,
         badge: "MARVEL",
         buyText: "Get Cap Figures",
     },
@@ -84,7 +92,7 @@ const DEFAULT_HOTSPOTS = [
         href: "/franchise/dc-comics",
         xPct: 44,
         yPct: 68,
-        accent: "#0057FF",
+        accent: BRAND_DC_ALT,
         badge: "DC",
         buyText: "Get Superman Figures",
     },
@@ -96,7 +104,7 @@ const DEFAULT_HOTSPOTS = [
         href: "/franchise/dragon-ball",
         xPct: 51,
         yPct: 36,
-        accent: "#FFE500",
+        accent: BRAND_ANIME_YELLOW,
         badge: "ANIME",
         buyText: "Get Goku Figures",
     },
@@ -108,7 +116,7 @@ const DEFAULT_HOTSPOTS = [
         href: "/franchise/naruto",
         xPct: 57,
         yPct: 78,
-        accent: "#FF6B00",
+        accent: BRAND_NARUTO,
         badge: "ANIME",
         buyText: "Get Naruto Figures",
     },
@@ -120,7 +128,7 @@ const DEFAULT_HOTSPOTS = [
         href: "/franchise/bleach",
         xPct: 70,
         yPct: 20,
-        accent: "#4A90D9",
+        accent: BRAND_DC,
         badge: "ANIME",
         buyText: "Get Ichigo Figures",
     },
@@ -132,7 +140,7 @@ const DEFAULT_HOTSPOTS = [
         href: "/franchise/one-piece",
         xPct: 80,
         yPct: 50,
-        accent: "#FFE500",
+        accent: BRAND_ANIME_YELLOW,
         badge: "ANIME",
         buyText: "Get Luffy Figures",
     },
@@ -144,7 +152,7 @@ const DEFAULT_HOTSPOTS = [
         href: "/franchise/one-punch-man",
         xPct: 91,
         yPct: 50,
-        accent: "#FFE500",
+        accent: BRAND_ANIME_YELLOW,
         badge: "ANIME",
         buyText: "Get Saitama Figures",
     },
@@ -158,40 +166,25 @@ export function CharacterHotspot({ config, defaultHotspots = DEFAULT_HOTSPOTS, u
     return (_jsx(CharacterHotspotInner, { panoramicImage: panoramicImage, panoramicAlt: panoramicAlt, hotspots: hotspots, universeLinks: universeLinks ?? DEFAULT_UNIVERSE_LINKS, shopAllHref: shopAllHref, heading: heading, subheading: subheading }));
 }
 const DEFAULT_UNIVERSE_LINKS = [
-    { label: "MARVEL", href: "/franchise/marvel", color: "#E8001C", icon: "⚡" },
-    {
-        label: "DC COMICS",
-        href: "/franchise/dc-comics",
-        color: "#4A90D9",
-        icon: "🦇",
-    },
-    {
-        label: "DRAGON BALL",
-        href: "/franchise/dragon-ball",
-        color: "#FFE500",
-        icon: "✦",
-    },
-    { label: "NARUTO", href: "/franchise/naruto", color: "#FF6B00", icon: "🍃" },
-    {
-        label: "ONE PIECE",
-        href: "/franchise/one-piece",
-        color: "#FFE500",
-        icon: "⚓",
-    },
-    { label: "BLEACH", href: "/franchise/bleach", color: "#4A90D9", icon: "⚔" },
+    { label: "MARVEL", href: "/franchise/marvel", color: BRAND_MARVEL, icon: "⚡" },
+    { label: "DC COMICS", href: "/franchise/dc-comics", color: BRAND_DC, icon: "🦇" },
+    { label: "DRAGON BALL", href: "/franchise/dragon-ball", color: BRAND_ANIME_YELLOW, icon: "✦" },
+    { label: "NARUTO", href: "/franchise/naruto", color: BRAND_NARUTO, icon: "🍃" },
+    { label: "ONE PIECE", href: "/franchise/one-piece", color: BRAND_ANIME_YELLOW, icon: "⚓" },
+    { label: "BLEACH", href: "/franchise/bleach", color: BRAND_DC, icon: "⚔" },
 ];
 function HotspotHeaderOverlay({ heading, subheading, shopAllHref, }) {
     return (_jsx(Div, { className: "absolute top-0 left-0 right-0 z-10 pointer-events-none", style: {
             background: "linear-gradient(to bottom, rgba(10,10,18,0.88) 0%, rgba(10,10,18,0.40) 50%, transparent 100%)",
-        }, children: _jsxs(Row, { wrap: true, align: "start", justify: "between", gap: "sm", className: "pointer-events-auto mx-auto max-w-7xl pt-4 pb-6 gap-y-3", padding: "x-md", children: [_jsxs(Div, { children: [_jsx(Text, { className: "mb-1 font-black uppercase tracking-[0.2em]", size: "xs", style: { color: "var(--color-red)" }, children: "Explore the Universe" }), _jsx(Heading, { level: 2, style: {
+        }, children: _jsxs(Row, { wrap: true, align: "start", justify: "between", gap: "sm", className: "pointer-events-auto mx-auto max-w-7xl gap-y-3", paddingX: "x-md", paddingY: "t-md-b-lg", children: [_jsxs(Div, { children: [_jsx(Text, { className: "mb-1 font-black uppercase tracking-[0.2em]", size: "xs", style: { color: "var(--color-red)" }, children: "Explore the Universe" }), _jsx(Heading, { level: 2, style: {
                                 fontFamily: FONT_BANGERS,
                                 fontSize: "clamp(1.8rem, 4.5vw, 3rem)",
                                 letterSpacing: "0.07em",
-                                color: "#FFFFFF",
+                                color: "white",
                                 lineHeight: 1,
                             }, children: heading }), subheading ? (_jsx(Text, { className: "mt-2 max-w-md", size: "sm", weight: "medium", style: { color: "var(--dark-section-muted)" }, children: subheading })) : (_jsxs(Text, { className: "mt-2 max-w-md", size: "sm", weight: "medium", style: { color: "var(--dark-section-muted)" }, children: ["& beyond \u2014 tap the", " ", _jsx(Span, { layout: "inline-flex-center", rounded: "full", weight: "light", style: {
                                         background: "rgba(255,255,255,0.92)",
-                                        color: "#111111",
+                                        color: "var(--appkit-color-text)",
                                         width: 18,
                                         height: 18,
                                         border: "1.5px solid rgba(0,0,0,0.18)",
@@ -203,7 +196,7 @@ function HotspotHeaderOverlay({ heading, subheading, shopAllHref, }) {
                         fontFamily: FONT_BANGERS,
                         letterSpacing: "0.1em",
                         background: "var(--color-red)",
-                        color: "#FFFFFF",
+                        color: "white",
                         border: "3px solid var(--border-ink)",
                         boxShadow: "4px 4px 0px var(--border-ink)",
                     }, children: "SHOP ALL \u2192" })] }) }));
@@ -214,7 +207,7 @@ function HotspotImageLayer({ panoramicImage, panoramicAlt, }) {
                 } }), _jsx(Div, { className: "absolute inset-0", style: {
                     background: "linear-gradient(to bottom, rgba(10,10,18,0.25) 0%, transparent 40%, rgba(10,10,18,0.65) 100%)",
                 } }), _jsx(Div, { className: "absolute bottom-0 left-0 right-0 h-16 pointer-events-none", style: {
-                    background: "linear-gradient(to bottom, transparent, #0A0A12)",
+                    background: `linear-gradient(to bottom, transparent, ${BRAND_HOTSPOT_OVERLAY})`,
                 } })] }));
 }
 function HotspotPin({ hotspot, isActive, isMobile, toggle, onClose, }) {
@@ -239,7 +232,7 @@ function HotspotPin({ hotspot, isActive, isMobile, toggle, onClose, }) {
                     padding: 0,
                     transition: "transform 0.2s ease, opacity 0.2s ease",
                     transform: isActive ? "scale(1.2) rotate(45deg)" : "scale(1)",
-                    color: isMobile ? "#FFFFFF" : isActive ? "#FFFFFF" : "#111111",
+                    color: isMobile ? "white" : isActive ? "white" : "var(--appkit-color-text)",
                     fontSize: isMobile ? 18 : 22,
                     fontWeight: 200,
                     lineHeight: 1,
@@ -256,11 +249,11 @@ function HotspotPin({ hotspot, isActive, isMobile, toggle, onClose, }) {
                     overflow: "hidden",
                     zIndex: 40,
                     animation: "fadeInUp 0.2s ease both",
-                }, children: [_jsx(Div, { style: { height: 4, background: hotspot.accent } }), _jsxs(Div, { paddingX: "x-5", padding: "y-md", children: [_jsx(Text, { className: "text-[10px] uppercase tracking-[0.18em] mb-1", weight: "bold", style: { color: hotspot.accent === "#FFE500" ? "#b08800" : hotspot.accent }, children: hotspot.universe }), _jsx(Heading, { level: 3, className: "font-black leading-tight mb-3", style: { fontFamily: FONT_BANGERS, fontSize: "1.45rem", letterSpacing: "0.06em", color: "#111111" }, children: hotspot.name }), _jsx(Text, { className: "leading-relaxed mb-4", size: "xs", style: { color: "#374151" }, children: hotspot.description }), _jsxs(Link, { href: hotspot.href, onClick: onClose, className: "flex items-center justify-between px-4 py-2.5 text-sm font-black uppercase transition-opacity hover:opacity-85", style: {
+                }, children: [_jsx(Div, { style: { height: 4, background: hotspot.accent } }), _jsxs(Div, { paddingX: "x-5", padding: "y-md", children: [_jsx(Text, { className: "text-[10px] uppercase tracking-[0.18em] mb-1", weight: "bold", style: { color: hotspot.accent === BRAND_ANIME_YELLOW ? BRAND_ANIME_YELLOW_TEXT : hotspot.accent }, children: hotspot.universe }), _jsx(Heading, { level: 3, className: "font-black leading-tight mb-3", style: { fontFamily: FONT_BANGERS, fontSize: "1.45rem", letterSpacing: "0.06em", color: "var(--appkit-color-text)" }, children: hotspot.name }), _jsx(Text, { className: "leading-relaxed mb-4", size: "xs", style: { color: "var(--appkit-color-slate-700)" }, children: hotspot.description }), _jsxs(Link, { href: hotspot.href, onClick: onClose, className: "flex items-center justify-between px-4 py-2.5 text-sm font-black uppercase transition-opacity hover:opacity-85", style: {
                                     fontFamily: FONT_BANGERS,
                                     letterSpacing: "0.1em",
                                     background: hotspot.accent,
-                                    color: hotspot.accent === "#FFE500" ? "#0D0D0D" : "#FFFFFF",
+                                    color: hotspot.accent === BRAND_ANIME_YELLOW ? "black" : "white",
                                     borderRadius: 2,
                                 }, children: [hotspot.buyText, _jsx(Span, { "aria-hidden": "true", children: "\u2192" })] })] })] }))] }));
 }
@@ -272,14 +265,14 @@ function MobileHotspotSheet({ active, onClose, }) {
                 borderTopRightRadius: 16,
                 overflow: "hidden",
                 animation: "fadeInUp 0.22s ease both",
-            }, children: [_jsx(Row, { paddingY: "b-2xs", padding: "t-sm", justify: "center", children: _jsx(Div, { style: { width: 40, height: 4, borderRadius: 2, background: "#D1D5DB" } }) }), _jsx(Div, { style: { height: 4, background: active.accent } }), _jsxs(Div, { className: "px-5 pb-10", padding: "t-md", children: [_jsx(Text, { className: "text-[10px] uppercase tracking-[0.18em] mb-1", weight: "bold", style: { color: active.accent === "#FFE500" ? "#b08800" : active.accent }, children: active.universe }), _jsx(Heading, { level: 3, className: "font-black leading-tight mb-2", style: { fontFamily: FONT_BANGERS, fontSize: "clamp(1.5rem, 6vw, 2rem)", letterSpacing: "0.06em", color: "#111111" }, children: active.name }), _jsx(Text, { className: "leading-relaxed mb-5", size: "sm", style: { color: "#374151" }, children: active.description }), _jsxs(Row, { gap: "3", children: [_jsxs(Link, { href: active.href, onClick: onClose, className: "flex-1 flex items-center justify-between px-4 py-3 font-black uppercase", style: {
+            }, children: [_jsx(Row, { paddingY: "b-2xs", padding: "t-sm", justify: "center", children: _jsx(Div, { style: { width: 40, height: 4, borderRadius: 2, background: "var(--appkit-color-zinc-300)" } }) }), _jsx(Div, { style: { height: 4, background: active.accent } }), _jsxs(Div, { padding: "t-md", style: { paddingInline: "1.25rem", paddingBottom: "2.5rem" }, children: [_jsx(Text, { className: "text-[10px] uppercase tracking-[0.18em] mb-1", weight: "bold", style: { color: active.accent === BRAND_ANIME_YELLOW ? BRAND_ANIME_YELLOW_TEXT : active.accent }, children: active.universe }), _jsx(Heading, { level: 3, className: "font-black leading-tight mb-2", style: { fontFamily: FONT_BANGERS, fontSize: "clamp(1.5rem, 6vw, 2rem)", letterSpacing: "0.06em", color: "var(--appkit-color-text)" }, children: active.name }), _jsx(Text, { className: "leading-relaxed mb-5", size: "sm", style: { color: "var(--appkit-color-slate-700)" }, children: active.description }), _jsxs(Row, { gap: "3", children: [_jsxs(Link, { href: active.href, onClick: onClose, className: "flex-1 flex items-center justify-between px-4 py-3 font-black uppercase", style: {
                                         fontFamily: FONT_BANGERS,
                                         letterSpacing: "0.1em",
                                         fontSize: "0.9rem",
                                         background: active.accent,
-                                        color: active.accent === "#FFE500" ? "#0D0D0D" : "#FFFFFF",
+                                        color: active.accent === BRAND_ANIME_YELLOW ? "black" : "white",
                                         borderRadius: 4,
-                                    }, children: [active.buyText, _jsx(Span, { "aria-hidden": "true", children: "\u2192" })] }), _jsx(Button, { type: "button", variant: "outline", onClick: onClose, paddingX: "lg", textSize: "sm", rounded: "default", className: "py-3 font-bold", style: { background: "#F1F5F9", color: "#475569" }, children: "Close" })] })] })] }) }));
+                                    }, children: [active.buyText, _jsx(Span, { "aria-hidden": "true", children: "\u2192" })] }), _jsx(Button, { type: "button", variant: "outline", onClick: onClose, paddingX: "lg", textSize: "sm", rounded: "default", className: "py-[0.75rem] font-[700]", style: { background: "var(--appkit-color-slate-100)", color: "var(--appkit-color-slate-600)" }, children: "Close" })] })] })] }) }));
 }
 function UniverseBrowseRow({ universeLinks, }) {
     return (_jsx(Div, { gap: "3", className: `mx-auto max-w-7xl ${GRID_COLS_6_LG}`, paddingY: "y-lg", paddingX: "x-md", style: { borderTop: "1px solid rgba(255,255,255,0.08)" }, children: universeLinks.map(({ label, href, color, icon }) => (_jsxs(Link, { href: href, className: "group flex items-center gap-2.5 px-3 py-2.5 rounded-sm transition-all hover:-translate-y-0.5", style: {
@@ -292,7 +285,7 @@ function UniverseBrowseRow({ universeLinks, }) {
             }, onMouseLeave: (e) => {
                 e.currentTarget.style.borderColor = "rgba(255,255,255,0.08)";
                 e.currentTarget.style.background = "rgba(255,255,255,0.04)";
-            }, children: [_jsx(Span, { size: "base", "aria-hidden": "true", className: "select-none", children: icon }), _jsx(Span, { size: "xs", className: "font-black uppercase tracking-wide", style: { fontFamily: FONT_BANGERS, letterSpacing: "0.1em", color: "#E2E8F0" }, children: label }), _jsx(Span, { size: "xs", className: "ml-auto", style: { color: "#475569", transition: "color 0.15s" }, children: "\u2192" })] }, label))) }));
+            }, children: [_jsx(Span, { size: "base", "aria-hidden": "true", className: "select-none", children: icon }), _jsx(Span, { size: "xs", className: "font-black uppercase tracking-wide", style: { fontFamily: FONT_BANGERS, letterSpacing: "0.1em", color: "var(--appkit-color-slate-200)" }, children: label }), _jsx(Span, { size: "xs", className: "ml-auto", style: { color: "var(--appkit-color-slate-600)", transition: "color 0.15s" }, children: "\u2192" })] }, label))) }));
 }
 function CharacterHotspotInner({ panoramicImage, panoramicAlt, hotspots, universeLinks, shopAllHref, heading, subheading, }) {
     const [activeId, setActiveId] = useState(null);
@@ -324,13 +317,13 @@ function CharacterHotspotInner({ panoramicImage, panoramicAlt, hotspots, univers
             borderTop: "3px solid var(--dark-section-bg)",
             borderBottom: "3px solid var(--dark-section-bg)",
             overflow: "hidden",
-        }, children: [_jsxs(Div, { ref: containerRef, className: "relative w-full", style: { aspectRatio: "16/9", minHeight: "420px" }, children: [_jsx(HotspotHeaderOverlay, { heading: heading, subheading: subheading, shopAllHref: shopAllHref }), _jsx(HotspotImageLayer, { panoramicImage: panoramicImage, panoramicAlt: panoramicAlt }), _jsx(Div, { className: "hidden sm:flex absolute left-0 right-0 justify-around items-start pointer-events-none", style: { top: "clamp(120px, 18vh, 165px)", zIndex: 5 }, children: [
-                            { label: "MARVEL", color: "#E8001C" },
-                            { label: "DC COMICS", color: "#4A90D9" },
-                            { label: "ANIME", color: "#FFE500" },
+        }, children: [_jsxs(Div, { ref: containerRef, className: "relative w-full", style: { aspectRatio: "16/9", minHeight: "420px" }, children: [_jsx(HotspotHeaderOverlay, { heading: heading, subheading: subheading, shopAllHref: shopAllHref }), _jsx(HotspotImageLayer, { panoramicImage: panoramicImage, panoramicAlt: panoramicAlt }), _jsx(Div, { className: "hidden sm:flex absolute left-0 right-0 justify-[space-around] items-[flex-start] pointer-events-none", style: { top: "clamp(120px, 18vh, 165px)", zIndex: 5 }, children: [
+                            { label: "MARVEL", color: BRAND_MARVEL },
+                            { label: "DC COMICS", color: BRAND_DC },
+                            { label: "ANIME", color: BRAND_ANIME_YELLOW },
                         ].map(({ label, color }) => (_jsxs(Stack, { align: "center", children: [_jsx(Span, { className: "text-[10px] font-black uppercase tracking-[0.18em]", smSize: "xs", rounded: "sm", padding: "pill-md", style: {
                                         background: color,
-                                        color: color === "#FFE500" ? "#0D0D0D" : "#FFFFFF",
+                                        color: color === BRAND_ANIME_YELLOW ? "black" : "white",
                                         boxShadow: "2px 2px 0px rgba(0,0,0,0.6)",
                                         fontFamily: FONT_BANGERS,
                                         letterSpacing: "0.16em",