pixelize-design-library 2.4.2-beta.4 → 2.4.2-beta.41

package/dist/esm/Components/NumberInput/NumberInput.styles.js

@@ -1,5 +1,6 @@
+import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
 export const NumberInput = {
-    baseStyle: {
+    baseStyle: ({ theme }) => ({
         field: {
             fontWeight: 500,
             fontSize: "0.875rem",
@@ -9,10 +10,10 @@ export const NumberInput = {
             borderRadius: "lg",
             transition: "border-color 0.2s, box-shadow 0.2s",
             _placeholder: {
-                fontStyle: "italic",
+                color: placeholderInk(theme.colors),
             },
         },
-    },
+    }),
     sizes: {
         md: {
             field: {
@@ -31,11 +32,11 @@ export const NumberInput = {
             const primary = theme.colors.primary[500];
             return {
                 field: {
-                    bg: theme.colors.gray[50],
+                    bg: theme.colors.background[50],
                     border: "0.063rem solid",
                     borderColor,
                     _placeholder: {
-                        color: theme.colors.textMuted,
+                        color: placeholderInk(theme.colors),
                     },
                     _hover: {
                         borderColor: primary,
@@ -65,7 +66,7 @@ export const NumberInput = {
                         boxShadow: 'inherit',
                     },
                     _disabled: {
-                        bg: theme.colors.gray[100],
+                        bg: theme.colors.background[100],
                         opacity: 1,
                         cursor: "not-allowed",
                         _hover: {

package/dist/esm/Components/OrgSwitcher/OrgSwitcher.js

@@ -6,6 +6,8 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
 import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { avatarColor, orgInitial, } from "./OrgSwitcherProps.js";
 const sizeMap = {
     sm: { h: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
@@ -23,8 +25,14 @@ const Avatar = ({ org, boxSize, fontSize, }) => {
 const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSearchable, searchThreshold = 6, triggerVariant = "ghost", size = "md", maxWidth = "200px", menuMinWidth = "280px", placeholder = "Select organization", ariaLabel = "Switch organization", showRole = true, }) => {
     var _a;
     const theme = useCustomTheme();
+    const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
     const s = sizeMap[size];
     const { isOpen, onOpen, onClose } = useDisclosure();
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
+    const handlePopoverOpen = () => {
+        requestExclusiveOpen();
+        onOpen();
+    };
     const [query, setQuery] = useState("");
     const searchRef = useRef(null);
     const [activeIndex, setActiveIndex] = useState(0);
@@ -69,7 +77,7 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
     const triggerStyles = triggerVariant === "outline"
         ? { border: "1px solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50] }
         : triggerVariant === "subtle"
-            ? { bg: theme.colors.gray[50] }
+            ? { bg: theme.colors.background[50] }
             : { bg: "transparent" };
     // `gray[100]` hover on a "transparent" trigger reads against whatever's actually behind it —
     // this control lives in a navbar-like shell, so `backgroundColor.light` is that surface. For a
@@ -82,7 +90,7 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
         if (org.id !== value)
             onChange(org.id, org);
     };
-    return (_jsxs(Popover, { isOpen: isOpen, onOpen: onOpen, onClose: () => {
+    return (_jsxs(Popover, { isOpen: isOpen, onOpen: handlePopoverOpen, onClose: () => {
             onClose();
             setQuery("");
         }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsxs(Flex, { as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "lg", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [selected ? (_jsx(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "lg", bg: theme.colors.gray[100], color: accentTextOnCanvas(theme.colors.gray, theme.colors.gray[100]), flexShrink: 0, children: _jsx(Building2, { size: 14 }) })), _jsx(Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_a = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _a !== void 0 ? _a : placeholder }), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : (_jsx(Box, { as: ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }) }), _jsx(PopoverContent, { minW: menuMinWidth, w: "auto", 
@@ -97,18 +105,14 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
                                             }
                                         }, borderRadius: "lg" })] }) })), _jsxs(Box, { role: "listbox", "aria-label": "Organizations", maxH: "320px", overflowY: "auto", py: 1, onKeyDown: handleListKeyDown, children: [filtered.map((org, idx) => {
                                     const isActive = org.id === value;
-                                    // Active row's hover repeated its own resting `primary[50]` fill — a zero-delta
-                                    // hover, invisible by construction. `resolveHoverTint` walks a fill away from a
-                                    // backdrop until distinguishable, so handing it its own resting bg as the backdrop
-                                    // is enough to make hover read as a real state change on both active and inactive rows.
                                     const rowHoverBg = isActive
-                                        ? resolveHoverTint(theme.colors.primary[50], theme.colors.primary[50])
-                                        : resolveHoverTint(theme.colors.gray[50], theme.colors.backgroundColor.light);
+                                        ? rowBackgrounds.selectedActive
+                                        : rowBackgrounds.active;
                                     return (_jsxs(Flex, { as: "button", type: "button", role: "option", "aria-selected": isActive, ref: (el) => {
                                             optionRefs.current[idx] = el;
                                             if (idx === 0)
                                                 firstOptionRef.current = el;
-                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: isActive ? theme.colors.primary[50] : "transparent", transition: "background 0.12s ease", _hover: { bg: rowHoverBg }, onClick: () => handleSelect(org), children: [_jsx(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsx(Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && (_jsx(Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && (_jsx(Box, { as: Check, size: 16, color: accentTextOnCanvas(theme.colors.primary, theme.colors.primary[50]), flexShrink: 0 }))] }, org.id));
-                                }), filtered.length === 0 && (_jsx(Text, { fontSize: "sm", color: theme.colors.gray[500], textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
+                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: isActive ? rowBackgrounds.selected : "transparent", transition: "background 0.12s ease", _hover: { bg: rowHoverBg }, onClick: () => handleSelect(org), children: [_jsx(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsx(Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && (_jsx(Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && (_jsx(Box, { as: Check, size: 16, color: theme.colors.accentText, flexShrink: 0 }))] }, org.id));
+                                }), filtered.length === 0 && (_jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
 };
 export default OrgSwitcher;

package/dist/esm/Components/OrgSwitcher/OrgSwitcherProps.js

@@ -6,6 +6,7 @@ export const AVATAR_COLORS = [
 ];
 /** Chart hues are tuned to sit apart from each other, not to carry a label. */
 export const AVATAR_INK = "#ffffff";
+/** Deterministic hash of the name, not random or brand-derived — same org name always gets the same fixed-palette color. */
 export const avatarColor = (seed, mode = "light") => {
     let hash = 0;
     for (let i = 0; i < seed.length; i += 1) {

package/dist/esm/Components/OrganizationDetails/OrganizationDetails.js

@@ -3,7 +3,8 @@ import { useMemo, useState } from "react";
 import { Avatar, Badge, Box, Flex, Heading, HStack, IconButton, Input, Skeleton, SkeletonText, Spinner, Text, Tooltip, VStack, } from "@chakra-ui/react";
 import { ArrowLeft, Building2, Check, CheckCircle2, Crown, Globe, Mail, Pencil, Plus, Trash2, Users, X, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
 import Button from "../Button/Button.js";
 import EmptyState from "../EmptyState/EmptyState.js";
@@ -47,6 +48,7 @@ const DEFAULT_LABELS = {
     copyright: "Pixelize Corp. All rights reserved.",
     termsOfService: "Terms of Service",
 };
+/** Admin panel for the org list — rename/delete/create/invites/default; not a session switcher. */
 const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoading = false, switchingOrgIds = [], respondingOrgIds = [], editingOrgIds = [], isCreating = false, userName, userAvatarUrl, onSetDefault, onAcceptInvite, onDeclineInvite, onDeleteOrganization, onDeleteRequest, onCreateOrganization, onEditOrganization, onBack, footerSlot, labels: labelOverrides, }) => {
     const { colors } = useCustomTheme();
     const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
@@ -67,7 +69,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     const pageBg = colors.backgroundColor.main;
     const primary50 = colors.primary[50];
     const primary100 = colors.primary[100];
-    const primary500 = colors.primary[500];
+    const primarySolid = resolveFilledSurface(colors.primary, colors);
     const onPrimary50 = accentTextOnCanvas(colors.primary, colors.primary[50]);
     const cardSx = {
         backgroundColor: surface,
@@ -153,7 +155,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
         width: "100%",
     };
     const hasOrganizations = activeOrganizations.length > 0 || invitedOrganizations.length > 0;
-    return (_jsxs(Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [_jsxs(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: [_jsxs(Flex, { alignItems: "center", gap: 3, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), _jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primary500, color: onFilled(primary500, colors.white, colors.black), children: _jsx(Building2, { size: 18 }) }), _jsxs(Box, { children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Heading, { size: "sm", color: heading, fontWeight: 700, children: userName
+    return (_jsxs(Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [_jsxs(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: [_jsxs(Flex, { alignItems: "center", gap: 3, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), _jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primarySolid.fill, color: primarySolid.color, children: _jsx(Building2, { size: 18 }) }), _jsxs(Box, { children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Heading, { size: "sm", color: heading, fontWeight: 700, children: userName
                                                     ? `${labels.greeting.replace(/User!?/, "")}${userName}!`.trim()
                                                     : labels.greeting }), _jsx(Avatar, { size: "xs", name: userName, src: userAvatarUrl })] }), _jsx(Text, { fontSize: "xs", color: subtle, mt: 0.5, children: labels.manageSubtitle })] })] }), _jsx(Button, { label: labels.createNewOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" })] }), isLoading ? (_jsx(Box, { ...gridSx, children: Array.from({ length: 6 }).map((_, idx) => (_jsxs(Box, { ...cardSx, p: 3, children: [_jsx(Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }), _jsx(SkeletonText, { noOfLines: 2, spacing: 2 })] }, idx))) })) : !hasOrganizations ? (_jsx(EmptyState, { icon: Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: _jsx(Button, { label: labels.createOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : (_jsxs(VStack, { align: "stretch", spacing: 4, children: [activeOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Users, { size: 16, color: colors.accentText }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.activeOrganizations }), sectionBadge(activeOrganizations.length, "blue")] }), _jsx(Box, { ...gridSx, children: activeOrganizations.map(renderActiveCard) })] })), invitedOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Mail, { size: 16, color: colors.semanticText.warning }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.invitedOrganizations }), sectionBadge(invitedOrganizations.length, "yellow")] }), _jsx(Box, { ...gridSx, children: invitedOrganizations.map(renderInvitedCard) })] }))] })), footerSlot, _jsx(CreateOrgModal, { isOpen: isCreateOpen, onClose: () => setCreateOpen(false), isLoading: isCreating, onSubmit: async (values) => {
                     await (onCreateOrganization === null || onCreateOrganization === void 0 ? void 0 : onCreateOrganization(values));

package/dist/esm/Components/PdfViewer/PdfViewer.js

@@ -2,9 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Text } from "@chakra-ui/react";
 import { Download, ExternalLink, FileText } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import ToolTip from "../ToolTip/ToolTip.js";
+/** Always-inline PDF embed panel (never a modal) — for a modal previewer of images/video/other too, use FilePreview. */
 const PdfViewer = ({ pdfUrl, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "xl", }) => {
     const theme = useCustomTheme();
-    return (_jsxs(Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && (_jsxs(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: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(FileText, { size: 18, color: theme.colors.accentText }), _jsx(Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsx(ToolTip, { label: "Open in new tab", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] }, children: _jsx(ExternalLink, { size: 16 }) }) }), _jsx(ToolTip, { label: "Download", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, download: fileName, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] }, children: _jsx(Download, { size: 16 }) }) })] })] })), _jsx(Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
+    const toolbarSurface = theme.colors.background[50];
+    const iconHoverInk = accentTextOnCanvas(theme.colors.primary, toolbarSurface);
+    const iconHoverBg = listRowBackgrounds(theme.colors).active;
+    return (_jsxs(Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && (_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.background[50], children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(FileText, { size: 18, color: theme.colors.accentText }), _jsx(Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsx(ToolTip, { label: "Open in new tab", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: _jsx(ExternalLink, { size: 16 }) }) }), _jsx(ToolTip, { label: "Download", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, download: fileName, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: _jsx(Download, { size: 16 }) }) })] })] })), _jsx(Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
 };
 export default PdfViewer;

package/dist/esm/Components/PinInput/PinInput.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { HStack, PinInput, PinInputField } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { TextLabel } from "../Common/FormLabel.js";
+/** The real, published OTP input (exported as `PinInput` from index.ts) — Chakra-native boxes, paste support, `type: "alphanumeric" | "number"`. Not to be confused with the unexported `PinInputs/PinInputs.tsx`. */
 export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, }) {
     const theme = useCustomTheme();
     return (_jsxs(_Fragment, { children: [label && (_jsx(TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(HStack, { children: _jsx(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) => (_jsx(PinInputField, { backgroundColor: theme.colors.background[100], 

package/dist/esm/Components/PinInputs/PinInputs.js

@@ -4,6 +4,7 @@ import { Box, HStack, Input } from "@chakra-ui/react";
 import Label from "../Common/Label.js";
 import ErrorComponent from "../Common/ErrorComponent.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+/** Unused hand-rolled OTP input — not exported from index.ts and not referenced anywhere in this repo; use `PinInput` (from `Components/PinInput/`) instead. */
 const PinInputs = ({ length = 3, label, error, onChange, onComplete, mask = false, placeholder = "*", }) => {
     const { colors } = useCustomTheme();
     const [values, setValues] = useState(Array(length).fill(""));

package/dist/esm/Components/Primitives/Primitives.js

@@ -0,0 +1,6 @@
+export { Box, Flex, Stack, VStack, HStack, Grid, GridItem, SimpleGrid, Wrap, WrapItem, Center, Spacer, Container, Divider, Text, Heading, Link, Image, Icon, Avatar, AvatarGroup, Badge, Spinner, Alert, AlertIcon, AlertTitle, AlertDescription, Portal, Collapse, Show, Hide, List, ListItem, ListIcon, OrderedList, UnorderedList, Tabs, TabList, Tab, TabPanels, TabPanel, Popover, PopoverTrigger, PopoverContent, PopoverBody, PopoverHeader, PopoverFooter, PopoverArrow, PopoverCloseButton, FormControl, FormLabel, FormErrorMessage, FormHelperText, IconButton, TableContainer, Thead, Tbody, Tfoot, Tr, Th, Td, Menu, MenuButton, MenuList, MenuItem, MenuGroup, MenuDivider, MenuOptionGroup, MenuItemOption, Accordion, AccordionItem, AccordionButton, AccordionPanel, AccordionIcon, SliderTrack, SliderFilledTrack, SliderThumb, SliderMark, ChakraProvider, extendTheme, useDisclosure, useMediaQuery, useToken, useBreakpointValue, } from "@chakra-ui/react";
+// Renamed: the library's own Table and Slider own these names.
+export { Table as TableRoot, Slider as RangeSlider } from "@chakra-ui/react";
+export { Input, Textarea, Progress, Radio, RadioGroup, Skeleton, ModalOverlay, ModalContent, ModalCloseButton, CardBody, } from "@chakra-ui/react";
+// Prefixed because the library ships its own component under each of these names.
+export { Card as ChakraCard, Select as ChakraSelect, Modal as ChakraModal, ModalBody as ChakraModalBody, ModalHeader as ChakraModalHeader, ModalFooter as ChakraModalFooter, } from "@chakra-ui/react";

package/dist/esm/Components/ProductCard/ProductReview.js

@@ -3,6 +3,8 @@ import { Box, Flex, Text, Icon } from '@chakra-ui/react';
 import { BookCheck, Star } from 'lucide-react';
 import { useCustomTheme } from '../../Theme/useCustomTheme.js';
 import { accentTextOnCanvas } from '../../Theme/tokens/builders/accentText.js';
+import { contrastRatio } from '../../Theme/tokens/builders/color.js';
+import { AA_NON_TEXT } from '../../Theme/tokens/builders/outlineRung.js';
 // 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
@@ -17,6 +19,9 @@ const ProductReview = ({ rating, reviewCount, mb = 0 }) => {
     // Calculate fill percentage: (rating / 5) * 100%
     const numericRating = hasRating ? Math.min(Math.max(Number(rating), 0), 5) : 0;
     const fillPercentage = (numericRating / 6) * 100;
-    return (_jsxs(Flex, { align: "center", gap: 2, mb: mb, children: [hasRating && (_jsxs(Flex, { align: "center", gap: 1, bg: colors.teal[50], color: accentTextOnCanvas(colors.teal, colors.teal[50]), px: 2, borderRadius: "md", children: [_jsxs(Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0, children: [_jsx(Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px", children: _jsx(Star, { size: 14, fill: "none", strokeWidth: 1.5 }) }), fillPercentage > 0 && (_jsx(Box, { position: "absolute", top: 0, left: 0, width: `${fillPercentage}%`, height: "100%", overflow: "hidden", children: _jsx(Star, { size: 14, color: RATING_STAR_FILL, fill: RATING_STAR_FILL }) }))] }), _jsx(Text, { fontSize: "sm", fontWeight: "bold", children: numericRating })] })), hasRating && hasReviewCount && _jsx(Box, { h: "4", w: "0.063rem", bg: colors.boxborder[500] }), hasReviewCount && (_jsxs(Flex, { align: "center", gap: "1", children: [_jsx(Icon, { as: BookCheck, boxSize: 3.5 }), _jsxs(Text, { fontSize: "sm", color: colors.textMuted, children: ["(", reviewCount, ")"] })] }))] }));
+    const chipBg = colors.teal[50];
+    const chipInk = accentTextOnCanvas(colors.teal, chipBg);
+    const starFill = contrastRatio(RATING_STAR_FILL, chipBg) >= AA_NON_TEXT ? RATING_STAR_FILL : chipInk;
+    return (_jsxs(Flex, { align: "center", gap: 2, mb: mb, children: [hasRating && (_jsxs(Flex, { align: "center", gap: 1, bg: chipBg, color: chipInk, px: 2, borderRadius: "md", children: [_jsxs(Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0, children: [_jsx(Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px", children: _jsx(Star, { size: 14, fill: "none", strokeWidth: 1.5 }) }), fillPercentage > 0 && (_jsx(Box, { position: "absolute", top: 0, left: 0, width: `${fillPercentage}%`, height: "100%", overflow: "hidden", children: _jsx(Star, { size: 14, color: starFill, fill: starFill }) }))] }), _jsx(Text, { fontSize: "sm", fontWeight: "bold", children: numericRating })] })), hasRating && hasReviewCount && _jsx(Box, { h: "4", w: "0.063rem", bg: colors.boxborder[500] }), hasReviewCount && (_jsxs(Flex, { align: "center", gap: "1", children: [_jsx(Icon, { as: BookCheck, boxSize: 3.5 }), _jsxs(Text, { fontSize: "sm", color: colors.textMuted, children: ["(", reviewCount, ")"] })] }))] }));
 };
 export default ProductReview;

package/dist/esm/Components/ProductCard/ProductTags.js

@@ -20,8 +20,8 @@ const ProductTags = ({ tags, className, size = 'sm' }) => {
 };
 const Tag = ({ children, fullWidth = false, size = 'sm', }) => {
     const { colors } = useCustomTheme();
-    const tagBorder = colors.semanticText.error;
     const tagText = colors.text[900];
+    const tagBorder = colors.boxborder[500];
     // Size map for tags
     const tagSizes = {
         xs: { fontSize: '0.625rem', px: '0.5rem', py: '0.125rem' },

package/dist/esm/Components/ProfileCard/ProfileCard.js

@@ -13,7 +13,7 @@ export const ProfileCardFooter = ({ children, }) => {
 };
 export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize = "0.5px", dividervariant = "solid", CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }) {
     const { colors } = useCustomTheme();
-    const resolvedDividerColor = dividercolor !== null && dividercolor !== void 0 ? dividercolor : colors.border[200];
+    const resolvedDividerColor = dividercolor !== null && dividercolor !== void 0 ? dividercolor : colors.boxborder[200];
     const accentBorder = `2px solid ${colors.primary[500]}`;
     const isReactElement = (child) => {
         return child !== null && typeof child === "object" && "type" in child;

package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -3,7 +3,9 @@ import { useRef, useState } from "react";
 import { Box, Image, IconButton, Input, Text, Tooltip, HStack, } from "@chakra-ui/react";
 import { Eye, FileText, SquarePen, User } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
+/** Avatar display with optional edit/view actions — does not crop, resize, or upload; PDF detection breaks on a freshly-picked file. */
 export default 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;
     const [photo, setPhoto] = useState(photoUrl);
@@ -57,14 +59,14 @@ export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth
             "&:hover .ppv-media": {
                 boxShadow: `0 0 0 0.1875rem ${c.primary.opacity[24]}`,
             },
-        }, children: [_jsx(Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", children: renderMedia() }), hasActions && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }), _jsxs(HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease", children: [isEditable && (_jsx(Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: c.primary[500], color: onFilled(c.primary[500], c.white, c.black), border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
+        }, children: [_jsx(Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", children: renderMedia() }), hasActions && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }), _jsxs(HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease", children: [isEditable && (_jsx(Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: c.primary[solidFillRung(c.primary, c.white)], color: labelOnFill(c.primary[solidFillRung(c.primary, c.white)], c.white, c.black), border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
                                         bg: c.primary[600],
-                                        color: onFilled(c.primary[600], c.white, c.black),
+                                        color: labelOnFill(c.primary[600], c.white, c.black),
                                         transform: "scale(1.1)",
                                         boxShadow: (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.lg,
                                     }, _active: {
                                         bg: c.primary[700],
-                                        color: onFilled(c.primary[700], c.white, c.black),
+                                        color: labelOnFill(c.primary[700], c.white, c.black),
                                     } }) })), isView && (_jsx(Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `0.063rem solid ${border}`, boxShadow: (_d = theme.shadows) === null || _d === void 0 ? void 0 : _d.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
                                         bg: c.gray[50],
                                         color: accentTextOnCanvas(c.primary, c.gray[50]),

package/dist/esm/Components/ProgressBar/ProgressBar.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Progress } from "@chakra-ui/react";
+/** Percentage/quantity fill bar (isAnimated needs hasStripe=true or it's a no-op) — for a named pipeline tracker use StageProgress instead. */
 export default function ProgressBar({ size, isIndeterminate, color = "primary", hasStripe, height, value, isAnimated, max, min, variant, ...aria }) {
     //  const theme = useCustomTheme();
     return (_jsx(Progress, { ...aria, size: size, isIndeterminate: isIndeterminate, colorScheme: color, hasStripe: hasStripe, height: height, value: value, isAnimated: isAnimated, max: max, min: min, variant: variant }));

package/dist/esm/Components/RadioButton/RadioButton.js

@@ -2,9 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Radio as ChakraRadio, RadioGroup as ChakraRadioGroup, Stack, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { TextLabel } from "../Common/FormLabel.js";
+import { liftToContrast, AA_NON_TEXT } from "../../Theme/tokens/builders/outlineRung.js";
 const RadioButton = ({ label, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize = "0.75rem", labelClampLines = 2, showLabelTooltip = (label || "").length > 18, labelTooltip = label, }) => {
     const theme = useCustomTheme();
-    return (_jsx(ChakraRadio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], borderWidth: "1.6px", _hover: {
+    return (_jsx(ChakraRadio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.boxborder[500], borderWidth: "1.6px", _hover: {
             borderColor: theme.colors.primary[500],
             backgroundColor: theme.colors.background[100],
         }, sx: {
@@ -15,7 +16,7 @@ const RadioButton = ({ label, colorScheme, isChecked, onChange, isDisabled, size
             "&[data-checked]:hover": {
                 backgroundColor: theme.colors.primary[500],
                 borderColor: theme.colors.primary[500],
-                boxShadow: `0 0 0 2px ${theme.colors.primary[200]}`,
+                boxShadow: `0 0 0 2px ${liftToContrast(theme.colors.primary[200], theme.colors.backgroundColor.main, AA_NON_TEXT)}`,
             },
         }, children: _jsx(TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, inline: true }) }));
 };

package/dist/esm/Components/Reorder/Reorder.js

@@ -3,6 +3,7 @@ import { Badge, Box, Divider, HStack, IconButton, Image, Text, } from "@chakra-u
 import { DragDropContext, Droppable, Draggable, } from "@hello-pangea/dnd";
 import { BetweenHorizonalStart, GripVertical, X } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+/** Horizontal drag-reorderable row of image tiles (wraps @hello-pangea/dnd) — not a substitute for KanbanBoard's column drag/drop. */
 const ReorderList = ({ label = "", items, onReorder, showRemoveIcon = false, onRemove, }) => {
     const { colors } = useCustomTheme();
     const handleDragEnd = (result) => {

package/dist/esm/Components/RolesPermission/RolesPermission.js

@@ -3,7 +3,7 @@ import { useMemo, useState } from "react";
 import { Badge, Box, Checkbox, Divider, Flex, Heading, HStack, IconButton, Skeleton, Table, Tbody, Td, Text, Th, Thead, Tooltip, Tr, VStack, } from "@chakra-ui/react";
 import { ArrowLeft, Check, Pencil, Plus, ShieldCheck, SquareArrowOutUpRight, Trash2, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import Button from "../Button/Button.js";
 import TextInput from "../Input/TextInput.js";
 import EmptyState from "../EmptyState/EmptyState.js";
@@ -51,6 +51,7 @@ const DEFAULT_KEYS = [
     "import",
     "export",
 ];
+/** Role list + role/permission-matrix form in one component (switch via `view`). */
 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", }) => {
     const { colors } = useCustomTheme();
     const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
@@ -59,8 +60,9 @@ const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false,
     const surface = colors.background[50];
     const muted = colors.textMuted;
     const heading = colors.text[900];
-    const headBg = colors.gray[50];
-    const rowHover = resolveHoverTint(colors.gray[50], surface);
+    const rowBackgrounds = listRowBackgrounds(colors);
+    const headBg = colors.background[100];
+    const rowHover = rowBackgrounds.active;
     const isViewMode = mode === "view";
     const columnLabels = {
         read: labels.read,

package/dist/esm/Components/ScrollToTop/ScrollToTop.js

@@ -5,6 +5,8 @@ import { ChevronUp } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
+import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
+/** Visibility depends on the wrapped content's direct parent actually scrolling — see `children`. */
 const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300, duration = 600, useWindow = false, bottom = "2rem", right = "2rem", }) => {
     const [visible, setVisible] = useState(false);
     const anchorRef = useRef(null);
@@ -57,8 +59,9 @@ const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [useWindow, threshold]);
-    return (_jsxs(Box, { ref: anchorRef, position: "relative", children: [children, _jsx(ToolTip, { label: tooltipLabel, placement: "left", children: _jsx(Box, { as: "button", type: "button", onClick: scrollToTop, "aria-label": tooltipLabel, border: "none", position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: theme.colors.primary[500], color: theme.colors.onPrimary, boxShadow: "md", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: "all 0.25s cubic-bezier(0.16, 1, 0.3, 1)", _hover: {
+    return (_jsxs(Box, { ref: anchorRef, position: "relative", children: [children, _jsx(ToolTip, { label: tooltipLabel, placement: "left", children: _jsx(Box, { as: "button", type: "button", onClick: scrollToTop, "aria-label": tooltipLabel, border: "none", position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], color: labelOnFill(theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], theme.colors.white, theme.colors.black), boxShadow: "md", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: "all 0.25s cubic-bezier(0.16, 1, 0.3, 1)", _hover: {
                         bg: theme.colors.primary[600],
+                        color: labelOnFill(theme.colors.primary[600], theme.colors.white, theme.colors.black),
                         transform: "translateY(-2px) scale(1.05)",
                         boxShadow: "lg",
                     }, _active: { transform: "scale(0.95)" }, children: _jsx(ChevronUp, { size: 24, strokeWidth: 2.5 }) }) })] }));

package/dist/esm/Components/ScrollbarBox/ScrollbarBox.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { scrollbarStyles, } from "../../Theme/tokens/builders/scrollbar.js";
+/** Scrollable Box with themed scrollbar chrome (scrollbarStyles) applied via variant. */
 const ScrollbarBox = ({ children, height, maxHeight, overflowX, overflowY = "auto", variant = "default", scrollContainerRef, }) => {
     const { colors } = useCustomTheme();
     return (_jsx(Box, { ref: scrollContainerRef, height: height, maxHeight: maxHeight, position: "relative", sx: { overflowX, overflowY, ...scrollbarStyles(colors, variant) }, children: children }));

package/dist/esm/Components/Search/Search.js

@@ -6,6 +6,7 @@ import { TextLabel } from "../Common/FormLabel.js";
 import HelperText from "../Common/HelperText.js";
 import ErrorMessage from "../Common/ErrorMessage.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+/** Plain filter/search input, no options list — default shortcut registers a page-global Ctrl+K listener that can't be disabled. */
 export default function Search({ placeholder = "Search...", onSearch, onclose, shortcut = "Ctrl+K", query, error, errorMessage, helperText, label, id, isInformation, informationMessage, isRequired, }) {
     const theme = useCustomTheme();
     const inputRef = useRef(null);
@@ -24,6 +25,6 @@ export default function Search({ placeholder = "Search...", onSearch, onclose, s
             window.removeEventListener("keydown", handleKeyDown);
         };
     }, [shortcut]);
-    return (_jsxs(FormControl, { id: id, isInvalid: !!error, children: [label && (_jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(InputGroup, { w: "100%", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: SearchIconComponent, color: theme.colors.gray[500] }) }), _jsx(Input, { ref: inputRef, type: "text", value: query, onChange: onSearch, placeholder: placeholder, variant: "outline", isInvalid: error }), _jsxs(InputRightElement, { w: "auto", pr: "3", display: "flex", alignItems: "center" // ✅ centers vertically
-                        , gap: "2", children: [query && (_jsx(Icon, { as: X, color: theme.colors.gray[500], boxSize: 5, cursor: "pointer", onClick: onclose })), shortcut && (_jsx(Text, { fontSize: "sm", color: theme.colors.gray[500], px: "2", py: "0.5", borderRadius: "md", bg: theme.colors.gray[100], children: shortcut }))] })] }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+    return (_jsxs(FormControl, { id: id, isInvalid: !!error, children: [label && (_jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(InputGroup, { w: "100%", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: SearchIconComponent, color: theme.colors.textMuted }) }), _jsx(Input, { ref: inputRef, type: "text", value: query, onChange: onSearch, placeholder: placeholder, variant: "outline", isInvalid: error }), _jsxs(InputRightElement, { w: "auto", pr: "3", display: "flex", alignItems: "center" // ✅ centers vertically
+                        , gap: "2", children: [query && (_jsx(Icon, { as: X, color: theme.colors.textMuted, boxSize: 5, cursor: "pointer", onClick: onclose })), shortcut && (_jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, px: "2", py: "0.5", borderRadius: "md", bg: theme.colors.backgroundColor.subtle, children: shortcut }))] })] }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
 }