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

package/dist/Components/OrganizationDetails/DeleteOrgModal.js

@@ -7,10 +7,13 @@ 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 statusTone_1 = require("../../Theme/tokens/builders/statusTone");
 const Button_1 = __importDefault(require("../Button/Button"));
 const DeleteOrgModal = ({ isOpen, onClose, isLoading, onConfirm, labels, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[50], color: (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[500], children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { color: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[600], fontSize: "sm", mb: 5, children: labels.deleteConfirmText }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) })] })] })] })] }));
+    const mode = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
+    const errorTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.error, mode);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: labels.deleteConfirmText }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) })] })] })] })] }));
 };
 exports.default = DeleteOrgModal;

package/dist/Components/OrganizationDetails/OrganizationDetails.js

@@ -8,6 +8,8 @@ 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");
+const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
 const Button_1 = __importDefault(require("../Button/Button"));
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const Tag_1 = __importDefault(require("../Tag/Tag"));
@@ -51,7 +53,6 @@ const DEFAULT_LABELS = {
     termsOfService: "Terms of Service",
 };
 const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoading = false, switchingOrgIds = [], respondingOrgIds = [], editingOrgIds = [], isCreating = false, userName, userAvatarUrl, onSetDefault, onAcceptInvite, onDeclineInvite, onDeleteOrganization, onDeleteRequest, onCreateOrganization, onEditOrganization, onBack, footerSlot, labels: labelOverrides, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const [isCreateOpen, setCreateOpen] = (0, react_1.useState)(false);
@@ -60,16 +61,19 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     const [editingOrgId, setEditingOrgId] = (0, react_1.useState)(null);
     const [editValue, setEditValue] = (0, react_1.useState)("");
     const [editError, setEditError] = (0, react_1.useState)("");
-    const border = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200];
-    const surface = (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : colors === null || colors === void 0 ? void 0 : colors.white;
-    const muted = (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500];
-    const subtle = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[600];
-    const heading = (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[800];
-    const pageBg = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[50];
-    const primary50 = (_k = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _k === void 0 ? void 0 : _k[50];
-    const primary100 = (_l = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _l === void 0 ? void 0 : _l[100];
-    const primary500 = (_m = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _m === void 0 ? void 0 : _m[500];
-    const primary600 = (_o = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _o === void 0 ? void 0 : _o[600];
+    const mode = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
+    const errorTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.error, mode);
+    const warningTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.warning, mode);
+    const border = colors.boxborder[200];
+    const surface = colors.background[50];
+    const muted = colors.textMuted;
+    const subtle = colors.text[600];
+    const heading = colors.text[900];
+    const pageBg = colors.backgroundColor.main;
+    const primary50 = colors.primary[50];
+    const primary100 = colors.primary[100];
+    const primary500 = colors.primary[500];
+    const onPrimary50 = (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]);
     const cardSx = {
         backgroundColor: surface,
         borderRadius: "xl",
@@ -104,7 +108,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
         setEditError("");
     };
     const renderActiveCard = (item) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d;
         const isSwitching = switchingOrgIds.includes(item.orgId);
         // Role name is a display value, not a permission — apps pass the real rule.
         const canEdit = (_a = item.canRename) !== null && _a !== void 0 ? _a : item.roleName === "Super Admin";
@@ -114,17 +118,17 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
         const isSavingThis = editingOrgIds.includes(item.orgId);
         const roleLabel = (_c = item.roleName) === null || _c === void 0 ? void 0 : _c.trim();
         const deleteButton = ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.deleteOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 12 }), size: "xs", variant: "ghost", borderRadius: "full", color: muted, isDisabled: isProtected, _hover: {
-                bg: (_d = colors === null || colors === void 0 ? void 0 : colors.red) === null || _d === void 0 ? void 0 : _d[50],
-                color: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[600],
+                bg: errorTone.bg,
+                color: errorTone.fg,
             }, onClick: () => onDeleteRequest
                 ? onDeleteRequest(item.orgId)
                 : setDeleteOrgId(item.orgId) }));
         return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
-                borderColor: (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[300],
+                borderColor: colors.primary[300],
                 boxShadow: "lg",
                 transform: "translateY(-3px)",
-            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: primary600, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [item.default === 1 ? ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: primary500, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: labels.settingDefault })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, fontSize: "xs", color: primary600, fontWeight: 600, cursor: "pointer", _hover: { color: primary500, gap: 2 }, transition: "all 0.2s ease", onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: labels.setAsDefault })] })), canEdit && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.editOrganization, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.editOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: primary600, bg: primary50 }, onClick: () => startEditing(item) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isProtected
-                                        ? ((_g = item.deleteDisabledReason) !== null && _g !== void 0 ? _g : labels.protectedOrganization)
+            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: onPrimary50, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [item.default === 1 ? ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: colors.accentText, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: labels.settingDefault })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: "all 0.2s ease", onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: labels.setAsDefault })] })), canEdit && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.editOrganization, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.editOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimary50, bg: primary50 }, onClick: () => startEditing(item) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isProtected
+                                        ? ((_d = item.deleteDisabledReason) !== null && _d !== void 0 ? _d : labels.protectedOrganization)
                                         : labels.deleteOrganization, hasArrow: true, children: isProtected ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", children: deleteButton })) : (deleteButton) })] })] }), isEditingThis ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: editValue, onChange: (e) => {
                                         setEditValue(e.target.value);
                                         if (editError)
@@ -134,15 +138,14 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
                                             submitEditing(item);
                                         if (e.key === "Escape")
                                             cancelEditing();
-                                    } }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.save, icon: isSavingThis ? (0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14 }), size: "xs", colorScheme: "green", isDisabled: isSavingThis, onClick: () => submitEditing(item), variant: "ghost" }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.cancel, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", isDisabled: isSavingThis, onClick: cancelEditing })] }), editError && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.7rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.red) === null || _h === void 0 ? void 0 : _h[600], mt: 1, children: editError }))] })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, children: item.company_name }), (item.isOwner || roleLabel) && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, mt: 1, children: [item.isOwner && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: labels.owner, icon: lucide_react_1.Crown, colorScheme: "primary", variant: "subtle", size: "xs" })), roleLabel && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: roleLabel, colorScheme: "gray", variant: "subtle", size: "xs" }))] }))] }))] }, item.orgId));
+                                    } }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.save, icon: isSavingThis ? (0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14 }), size: "xs", colorScheme: "green", isDisabled: isSavingThis, onClick: () => submitEditing(item), variant: "ghost" }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.cancel, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", isDisabled: isSavingThis, onClick: cancelEditing })] }), editError && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.7rem", color: colors.semanticText.error, mt: 1, children: editError }))] })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, children: item.company_name }), (item.isOwner || roleLabel) && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, mt: 1, children: [item.isOwner && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: labels.owner, icon: lucide_react_1.Crown, colorScheme: "primary", variant: "subtle", size: "xs" })), roleLabel && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: roleLabel, colorScheme: "gray", variant: "subtle", size: "xs" }))] }))] }))] }, item.orgId));
     };
     const renderInvitedCard = (item) => {
-        var _a, _b;
         const isResponding = respondingOrgIds.includes(item.orgId);
         return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
                 boxShadow: "lg",
                 transform: "translateY(-3px)",
-            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "flex-start", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _a === void 0 ? void 0 : _a[100], color: (_b = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _b === void 0 ? void 0 : _b[600], children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "yellow", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.7rem", fontWeight: 600, children: labels.pending })] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, mb: 1, children: item.company_name }), item.company_url && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: subtle, fontSize: "xs", mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Globe, { size: 13 }), (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, title: item.company_url, children: item.company_url })] })), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, pt: 2, borderTop: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.accept, colorScheme: "green", size: "sm", width: "100%", isLoading: isResponding, loadingText: labels.accepting, onClick: () => onAcceptInvite === null || onAcceptInvite === void 0 ? void 0 : onAcceptInvite(item.orgId) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.decline, colorScheme: "red", size: "sm", width: "100%", onClick: () => onDeclineInvite === null || onDeclineInvite === void 0 ? void 0 : onDeclineInvite(item.orgId) }) })] })] }, item.orgId));
+            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "flex-start", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: warningTone.bg, color: warningTone.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "yellow", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.7rem", fontWeight: 600, children: labels.pending })] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, mb: 1, children: item.company_name }), item.company_url && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: subtle, fontSize: "xs", mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Globe, { size: 13 }), (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, title: item.company_url, children: item.company_url })] })), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, pt: 2, borderTop: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.accept, colorScheme: "green", size: "sm", width: "100%", isLoading: isResponding, loadingText: labels.accepting, onClick: () => onAcceptInvite === null || onAcceptInvite === void 0 ? void 0 : onAcceptInvite(item.orgId) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.decline, colorScheme: "red", size: "sm", width: "100%", onClick: () => onDeclineInvite === null || onDeclineInvite === void 0 ? void 0 : onDeclineInvite(item.orgId) }) })] })] }, item.orgId));
     };
     const gridSx = {
         display: "grid",
@@ -155,9 +158,9 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
         width: "100%",
     };
     const hasOrganizations = activeOrganizations.length > 0 || invitedOrganizations.length > 0;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ...cardSx, px: 3, py: 2.5, mb: 3, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 3, bgGradient: `linear(135deg, ${primary50} 0%, ${primary100} 100%)`, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 3, children: [onBack && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primary500, color: "white", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 700, children: userName
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ...cardSx, px: 3, py: 2.5, mb: 3, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 3, bgGradient: `linear(135deg, ${primary50} 0%, ${primary100} 100%)`, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 3, children: [onBack && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primary500, color: (0, accentText_1.onFilled)(primary500, colors.white, colors.black), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 700, children: userName
                                                     ? `${labels.greeting.replace(/User!?/, "")}${userName}!`.trim()
-                                                    : labels.greeting }), (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "xs", name: userName, src: userAvatarUrl })] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: subtle, mt: 0.5, children: labels.manageSubtitle })] })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.createNewOrganization, onClick: () => setCreateOpen(true), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" })] }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: Array.from({ length: 6 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.SkeletonText, { noOfLines: 2, spacing: 2 })] }, idx))) })) : !hasOrganizations ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.createOrganization, onClick: () => setCreateOpen(true), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [activeOrganizations.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Users, { size: 16, color: primary500 }), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.activeOrganizations }), sectionBadge(activeOrganizations.length, "blue")] }), (0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: activeOrganizations.map(renderActiveCard) })] })), invitedOrganizations.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, color: (_p = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _p === void 0 ? void 0 : _p[500] }), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.invitedOrganizations }), sectionBadge(invitedOrganizations.length, "yellow")] }), (0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: invitedOrganizations.map(renderInvitedCard) })] }))] })), footerSlot, (0, jsx_runtime_1.jsx)(CreateOrgModal_1.default, { isOpen: isCreateOpen, onClose: () => setCreateOpen(false), isLoading: isCreating, onSubmit: async (values) => {
+                                                    : labels.greeting }), (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "xs", name: userName, src: userAvatarUrl })] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: subtle, mt: 0.5, children: labels.manageSubtitle })] })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.createNewOrganization, onClick: () => setCreateOpen(true), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" })] }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: Array.from({ length: 6 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.SkeletonText, { noOfLines: 2, spacing: 2 })] }, idx))) })) : !hasOrganizations ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.createOrganization, onClick: () => setCreateOpen(true), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [activeOrganizations.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Users, { size: 16, color: colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.activeOrganizations }), sectionBadge(activeOrganizations.length, "blue")] }), (0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: activeOrganizations.map(renderActiveCard) })] })), invitedOrganizations.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, color: colors.semanticText.warning }), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.invitedOrganizations }), sectionBadge(invitedOrganizations.length, "yellow")] }), (0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: invitedOrganizations.map(renderInvitedCard) })] }))] })), footerSlot, (0, jsx_runtime_1.jsx)(CreateOrgModal_1.default, { isOpen: isCreateOpen, onClose: () => setCreateOpen(false), isLoading: isCreating, onSubmit: async (values) => {
                     await (onCreateOrganization === null || onCreateOrganization === void 0 ? void 0 : onCreateOrganization(values));
                     setCreateOpen(false);
                 }, labels: labels }), (0, jsx_runtime_1.jsx)(DeleteOrgModal_1.default, { isOpen: deleteOrgId !== null, onClose: () => setDeleteOrgId(null), onConfirm: async () => {

package/dist/Components/PdfViewer/PdfViewer.js

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

package/dist/Components/PinInputs/PinInputs.js

@@ -8,21 +8,16 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const Label_1 = __importDefault(require("../Common/Label"));
 const ErrorComponent_1 = __importDefault(require("../Common/ErrorComponent"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const PinInputs = ({ length = 3, label, error, onChange, onComplete, mask = false, placeholder = "*", }) => {
-    var _a, _b, _c, _d, _e;
-    const theme = (0, react_2.useTheme)();
-    const { colors } = theme;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [values, setValues] = (0, react_1.useState)(Array(length).fill(""));
     const inputsRef = (0, react_1.useRef)([]);
-    // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary against any named surface
-    // up to `muted` (lightest); [500] fails there, [800] clears all with margin.
     const borderColor = error
-        ? (_b = (_a = colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]
-        : (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[800];
-    const focusRing = error ? (_d = colors.boxShadow) === null || _d === void 0 ? void 0 : _d.error : (_e = colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary;
-    const focusShadow = focusRing
-        ? `0 0 0 0.125rem ${focusRing}`
-        : undefined;
+        ? colors.semanticText.error
+        : colors.boxborder[500];
+    const focusRing = error ? colors.boxShadow.error : colors.boxShadow.primary;
+    const focusShadow = `0 0 0 0.125rem ${focusRing}`;
     const handleChange = (index, value) => {
         var _a;
         if (!/^[0-9]?$/.test(value))
@@ -46,8 +41,6 @@ const PinInputs = ({ length = 3, label, error, onChange, onComplete, mask = fals
     };
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { label: label }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, children: Array.from({ length }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_2.Input, { ref: (el) => {
                         inputsRef.current[index] = el;
-                    }, type: mask ? "password" : "text", inputMode: "numeric", maxLength: 1, placeholder: placeholder, value: values[index], onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(e, index), w: 12, h: 12, textAlign: "center", fontSize: "lg", borderWidth: "1px", borderColor: borderColor, borderRadius: "md", _focus: focusShadow
-                        ? { boxShadow: focusShadow, outline: "none" }
-                        : { outline: "none" } }, index))) }), error && (0, jsx_runtime_1.jsx)(ErrorComponent_1.default, { error: error })] }));
+                    }, type: mask ? "password" : "text", inputMode: "numeric", maxLength: 1, placeholder: placeholder, value: values[index], onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(e, index), w: 12, h: 12, textAlign: "center", fontSize: "lg", borderWidth: "1px", borderColor: borderColor, borderRadius: "md", _focus: { boxShadow: focusShadow, outline: "none" } }, index))) }), error && (0, jsx_runtime_1.jsx)(ErrorComponent_1.default, { error: error })] }));
 };
 exports.default = PinInputs;

package/dist/Components/PlanPill/PlanPill.js

@@ -15,15 +15,12 @@ const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient,
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const c = theme.colors;
     const toneGradient = {
-        normal: planPillGradient_1.ACCENT_GRADIENT,
-        warning: { from: c.semantic.warning[400], to: c.semantic.warning[600] },
-        danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
+        normal: (0, planPillGradient_1.inkSafeGradient)(c.gradient),
+        warning: (0, planPillGradient_1.statusGradient)(c.semantic.warning),
+        danger: (0, planPillGradient_1.statusGradient)(c.semantic.error),
     };
-    const resolved = gradient !== null && gradient !== void 0 ? gradient : toneGradient[tone];
+    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);
-    // The chip is a translucent inset of the pill itself, so it tints with whichever
-    // ink won — a white wash under black text would wash the chip out entirely.
-    const onDark = ink === c.white;
     const Icon = icon === undefined ? TONE_ICON[tone] : icon;
     const hasMobile = !!mobileLabel && mobileLabel !== label;
     return ((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: {
@@ -37,6 +34,6 @@ const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient,
                 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: onDark ? "rgba(255,255,255,0.22)" : "rgba(0,0,0,0.12)", border: "1px solid", borderColor: onDark ? "rgba(255,255,255,0.28)" : "rgba(0,0,0,0.08)", fontSize: "11px", fontWeight: "700", lineHeight: "18px", sx: { fontVariantNumeric: "tabular-nums" }, children: status })) : null] }));
+        }, children: [Icon ? (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/planPillGradient.d.ts

@@ -1,7 +1,9 @@
+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.
@@ -19,3 +21,20 @@ export type Gradient = {
  * 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

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ACCENT_GRADIENT = void 0;
+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.
@@ -18,3 +21,29 @@ exports.ACCENT_GRADIENT = void 0;
  * 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/ProductPrice.js

@@ -96,20 +96,20 @@ const ProductPrice = ({ options, size, onSelect, rightSlot }) => {
     (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.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.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.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/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/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;
     };