pixelize-design-library 2.4.1 → 2.4.2-beta.1

package/dist/Components/PlanBadge/PlanBadgeProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/PlanPill/PlanPill.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { PlanPillProps } from "./PlanPillProps";
+declare const PlanPill: React.FC<PlanPillProps>;
+export default PlanPill;

package/dist/Components/PlanPill/PlanPill.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 planPillGradient_1 = require("./planPillGradient");
+const TONE_ICON = {
+    normal: lucide_react_1.Sparkles,
+    warning: lucide_react_1.Clock,
+    danger: lucide_react_1.AlertCircle,
+};
+const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient, maxLabelWidth = "150px", ariaLabel, onClick, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const c = theme.colors;
+    const toneGradient = {
+        normal: planPillGradient_1.ACCENT_GRADIENT,
+        warning: (0, planPillGradient_1.statusGradient)(c.semantic.warning),
+        danger: (0, planPillGradient_1.statusGradient)(c.semantic.error),
+    };
+    const resolved = (0, planPillGradient_1.inkSafeGradient)(gradient !== null && gradient !== void 0 ? gradient : toneGradient[tone]);
+    const ink = (0, accentText_1.onGradient)(resolved.from, resolved.to, c.white, c.black);
+    const Icon = icon === undefined ? TONE_ICON[tone] : icon;
+    const hasMobile = !!mobileLabel && mobileLabel !== label;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": ariaLabel || (status ? `${label} — ${status}` : label), onClick: onClick, display: "inline-flex", alignItems: "center", gap: "7px", pl: "12px", pr: status ? "5px" : "12px", py: "3px", bgImage: `linear-gradient(135deg, ${resolved.from} 0%, ${resolved.to} 100%)`, color: ink, borderRadius: "full", whiteSpace: "nowrap", cursor: "pointer", transition: "transform 0.2s ease, box-shadow 0.2s ease", _hover: {
+            transform: "translateY(-1px)",
+            boxShadow: `0 6px 18px ${resolved.from}59`,
+        }, _focusVisible: {
+            outline: "none",
+            boxShadow: `0 0 0 3px ${resolved.from}55`,
+        }, sx: {
+            "@media (prefers-reduced-motion: reduce)": {
+                transition: "none",
+                _hover: { transform: "none" },
+            },
+        }, children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 12, strokeWidth: 2.5, "aria-hidden": true }) : null, (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", overflow: "hidden", textOverflow: "ellipsis", maxW: maxLabelWidth, display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", display: { base: "block", md: "none" }, children: mobileLabel })) : null, status ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", align: "center", px: "8px", borderRadius: "full", bg: (0, planPillGradient_1.chipFill)(resolved), border: "1px solid", borderColor: (0, planPillGradient_1.chipBorder)(resolved), fontSize: "11px", fontWeight: "700", lineHeight: "18px", sx: { fontVariantNumeric: "tabular-nums" }, children: status })) : null] }));
+};
+exports.default = PlanPill;

package/dist/Components/PlanPill/PlanPillProps.d.ts

@@ -0,0 +1,27 @@
+import { ElementType } from "react";
+/**
+ * Urgency of the plan state. Drives the gradient and the leading icon, so the
+ * badge reads as healthy / expiring soon / expired before the text is read.
+ */
+export type PlanPillTone = "normal" | "warning" | "danger";
+export interface PlanPillProps {
+    /** Primary label, e.g. the plan name or an upgrade prompt. */
+    label: string;
+    /** Compact label for small screens. Defaults to `label`. */
+    mobileLabel?: string;
+    /** Remaining time, e.g. `3mo left`. Rendered as an inset chip; omitted when empty. */
+    status?: string;
+    tone?: PlanPillTone;
+    /** Leading icon. Defaults to a tone-appropriate lucide icon. Pass null to hide. */
+    icon?: ElementType | null;
+    /** Explicit gradient stops. Overrides the tone's theme gradient. */
+    gradient?: {
+        from: string;
+        to: string;
+    };
+    /** Truncate the label beyond this width. */
+    maxLabelWidth?: string;
+    /** Accessible label (falls back to `label — status`). */
+    ariaLabel?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}

package/dist/Components/PlanPill/PlanPillProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/PlanPill/planPillGradient.d.ts

@@ -0,0 +1,40 @@
+import type { ColorScale } from "../../Theme/tokens/types";
+export type Gradient = {
+    from: string;
+    to: string;
+};
+export declare const STATUS_INK = "#ffffff";
+/**
+ * The plan badge's `normal` tone is a single fixed accent — not brand-driven, and
+ * not mode-dependent.
+ *
+ * Its tone carries meaning (normal / warning / danger), and a brand gradient can
+ * collide with that: rosewood's `#c74962 → #ea0727` is red, so a healthy plan
+ * rendered as if it had expired. Greyscale brands failed the other way, sinking
+ * the badge into the header chrome.
+ *
+ * One accent for both color modes is deliberate: a lighter dark-mode variant was
+ * tried and flipped `onGradient`'s ink to black, which read as a washed-out candy
+ * pill on dark chrome. These stops keep white ink in both modes, so the badge looks
+ * like the same component everywhere. Verified at AA (>= 4.5:1) on both stops.
+ *
+ * Consumers who genuinely want another colour still pass `gradient`.
+ */
+export declare const ACCENT_GRADIENT: Gradient;
+/**
+ * Sinks both stops until WHITE ink clears AA, keeping each stop's hue. Any mid-tone gradient —
+ * a brand `gradient` token, a status scale — otherwise flips `onGradient` to black ink, so the
+ * same badge reads white-on-colour in one brand and black-on-pastel in the next.
+ */
+export declare const inkSafeGradient: (gradient: Gradient) => Gradient;
+/** Status tones are semantic scales, not designed as label backdrops. */
+export declare const statusGradient: (scale: ColorScale) => Gradient;
+export declare const darkerStop: (g: Gradient) => string;
+/**
+ * Solid inset chip in the pill's own hue. A translucent scrim was a guessed alpha that
+ * composited into a muddy dark lozenge on every mid-tone gradient; a derived rung reads as
+ * one step down from the pill in every brand and both modes.
+ */
+export declare const chipFill: (g: Gradient) => string;
+/** The pill's lighter stop — guaranteed lighter than `chipFill`, so it draws the inset edge. */
+export declare const chipBorder: (g: Gradient) => string;

package/dist/Components/PlanPill/planPillGradient.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipBorder = exports.chipFill = exports.darkerStop = exports.statusGradient = exports.inkSafeGradient = exports.ACCENT_GRADIENT = exports.STATUS_INK = void 0;
+const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+const color_1 = require("../../Theme/tokens/builders/color");
+exports.STATUS_INK = "#ffffff";
+/**
+ * The plan badge's `normal` tone is a single fixed accent — not brand-driven, and
+ * not mode-dependent.
+ *
+ * Its tone carries meaning (normal / warning / danger), and a brand gradient can
+ * collide with that: rosewood's `#c74962 → #ea0727` is red, so a healthy plan
+ * rendered as if it had expired. Greyscale brands failed the other way, sinking
+ * the badge into the header chrome.
+ *
+ * One accent for both color modes is deliberate: a lighter dark-mode variant was
+ * tried and flipped `onGradient`'s ink to black, which read as a washed-out candy
+ * pill on dark chrome. These stops keep white ink in both modes, so the badge looks
+ * like the same component everywhere. Verified at AA (>= 4.5:1) on both stops.
+ *
+ * Consumers who genuinely want another colour still pass `gradient`.
+ */
+exports.ACCENT_GRADIENT = { from: "#8B3FC8", to: "#df187a" };
+/**
+ * Sinks both stops until WHITE ink clears AA, keeping each stop's hue. Any mid-tone gradient —
+ * a brand `gradient` token, a status scale — otherwise flips `onGradient` to black ink, so the
+ * same badge reads white-on-colour in one brand and black-on-pastel in the next.
+ */
+const inkSafeGradient = (gradient) => ({
+    from: (0, statusTone_1.resolveAvatarFill)(gradient.from),
+    to: (0, statusTone_1.resolveAvatarFill)(gradient.to),
+});
+exports.inkSafeGradient = inkSafeGradient;
+/** Status tones are semantic scales, not designed as label backdrops. */
+const statusGradient = (scale) => (0, exports.inkSafeGradient)({ from: scale[400], to: scale[600] });
+exports.statusGradient = statusGradient;
+const CHIP_INK_CONTRAST = 7;
+const darkerStop = (g) => (0, color_1.relativeLuminance)(g.from) <= (0, color_1.relativeLuminance)(g.to) ? g.from : g.to;
+exports.darkerStop = darkerStop;
+/**
+ * Solid inset chip in the pill's own hue. A translucent scrim was a guessed alpha that
+ * composited into a muddy dark lozenge on every mid-tone gradient; a derived rung reads as
+ * one step down from the pill in every brand and both modes.
+ */
+const chipFill = (g) => (0, statusTone_1.resolveAvatarFill)((0, exports.darkerStop)(g), CHIP_INK_CONTRAST);
+exports.chipFill = chipFill;
+/** The pill's lighter stop — guaranteed lighter than `chipFill`, so it draws the inset edge. */
+const chipBorder = (g) => (0, color_1.relativeLuminance)(g.from) > (0, color_1.relativeLuminance)(g.to) ? g.from : g.to;
+exports.chipBorder = chipBorder;

package/dist/Components/ProductCard/ProductCard.d.ts

@@ -1,4 +1,3 @@
 import { ProductCardProps } from "./ProductCardProps";
 declare const ProductCard: ({ id, label, productImage, rating, reviews, tags, options, button, batch, onAddToCart, onNotifyMe, onClick, onOptionChange, addToCart, goToCart, OnGoToCart, size, notifyMe, isQtyEditable, displayRating, }: ProductCardProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductCard;
-//# sourceMappingURL=ProductCard.d.ts.map

package/dist/Components/ProductCard/ProductCardProps.d.ts

@@ -45,4 +45,3 @@ export type productImage = {
     order: number;
     isImage?: boolean;
 };
-//# sourceMappingURL=ProductCardProps.d.ts.map

package/dist/Components/ProductCard/ProductLabel.d.ts

@@ -5,4 +5,3 @@ declare const ProductLabel: ({ label, description, size }: {
     size: SizeType;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ProductLabel;
-//# sourceMappingURL=ProductLabel.d.ts.map

package/dist/Components/ProductCard/ProductPrice.d.ts

@@ -8,4 +8,3 @@ type ProductPriceProps = {
 };
 declare const ProductPrice: ({ options, size, onSelect, rightSlot }: ProductPriceProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductPrice;
-//# sourceMappingURL=ProductPrice.d.ts.map

package/dist/Components/ProductCard/ProductPrice.js

@@ -9,6 +9,7 @@ const react_2 = require("@chakra-ui/react");
 const OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const rafThrottle_1 = require("../../Utils/rafThrottle");
 const sizeConfig = {
     xs: {
         font: "xs",
@@ -77,33 +78,38 @@ const ProductPrice = ({ options, size, onSelect, rightSlot }) => {
                 });
             }
         };
-        if (isOpen) {
-            updatePosition();
-            window.addEventListener("resize", updatePosition);
-            window.addEventListener("scroll", updatePosition, true); // listen to scroll on every scrollable ancestor
-        }
+        if (!isOpen)
+            return;
+        updatePosition();
+        const onReposition = (0, rafThrottle_1.rafThrottle)(updatePosition);
+        window.addEventListener("resize", onReposition);
+        window.addEventListener("scroll", onReposition, {
+            capture: true, // every scrollable ancestor, not just the window
+            passive: true,
+        });
         return () => {
-            window.removeEventListener("resize", updatePosition);
-            window.removeEventListener("scroll", updatePosition, true);
+            onReposition.cancel();
+            window.removeEventListener("resize", onReposition);
+            window.removeEventListener("scroll", onReposition, true);
         };
     }, [isOpen]);
     (0, react_1.useEffect)(() => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
     }, [selected, onSelect]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isSingleOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { border: "0.063rem solid", borderColor: "red.300", bg: "red.50", px: cfg.px, 
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isSingleOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { border: "0.063rem solid", borderColor: theme.colors.red[300], bg: theme.colors.red[50], px: cfg.px, 
                 // py={cfg.py}
-                rounded: "md", display: "inline-block", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: cfg.label, fontWeight: "medium", children: options[0].label }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: buttonRef, onClick: () => setIsOpen(!isOpen), border: "0.063rem solid", borderColor: "red.300", bg: "red.50", px: cfg.px, 
+                rounded: "md", display: "inline-block", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: cfg.label, fontWeight: "medium", children: options[0].label }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: buttonRef, onClick: () => setIsOpen(!isOpen), border: "0.063rem solid", borderColor: theme.colors.red[300], bg: theme.colors.red[50], px: cfg.px, 
                 // py={cfg.py}
-                rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap", children: selected.label }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: cfg.font, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.red[50]), transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s", children: "\u25BE" })] })), !isSingleOption && isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: dropdownRef, position: "fixed", top: `${dropdownPosition.top}px`, left: `${dropdownPosition.left}px`, width: `${dropdownPosition.width}px`, bg: theme.colors.background[50], border: "0.063rem solid", borderColor: "red.300", borderRadius: "md", overflow: "hidden", maxH: "13rem", overflowY: "auto", shadow: "md", zIndex: 100000, children: options.map((option) => {
+                rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap", children: selected.label }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: cfg.font, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.red[50]), transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s", children: "\u25BE" })] })), !isSingleOption && isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: dropdownRef, position: "fixed", top: `${dropdownPosition.top}px`, left: `${dropdownPosition.left}px`, width: `${dropdownPosition.width}px`, bg: theme.colors.background[50], border: "0.063rem solid", borderColor: theme.colors.red[300], borderRadius: "md", overflow: "hidden", maxH: "13rem", overflowY: "auto", shadow: "md", zIndex: 100000, children: options.map((option) => {
                         const discounted = getDiscountedPrice(option);
                         const isSelected = selected.var_id === option.var_id;
-                        return ((0, jsx_runtime_1.jsxs)(react_2.Grid, { px: 1, py: 0.5, cursor: "pointer", bg: isSelected ? 'red.50' : theme.colors.background[50], borderLeft: isSelected ? '0.25rem solid' : '0.25rem solid transparent', borderLeftColor: isSelected ? 'red.300' : 'transparent', _hover: { bg: 'red.100' }, onClick: () => {
+                        return ((0, jsx_runtime_1.jsxs)(react_2.Grid, { px: 1, py: 0.5, cursor: "pointer", bg: isSelected ? theme.colors.red[50] : theme.colors.background[50], borderLeft: isSelected ? '0.25rem solid' : '0.25rem solid transparent', borderLeftColor: isSelected ? theme.colors.red[300] : "transparent", _hover: { bg: theme.colors.red[100] }, onClick: () => {
                                 setSelected(option);
                                 setIsOpen(false);
                             }, templateColumns: { base: '1fr auto', md: '1fr auto' }, 
                             // columnGap={{ base: 2, md: 3 }}
                             // rowGap={{ base: 1.5, md: 2 }}
-                            alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0, children: (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap", children: option.label }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left", children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [option.offer > 0 && ((0, jsx_runtime_1.jsx)(react_2.Badge, { bg: "green.100", color: "green.700", borderRadius: "md", px: { base: 0, md: 0.5 }, py: { base: 0, md: 0.25 }, fontWeight: "bold", fontSize: "10px", flexShrink: 0, children: isMobile ? `${option.offer}%` : `${option.offer}% OFF` })), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, isSelected ? theme.colors.red[50] : theme.colors.background[50]), whiteSpace: "nowrap", children: ["\u20B9", discounted] }), option.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: "gray.500", textDecoration: "line-through", whiteSpace: "nowrap", children: ["\u20B9", option.price] }))] }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: 2, gridRow: 1, ml: { base: 0, md: 0 }, justifySelf: "end", w: { base: "0.625rem", md: "0.75rem" }, h: { base: "0.625rem", md: "0.75rem" }, minW: { base: "0.625rem", md: "0.75rem" }, borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? 'red.500' : 'gray.600', bg: theme.colors.background[50], display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "none", children: isSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { w: { base: "0.25rem", md: "0.3125rem" }, h: { base: "0.25rem", md: "0.3125rem" }, bg: "red.500", borderRadius: "full" })) })] }, option.var_id));
-                    }) }) })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { mt: 2, w: "full", gap: 3, direction: { base: "column", md: "row" }, align: { base: "flex-start", md: "center" }, justify: { base: "flex-start", md: rightSlot ? "space-between" : "flex-start" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0, children: [selected.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { color: "gray.500", textDecoration: "line-through", children: ["\u20B9", selected.price] })), (0, jsx_runtime_1.jsxs)(react_2.Text, { color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "semibold", children: ["\u20B9", getDiscountedPrice(selected)] })] }), rightSlot && ((0, jsx_runtime_1.jsx)(react_2.Box, { flexShrink: 0, mt: { base: 2, md: 0 }, children: rightSlot }))] })] }));
+                            alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0, children: (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap", children: option.label }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left", children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [option.offer > 0 && ((0, jsx_runtime_1.jsx)(react_2.Badge, { bg: theme.colors.green[100], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.green, theme.colors.green[100]), borderRadius: "md", px: { base: 0, md: 0.5 }, py: { base: 0, md: 0.25 }, fontWeight: "bold", fontSize: "10px", flexShrink: 0, children: isMobile ? `${option.offer}%` : `${option.offer}% OFF` })), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, isSelected ? theme.colors.red[50] : theme.colors.background[50]), whiteSpace: "nowrap", children: ["\u20B9", discounted] }), option.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, textDecoration: "line-through", whiteSpace: "nowrap", children: ["\u20B9", option.price] }))] }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: 2, gridRow: 1, ml: { base: 0, md: 0 }, justifySelf: "end", w: { base: "0.625rem", md: "0.75rem" }, h: { base: "0.625rem", md: "0.75rem" }, minW: { base: "0.625rem", md: "0.75rem" }, borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? theme.colors.red[500] : theme.colors.boxborder[800], bg: theme.colors.background[50], display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "none", children: isSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { w: { base: "0.25rem", md: "0.3125rem" }, h: { base: "0.25rem", md: "0.3125rem" }, bg: theme.colors.red[500], borderRadius: "full" })) })] }, option.var_id));
+                    }) }) })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { mt: 2, w: "full", gap: 3, direction: { base: "column", md: "row" }, align: { base: "flex-start", md: "center" }, justify: { base: "flex-start", md: rightSlot ? "space-between" : "flex-start" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0, children: [selected.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { color: theme.colors.textMuted, textDecoration: "line-through", children: ["\u20B9", selected.price] })), (0, jsx_runtime_1.jsxs)(react_2.Text, { color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "semibold", children: ["\u20B9", getDiscountedPrice(selected)] })] }), rightSlot && ((0, jsx_runtime_1.jsx)(react_2.Box, { flexShrink: 0, mt: { base: 2, md: 0 }, children: rightSlot }))] })] }));
 };
 exports.default = ProductPrice;

package/dist/Components/ProductCard/ProductReview.d.ts

@@ -5,4 +5,3 @@ type ProductReviewProps = {
 };
 declare const ProductReview: ({ rating, reviewCount, mb }: ProductReviewProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductReview;
-//# sourceMappingURL=ProductReview.d.ts.map

package/dist/Components/ProductCard/ProductReview.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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");
 // 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
@@ -10,12 +12,13 @@ const lucide_react_1 = require("lucide-react");
 // "rating gold") to pixelize-design-library if this pattern is needed elsewhere.
 const RATING_STAR_FILL = "#ECC94B";
 const ProductReview = ({ rating, reviewCount, mb = 0 }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const hasRating = rating !== undefined && rating !== null;
     const hasReviewCount = reviewCount !== undefined && reviewCount !== null;
     // Convert rating to number and ensure it's between 0 and 5
     // Calculate fill percentage: (rating / 5) * 100%
     const numericRating = hasRating ? Math.min(Math.max(Number(rating), 0), 5) : 0;
     const fillPercentage = (numericRating / 6) * 100;
-    return ((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: "teal.50", color: "teal.900", 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: "gray.400" }), 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: "gray.600", children: ["(", reviewCount, ")"] })] }))] }));
+    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, ")"] })] }))] }));
 };
 exports.default = ProductReview;

package/dist/Components/ProductCard/ProductTags.d.ts

@@ -6,4 +6,3 @@ type ProductTagsProps = {
 };
 declare const ProductTags: ({ tags, className, size }: ProductTagsProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductTags;
-//# sourceMappingURL=ProductTags.d.ts.map

package/dist/Components/ProductCard/ProductTags.js

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

package/dist/Components/ProductDetails/ProductDetails.d.ts

@@ -1,4 +1,3 @@
 import { ProductDetailsProps } from "./ProductDetailsProps";
 declare const ProductDetails: ({ id, price, label, shortdesc, tags, images, batch, onAddToCart, onNotifyMe, onOptionChange, addToCart, goToCart, OnGoToCart, rating, reviews, notifyMe, isQtyEditable, displayRating, }: ProductDetailsProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductDetails;
-//# sourceMappingURL=ProductDetails.d.ts.map

package/dist/Components/ProductDetails/ProductDetails.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const ProductImageSlider_1 = __importDefault(require("./ProductImageSlider"));
 const ProductLabel_1 = __importDefault(require("../ProductCard/ProductLabel"));
 const ProductTags_1 = __importDefault(require("../ProductCard/ProductTags"));
@@ -16,6 +17,7 @@ const ProductReview_1 = __importDefault(require("../ProductCard/ProductReview"))
 const FormattedDescription_1 = __importDefault(require("../Common/FormattedDescription"));
 const ProductDetails = ({ id, price, label, shortdesc, tags, images, batch, onAddToCart, onNotifyMe, onOptionChange, addToCart, goToCart, OnGoToCart, rating, reviews, notifyMe, isQtyEditable = false, displayRating = true, }) => {
     var _a, _b, _c, _d, _e;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
     const [selectedOption, setSelectedOption] = react_1.default.useState(price === null || price === void 0 ? void 0 : price[0]);
     const [qty, setQty] = react_1.default.useState(1);
@@ -34,7 +36,7 @@ const ProductDetails = ({ id, price, label, shortdesc, tags, images, batch, onAd
     const handleDecrement = () => {
         setQty((prev) => (prev > 1 ? prev - 1 : 1));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: ["column", "row"], maxW: "6xl", mx: "auto", align: "start", gap: 5, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", color: "white", borderRadius: "md", flex: "1", minH: isMobile ? undefined : "31.25rem", children: (0, jsx_runtime_1.jsx)(ProductImageSlider_1.default, { images: images, thumbHeight: isMobile ? 48 : 80, imageSize: isMobile ? 360 : 480, thumbnailsToShow: isMobile ? 4 : 6, batch: batch }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", children: [label && (0, jsx_runtime_1.jsx)(ProductLabel_1.default, { label: label, size: "sm" }), shortdesc && (0, jsx_runtime_1.jsx)(react_2.Box, { my: 3, children: (0, jsx_runtime_1.jsx)(FormattedDescription_1.default, { content: shortdesc }) }), ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)) && displayRating && ((0, jsx_runtime_1.jsx)(ProductReview_1.default, { rating: rating, reviewCount: reviews, mb: 3 })), tags && (0, jsx_runtime_1.jsx)(ProductTags_1.default, { tags: tags, size: "sm" }), price && ((0, jsx_runtime_1.jsx)(ProductDtlPrice_1.default, { price: price, onSelect: (option) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: ["column", "row"], maxW: "6xl", mx: "auto", align: "start", gap: 5, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", color: colors.text[500], borderRadius: "md", flex: "1", minH: isMobile ? undefined : "31.25rem", children: (0, jsx_runtime_1.jsx)(ProductImageSlider_1.default, { images: images, thumbHeight: isMobile ? 48 : 80, imageSize: isMobile ? 360 : 480, thumbnailsToShow: isMobile ? 4 : 6, batch: batch }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", children: [label && (0, jsx_runtime_1.jsx)(ProductLabel_1.default, { label: label, size: "sm" }), shortdesc && (0, jsx_runtime_1.jsx)(react_2.Box, { my: 3, children: (0, jsx_runtime_1.jsx)(FormattedDescription_1.default, { content: shortdesc }) }), ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)) && displayRating && ((0, jsx_runtime_1.jsx)(ProductReview_1.default, { rating: rating, reviewCount: reviews, mb: 3 })), tags && (0, jsx_runtime_1.jsx)(ProductTags_1.default, { tags: tags, size: "sm" }), price && ((0, jsx_runtime_1.jsx)(ProductDtlPrice_1.default, { price: price, onSelect: (option) => {
                             setSelectedOption(option);
                             onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
                         } })), typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _a !== void 0 ? _a : 0) <= 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { sx: { ml: "1.1rem", mt: "0.5rem", mb: "0.5rem" }, children: (0, jsx_runtime_1.jsx)(Button_1.default, { colorScheme: "gray", size: "sm", 

package/dist/Components/ProductDetails/ProductDetailsProps.d.ts

@@ -32,4 +32,3 @@ export type videos = {
     order?: number;
     thumb?: string;
 };
-//# sourceMappingURL=ProductDetailsProps.d.ts.map

package/dist/Components/ProductDetails/ProductDtlPrice.d.ts

@@ -5,4 +5,3 @@ interface ProductDtlPriceProps {
 }
 declare const ProductDtlPrice: ({ price, onSelect }: ProductDtlPriceProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductDtlPrice;
-//# sourceMappingURL=ProductDtlPrice.d.ts.map

package/dist/Components/ProductDetails/ProductDtlPrice.js

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

package/dist/Components/ProductDetails/ProductImageSlider.d.ts

@@ -9,4 +9,3 @@ interface ProductImageSliderProps {
 }
 export default function ProductImageSlider({ images, thumbHeight, imageSize, thumbnailsToShow, batch, }: ProductImageSliderProps): import("react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=ProductImageSlider.d.ts.map

package/dist/Components/ProfileCard/ProfileCard.d.ts

@@ -10,4 +10,3 @@ export declare const ProfileCardFooter: React.FC<{
     children: React.ReactNode;
 }>;
 export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }: ProfileCardProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ProfileCard.d.ts.map

package/dist/Components/ProfileCard/ProfileCard.js

@@ -8,6 +8,7 @@ exports.default = ProfileCard;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const ProfileCardHeader = ({ children, }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
@@ -21,10 +22,9 @@ const ProfileCardFooter = ({ children, }) => {
 };
 exports.ProfileCardFooter = ProfileCardFooter;
 function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize = "0.5px", dividervariant = "solid", CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }) {
-    var _a, _b, _c, _d;
-    const theme = (0, react_2.useTheme)();
-    const resolvedDividerColor = (_b = dividercolor !== null && dividercolor !== void 0 ? dividercolor : (_a = theme.colors.border) === null || _a === void 0 ? void 0 : _a[400]) !== null && _b !== void 0 ? _b : (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[300];
-    const accentBorder = `2px solid ${(_d = theme.colors.primary) === null || _d === void 0 ? void 0 : _d[500]}`;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const resolvedDividerColor = dividercolor !== null && dividercolor !== void 0 ? dividercolor : colors.border[400];
+    const accentBorder = `2px solid ${colors.primary[500]}`;
     const isReactElement = (child) => {
         return child !== null && typeof child === "object" && "type" in child;
     };

package/dist/Components/ProfileCard/ProfileCardProps.d.ts

@@ -1,7 +1,10 @@
 import { CardProps } from "@chakra-ui/react";
+export type ProfileCardVariant = "elevated" | "outline" | "filled" | "unstyled";
+/** @deprecated Misspelling kept for existing callers — use "outline". */
+export type ProfileCardVariantLegacy = "outlein";
 export type ProfileCardProps = Pick<CardProps, "direction" | "maxW" | "align" | "justify" | "overflow"> & {
     children: React.ReactNode;
-    variant?: "elevated" | "outlein" | "filled" | "unstyled";
+    variant?: ProfileCardVariant | ProfileCardVariantLegacy;
     size?: "sm" | "md" | "lg";
     color?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
     dividercolor?: string;
@@ -13,4 +16,3 @@ export type ProfileCardProps = Pick<CardProps, "direction" | "maxW" | "align" |
     borderTopColor?: boolean;
     borderLeftColor?: boolean;
 };
-//# sourceMappingURL=ProfileCardProps.d.ts.map

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.d.ts

@@ -1,3 +1,2 @@
 import { ProfilePhotoViewerProps } from "./ProfilePhotoViewerProps";
 export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, fallbackText, revealOnHover, }: ProfilePhotoViewerProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ProfilePhotoViewer.d.ts.map

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

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

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.d.ts

@@ -18,4 +18,3 @@ export type ProfilePhotoViewerProps = {
     /** When true, the edit/view icons are hidden and revealed on hover. Defaults to false (always visible). */
     revealOnHover?: boolean;
 };
-//# sourceMappingURL=ProfilePhotoViewerProps.d.ts.map

package/dist/Components/ProgressBar/ProgressBar.d.ts

@@ -1,3 +1,2 @@
 import { ProgressBarProps } from "./ProgressBarProps";
-export default function ProgressBar({ size, isIndeterminate, color, hasStripe, height, value, isAnimated, max, min, variant, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ProgressBar.d.ts.map
+export default function ProgressBar({ size, isIndeterminate, color, hasStripe, height, value, isAnimated, max, min, variant, ...aria }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ProgressBar/ProgressBar.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ProgressBar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
-function ProgressBar({ size, isIndeterminate, color = "primary", hasStripe, height, value, isAnimated, max, min, variant, }) {
+function ProgressBar({ size, isIndeterminate, color = "primary", hasStripe, height, value, isAnimated, max, min, variant, ...aria }) {
     //  const theme = useCustomTheme();
-    return ((0, jsx_runtime_1.jsx)(react_1.Progress, { size: size, isIndeterminate: isIndeterminate, colorScheme: color, hasStripe: hasStripe, height: height, value: value, isAnimated: isAnimated, max: max, min: min, variant: variant }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Progress, { ...aria, size: size, isIndeterminate: isIndeterminate, colorScheme: color, hasStripe: hasStripe, height: height, value: value, isAnimated: isAnimated, max: max, min: min, variant: variant }));
 }