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

package/dist/Components/OrganizationDetails/CreateOrgModal.js

@@ -55,6 +55,6 @@ const CreateOrgModal = ({ isOpen, onClose, isLoading, onSubmit, labels, }) => {
             phone: values.phone.trim(),
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_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], fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.companyName, value: values.company_name, onChange: (e) => setField("company_name", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Name", error: !!errors.company_name, errorMessage: errors.company_name }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.companyAddress, value: values.company_address, onChange: (e) => setField("company_address", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Address", error: !!errors.company_address, errorMessage: errors.company_address }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.phone, value: values.phone, onChange: (e) => setField("phone", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Phone Number", error: !!errors.phone, errorMessage: errors.phone })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_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], fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.companyName, value: values.company_name, onChange: (e) => setField("company_name", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Name", error: !!errors.company_name, errorMessage: errors.company_name }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.companyAddress, value: values.company_address, onChange: (e) => setField("company_address", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Address", error: !!errors.company_address, errorMessage: errors.company_address }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.phone, value: values.phone, onChange: (e) => setField("phone", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Phone Number", error: !!errors.phone, errorMessage: errors.phone })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
 };
 exports.default = CreateOrgModal;

package/dist/Components/OrganizationDetails/DeleteOrgModal.js

@@ -9,8 +9,8 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const Button_1 = __importDefault(require("../Button/Button"));
 const DeleteOrgModal = ({ isOpen, onClose, isLoading, onConfirm, labels, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     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, { borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: (_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], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_h = (_f = (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _d === void 0 ? void 0 : _d.error) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[50]) !== null && _h !== void 0 ? _h : "#FEF2F2", color: (_o = (_l = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _j === void 0 ? void 0 : _j.error) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : (_m = colors === null || colors === void 0 ? void 0 : colors.red) === null || _m === void 0 ? void 0 : _m[500]) !== null && _o !== void 0 ? _o : "#EF4444", 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: (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[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 }) })] })] })] })] }));
+    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: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#FEF2F2", color: (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#EF4444", 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: (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[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 }) })] })] })] })] }));
 };
 exports.default = DeleteOrgModal;

package/dist/Components/OrganizationDetails/OrganizationDetails.js

@@ -45,21 +45,21 @@ const DEFAULT_LABELS = {
     termsOfService: "Terms of Service",
 };
 const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoading = false, switchingOrgIds = [], respondingOrgIds = [], isCreating = false, userName, userAvatarUrl, onSetDefault, onAcceptInvite, onDeclineInvite, onDeleteOrganization, onCreateOrganization, onBack, footerSlot, labels: labelOverrides, }) => {
-    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, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const [isCreateOpen, setCreateOpen] = (0, react_1.useState)(false);
     const [deleteOrgId, setDeleteOrgId] = (0, react_1.useState)(null);
     const border = (_d = (_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]) !== null && _d !== void 0 ? _d : "#E2E8F0";
-    const surface = (_e = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _e !== void 0 ? _e : "#FFFFFF";
-    const muted = (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500]) !== null && _g !== void 0 ? _g : "#64748B";
-    const subtle = (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[600]) !== null && _j !== void 0 ? _j : "#475569";
-    const heading = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[800]) !== null && _l !== void 0 ? _l : "#1E293B";
-    const pageBg = (_o = (_m = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : "#F8FAFC";
-    const primary50 = (_q = (_p = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _p === void 0 ? void 0 : _p[50]) !== null && _q !== void 0 ? _q : "#EEF2FF";
-    const primary100 = (_s = (_r = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _r === void 0 ? void 0 : _r[100]) !== null && _s !== void 0 ? _s : "#E0E7FF";
-    const primary500 = (_u = (_t = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _t === void 0 ? void 0 : _t[500]) !== null && _u !== void 0 ? _u : "#6366F1";
-    const primary600 = (_w = (_v = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _v === void 0 ? void 0 : _v[600]) !== null && _w !== void 0 ? _w : "#4F46E5";
+    const surface = (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : colors === null || colors === void 0 ? void 0 : colors.white) !== null && _g !== void 0 ? _g : "#FFFFFF";
+    const muted = (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[500]) !== null && _j !== void 0 ? _j : "#64748B";
+    const subtle = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[600]) !== null && _l !== void 0 ? _l : "#475569";
+    const heading = (_o = (_m = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _m === void 0 ? void 0 : _m[800]) !== null && _o !== void 0 ? _o : "#1E293B";
+    const pageBg = (_q = (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[50]) !== null && _q !== void 0 ? _q : "#F8FAFC";
+    const primary50 = (_s = (_r = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _r === void 0 ? void 0 : _r[50]) !== null && _s !== void 0 ? _s : "#EEF2FF";
+    const primary100 = (_u = (_t = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _t === void 0 ? void 0 : _t[100]) !== null && _u !== void 0 ? _u : "#E0E7FF";
+    const primary500 = (_w = (_v = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _v === void 0 ? void 0 : _v[500]) !== null && _w !== void 0 ? _w : "#6366F1";
+    const primary600 = (_y = (_x = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _x === void 0 ? void 0 : _x[600]) !== null && _y !== void 0 ? _y : "#4F46E5";
     const cardSx = {
         backgroundColor: surface,
         borderRadius: "xl",
@@ -100,7 +100,7 @@ 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 ? `${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: (_y = (_x = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _x === void 0 ? void 0 : _x[500]) !== null && _y !== void 0 ? _y : "#EAB308" }), (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) => {
+    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 ? `${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: (_0 = (_z = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _z === void 0 ? void 0 : _z[500]) !== null && _0 !== void 0 ? _0 : "#EAB308" }), (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

@@ -9,8 +9,7 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const PdfViewer = ({ pdfUrl, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "12px", }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { border: "1px solid", borderColor: (_b = (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : "#E2E8F0", borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.white, children: [showToolbar && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: (_d = (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[100]) !== null && _d !== void 0 ? _d : "#EDF2F7", bg: (_f = (_e = theme.colors.gray) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#F8FAFC", 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: (_h = (_g = theme.colors.gray) === null || _g === void 0 ? void 0 : _g[700]) !== null && _h !== void 0 ? _h : "#2D3748", 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: "8px", color: (_k = (_j = theme.colors.gray) === null || _j === void 0 ? void 0 : _j[600]) !== null && _k !== void 0 ? _k : "#4A5568", _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: "8px", color: (_m = (_l = theme.colors.gray) === null || _l === void 0 ? void 0 : _l[600]) !== null && _m !== void 0 ? _m : "#4A5568", _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.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: "8px", 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: "8px", 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/PinInput/PinInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.d.ts","sourceRoot":"","sources":["../../../src/Components/PinInput/PinInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGtD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EACjC,GAAG,EACH,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACV,IAAI,EACJ,KAAiB,EACjB,OAAO,EACP,IAAQ,EACR,KAAK,EACL,EAAE,EACF,UAAU,EACV,aAAa,EACb,kBAAkB,GAClB,EAAE,mBAAmB,2CA2CrB"}
+{"version":3,"file":"PinInput.d.ts","sourceRoot":"","sources":["../../../src/Components/PinInput/PinInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGtD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EACjC,GAAG,EACH,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACV,IAAI,EACJ,KAAiB,EACjB,OAAO,EACP,IAAQ,EACR,KAAK,EACL,EAAE,EACF,UAAU,EACV,aAAa,EACb,kBAAkB,GAClB,EAAE,mBAAmB,2CA8CrB"}

package/dist/Components/PinInput/PinInput.js

@@ -7,7 +7,11 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const FormLabel_1 = require("../Common/FormLabel");
 function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_1.HStack, { children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant, children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { backgroundColor: theme.colors.background[100], borderColor: theme.colors.boxborder[300], _focus: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_1.HStack, { children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant, children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { backgroundColor: theme.colors.background[100], 
+                        // [800], not [300]/[700]: WCAG 1.4.11 needs >=3.0 for a control boundary, measured
+                        // against the parent surface — up to `muted` (lightest). [700] fails there (2.41-2.72);
+                        // [800] clears all named surfaces with margin (3.44-3.90).
+                        borderColor: theme.colors.boxborder[800], _focus: {
                             borderColor: theme.colors.primary[500],
                             boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
                         } }, index))) }) })] }));

package/dist/Components/PinInputs/PinInputs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinInputs.d.ts","sourceRoot":"","sources":["../../../src/Components/PinInputs/PinInputs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlD,QAAA,MAAM,SAAS,GAAI,oEAQhB,cAAc,4CAuEhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"PinInputs.d.ts","sourceRoot":"","sources":["../../../src/Components/PinInputs/PinInputs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlD,QAAA,MAAM,SAAS,GAAI,oEAQhB,cAAc,4CAyEhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/Components/PinInputs/PinInputs.js

@@ -14,9 +14,11 @@ const PinInputs = ({ length = 3, label, error, onChange, onComplete, mask = fals
     const { colors } = theme;
     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[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}`

package/dist/Components/ProductCard/ProductCard.js

@@ -45,7 +45,7 @@ const ProductCard = ({ id, label, productImage, rating, reviews, tags, options,
     const imageList = (_a = productImage === null || productImage === void 0 ? void 0 : productImage.filter((img) => img.isImage !== false)) !== null && _a !== void 0 ? _a : [];
     const isSizeType = (s) => s === "xs" || s === "sm" || s === "md" || s === "lg";
     const safeSize = isSizeType(size) ? size : "md";
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: "full", maxW: cardWidth, h: "full", display: "flex", flexDirection: "column", position: "relative", bg: theme.colors.white, boxShadow: "lg", children: [imageList.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), h: imgHeight, w: "full", overflow: "hidden", onClick: onClick, cursor: "pointer", children: [(0, jsx_runtime_1.jsx)(react_2.Image, { src: hover && ((_b = imageList === null || imageList === void 0 ? void 0 : imageList[1]) === null || _b === void 0 ? void 0 : _b.imageUrl) ? imageList[1].imageUrl : (_c = imageList === null || imageList === void 0 ? void 0 : imageList[0]) === null || _c === void 0 ? void 0 : _c.imageUrl, alt: label, w: "full", h: "full", transform: hover ? "scale(1.06)" : "scale(1)", transition: "transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)" }), batch && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: batch.color || "green", position: "absolute", top: 2, right: 2, fontSize: {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: "full", maxW: cardWidth, h: "full", display: "flex", flexDirection: "column", position: "relative", bg: theme.colors.background[50], boxShadow: "lg", children: [imageList.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), h: imgHeight, w: "full", overflow: "hidden", onClick: onClick, cursor: "pointer", children: [(0, jsx_runtime_1.jsx)(react_2.Image, { src: hover && ((_b = imageList === null || imageList === void 0 ? void 0 : imageList[1]) === null || _b === void 0 ? void 0 : _b.imageUrl) ? imageList[1].imageUrl : (_c = imageList === null || imageList === void 0 ? void 0 : imageList[0]) === null || _c === void 0 ? void 0 : _c.imageUrl, alt: label, w: "full", h: "full", transform: hover ? "scale(1.06)" : "scale(1)", transition: "transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)" }), batch && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: batch.color || "green", position: "absolute", top: 2, right: 2, fontSize: {
                             xs: "xs",
                             sm: "sm",
                             md: "md",

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

@@ -1 +1 @@
-{"version":3,"file":"ProductPrice.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductCard/ProductPrice.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAY3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGvD,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AA6CF,QAAA,MAAM,YAAY,GAAI,wCAAwC,iBAAiB,4CAmP9E,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ProductPrice.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductCard/ProductPrice.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAY3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAKvD,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AA6CF,QAAA,MAAM,YAAY,GAAI,wCAAwC,iBAAiB,4CAiQ9E,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Components/ProductCard/ProductPrice.js

@@ -7,6 +7,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 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 sizeConfig = {
     xs: {
         font: "xs",
@@ -51,6 +53,7 @@ const sizeConfig = {
 };
 const ProductPrice = ({ options, size, onSelect, rightSlot }) => {
     const cfg = sizeConfig[size];
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [selected, setSelected] = (0, react_1.useState)(options[0]);
     const [dropdownPosition, setDropdownPosition] = (0, react_1.useState)({ top: 0, left: 0, width: 0 });
@@ -91,16 +94,16 @@ const ProductPrice = ({ options, size, onSelect, rightSlot }) => {
                 // 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, 
                 // 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: "red.400", 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: "white", 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: "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' : 'white', 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 ? '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: () => {
                                 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: "red.500", 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: "white", 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.400", textDecoration: "line-through", children: ["\u20B9", selected.price] })), (0, jsx_runtime_1.jsxs)(react_2.Text, { color: "red.500", 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: "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 }))] })] }));
 };
 exports.default = ProductPrice;

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

@@ -1 +1 @@
-{"version":3,"file":"ProductReview.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductCard/ProductReview.tsx"],"names":[],"mappings":"AAGA,KAAK,kBAAkB,GAAG;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAA;AAED,QAAA,MAAM,aAAa,GAAI,6BAAiC,kBAAkB,4CAiEzE,CAAC;AACF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ProductReview.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductCard/ProductReview.tsx"],"names":[],"mappings":"AAGA,KAAK,kBAAkB,GAAG;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAA;AASD,QAAA,MAAM,aAAa,GAAI,6BAAiC,kBAAkB,4CA8DzE,CAAC;AACF,eAAe,aAAa,CAAC"}

package/dist/Components/ProductCard/ProductReview.js

@@ -3,15 +3,19 @@ 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");
+// 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
+// canvas/mode — so it's pinned here instead. Needs a design-token addition (a mode-stable
+// "rating gold") to pixelize-design-library if this pattern is needed elsewhere.
+const RATING_STAR_FILL = "#ECC94B";
 const ProductReview = ({ rating, reviewCount, mb = 0 }) => {
     const hasRating = rating !== undefined && rating !== null;
     const hasReviewCount = reviewCount !== undefined && reviewCount !== null;
-    // Get colors from theme
-    const [yellow400] = (0, react_1.useToken)('colors', ['yellow.400']);
     // 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.900", color: "white", 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, color: "white", fill: "none", stroke: "white", 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: yellow400, fill: yellow400 }) }))] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: "bold", color: "white", 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: "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, ")"] })] }))] }));
 };
 exports.default = ProductReview;

package/dist/Components/ProductCard/ProductTags.js

@@ -26,7 +26,7 @@ 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.black;
+    const tagText = theme.colors.text[900];
     // Size map for tags
     const tagSizes = {
         xs: { fontSize: '0.625rem', px: '0.5rem', py: '0.125rem' },

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

@@ -1 +1 @@
-{"version":3,"file":"ProductDtlPrice.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductDetails/ProductDtlPrice.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAG1D,UAAU,oBAAoB;IAC1B,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAGD,QAAA,MAAM,eAAe,GAAI,qBAAqB,oBAAoB,4CAmFjE,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ProductDtlPrice.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductDetails/ProductDtlPrice.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAI1D,UAAU,oBAAoB;IAC1B,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAGD,QAAA,MAAM,eAAe,GAAI,qBAAqB,oBAAoB,4CA4FjE,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/Components/ProductDetails/ProductDtlPrice.js

@@ -4,6 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const ProductDtlPrice = ({ price, onSelect }) => {
     const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
     const selected = price[selectedIndex];
@@ -12,7 +13,9 @@ 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: theme.colors.red[500], 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" : "white", color: "orange.600", borderRadius: "md", fontWeight: "medium", _hover: {
+    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], 
+                            // 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",
                             }, _active: {
                                 bg: "orange.100",

package/dist/Components/ProductDetails/ProductImageSlider.js

@@ -156,7 +156,7 @@ function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbna
                             const thumb = (item === null || item === void 0 ? void 0 : item.thumb) || getThumbForItem(url);
                             if (isVideo) {
                                 if (!isPlaying) {
-                                    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: () => setIsPlaying(true), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 24, color: theme.colors.red[500] }) }) })] }));
+                                    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: () => setIsPlaying(true), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 24, color: theme.colors.red[500] }) }) })] }));
                                 }
                                 return yt ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://www.youtube.com/embed/${yt}?rel=0&autoplay=1`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }) })) : vimeo ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://player.vimeo.com/video/${vimeo}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : dm ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://www.dailymotion.com/embed/video/${dm}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "video", src: url, w: "100%", h: `${imageSize}px`, controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
                             }
@@ -178,7 +178,7 @@ function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbna
                             const thumb = src.thumb || getThumbForItem(url);
                             return ((0, jsx_runtime_1.jsx)(react_1.Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "md", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
                                     ? `0.125rem solid ${theme.colors.gray[500]}`
-                                    : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative", children: isVideo ? (thumb ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100], children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) }))) : ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover" })) }, actualIndex));
+                                    : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative", children: isVideo ? (thumb ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100], children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) }))) : ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover" })) }, actualIndex));
                         }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Right", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm" })] }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasMultiple && ((0, jsx_runtime_1.jsxs)(react_1.Box, { w: `${thumbHeight}px`, h: `${thumbHeight * thumbnailsToShow}px`, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", borderRadius: "md", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Up", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm", m: 1 }), (0, jsx_runtime_1.jsx)(react_1.VStack, { spacing: 2, flex: "1", overflow: "hidden", children: visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
                                 const actualIndex = thumbStartIndex + index;
                                 const url = src.imageUrl;
@@ -186,7 +186,7 @@ function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbna
                                 const thumb = src.thumb || getThumbForItem(url);
                                 return ((0, jsx_runtime_1.jsx)(react_1.Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "md", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
                                         ? `0.125rem solid ${theme.colors.gray[500]}`
-                                        : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative", children: isVideo ? (thumb ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover", alt: `Thumb ${actualIndex}` }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100], children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) }))) : ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover", alt: `Thumb ${actualIndex}` })) }, actualIndex));
+                                        : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative", children: isVideo ? (thumb ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover", alt: `Thumb ${actualIndex}` }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100], children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) }))) : ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover", alt: `Thumb ${actualIndex}` })) }, actualIndex));
                             }) }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Down", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm", m: 1 })] })), (0, jsx_runtime_1.jsxs)(react_1.Box, { w: `${imageSize}px`, h: `${imageSize}px`, position: "relative", overflow: "hidden", borderRadius: "md", boxShadow: "md", onMouseMove: (e) => {
                         const bounds = e.currentTarget.getBoundingClientRect();
                         const x = ((e.clientX - bounds.left) / bounds.width) * 100;
@@ -205,7 +205,7 @@ function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbna
                             const thumb = (item === null || item === void 0 ? void 0 : item.thumb) || getThumbForItem(url);
                             if (isVideo) {
                                 if (!isPlaying) {
-                                    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: () => setIsPlaying(true), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 24, color: theme.colors.red[500] }) }) })] }));
+                                    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: () => setIsPlaying(true), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 24, color: theme.colors.red[500] }) }) })] }));
                                 }
                                 return yt ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://www.youtube.com/embed/${yt}?rel=0&autoplay=1`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }) })) : vimeo ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://player.vimeo.com/video/${vimeo}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : dm ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://www.dailymotion.com/embed/video/${dm}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "video", src: url, w: "100%", h: `${imageSize}px`, controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
                             }

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

@@ -1 +1 @@
-{"version":3,"file":"ProfilePhotoViewer.d.ts","sourceRoot":"","sources":["../../../src/Components/ProfilePhotoViewer/ProfilePhotoViewer.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAKpE,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,QAAQ,EACR,aAAa,EACb,UAAoB,EACpB,QAA0B,EAC1B,cAAwB,EACxB,iBAA0B,EAC1B,YAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,OAAc,EACd,QAAQ,EACR,UAAkB,EAClB,MAAc,EACd,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,aAAoB,GACrB,EAAE,uBAAuB,2CA2LzB"}
+{"version":3,"file":"ProfilePhotoViewer.d.ts","sourceRoot":"","sources":["../../../src/Components/ProfilePhotoViewer/ProfilePhotoViewer.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAKpE,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,QAAQ,EACR,aAAa,EACb,UAAoB,EACpB,QAA0B,EAC1B,cAAwB,EACxB,iBAA0B,EAC1B,YAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,OAAc,EACd,QAAQ,EACR,UAAkB,EAClB,MAAc,EACd,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,aAAoB,GACrB,EAAE,uBAAuB,2CA8LzB"}

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -7,7 +7,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
     const [photo, setPhoto] = (0, react_1.useState)(photoUrl);
     const fileInputRef = (0, react_1.useRef)(null);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -34,7 +34,10 @@ function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", ima
         (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
     const isPdf = photo === null || photo === void 0 ? void 0 : photo.endsWith(".pdf");
-    const border = (_c = (_b = c.boxborder) === null || _b === void 0 ? void 0 : _b[300]) !== null && _c !== void 0 ? _c : (_d = c.gray) === null || _d === void 0 ? void 0 : _d[200];
+    // [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];
     // Shared modern frame for whichever media we render (photo / pdf / fallback).
     const mediaFrame = {
         boxSize: imageWidth,
@@ -61,10 +64,10 @@ function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", ima
                                         bg: (_o = c.primary) === null || _o === void 0 ? void 0 : _o[600],
                                         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: (_r = c.white) !== null && _r !== void 0 ? _r : "#fff", color: (_s = c.gray) === null || _s === void 0 ? void 0 : _s[700], border: `0.063rem solid ${border}`, boxShadow: (_t = theme.shadows) === null || _t === void 0 ? void 0 : _t.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
-                                        bg: (_u = c.gray) === null || _u === void 0 ? void 0 : _u[50],
-                                        color: (_v = c.primary) === null || _v === void 0 ? void 0 : _v[600],
+                                    }, _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],
                                         transform: "scale(1.1)",
-                                        boxShadow: (_w = theme.shadows) === null || _w === void 0 ? void 0 : _w.lg,
-                                    }, _active: { bg: (_x = c.gray) === null || _x === void 0 ? void 0 : _x[100] } }) }))] }), isEditable && ((0, jsx_runtime_1.jsx)(react_2.Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))] }))] }));
+                                        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 }))] }))] }));
 }

package/dist/Components/Reorder/Reorder.js

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

package/dist/Components/RolesPermission/DeleteRoleModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteRoleModal.d.ts","sourceRoot":"","sources":["../../../src/Components/RolesPermission/DeleteRoleModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA4DnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DeleteRoleModal.d.ts","sourceRoot":"","sources":["../../../src/Components/RolesPermission/DeleteRoleModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6DnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/Components/RolesPermission/DeleteRoleModal.js

@@ -9,8 +9,10 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const Button_1 = __importDefault(require("../Button/Button"));
 const DeleteRoleModal = ({ isOpen, onClose, onConfirm, isLoading, labels, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     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, { borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: (_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], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_h = (_f = (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _d === void 0 ? void 0 : _d.error) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[50]) !== null && _h !== void 0 ? _h : "#FEF2F2", color: (_o = (_l = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _j === void 0 ? void 0 : _j.error) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : (_m = colors === null || colors === void 0 ? void 0 : colors.red) === null || _m === void 0 ? void 0 : _m[500]) !== null && _o !== void 0 ? _o : "#EF4444", 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.deleteRole })] }), (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: (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[600], fontSize: "sm", mb: 5, children: labels.deleteRoleConfirm }), (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 }) })] })] })] })] }));
+    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", 
+                                // Pale badge bg: `red` reverses in dark; `semantic.error` is lifted and would stay near-white.
+                                bg: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#FEF2F2", color: (_l = (_j = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _g === void 0 ? void 0 : _g.error) === null || _h === void 0 ? void 0 : _h[500]) !== null && _j !== void 0 ? _j : (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "#EF4444", 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.deleteRole })] }), (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: (_m = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _m === void 0 ? void 0 : _m[600], fontSize: "sm", mb: 5, children: labels.deleteRoleConfirm }), (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 = DeleteRoleModal;

package/dist/Components/RolesPermission/RolesPermission.js

@@ -56,15 +56,15 @@ const DEFAULT_KEYS = [
     "export",
 ];
 const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false, permissions, permissionKeys = DEFAULT_KEYS, roleName, roleNameError, isSuperAdmin, isTrackLocation, isShowRecords, isEditing = false, isSaving = false, onNewRole, onViewRole, onEditRole, onDeleteRole, onBack, onRoleNameChange, onToggleSuperAdmin, onToggleTrackLocation, onToggleShowRecords, onPermissionChange, onSave, onCancelForm, footerSlot, checkIcon, labels: labelOverrides, padding = "16px", }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    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 [deleteId, setDeleteId] = (0, react_1.useState)(null);
     const border = (_d = (_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]) !== null && _d !== void 0 ? _d : "#E2E8F0";
-    const surface = (_e = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _e !== void 0 ? _e : "#FFFFFF";
-    const muted = (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500]) !== null && _g !== void 0 ? _g : "#64748B";
-    const heading = (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[800]) !== null && _j !== void 0 ? _j : "#1E293B";
-    const headBg = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[50]) !== null && _l !== void 0 ? _l : "#F8FAFC";
+    const surface = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#FFFFFF";
+    const muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#64748B";
+    const heading = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : "#1E293B";
+    const headBg = (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#F8FAFC";
     const isViewMode = mode === "view";
     const columnLabels = {
         read: labels.read,
@@ -117,7 +117,7 @@ const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false,
                                                                     : perm[key], isDisabled: isAutomationModule && !isRead, onChange: () => onPermissionChange === null || onPermissionChange === void 0 ? void 0 : onPermissionChange(perm.module, isAutomationModule ? "automation" : key) })) }) }, key));
                                                 })] }, perm.module));
                                     })) })] }) }), !isViewMode && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "flex-end", gap: 3, p: 4, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onCancelForm, size: "sm", sx: { fontSize: "xs" }, label: labels.cancel, colorScheme: "red", variant: "outline" }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onSave, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", isLoading: isSaving, label: isEditing ? labels.updateChanges : labels.saveChanges })] })] }))] })] }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { p: padding, backgroundColor: (_o = (_m = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : "#F8FAFC", minHeight: "100%", children: [view === "list" ? renderListView() : renderFormView(), (0, jsx_runtime_1.jsx)(DeleteRoleModal_1.default, { isOpen: deleteId !== null, onClose: () => setDeleteId(null), onConfirm: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { p: padding, backgroundColor: (_p = (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[50]) !== null && _p !== void 0 ? _p : "#F8FAFC", minHeight: "100%", children: [view === "list" ? renderListView() : renderFormView(), (0, jsx_runtime_1.jsx)(DeleteRoleModal_1.default, { isOpen: deleteId !== null, onClose: () => setDeleteId(null), onConfirm: () => {
                     if (deleteId !== null)
                         onDeleteRole === null || onDeleteRole === void 0 ? void 0 : onDeleteRole(deleteId);
                     setDeleteId(null);

package/dist/Components/SearchSelect/SearchSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchSelect.d.ts","sourceRoot":"","sources":["../../../src/Components/SearchSelect/SearchSelect.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,iBAAiB,EAAW,MAAM,qBAAqB,CAAC;AA2BjE,QAAA,MAAM,YAAY,GAAI,sUA8BnB,iBAAiB,4CAsvBnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SearchSelect.d.ts","sourceRoot":"","sources":["../../../src/Components/SearchSelect/SearchSelect.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,iBAAiB,EAAW,MAAM,qBAAqB,CAAC;AA2BjE,QAAA,MAAM,YAAY,GAAI,sUA8BnB,iBAAiB,4CAovBnB,CAAC;AAEF,eAAe,YAAY,CAAC"}