pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Components/UserDetails/ChangeRoleModal.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
+const Button_1 = __importDefault(require("../Button/Button"));
+const TextInput_1 = __importDefault(require("../Input/TextInput"));
+const SearchSelect_1 = __importDefault(require("../SearchSelect/SearchSelect"));
+const ChangeRoleModal = ({ isOpen, onClose, userId, email, currentRole, roleOptions, isLoading, onSubmit, onAddRoleClick, labels, }) => {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const [selectedRole, setSelectedRole] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (isOpen && currentRole) {
+            const match = roleOptions.find((role) => role.label.toLowerCase() === currentRole.toLowerCase());
+            setSelectedRole(match ? { id: match.id, label: match.label } : null);
+            setError(null);
+        }
+        else if (!isOpen) {
+            setSelectedRole(null);
+            setError(null);
+        }
+    }, [isOpen, currentRole, roleOptions]);
+    const isUnchanged = ((_a = selectedRole === null || selectedRole === void 0 ? void 0 : selectedRole.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (currentRole === null || currentRole === void 0 ? void 0 : currentRole.toLowerCase());
+    const handleSubmit = async () => {
+        if (!selectedRole) {
+            setError(labels.roleRequired);
+            return;
+        }
+        if (userId == null)
+            return;
+        await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({ userId, roleId: selectedRole.id }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), children: labels.changeRoleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!error, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
+                                            id: item.id,
+                                            label: item.label,
+                                        })), value: selectedRole !== null && selectedRole !== void 0 ? selectedRole : undefined, onSelect: (option) => {
+                                            if (!option) {
+                                                setSelectedRole(null);
+                                            }
+                                            else if (!Array.isArray(option)) {
+                                                setSelectedRole({
+                                                    id: Number(option.id),
+                                                    label: option.label,
+                                                });
+                                                setError(null);
+                                            }
+                                        }, isRequired: true, isRemoveAllIcon: true, error: !!error, errorMessage: error !== null && error !== void 0 ? error : undefined, addNew: onAddRoleClick
+                                            ? {
+                                                enabled: true,
+                                                text: labels.addNewRole,
+                                                onClick: onAddRoleClick,
+                                            }
+                                            : undefined }) })] }) }), (0, jsx_runtime_1.jsxs)(react_2.ModalFooter, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, colorScheme: "red", size: "sm", variant: "outline" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.save, type: "submit", colorScheme: "primary", size: "sm", sx: { ml: 3 }, isLoading: isLoading, isDisabled: isUnchanged || !selectedRole, onClick: handleSubmit })] })] })] }));
+};
+exports.default = ChangeRoleModal;

package/dist/Components/UserDetails/DeactivateConfirmModal.d.ts

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

package/dist/Components/UserDetails/DeactivateConfirmModal.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const ConfirmDialog_1 = __importDefault(require("../ConfirmDialog/ConfirmDialog"));
+const DeactivateConfirmModal = ({ isOpen, onClose, userName, isLoading, onConfirm, labels, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const errorTone = (0, tone_1.resolveSoftTone)(colors, colors.semantic.error);
+    return ((0, jsx_runtime_1.jsxs)(ConfirmDialog_1.default, { isOpen: isOpen, onClose: onClose, onConfirm: onConfirm, title: labels.confirmDeactivation, iconBg: errorTone.bg, iconColor: errorTone.fg, cancelLabel: labels.cancel, confirmLabel: labels.deactivateUser, confirmIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16 }), isConfirmLoading: isLoading, disableCancelWhilePending: false, focusCancelOnOpen: false, bodyLayout: "stack", actionsPt: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: 500, color: colors.text[900], children: labels.deactivateConfirmQuestion }), (0, jsx_runtime_1.jsx)(react_1.Box, { bg: colors.background[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Text, { color: colors.textMuted, fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) })] }));
+};
+exports.default = DeactivateConfirmModal;

package/dist/Components/UserDetails/UserDetails.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { UserDetailsProps } from "./UserDetailsProps";
+/** Two-pane user directory + detail panel with bundled Add/Change-Role/Deactivate modals. */
+declare const UserDetails: React.FC<UserDetailsProps>;
+export default UserDetails;

package/dist/Components/UserDetails/UserDetails.js

@@ -0,0 +1,150 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_2 = require("@chakra-ui/react");
+const Avatar_1 = __importDefault(require("../Avatar/Avatar"));
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const PersonChip_1 = __importDefault(require("../PersonChip/PersonChip"));
+const AddUserModal_1 = __importDefault(require("./AddUserModal"));
+const ChangeRoleModal_1 = __importDefault(require("./ChangeRoleModal"));
+const DeactivateConfirmModal_1 = __importDefault(require("./DeactivateConfirmModal"));
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const activationKey_1 = require("../Common/activationKey");
+const BACKGROUND_TRANSITION = (0, motion_1.transitionFor)(["background"]);
+const DEFAULT_LABELS = {
+    teamMembers: "Team Members",
+    refreshList: "Refresh list",
+    userDetails: "User Details",
+    selectTeamMember: "Select a Team Member",
+    addUser: "Add User",
+    resendInvitation: "Resend Invitation",
+    deactivateUser: "Deactivate User",
+    changeRole: "Change Role",
+    you: "You",
+    active: "Active",
+    inactive: "Inactive",
+    pendingInvitation: "Pending Invitation",
+    personalInformation: "Personal Information",
+    noUsers: "No team members yet",
+    noUserSelected: "Select a team member to view their details",
+    addNewUser: "Add New User",
+    firstName: "First Name",
+    lastName: "Last Name",
+    email: "Email",
+    role: "Role",
+    firstNamePlaceholder: "First Name",
+    lastNamePlaceholder: "Last Name",
+    emailPlaceholder: "An invite will be sent to this email",
+    addNewRole: "Add New Role",
+    cancel: "Cancel",
+    save: "Save",
+    firstNameRequired: "First Name is required",
+    lastNameRequired: "Last Name is required",
+    emailRequired: "Email is required",
+    emailInvalid: "Invalid email",
+    roleRequired: "Role is required",
+    changeRoleTitle: "Change Role",
+    confirmDeactivation: "Confirm Deactivation",
+    deactivateConfirmQuestion: "Are you sure you want to deactivate this user?",
+    deactivateConfirmDescription: "will no longer have access to the organization. You can reactivate them later if needed.",
+};
+/** Two-pane user directory + detail panel with bundled Add/Change-Role/Deactivate modals. */
+const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], canManageUsers = false, isUsersLoading = false, isInviteLoading = false, isDeactivateLoading = false, isAddUserLoading = false, isChangeRoleLoading = false, onSelectUser, onRefresh, onBack, onAddUserSubmit, onChangeRoleSubmit, onReinvite, onDeactivate, onAddRoleClick, addUserUpgradeNotice, labels: labelOverrides, minHeight = "90vh", }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+    const { isOpen: isAddUserOpen, onOpen: onAddUserOpen, onClose: onAddUserClose, } = (0, react_2.useDisclosure)();
+    const { isOpen: isChangeRoleOpen, onOpen: onChangeRoleOpen, onClose: onChangeRoleClose, } = (0, react_2.useDisclosure)();
+    const { isOpen: isConfirmOpen, onOpen: onConfirmOpen, onClose: onConfirmClose, } = (0, react_2.useDisclosure)();
+    const [actionUserId, setActionUserId] = (0, react_1.useState)(null);
+    const border = colors.boxborder[200];
+    const surface = colors.background[50];
+    const detailTile = (0, planeStep_1.bandOn)(colors.primary[50], surface);
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(colors), [colors]);
+    const muted = colors.textMuted;
+    const heading = colors.text[900];
+    const successScheme = "green";
+    const dangerScheme = "red";
+    const handleDeactivateConfirm = () => {
+        if (actionUserId != null)
+            onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate(actionUserId);
+        onConfirmClose();
+    };
+    const renderStatusBadge = (isActive) => ((0, jsx_runtime_1.jsx)(react_2.Badge, { variant: "subtle", colorScheme: isActive ? successScheme : dangerScheme, borderRadius: "full", px: 2, py: 0.5, fontSize: "xs", fontWeight: 600, textTransform: "none", children: isActive ? labels.active : labels.inactive }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { backgroundColor: colors.backgroundColor.main, minHeight: minHeight, p: { base: 3, md: 4 }, gap: 3, flexDirection: { base: "column", lg: "row" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { width: { base: "100%", lg: "300px" }, backgroundColor: surface, borderRadius: "xl", boxShadow: "sm", border: "1px solid", borderColor: border, position: "relative", order: { base: 2, lg: 1 }, overflow: "hidden", display: "flex", flexDirection: "column", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [onBack && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 18 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.teamMembers }), (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "gray", borderRadius: "full", fontSize: "xs", px: 2, children: users.length })] }), onRefresh && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.refreshList, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 15 }), variant: "ghost", size: "xs", color: muted, onClick: onRefresh, isLoading: isUsersLoading }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, overflowY: "auto", maxHeight: { base: "380px", lg: `calc(${minHeight} - 80px)` }, tabIndex: 0, role: "region", "aria-label": labels.teamMembers, children: isUsersLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 2, p: 3, children: Array.from({ length: 6 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 3, p: 2, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "9" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", mb: 2, width: "80%" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "9px", width: "60%" })] })] }, idx))) })) : users.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Users, title: labels.noUsers, size: "sm", minH: "220px" })) : ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 1, p: 2, align: "stretch", children: users.map((user) => {
+                                const isSelected = selectedUserId != null && selectedUserId === user.id;
+                                return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 2.5, w: "100%", cursor: "pointer", alignItems: "center", gap: 2.5, backgroundColor: isSelected ? rowBackgrounds.selected : "transparent", _hover: {
+                                        background: isSelected
+                                            ? rowBackgrounds.selectedActive
+                                            : rowBackgrounds.active,
+                                    }, transition: BACKGROUND_TRANSITION, borderRadius: "lg", position: "relative", role: "button", tabIndex: 0, "aria-current": isSelected ? true : undefined, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), onClick: () => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user), onKeyDown: (0, activationKey_1.onActivationKey)(() => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user)), children: [isSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: colors.primary[500] })), (0, jsx_runtime_1.jsx)(PersonChip_1.default, { size: "sm", name: `${user.firstName} ${user.lastName}`, imageUrl: user.profile, secondary: user.email }), renderStatusBadge(user.isActive)] }, user.id));
+                            }) })) })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, backgroundColor: surface, borderRadius: "xl", boxShadow: "sm", border: "1px solid", borderColor: border, display: "flex", flexDirection: "column", order: { base: 1, lg: 2 }, overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", px: 4, py: 3, borderBottom: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: selectedUser ? labels.userDetails : labels.selectTeamMember }), canManageUsers && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.UserPlus, { size: 15 }), onClick: onAddUserOpen, children: labels.addUser }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, overflowY: "auto", tabIndex: 0, role: "region", "aria-label": selectedUser ? labels.userDetails : labels.selectTeamMember, children: isUsersLoading ? ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, p: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 4, children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "16" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", width: "50%", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "35%" })] })] }), Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "30%", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "10px", width: "80%" })] }, idx)))] })) : selectedUser ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: { base: "column", md: "row" }, alignItems: { base: "flex-start", md: "center" }, justifyContent: "space-between", gap: 4, p: 4, borderBottom: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "lg", name: selectedUser.name, src: selectedUser.profilePhoto }), selectedUser.isCurrent && ((0, jsx_runtime_1.jsx)(react_2.Badge, { position: "absolute", bottom: -1, right: -1, colorScheme: "blue", variant: "solid", fontSize: "xs", borderRadius: "full", px: 2, py: 0.5, boxShadow: "sm", textTransform: "none", children: labels.you }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "md", mb: 1, color: heading, children: selectedUser.name }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: muted, mb: 2, children: selectedUser.role }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [renderStatusBadge(selectedUser.isActive), selectedUser.isPending && ((0, jsx_runtime_1.jsx)(react_2.Badge, { variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "xs", fontWeight: 600, colorScheme: "orange", textTransform: "none", children: labels.pendingInvitation }))] })] })] }), canManageUsers &&
+                                            !selectedUser.isSuperAdmin && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, flexWrap: "wrap", children: [!selectedUser.isCurrent && !selectedUser.isActive && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", colorScheme: "blue", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Send, { size: 13 }), isLoading: isInviteLoading, onClick: () => selectedUser.userId != null &&
+                                                        (onReinvite === null || onReinvite === void 0 ? void 0 : onReinvite(selectedUser.userId)), children: labels.resendInvitation })), (0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", colorScheme: "gray", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Shield, { size: 13 }), onClick: () => {
+                                                        if (selectedUser.userId != null) {
+                                                            setActionUserId(selectedUser.userId);
+                                                            onChangeRoleOpen();
+                                                        }
+                                                    }, children: labels.changeRole }), !selectedUser.isCurrent && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "ghost", colorScheme: "red", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 13 }), isDisabled: selectedUser.userId == null || isDeactivateLoading, onClick: () => {
+                                                        if (selectedUser.userId != null) {
+                                                            setActionUserId(selectedUser.userId);
+                                                            onConfirmOpen();
+                                                        }
+                                                    }, children: labels.deactivateUser }))] }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { p: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: muted, mb: 3, children: labels.personalInformation }), (0, jsx_runtime_1.jsx)(react_2.Box, { border: "1px solid", borderColor: border, borderRadius: "lg", overflow: "hidden", children: selectedUser.details.map((detail, index) => {
+                                                var _a;
+                                                const Icon = (_a = detail.icon) !== null && _a !== void 0 ? _a : lucide_react_1.UserRound;
+                                                return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 3, px: 3, py: 2.5, _hover: {
+                                                                bg: (0, outlineRung_1.resolveHoverTint)(colors.gray[50], surface),
+                                                            }, alignItems: "center", transition: BACKGROUND_TRANSITION, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: detailTile, borderRadius: "lg", color: (0, accentText_1.accentTextOnCanvas)(colors.primary, detailTile), flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15 }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { minWidth: "110px", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && ((0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }))] }, index));
+                                            }) })] })] })) : ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.UserRound, title: labels.selectTeamMember, description: labels.noUserSelected, minH: "300px" })) })] }), (0, jsx_runtime_1.jsx)(AddUserModal_1.default, { isOpen: isAddUserOpen, onClose: onAddUserClose, roleOptions: roleOptions, isLoading: isAddUserLoading, onSubmit: async (values) => {
+                    await (onAddUserSubmit === null || onAddUserSubmit === void 0 ? void 0 : onAddUserSubmit(values));
+                    onAddUserClose();
+                }, onAddRoleClick: onAddRoleClick, upgradeNotice: addUserUpgradeNotice, labels: labels }), (0, jsx_runtime_1.jsx)(ChangeRoleModal_1.default, { isOpen: isChangeRoleOpen, onClose: onChangeRoleClose, userId: actionUserId, email: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.email, currentRole: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.role, roleOptions: roleOptions, isLoading: isChangeRoleLoading, onSubmit: async (payload) => {
+                    await (onChangeRoleSubmit === null || onChangeRoleSubmit === void 0 ? void 0 : onChangeRoleSubmit(payload));
+                    onChangeRoleClose();
+                }, onAddRoleClick: onAddRoleClick, labels: labels }), (0, jsx_runtime_1.jsx)(DeactivateConfirmModal_1.default, { isOpen: isConfirmOpen, onClose: onConfirmClose, userName: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.name, isLoading: isDeactivateLoading, onConfirm: handleDeactivateConfirm, labels: labels })] }));
+};
+exports.default = UserDetails;

package/dist/Components/UserDetails/UserDetailsProps.d.ts

@@ -0,0 +1,238 @@
+import { ElementType, ReactNode } from "react";
+/** One assignable role offered in the Add User and Change Role selects. */
+export type RoleOption = {
+    /** Identifier passed back as `roleId` on change; compared by `label`, not id, to pre-select the current role. */
+    id: number;
+    /** Role name shown in the select and matched case-insensitively against `SelectedUserDetail.role`. */
+    label: string;
+};
+/** One row in the left-panel user list — see SelectedUserDetail for the richer shape used once selected. */
+export type UserListItem = {
+    /** Row key; compared with `selectedUserId` to highlight the selected row. */
+    id: number;
+    /** Joined with `lastName` as the row title and avatar initials. */
+    firstName: string;
+    /** Joined after `firstName` as the row title. */
+    lastName: string;
+    /** Secondary line under the name in the row. */
+    email: string;
+    /** Display-only — UserDetails never reads this in the list row itself, only in SelectedUserDetail once selected. */
+    role: string;
+    /** Avatar image URL; initials show when omitted. */
+    profile?: string;
+    /** Selects the green Active or red Inactive badge on the row. */
+    isActive: boolean;
+    /** isPending/isCurrent/isSuperAdmin here are decorative — only SelectedUserDetail's copies (after selection) drive any badge or action-bar behavior. */
+    isPending?: boolean;
+    isCurrent?: boolean;
+    isSuperAdmin?: boolean;
+};
+/** One label/value row in the "Personal Information" panel; icon falls back to a generic user icon when omitted. */
+export type UserDetailRow = {
+    /** Caption on the left of the row. */
+    label: string;
+    /** Text shown for this field. */
+    value: string;
+    /** Lucide-style icon component for the row tile; a generic user icon when omitted. */
+    icon?: ElementType;
+};
+/** Right-panel shape for the selected user — distinct field names from UserListItem (name, userId); not derived from it. */
+export type SelectedUserDetail = {
+    /** When null, Change Role and Resend Invitation silently no-op on click (no disabled state) — unlike Deactivate, which greys out. */
+    userId?: number;
+    /** Heading and avatar name in the detail header; also named in the deactivate confirmation. */
+    name: string;
+    /** Feeds ChangeRoleModal's currentRole — must case-insensitively match a roleOptions[].label or the modal opens with nothing pre-selected. */
+    role: string;
+    /** Shown only inside ChangeRoleModal's header — the Personal Information panel does not render this field, only `details`. */
+    email: string;
+    /** Avatar image URL; initials show when omitted. */
+    profilePhoto?: string;
+    /** Selects the green Active or red Inactive badge; Resend Invitation shows only while inactive. */
+    isActive: boolean;
+    /** Renders the "Pending Invitation" badge only — does not affect which action buttons show. */
+    isPending?: boolean;
+    /** Hides Resend Invitation and Deactivate (both gated on !isCurrent) and shows a "You" badge on the avatar. */
+    isCurrent?: boolean;
+    /** True hides the entire action bar (reinvite/change-role/deactivate), not just the deactivate button. */
+    isSuperAdmin?: boolean;
+    /** Rows of the Personal Information panel, in order, separated by dividers. */
+    details: UserDetailRow[];
+};
+/** Form values submitted by the Add User modal; role stays null until the user picks one. */
+export type AddUserFormValues = {
+    /** Entered first name; required, trimmed before the empty check. */
+    firstName: string;
+    /** Entered last name; required, trimmed before the empty check. */
+    lastName: string;
+    /** Entered email; required and validated as an address. */
+    email: string;
+    /** The picked role option, or null while none is chosen. */
+    role: RoleOption | null;
+};
+/** Payload from the Change Role modal — just the ids, unlike AddUserFormValues which carries the full RoleOption. */
+export type ChangeRoleSubmitPayload = {
+    /** Id of the user whose role changes (`SelectedUserDetail.userId`). */
+    userId: number;
+    /** `id` of the newly picked RoleOption. */
+    roleId: number;
+};
+/**
+ * All user-facing strings. Provide translated values from the host app; every
+ * key has a sensible English default so the component works standalone.
+ */
+export type UserDetailsLabels = {
+    /** List panel heading and its accessible region name. */
+    teamMembers?: string;
+    /** Accessible name of the refresh button; the button exists only when `onRefresh` is passed. */
+    refreshList?: string;
+    /** Detail panel heading and region name while a user is selected. */
+    userDetails?: string;
+    /** Detail panel heading and region name, and the empty-state title, while no user is selected. */
+    selectTeamMember?: string;
+    /** Add User button text in the detail header; the button needs `canManageUsers`. */
+    addUser?: string;
+    /** Resend Invitation button text. */
+    resendInvitation?: string;
+    /** Deactivate button text, also the confirm button in the deactivation dialog. */
+    deactivateUser?: string;
+    /** Change Role button text. */
+    changeRole?: string;
+    /** Badge on the avatar of the current user. */
+    you?: string;
+    /** Badge text for an active user, in the list and the detail header. */
+    active?: string;
+    /** Badge text for an inactive user, in the list and the detail header. */
+    inactive?: string;
+    /** Badge text for a user whose invitation is pending. */
+    pendingInvitation?: string;
+    /** Uppercase caption above the details rows. */
+    personalInformation?: string;
+    /** Empty-state title of the list when `users` is empty. */
+    noUsers?: string;
+    /** Empty-state description in the detail panel while no user is selected. */
+    noUserSelected?: string;
+    /** Title of the Add User modal. */
+    addNewUser?: string;
+    /** Label of the first-name field in the Add User modal. */
+    firstName?: string;
+    /** Label of the last-name field in the Add User modal. */
+    lastName?: string;
+    /** Label of the email field in the Add User modal and of the read-only email in the Change Role modal. */
+    email?: string;
+    /** Label of the role select in the Add User and Change Role modals. */
+    role?: string;
+    /** Placeholder of the first-name field. */
+    firstNamePlaceholder?: string;
+    /** Placeholder of the last-name field. */
+    lastNamePlaceholder?: string;
+    /** Placeholder of the email field. */
+    emailPlaceholder?: string;
+    /** Text of the add-role action inside the role select; shown when `onAddRoleClick` is passed. */
+    addNewRole?: string;
+    /** Cancel button text in all three modals. */
+    cancel?: string;
+    /** Save button text in the Add User and Change Role modals. */
+    save?: string;
+    /** Error shown when the first name is empty on save. */
+    firstNameRequired?: string;
+    /** Error shown when the last name is empty on save. */
+    lastNameRequired?: string;
+    /** Error shown when the email is empty on save. */
+    emailRequired?: string;
+    /** Error shown when the email is not a valid address. */
+    emailInvalid?: string;
+    /** Error shown when no role is picked on save. */
+    roleRequired?: string;
+    /** Title of the Change Role modal. */
+    changeRoleTitle?: string;
+    /** Title of the deactivation dialog. */
+    confirmDeactivation?: string;
+    /** Question line of the deactivation dialog. */
+    deactivateConfirmQuestion?: string;
+    /** Text following the user name in the deactivation dialog, e.g. "Ann will no longer have access". */
+    deactivateConfirmDescription?: string;
+};
+/** Two-pane user directory + detail panel with bundled Add/Change-Role/Deactivate modals; not a role editor — pair with RolesPermission for managing roles themselves. */
+export interface UserDetailsProps {
+    /** Full list of users shown in the left panel. */
+    users: UserListItem[];
+    /** The currently selected user rendered in the right panel. */
+    selectedUser: SelectedUserDetail | null;
+    /** Id of the selected user, used to highlight the active row. */
+    selectedUserId?: number;
+    /** Role options for the Add User and Change Role modals. */
+    roleOptions?: RoleOption[];
+    /** Whether the current viewer can manage users (super-admin gate). */
+    canManageUsers?: boolean;
+    /** Loading flags driven by the host app's async calls. */
+    isUsersLoading?: boolean;
+    /** Spins only the Resend Invitation button, not the list or either modal. */
+    isInviteLoading?: boolean;
+    /** Unlike isAddUserLoading/isChangeRoleLoading, the confirm modal closes immediately on click — this flag can't keep it open to show a spinner. */
+    isDeactivateLoading?: boolean;
+    /** Spinner on the Add User modal's Save button. */
+    isAddUserLoading?: boolean;
+    /** Spinner on the Change Role modal's Save button. */
+    isChangeRoleLoading?: boolean;
+    /** Selection + refresh. */
+    onSelectUser?: (user: UserListItem) => void;
+    /** Omitting this hides the refresh button entirely, not just disables it. */
+    onRefresh?: () => void;
+    /** Back navigation handler for the list panel header. */
+    onBack?: () => void;
+    /** Modal submit / action callbacks. */
+    onAddUserSubmit?: (values: AddUserFormValues) => void | Promise<void>;
+    /** Awaited before the modal closes — unlike onDeactivate, which fires and closes immediately. */
+    onChangeRoleSubmit?: (payload: ChangeRoleSubmitPayload) => void | Promise<void>;
+    /** Never called when selectedUser.userId is null — the button stays enabled but silently no-ops. */
+    onReinvite?: (userId: number) => void;
+    /** Not awaited — the confirm modal closes right after this fires, so a slow or failing deactivation gets no in-modal feedback. */
+    onDeactivate?: (userId: number) => void;
+    /** "Add New Role" actions inside the SearchSelect of each modal. */
+    onAddRoleClick?: () => void;
+    /** App-specific node rendered inside the Add User modal header (e.g. an upgrade notice). */
+    addUserUpgradeNotice?: ReactNode;
+    /** Translated/override strings. */
+    labels?: UserDetailsLabels;
+    /** Also feeds a calc() for the sidebar's max-height — a non-CSS-length value (e.g. "auto") silently breaks that calc. Defaults to "90vh". */
+    minHeight?: string;
+}
+/** Self-contained invite form (first/last/email/role) with its own validation — not a generic modal; it always renders these exact fields. */
+export interface AddUserModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    roleOptions: RoleOption[];
+    isLoading?: boolean;
+    onSubmit?: (values: AddUserFormValues) => void | Promise<void>;
+    onAddRoleClick?: () => void;
+    upgradeNotice?: ReactNode;
+    /** A strict subset of UserDetailsLabels — the merged defaults from UserDetails always satisfy it. */
+    labels: Required<Pick<UserDetailsLabels, "addNewUser" | "firstName" | "lastName" | "email" | "role" | "firstNamePlaceholder" | "lastNamePlaceholder" | "emailPlaceholder" | "addNewRole" | "cancel" | "save" | "firstNameRequired" | "lastNameRequired" | "emailRequired" | "emailInvalid" | "roleRequired">>;
+}
+/** Reassigns one user's role only — Save stays disabled until a genuinely different role is picked (see currentRole below). */
+export interface ChangeRoleModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    /** Submit silently no-ops when null — Save disables only for isUnchanged/no-selection, not for this. */
+    userId: number | null;
+    email?: string;
+    /** Matched to roleOptions by case-insensitive label text; no match silently pre-selects nothing and leaves Save disabled. */
+    currentRole?: string;
+    roleOptions: RoleOption[];
+    isLoading?: boolean;
+    onSubmit?: (payload: ChangeRoleSubmitPayload) => void | Promise<void>;
+    onAddRoleClick?: () => void;
+    labels: Required<Pick<UserDetailsLabels, "changeRoleTitle" | "email" | "role" | "addNewRole" | "cancel" | "save" | "roleRequired">>;
+}
+/** Confirm dialog for deactivating one user — closes immediately on confirm (see isDeactivateLoading); not a delete, the user can be reactivated later. */
+export interface DeactivateConfirmModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    userName?: string;
+    /** Effectively unusable — the modal always closes before an async confirm could flip this. */
+    isLoading?: boolean;
+    /** Synchronous by type — the modal closes in the same tick this fires, so it can't be awaited. */
+    onConfirm: () => void;
+    labels: Required<Pick<UserDetailsLabels, "confirmDeactivation" | "deactivateConfirmQuestion" | "deactivateConfirmDescription" | "cancel" | "deactivateUser">>;
+}

package/dist/Components/UserDetails/UserDetailsProps.js

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

package/dist/Components/VariantSelector/VariantSelector.d.ts

@@ -0,0 +1,4 @@
+import type { VariantSelectorProps } from "./VariantSelectorProps";
+/** Per-axis radiogroups whose availability is derived from `variants`; no vertical-specific vocabulary lives here. */
+declare const VariantSelector: ({ axes, variants, value, defaultValue, onValueChange, error, showSelectedLabel, showLowStock, size, layout, onGuideClick, "data-testid": testId, }: VariantSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export default VariantSelector;

package/dist/Components/VariantSelector/VariantSelector.js

@@ -0,0 +1,123 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+const OptionChip_1 = __importDefault(require("../OptionChip/OptionChip"));
+const commerceVariants_1 = require("../Commerce/commerceVariants");
+const variantSelection_1 = require("./variantSelection");
+const GAP = "0.5rem";
+const GRID_MIN = {
+    chip: "4rem",
+    swatch: "3rem",
+    "image-tile": "4.75rem",
+    pack: "6.5rem",
+};
+const cellKey = (axisId, valueId) => `${axisId}\u0000${valueId}`;
+/** Per-axis radiogroups whose availability is derived from `variants`; no vertical-specific vocabulary lives here. */
+const VariantSelector = ({ axes, variants, value, defaultValue, onValueChange, error, showSelectedLabel = false, showLowStock = false, size = "md", layout = "wrap", onGuideClick, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const uid = (0, react_1.useId)();
+    const statusId = `${uid}-status`;
+    const cells = (0, react_1.useRef)(new Map());
+    const [inner, setInner] = (0, react_1.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {});
+    const [focus, setFocus] = (0, react_1.useState)(null);
+    const selection = value !== null && value !== void 0 ? value : inner;
+    const commit = (0, react_1.useCallback)((next) => {
+        if ((0, variantSelection_1.sameSelection)(next, selection))
+            return;
+        if (value === undefined)
+            setInner(next);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next, (0, commerceVariants_1.findVariant)(axes, variants, next));
+    }, [axes, variants, selection, value, onValueChange]);
+    const choose = (axisId, valueId) => {
+        if ((0, variantSelection_1.isSoldOutEverywhere)(variants, axisId, valueId))
+            return;
+        commit((0, variantSelection_1.selectValue)(axes, variants, selection, axisId, valueId));
+    };
+    const lowStockHint = (axis, option) => {
+        if (!showLowStock)
+            return undefined;
+        const left = (0, commerceVariants_1.remainingStock)(variants, selection, axis.id, option.id);
+        if (left === undefined || left <= 0 || left > commerceVariants_1.LOW_STOCK_THRESHOLD)
+            return undefined;
+        return `${left} left`;
+    };
+    const hintFor = (axis, option) => {
+        const low = lowStockHint(axis, option);
+        if (!low)
+            return option.hint;
+        return axis.type === "pack" && option.hint ? `${option.hint} · ${low}` : low;
+    };
+    const onKeyDown = (axis) => (event) => {
+        var _a;
+        const index = axis.values.findIndex((option) => cells.current.get(cellKey(axis.id, option.id)) === document.activeElement);
+        if (index < 0)
+            return;
+        const last = axis.values.length - 1;
+        const target = event.key === "ArrowRight" || event.key === "ArrowDown"
+            ? (index + 1) % axis.values.length
+            : event.key === "ArrowLeft" || event.key === "ArrowUp"
+                ? (index - 1 + axis.values.length) % axis.values.length
+                : event.key === "Home"
+                    ? 0
+                    : event.key === "End"
+                        ? last
+                        : -1;
+        if (target < 0)
+            return;
+        event.preventDefault();
+        const next = axis.values[target];
+        (_a = cells.current.get(cellKey(axis.id, next.id))) === null || _a === void 0 ? void 0 : _a.focus();
+        setFocus({ axisId: axis.id, valueId: next.id });
+        if ((0, commerceVariants_1.isOptionAvailable)(variants, selection, axis.id, next.id))
+            choose(axis.id, next.id);
+    };
+    const containerStyles = (axis) => {
+        if (layout === "grid") {
+            return { display: "grid", gridTemplateColumns: `repeat(auto-fill, minmax(${GRID_MIN[axis.type]}, 1fr))`, gap: GAP };
+        }
+        if (layout === "scroll") {
+            return {
+                display: "flex",
+                flexWrap: "nowrap",
+                gap: GAP,
+                overflowX: "auto",
+                pt: "0.5rem",
+                mt: "-0.5rem",
+                pr: "0.5rem",
+                scrollSnapType: "x proximity",
+                sx: (0, scrollbar_1.scrollbarStyles)(colors, "hover"),
+            };
+        }
+        return { display: "flex", flexWrap: "wrap", gap: GAP, pt: "0.25rem" };
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 5, "data-testid": testId, children: [axes.map((axis) => {
+                var _a, _b;
+                const labelId = `${uid}-${axis.id}-label`;
+                const picked = axis.values.find((option) => option.id === selection[axis.id]);
+                const unpicked = selection[axis.id] === undefined;
+                const invalid = !!error && unpicked;
+                const available = axis.values.map((option) => (0, commerceVariants_1.isOptionAvailable)(variants, selection, axis.id, option.id));
+                const firstAvailable = (_a = axis.values.find((_, i) => available[i])) !== null && _a !== void 0 ? _a : axis.values[0];
+                const stopId = (focus === null || focus === void 0 ? void 0 : focus.axisId) === axis.id ? focus.valueId : (_b = (picked !== null && picked !== void 0 ? picked : firstAvailable)) === null || _b === void 0 ? void 0 : _b.id;
+                const { guide } = axis;
+                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "baseline", justify: "space-between", gap: 3, mb: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "baseline", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: labelId, fontSize: "sm", fontWeight: 600, color: colors.header[900], children: axis.label }), showSelectedLabel && picked ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", color: colors.textMuted, noOfLines: 1, children: picked.label })) : null] }), guide ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", display: "inline-flex", alignItems: "center", gap: 1, flexShrink: 0, fontSize: "sm", fontWeight: 600, color: colors.accentText, borderRadius: "md", onClick: () => {
+                                        guide.onClick();
+                                        onGuideClick === null || onGuideClick === void 0 ? void 0 : onGuideClick(axis.id);
+                                    }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Ruler, { size: 14, "aria-hidden": true }), guide.label] })) : null] }), (0, jsx_runtime_1.jsx)(react_2.Box, { role: "radiogroup", "aria-labelledby": labelId, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? statusId : undefined, onKeyDown: onKeyDown(axis), onBlur: (event) => {
+                                if (!event.currentTarget.contains(event.relatedTarget))
+                                    setFocus(null);
+                            }, ...containerStyles(axis), children: axis.values.map((option, i) => ((0, jsx_runtime_1.jsx)(OptionChip_1.default, { ref: (node) => {
+                                    cells.current.set(cellKey(axis.id, option.id), node);
+                                }, label: option.label, variant: axis.type, swatch: option.swatch, image: option.image, hint: hintFor(axis, option), showLabel: axis.type === "swatch" && layout === "grid", size: size, fullWidth: layout === "grid" && (axis.type === "chip" || axis.type === "pack"), selected: option.id === selection[axis.id], unavailable: !available[i], invalid: invalid, tabIndex: option.id === stopId ? 0 : -1, onFocus: () => setFocus({ axisId: axis.id, valueId: option.id }), onSelect: () => choose(axis.id, option.id) }, option.id))) })] }, axis.id));
+            }), (0, jsx_runtime_1.jsx)(react_2.Box, { role: "status", id: statusId, "aria-live": "polite", mt: error ? -2 : 0, children: error ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { size: 14, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: error })] })) : null })] }));
+};
+exports.default = VariantSelector;