pixelize-design-library 2.4.2-beta.42 → 2.4.2-beta.44

package/dist/esm/Components/DatePicker/valueFormat.js

@@ -0,0 +1,15 @@
+import { format, parse, isValid } from "date-fns";
+const ISO_FORMATS = {
+    date: "yyyy-MM-dd",
+    time: "HH:mm",
+    datetime: "yyyy-MM-dd'T'HH:mm:ss",
+};
+export const isoFormatFor = (pickerType) => ISO_FORMATS[pickerType];
+// Local time, no offset — a malformed/empty string yields null rather than an Invalid Date.
+export const parseIsoValue = (value, pickerType) => {
+    if (!value)
+        return null;
+    const parsed = parse(value, isoFormatFor(pickerType), new Date());
+    return isValid(parsed) ? parsed : null;
+};
+export const formatIsoValue = (date, pickerType) => format(date, isoFormatFor(pickerType));

package/dist/esm/Components/DescriptionList/DescriptionList.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Grid, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+import CopyButton from "../CopyButton/CopyButton.js";
+const DEFAULT_COLUMNS = { base: 1, md: 2 };
+const toTemplateColumns = (columns) => Object.fromEntries(Object.entries(columns).map(([bp, count]) => [bp, `repeat(${count}, minmax(0, 1fr))`]));
+const isMissing = (value) => value === null || value === undefined || value === "";
+/** Label/value read grid: semantic dl/dt/dd, "stacked" (label above) or "inline" (label left, value right). */
+const DescriptionList = ({ items, columns = DEFAULT_COLUMNS, layout = "stacked", emptyValue = "—", isLoading = false, loadingRows = 6, }) => {
+    const { colors } = useCustomTheme();
+    const templateColumns = toTemplateColumns(columns);
+    if (isLoading) {
+        return (_jsx(Grid, { role: "group", "aria-busy": "true", "aria-label": "Loading", templateColumns: templateColumns, columnGap: 5, rowGap: 4, children: Array.from({ length: loadingRows }, (_, index) => (_jsxs(Flex, { direction: "column", gap: 1.5, children: [_jsx(Skeletons, { type: "skeleton", height: 3, width: "40%" }), _jsx(Skeletons, { type: "skeleton", height: 4, width: "75%" })] }, index))) }));
+    }
+    return (_jsx(Grid, { as: "dl", m: 0, templateColumns: templateColumns, columnGap: 5, rowGap: 4, children: items.map((item, index) => {
+            const displayValue = isMissing(item.value) ? emptyValue : item.value;
+            const canCopy = item.copyable && typeof item.value === "string" && item.value !== "";
+            const copyTooltip = typeof item.label === "string" ? `Copy ${item.label}` : "Copy";
+            const Value = (_jsxs(Flex, { as: "dd", m: 0, align: "center", gap: 1, minW: 0, children: [_jsx(Text, { fontSize: "sm", color: colors.text[800], textAlign: layout === "inline" ? "right" : "left", noOfLines: layout === "inline" ? 1 : undefined, children: displayValue }), canCopy && _jsx(CopyButton, { value: item.value, size: "xs", tooltip: copyTooltip })] }));
+            const itemProps = layout === "inline"
+                ? { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 3 }
+                : {};
+            return (_jsxs(Box, { minW: 0, gridColumn: item.span ? `span ${item.span}` : undefined, ...itemProps, children: [_jsx(Text, { as: "dt", fontSize: "xs", color: colors.textMuted, mb: layout === "inline" ? 0 : 0.5, children: item.label }), Value] }, index));
+        }) }));
+};
+export default DescriptionList;

package/dist/esm/Components/DescriptionList/DescriptionListProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Drawer/Drawer.js

@@ -11,13 +11,27 @@ export const DrawerBody = ({ children }) => {
 export const DrawerFooter = ({ children }) => {
     return _jsx(_Fragment, { children: children });
 };
-export default function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant = "solid", children, }) {
+const isReactElement = (child) => child !== null && typeof child === "object" && "type" in child;
+// Matches by type one Fragment deep, so `<>{cond && <DrawerFooter>...</DrawerFooter>}</>` isn't dropped.
+const findSlot = (children, slot) => {
+    for (const child of React.Children.toArray(children)) {
+        if (!isReactElement(child))
+            continue;
+        if (child.type === slot)
+            return child;
+        if (child.type === React.Fragment) {
+            const nested = findSlot(child.props.children, slot);
+            if (nested)
+                return nested;
+        }
+    }
+    return undefined;
+};
+export default function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, children, }) {
+    var _a, _b;
     const { colors } = useCustomTheme();
-    const isReactElement = (child) => {
-        return child !== null && typeof child === "object" && "type" in child;
-    };
-    const header = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === DrawerHeader);
-    const body = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === DrawerBody);
-    const footer = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === DrawerFooter);
-    return (_jsxs(ChakraDrawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: variant, id: id, children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerContent, { bg: colors.background[50], children: [_jsx(DrawerCloseButton, {}), header && (_jsx(ChakraDrawerHeader, { borderBottomWidth: "1px", children: header })), _jsx(ChakraDrawerBody, { children: body && body }), footer && _jsx(ChakraDrawerFooter, { borderTopWidth: "1px", children: footer })] })] }));
+    const headerSlot = findSlot(children, DrawerHeader);
+    const bodySlot = findSlot(children, DrawerBody);
+    const footerSlot = findSlot(children, DrawerFooter);
+    return (_jsxs(ChakraDrawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerContent, { ...contentProps, children: [!hideCloseButton && _jsx(DrawerCloseButton, {}), headerSlot && (_jsx(ChakraDrawerHeader, { borderBottomWidth: "1px", borderColor: colors.boxborder[200], ...headerSlot.props, children: headerSlot })), _jsx(ChakraDrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && (_jsx(ChakraDrawerFooter, { borderTopWidth: "1px", borderColor: colors.boxborder[200], ...footerSlot.props, children: footerSlot }))] })] }));
 }

package/dist/esm/Components/Dropdown/DropDown.js

@@ -1,25 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Box, Flex, Button, useDisclosure, List, ListItem, Portal, } from "@chakra-ui/react";
-import { motion } from "framer-motion";
+import { motion, useReducedMotion } from "framer-motion";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { ChevronDown } from "lucide-react";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 const MotionBox = motion(forwardRef((props, ref) => (_jsx(Box, { ref: ref, ...props }))));
-// Size scale (mirrors the Button sizes). `btn` is the Chakra Button size.
 const SIZE_MAP = {
-    xs: { btn: "xs", fontSize: "0.75rem", py: 1, px: 2.5, img: "1rem", chevron: 13, minW: "8rem", gap: 1.5 },
-    sm: { btn: "sm", fontSize: "0.8125rem", py: 1.5, px: 3, img: "1.05rem", chevron: 14, minW: "9rem", gap: 2 },
-    md: { btn: "md", fontSize: "0.875rem", py: 2, px: 3, img: "1.15rem", chevron: 16, minW: "11rem", gap: 2 },
-    lg: { btn: "lg", fontSize: "0.9375rem", py: 2.5, px: 3.5, img: "1.25rem", chevron: 18, minW: "12rem", gap: 2.5 },
+    xs: { btn: "xs", fontSize: CONTROL_SIZES.xs.fontSize, py: 1, px: 2.5, img: "1rem", chevron: CONTROL_SIZES.xs.iconSize, minW: "8rem", gap: 1.5 },
+    sm: { btn: "sm", fontSize: CONTROL_SIZES.sm.fontSize, py: 1.5, px: 3, img: "1rem", chevron: CONTROL_SIZES.sm.iconSize, minW: "9rem", gap: 2 },
+    md: { btn: "md", fontSize: CONTROL_SIZES.md.fontSize, py: 2, px: 3, img: "1.125rem", chevron: CONTROL_SIZES.md.iconSize, minW: "11rem", gap: 2 },
+    lg: { btn: "lg", fontSize: CONTROL_SIZES.lg.fontSize, py: 2.5, px: 3.5, img: "1.25rem", chevron: CONTROL_SIZES.lg.iconSize, minW: "12rem", gap: 2.5 },
     xl: { btn: "lg", fontSize: "1.0625rem", py: 3, px: 4, img: "1.4rem", chevron: 20, minW: "13rem", gap: 3 },
 };
-/** Menu-button that triggers labelled actions — nothing is "selected"/persisted; for picking a value from a list, use Select/SelectV2. */
+const TRIGGER_TRANSITION = transitionFor(["background-color", "border-color", "color", "box-shadow"]);
+const ROW_TRANSITION = transitionFor(["background-color", "color"]);
+const CHEVRON_TRANSITION = transitionFor(["transform"], "base");
+const isTypeaheadKey = (e) => e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && !e.altKey;
+/** Menu-button that triggers labelled actions — nothing is "selected"/persisted; for picking a value from a list, use `Select`. */
 const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleOptionSelect, dropdownType = "button", text, DropdownIcon, isVisibleIconShow = true, buttonProps, headStyle, ListStyle, ItemStyle, LabelStyle, ImageStyle, size, optionsSize, divider = false, ariaLabel, }, ref) => {
-    var _a, _b;
+    var _a;
     const theme = useCustomTheme();
     const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
     const { isOpen, onOpen, onClose } = useDisclosure();
@@ -27,7 +34,8 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
     const dropdownRef = useRef(null);
     const menuRef = useRef(null);
     const [menuPos, setMenuPos] = useState({ top: 0, left: 0, width: 0 });
-    const s = (_b = SIZE_MAP[(_a = size !== null && size !== void 0 ? size : optionsSize) !== null && _a !== void 0 ? _a : "md"]) !== null && _b !== void 0 ? _b : SIZE_MAP.md;
+    const s = SIZE_MAP[(_a = size !== null && size !== void 0 ? size : optionsSize) !== null && _a !== void 0 ? _a : "sm"];
+    const prefersReducedMotion = useReducedMotion();
     const menuId = useId();
     // Roving-tabindex keyboard nav for the menu (ARIA APG menu-button pattern):
     // real DOM focus moves through the items, so no aria-activedescendant is needed.
@@ -45,9 +53,7 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
     const openAndFocus = (index) => {
         var _a;
         if (isOpen) {
-            // Already open (trigger still holds focus, e.g. after Enter/Space) — the
-            // portal is already mounted, so focus directly; no need to wait a frame,
-            // and the effect below only reacts to isOpen *changing* anyway.
+            // NOTE: already open — portal is already mounted, so focus directly, no frame wait needed.
             setActiveIndex(index);
             (_a = itemRefs.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
         }
@@ -72,9 +78,7 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
             pendingFocusIndex.current = null;
             if (idx !== null) {
                 setActiveIndex(idx);
-                // Chakra's <Portal> mounts its children a tick after this effect runs
-                // (it resolves its target node via its own effect first), so the menu
-                // item ref isn't attached yet here — a frame gets us past that.
+                // NOTE: Chakra's Portal mounts children a tick late, so the item ref isn't attached yet — a frame gets past that.
                 requestAnimationFrame(() => { var _a; return (_a = itemRefs.current[idx]) === null || _a === void 0 ? void 0 : _a.focus(); });
             }
         }
@@ -100,16 +104,13 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
             onClose();
         }
         else if (e.key === "Enter" || e.key === " ") {
-            // Explicit rather than relying on native button activation: the text
-            // trigger is a styled Flex (no default action to rely on), and jsdom's
-            // `fireEvent` does not simulate a real browser's Enter/Space-activates-
-            // button default action either.
+            // NOTE: explicit — the trigger is a styled Flex with no native button activation to rely on.
             e.preventDefault();
             handleToggle();
         }
     };
     const handleMenuKeyDown = (e) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (options.length === 0)
             return;
         if (e.key === "ArrowDown" || e.key === "ArrowUp") {
@@ -138,6 +139,15 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
         else if (e.key === "Tab") {
             onClose();
         }
+        else if (isTypeaheadKey(e)) {
+            const char = e.key.toLowerCase();
+            const order = options.map((_, i) => (activeIndex + 1 + i) % options.length);
+            const match = order.find((i) => options[i].label.toLowerCase().startsWith(char));
+            if (match !== undefined) {
+                setActiveIndex(match);
+                (_d = itemRefs.current[match]) === null || _d === void 0 ? void 0 : _d.focus();
+            }
+        }
     };
     const handleItemKeyDown = (e, optionId, optionLabel) => {
         if (e.key === "Enter" || e.key === " ") {
@@ -146,9 +156,7 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
             focusTrigger();
         }
     };
-    // The menu is portaled to <body> (so it sits above everything). Anchor it to
-    // the trigger, then clamp to the viewport so it never overflows off-screen
-    // (e.g. when the trigger sits near the right or bottom edge).
+    // NOTE: menu is portaled to body — anchor to the trigger, then clamp to viewport so it never overflows.
     const updateMenuPos = useCallback(() => {
         var _a, _b;
         if (!dropdownRef.current)
@@ -219,33 +227,35 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
         if (node)
             updateMenuPos();
     };
-    const Chevron = isVisibleIconShow ? (_jsx(Box, { as: "span", display: "inline-flex", transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", children: _jsx(ChevronDown, { size: s.chevron }) })) : undefined;
+    const Chevron = isVisibleIconShow ? (_jsx(Box, { as: "span", display: "inline-flex", transition: CHEVRON_TRANSITION, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: s.chevron }) })) : undefined;
     const dropDownToggleOption = () => {
-        const ButtonToggle = (_jsx(Button, { ref: buttonTriggerRef, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, size: s.btn, colorScheme: "primary", borderRadius: "lg", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (ButtonText ? undefined : "Open menu"), rightIcon: Chevron, sx: { transition: "all 0.15s ease", ...(dropDownButtonStyle) }, ...buttonProps, children: _jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
-        const TextToggle = (_jsxs(Flex, { ref: textTriggerRef, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: theme.colors.text[700], transition: "color 0.15s ease", _hover: { color: theme.colors.accentText }, style: dropDownButtonStyle, role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (text ? undefined : "Open menu"), children: [DropdownIcon, text, Chevron] }));
+        const ButtonToggle = (_jsx(Button, { ref: buttonTriggerRef, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, size: s.btn, colorScheme: "primary", borderRadius: "lg", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (ButtonText ? undefined : "Open menu"), rightIcon: Chevron, sx: { transition: TRIGGER_TRANSITION, ...reducedMotionSx(), ...dropDownButtonStyle }, ...buttonProps, children: _jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
+        const TextToggle = (_jsxs(Flex, { ref: textTriggerRef, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: theme.colors.text[700], borderRadius: "md", transition: ROW_TRANSITION, _hover: { color: theme.colors.accentText }, sx: { ...focusVisibleStyles(theme.colors), ...reducedMotionSx() }, style: dropDownButtonStyle, role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (text ? undefined : "Open menu"), children: [DropdownIcon, text, Chevron] }));
         return dropdownType === "button" ? ButtonToggle : TextToggle;
     };
     const DropdownContentRender = () => {
-        var _a;
         const hoverTint = rowBackgrounds.active;
-        return (_jsx(List, { id: menuId, role: "menu", onKeyDown: handleMenuKeyDown, bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: scrollbarStyles(theme.colors, "overlay"), style: ListStyle, children: options.map((option, index) => (_jsxs(ListItem, { ref: (node) => {
+        return (_jsx(List, { id: menuId, role: "menu", onKeyDown: handleMenuKeyDown, bg: theme.colors.surfaceRaised, border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", boxShadow: theme.shadows.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: scrollbarStyles(theme.colors, "overlay"), style: ListStyle, children: options.map((option, index) => (_jsxs(ListItem, { ref: (node) => {
                     itemRefs.current[index] = node;
                 }, role: "menuitem", tabIndex: index === activeIndex ? 0 : -1, onClick: () => {
                     handleListItemClick(option.id, option.label);
                     focusTrigger();
-                }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: 1.5, px: s.px, py: s.py, borderRadius: "md", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: theme.colors.text[700], transition: "background 0.12s ease, color 0.12s ease", _hover: {
+                }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: 1.5, px: s.px, py: s.py, borderRadius: "md", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: theme.colors.text[700], transition: ROW_TRANSITION, _hover: {
                     bg: hoverTint,
                     color: theme.colors.accentText,
                 }, _focus: {
                     bg: hoverTint,
                     color: theme.colors.accentText,
+                    outline: "none",
+                }, _focusVisible: {
+                    bg: hoverTint,
+                    color: theme.colors.accentText,
+                    boxShadow: `inset 0 0 0 2px ${theme.colors.focusRing.ring}`,
                 }, borderBottom: divider
                     ? `0.063rem solid ${theme.colors.boxborder[200]}`
-                    : undefined, sx: { "&:last-child": { borderBottom: "none" } }, style: ItemStyle, fontWeight: 500, children: [(option === null || option === void 0 ? void 0 : option.image) && (_jsx(Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), _jsx(Box, { as: "span", fontSize: s.fontSize, isTruncated: true, 
-                        // fontWeight={400}
-                        style: LabelStyle, children: option.label })] }, option.id))) }));
+                    : undefined, sx: { "&:last-child": { borderBottom: "none" }, ...reducedMotionSx() }, style: ItemStyle, fontWeight: 500, children: [option.image && (_jsx(Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), _jsx(Box, { as: "span", fontSize: s.fontSize, isTruncated: true, style: LabelStyle, children: option.label })] }, option.id))) }));
     };
-    return (_jsxs(Box, { ref: dropdownRef, position: "relative", display: "inline-block", children: [dropDownToggleOption(), isOpen && (_jsx(Portal, { children: _jsx(MotionBox, { ref: setMenuRef, position: "fixed", top: `${menuPos.top}px`, left: `${menuPos.left}px`, minW: `${menuPos.width}px`, zIndex: 1500, initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: headStyle, children: DropdownContentRender() }) }))] }));
+    return (_jsxs(Box, { ref: dropdownRef, position: "relative", display: "inline-block", children: [dropDownToggleOption(), isOpen && (_jsx(Portal, { children: _jsx(MotionBox, { ref: setMenuRef, position: "fixed", top: `${menuPos.top}px`, left: `${menuPos.left}px`, minW: `${menuPos.width}px`, zIndex: 1500, initial: prefersReducedMotion ? false : { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: headStyle, children: DropdownContentRender() }) }))] }));
 });
 Dropdown.displayName = "Dropdown";
 export default Dropdown;

package/dist/esm/Components/Editor/Editor.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { Suspense, useMemo, useState } from "react";
+import React, { Suspense, useEffect, useMemo, useState } from "react";
 import { Box } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { getJoditThemeVars } from "./joditThemeVars.js";
+import { applyJoditAccessibilityFixes } from "./joditAccessibility.js";
 // Loaded on render, not on import: jodit-react's browser bundle touches `self` at module
 // scope, which crashes any Node/SSR consumer importing this package's barrel.
 const JoditEditor = React.lazy(async () => {
@@ -24,6 +25,8 @@ const Editor = React.memo(function Editor({ value, key, config, editorRef, class
     const stableConfig = useMemo(() => ({
         theme: isDarkCanvas(theme.colors.backgroundColor.main) ? "dark" : "default",
         popupRoot,
+        // Off by default, Jodit ships every toolbar button unreachable by keyboard.
+        allowTabNavigation: true,
         // `config` spread as `Record<string, unknown>`: mixing a literal `popupRoot` key with a
         // spread of the raw `DeepPartial<Config>` type (Jodit's huge recursive config type) blows
         // past TS's type-instantiation depth limit (TS2589) — the cast avoids that without
@@ -37,6 +40,15 @@ const Editor = React.memo(function Editor({ value, key, config, editorRef, class
     // feeds our actual active colors into those variables, scoped to this instance (see
     // `joditThemeVars.ts`).
     const themeVars = useMemo(() => getJoditThemeVars(theme.colors, isDarkCanvas(theme.colors.backgroundColor.main)), [theme]);
+    // Jodit rebuilds its own toolbar DOM (resize, mode change), so re-run on every mutation.
+    useEffect(() => {
+        if (!popupRoot)
+            return;
+        applyJoditAccessibilityFixes(popupRoot);
+        const observer = new MutationObserver(() => applyJoditAccessibilityFixes(popupRoot));
+        observer.observe(popupRoot, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    }, [popupRoot]);
     return (_jsx(Box, { ref: setPopupRoot, sx: themeVars, children: _jsx(Suspense, { fallback: null, children: _jsx(JoditEditor, { config: stableConfig, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }, key) }) }));
 });
 export default Editor;

package/dist/esm/Components/Editor/joditAccessibility.js

@@ -0,0 +1,24 @@
+// Jodit puts aria-label on the listitem wrapper, not the real inner <button> — fixes that here.
+export const applyJoditAccessibilityFixes = (root) => {
+    root.querySelectorAll('[role="trigger"]').forEach((el) => {
+        el.removeAttribute("role");
+        el.setAttribute("aria-hidden", "true");
+    });
+    root.querySelectorAll("[role=\"listitem\"]").forEach((item) => {
+        const label = item.getAttribute("aria-label");
+        const parent = item.parentElement;
+        if (parent && !parent.hasAttribute("role")) {
+            parent.setAttribute("role", "list");
+        }
+        if (!label)
+            return;
+        const button = item.querySelector('button, [role="button"]');
+        if (button && !button.hasAttribute("aria-label")) {
+            button.setAttribute("aria-label", label);
+        }
+    });
+    root.querySelectorAll(".jodit-toolbar-editor-collection").forEach((toolbar) => {
+        if (!toolbar.hasAttribute("role"))
+            toolbar.setAttribute("role", "toolbar");
+    });
+};

package/dist/esm/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HStack, PinInput, PinInputField, Box, Text, Button, Flex, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { MailCheck } from "lucide-react";
-/** Full verification card (icon, title, description, resend link, digits-only PinInput) — for a bare OTP field in your own layout, use PinInput or PinInputs instead. */
+/** Full verification card (icon, title, description, resend link, digits-only PinInput) — for a bare OTP field in your own layout, use PinInput instead. */
 export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder = "", pins = 5, description, title, isDisabled = false, isInvalid = false, styles, }) {
     const theme = useCustomTheme();
-    return (_jsxs(Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", borderColor: theme.colors.gray[200], borderRadius: "lg", children: [_jsx(Box, { mb: 4, children: _jsx(MailCheck, { size: 80, color: theme.colors.accentText }) }), _jsx(Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), _jsxs(Text, { fontSize: "md", textAlign: "center", color: theme.colors.gray[600], mb: 6, children: [description, _jsx("br", {}), "your new Pixel Account"] }), _jsx(HStack, { spacing: 3, mb: 6, children: _jsx(PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => (_jsx(PinInputField, { borderRadius: "md", border: "0.063rem solid", borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: {
+    return (_jsxs(Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", bg: theme.colors.background[50], border: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", children: [_jsx(Box, { mb: 4, children: _jsx(MailCheck, { size: 80, color: theme.colors.accentText }) }), _jsx(Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), _jsxs(Text, { fontSize: "md", textAlign: "center", color: theme.colors.textMuted, mb: 6, children: [description, _jsx("br", {}), "your new Pixel Account"] }), _jsx(HStack, { spacing: 3, mb: 6, role: "group", "aria-label": title || "Verification code", children: _jsx(PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => (_jsx(PinInputField, { "aria-label": `${title || "Verification code"}, digit ${index + 1} of ${pins}`, borderRadius: "lg", border: "0.063rem solid", borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: {
                             borderColor: theme.colors.primary[500],
                             boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
-                        } }, index))) }) }), _jsx(Flex, { justify: "center", children: _jsxs(Text, { fontSize: "sm", color: theme.colors.gray[600], children: ["Didn\u2019t receive the code?", " ", _jsx(Button, { variant: "link", color: theme.colors.accentText, fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));
+                        } }, index))) }) }), _jsx(Flex, { justify: "center", children: _jsxs(Text, { fontSize: "sm", color: theme.colors.textMuted, children: ["Didn\u2019t receive the code?", " ", _jsx(Button, { variant: "link", color: theme.colors.accentText, fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));
 }

package/dist/esm/Components/EmptyState/EmptyState.js

@@ -3,40 +3,49 @@ import { Box, Flex, Image, Text } from "@chakra-ui/react";
 import { Inbox } from "lucide-react";
 import { keyframes } from "@emotion/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 const float = keyframes `
   0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-8px); }
+  50% { transform: translateY(-0.5rem); }
 `;
 const sizeMap = {
-    sm: { badge: "48px", icon: 20, title: "0.95rem", desc: "0.8rem", gap: 2, pad: 6 },
-    md: { badge: "72px", icon: 30, title: "1.1rem", desc: "0.9rem", gap: 3, pad: 10 },
-    lg: { badge: "96px", icon: 40, title: "1.35rem", desc: "1rem", gap: 4, pad: 14 },
+    sm: { badge: "3rem", icon: 20, title: "0.9375rem", desc: "0.8125rem", gap: 2, pad: 6 },
+    md: { badge: "4.5rem", icon: 30, title: "1.125rem", desc: "0.875rem", gap: 3, pad: 10 },
+    lg: { badge: "6rem", icon: 40, title: "1.375rem", desc: "1rem", gap: 4, pad: 14 },
 };
+const HALO_OPACITY = 0.33;
 const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "secondary" || scheme === "tertiary"
     ? colors[scheme]
     : scheme === "gray"
         ? colors.gray
         : colors.semantic[scheme];
 /** Centered empty/zero-data placeholder — purely decorative; pass `action` for any real button(s)/CTA. */
-const EmptyState = ({ title = "No data found", description, icon: IconComp = Inbox, image, size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "240px", sx, }) => {
+const EmptyState = ({ title = "No data found", titleAs = "h3", description, icon: IconComp = Inbox, image, imageAlt = "", size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "15rem", sx, }) => {
     const theme = useCustomTheme();
     const s = sizeMap[size];
     const palette = scaleFor(theme.colors, colorScheme);
-    const accentSoft = palette[50];
-    const accent = accentTextOnCanvas(palette, accentSoft);
+    const tone = resolveSoftTone(theme.colors, palette, theme.colors.background[50]);
+    const accentSoft = tone.bg;
+    const accent = tone.fg;
     const containerStyles = variant === "subtle"
-        ? { bg: theme.colors.background[50], borderRadius: "2xl" }
+        ? { bg: theme.colors.background[50], borderRadius: "xl" }
         : variant === "dashed"
             ? {
-                border: "2px dashed",
-                borderColor: theme.colors.gray[200],
-                borderRadius: "2xl",
+                border: "0.125rem dashed",
+                borderColor: theme.colors.boxborder[200],
+                borderRadius: "xl",
                 bg: "transparent",
             }
             : {};
-    return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", textAlign: "center", minH: minH, px: s.pad, py: s.pad, gap: s.gap, width: "100%", sx: { ...containerStyles, ...sx }, children: [image ? (_jsx(Image, { src: image, alt: title, boxSize: s.badge, objectFit: "contain", animation: animate ? `${float} 3s ease-in-out infinite` : undefined })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.badge, borderRadius: "full", bg: accentSoft, color: accent, animation: animate ? `${float} 3s ease-in-out infinite` : undefined, sx: {
-                    boxShadow: `0 0 0 8px ${accentSoft}55`,
-                }, children: _jsx(IconComp, { size: s.icon, strokeWidth: 1.75 }) })), _jsxs(Box, { children: [_jsx(Text, { fontSize: s.title, fontWeight: 600, color: theme.colors.gray[800], mt: 1, children: title }), description && (_jsx(Text, { fontSize: s.desc, color: theme.colors.gray[500], mt: 1, maxW: "380px", children: description }))] }), action && (_jsx(Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
+    return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", textAlign: "center", minH: minH, px: s.pad, py: s.pad, gap: s.gap, width: "100%", sx: { ...containerStyles, ...sx }, children: [image ? (_jsx(Image, { src: image, alt: imageAlt, boxSize: s.badge, objectFit: "contain", animation: animate ? `${float} 3s ease-in-out infinite` : undefined, sx: reducedMotionSx() })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.badge, borderRadius: "full", bg: accentSoft, color: accent, animation: animate ? `${float} 3s ease-in-out infinite` : undefined, position: "relative", isolation: "isolate", _before: {
+                    content: '""',
+                    position: "absolute",
+                    inset: "-0.5rem",
+                    borderRadius: "full",
+                    bg: accentSoft,
+                    opacity: HALO_OPACITY,
+                    zIndex: -1,
+                }, sx: reducedMotionSx(), children: _jsx(IconComp, { size: s.icon, strokeWidth: 1.75, "aria-hidden": true }) })), _jsxs(Box, { children: [_jsx(Text, { as: titleAs, fontSize: s.title, fontWeight: 600, color: theme.colors.header[900], mt: 1, children: title }), description && (_jsx(Text, { fontSize: s.desc, color: theme.colors.textMuted, mt: 1, maxW: "23.75rem", children: description }))] }), action && (_jsx(Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
 };
 export default EmptyState;

package/dist/esm/Components/FeedbackForm/FeedbackForm.js

@@ -1,13 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { Box, Button, FormControl, FormLabel, FormErrorMessage, Grid, Input, Radio, RadioGroup, Stack, Textarea, useToast, } from "@chakra-ui/react";
+import { Box, Grid } from "@chakra-ui/react";
+import TextInput from "../Input/TextInput.js";
+import InputTextArea from "../InputTextArea/InputTextArea.js";
+import { RadioButtonGroup } from "../RadioButton/RadioButton.js";
+import Button from "../Button/Button.js";
+import { useToaster } from "../Toaster/Toaster.js";
+const TYPE_OPTIONS = [
+    { label: "Comments", id: "comments" },
+    { label: "Suggestions", id: "suggestions" },
+    { label: "Questions", id: "questions" },
+];
 // eslint-disable-next-line no-control-regex, no-useless-escape
 const emailRegex = /^(?:[a-zA-Z0-9_'^&\/+{}=?`|~!-]+(?:\.[a-zA-Z0-9_'^&\/+{}=?`|~!-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z-]*[a-zA-Z]:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]+)\])$/;
-/** Renders its own success/error toast via Chakra's useToast, not this library's Toaster — that toast can be silently hidden inside a Modal. */
+/** Renders its own success/error toast via this library's Toaster — needs a mounted ToasterProvider. */
 export default function FeedbackForm(props) {
     var _a, _b, _c, _d, _e;
     const { onSubmit, submitUrl, isDisabled, defaultValues, submitText = "Submit", isSubmittingText = "Submitting..." } = props;
-    const toast = useToast();
+    const { showToast } = useToaster();
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [type, setType] = useState((_a = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.type) !== null && _a !== void 0 ? _a : "comments");
     const [message, setMessage] = useState((_b = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.message) !== null && _b !== void 0 ? _b : "");
@@ -26,7 +36,7 @@ export default function FeedbackForm(props) {
     const handleSubmit = async (e) => {
         e.preventDefault();
         if (hasErrors) {
-            toast({ status: "error", title: "Please fix the errors in the form" });
+            showToast({ status: "error", title: "Please fix the errors in the form" });
             return;
         }
         const payload = { type, message: message.trim(), firstName: firstName.trim(), lastName: lastName.trim(), email: email.trim() };
@@ -44,7 +54,7 @@ export default function FeedbackForm(props) {
                 if (!res.ok)
                     throw new Error(`Request failed: ${res.status}`);
             }
-            toast({ status: "success", title: "Thank you for your feedback" });
+            showToast({ status: "success", title: "Thank you for your feedback" });
             setMessage("");
             setFirstName("");
             setLastName("");
@@ -52,7 +62,7 @@ export default function FeedbackForm(props) {
             setType("comments");
         }
         catch (err) {
-            toast({
+            showToast({
                 status: "error",
                 title: "Could not submit feedback",
                 description: err instanceof Error ? err.message : String(err),
@@ -62,5 +72,5 @@ export default function FeedbackForm(props) {
             setIsSubmitting(false);
         }
     };
-    return (_jsxs(Box, { as: "form", onSubmit: handleSubmit, width: "100%", children: [_jsxs(FormControl, { as: Box, mb: 6, isDisabled: isDisabled, children: [_jsx(FormLabel, { children: "Feedback Type" }), _jsx(RadioGroup, { value: type, onChange: (v) => setType(v), children: _jsxs(Stack, { direction: "row", spacing: 8, children: [_jsx(Radio, { value: "comments", children: "Comments" }), _jsx(Radio, { value: "suggestions", children: "Suggestions" }), _jsx(Radio, { value: "questions", children: "Questions" })] }) })] }), _jsxs(FormControl, { mb: 6, isInvalid: !!errors.message, isRequired: true, isDisabled: isDisabled, children: [_jsx(FormLabel, { children: "Describe Your Feedback" }), _jsx(Textarea, { value: message, onChange: (e) => setMessage(e.target.value), rows: 6, placeholder: "Tell us more..." }), _jsx(FormErrorMessage, { children: errors.message })] }), _jsxs(Grid, { templateColumns: { base: "1fr", md: "1fr 1fr" }, gap: 4, mb: 6, children: [_jsxs(FormControl, { isInvalid: !!errors.firstName, isRequired: true, isDisabled: isDisabled, children: [_jsx(FormLabel, { children: "First Name" }), _jsx(Input, { value: firstName, onChange: (e) => setFirstName(e.target.value), placeholder: "First name" }), _jsx(FormErrorMessage, { children: errors.firstName })] }), _jsxs(FormControl, { isInvalid: !!errors.lastName, isRequired: true, isDisabled: isDisabled, children: [_jsx(FormLabel, { children: "Last Name" }), _jsx(Input, { value: lastName, onChange: (e) => setLastName(e.target.value), placeholder: "Last name" }), _jsx(FormErrorMessage, { children: errors.lastName })] })] }), _jsxs(FormControl, { mb: 6, isInvalid: !!errors.email, isRequired: true, isDisabled: isDisabled, children: [_jsx(FormLabel, { children: "E-mail" }), _jsx(Input, { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "ex: myname@example.com" }), _jsx(FormErrorMessage, { children: errors.email })] }), _jsx(Button, { type: "submit", colorScheme: "primary", isLoading: isSubmitting, loadingText: isSubmittingText, isDisabled: isDisabled, children: submitText })] }));
+    return (_jsxs(Box, { as: "form", onSubmit: handleSubmit, width: "100%", children: [_jsx(Box, { mb: 6, children: _jsx(RadioButtonGroup, { label: "Feedback Type", options: TYPE_OPTIONS, value: type, onChange: (v) => setType(v), isDisabled: isDisabled }) }), _jsx(Box, { mb: 6, children: _jsx(InputTextArea, { label: "Describe Your Feedback", value: message, onChange: (e) => setMessage(e.target.value), rows: 6, placeholder: "Tell us more...", isRequired: true, isDisabled: isDisabled, error: !!errors.message, errorMessage: errors.message }) }), _jsxs(Grid, { templateColumns: { base: "1fr", md: "1fr 1fr" }, gap: 4, mb: 6, children: [_jsx(TextInput, { label: "First Name", value: firstName, onChange: (e) => setFirstName(e.target.value), placeholder: "First name", isRequired: true, isDisabled: isDisabled, error: !!errors.firstName, errorMessage: errors.firstName }), _jsx(TextInput, { label: "Last Name", value: lastName, onChange: (e) => setLastName(e.target.value), placeholder: "Last name", isRequired: true, isDisabled: isDisabled, error: !!errors.lastName, errorMessage: errors.lastName })] }), _jsx(Box, { mb: 6, children: _jsx(TextInput, { type: "email", label: "E-mail", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "ex: myname@example.com", isRequired: true, isDisabled: isDisabled, error: !!errors.email, errorMessage: errors.email }) }), _jsx(Button, { type: "submit", colorScheme: "primary", isLoading: isSubmitting, loadingText: isSubmittingText, isDisabled: isDisabled, children: submitText })] }));
 }

package/dist/esm/Components/FieldSelectModal/FieldSelectModal.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { Button, Checkbox, Flex, Input, InputGroup, InputLeftElement, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, SimpleGrid, Text, } from "@chakra-ui/react";
-import { motion } from "framer-motion";
+import { motion, useReducedMotion } from "framer-motion";
 import { Search } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 const MotionModalContent = motion(ModalContent);
 /** Modal checkbox-grid for choosing which fields/columns to show — a bulk toggle UI, not an inline Select/SelectV2 field. */
 const FieldSelectModal = ({ isOpen, onClose, fields, onConfirm, title = "Select Fields", confirmText = "Apply", loadingText = "Applying...", isLoading = false, defaultSelected, columns = 2, searchable, }) => {
     const theme = useCustomTheme();
+    const prefersReducedMotion = useReducedMotion();
     const [selected, setSelected] = useState([]);
     const [query, setQuery] = useState("");
     useEffect(() => {
@@ -26,9 +27,6 @@ const FieldSelectModal = ({ isOpen, onClose, fields, onConfirm, title = "Select
     const toggle = (name) => setSelected((prev) => prev.includes(name) ? prev.filter((f) => f !== name) : [...prev, name]);
     const isAllSelected = selected.length === fields.length && fields.length > 0;
     const isIndeterminate = selected.length > 0 && selected.length < fields.length;
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, size: "xl", isCentered: true, children: [_jsx(ModalOverlay, { bg: "blackAlpha.400", backdropFilter: "blur(4px)" }), _jsxs(MotionModalContent, { borderRadius: "2xl", overflow: "hidden", maxH: "85vh", 
-                // Chakra's default dialog bg (`colors.white`, or `gray.700` under `_dark`) resolves to a
-                // white/light-grey panel against our palettes, so the surface must be set explicitly.
-                bg: theme.colors.background[50], initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [_jsxs(ModalHeader, { pb: 2, children: [_jsx(Text, { fontSize: "lg", fontWeight: 600, children: title }), _jsxs(Text, { fontSize: "sm", color: theme.colors.textMuted, fontWeight: 400, children: [selected.length, " of ", fields.length, " selected"] })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { overflowY: "auto", children: [_jsxs(Flex, { align: "center", justify: "space-between", mb: 3, gap: 3, wrap: "wrap", children: [_jsx(Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: (e) => setSelected(e.target.checked ? fields.map((f) => f.field_name) : []), fontWeight: 500, children: "Select all" }), showSearch && (_jsxs(InputGroup, { size: "sm", maxW: "220px", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { placeholder: "Search fields", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "lg" })] }))] }), _jsx(SimpleGrid, { columns: columns, spacingX: 4, spacingY: 3, children: visibleFields.map((field) => (_jsx(Checkbox, { isChecked: selected.includes(field.field_name), onChange: () => toggle(field.field_name), children: _jsx(Text, { fontSize: "sm", children: field.field_label }) }, field.field_name))) }), visibleFields.length === 0 && (_jsxs(Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: ["No fields match \"", query, "\""] }))] }), _jsxs(ModalFooter, { gap: 3, children: [_jsx(Button, { variant: "outline", colorScheme: "gray", size: "sm", onClick: onClose, children: "Cancel" }), _jsx(Button, { colorScheme: "primary", size: "sm", isLoading: isLoading, loadingText: loadingText, isDisabled: selected.length === 0, onClick: () => onConfirm(selected), children: confirmText })] })] })] }));
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, size: "xl", isCentered: true, children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { overflow: "hidden", maxH: "85vh", initial: prefersReducedMotion ? false : { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [_jsxs(ModalHeader, { children: [_jsx(Text, { color: theme.colors.text[900], children: title }), _jsxs(Text, { fontSize: "sm", color: theme.colors.textMuted, fontWeight: 400, children: [selected.length, " of ", fields.length, " selected"] })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { overflowY: "auto", children: [_jsxs(Flex, { align: "center", justify: "space-between", mb: 3, gap: 3, wrap: "wrap", children: [_jsx(Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: (e) => setSelected(e.target.checked ? fields.map((f) => f.field_name) : []), fontWeight: 500, children: "Select all" }), showSearch && (_jsxs(InputGroup, { size: "sm", maxW: "13.75rem", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { placeholder: "Search fields", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "lg" })] }))] }), _jsx(SimpleGrid, { columns: columns, spacingX: 4, spacingY: 3, children: visibleFields.map((field) => (_jsx(Checkbox, { isChecked: selected.includes(field.field_name), onChange: () => toggle(field.field_name), children: _jsx(Text, { fontSize: "sm", children: field.field_label }) }, field.field_name))) }), visibleFields.length === 0 && (_jsxs(Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: ["No fields match \"", query, "\""] }))] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "outline", colorScheme: "gray", size: "sm", onClick: onClose, children: "Cancel" }), _jsx(Button, { colorScheme: "primary", size: "sm", isLoading: isLoading, loadingText: loadingText, isDisabled: selected.length === 0, onClick: () => onConfirm(selected), children: confirmText })] })] })] }));
 };
 export default FieldSelectModal;

package/dist/esm/Components/FilePreview/FilePreview.js

@@ -5,8 +5,14 @@ import { motion } from "framer-motion";
 import { Download, Eye, FileQuestion, Minus, Plus, RotateCw, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
+import { hexToRgb } from "../../Theme/tokens/builders/color.js";
+import { overlayScrimStyles } from "../../Theme/chakra/overlay.styles.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 const MotionContent = motion(ModalContent);
+const blackScrim = (black, opacity) => {
+    const { r, g, b } = hexToRgb(black);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
 const inferKind = (url, fileName) => {
     const src = (fileName || url).split("?")[0].toLowerCase();
     if (/\.(png|jpe?g|gif|webp|svg|bmp|avif)$/.test(src))
@@ -60,19 +66,13 @@ export const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hide
         }
         return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [_jsx(FileQuestion, { size: 48, color: theme.colors.textMuted }), _jsx(Text, { color: theme.colors.textMuted, fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && (_jsxs(Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", 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), fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [_jsx(Download, { size: 16 }), " Download file"] }))] }));
     };
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [_jsx(ModalOverlay, { bg: "blackAlpha.600", backdropFilter: "blur(4px)" }), _jsxs(MotionContent
-            // Chakra's default Modal drives its bg off `--modal-bg`, which flips to
-            // `colors.gray.700` under `_dark` — a light grey in our derived dark palettes.
-            , { 
-                // Chakra's default Modal drives its bg off `--modal-bg`, which flips to
-                // `colors.gray.700` under `_dark` — a light grey in our derived dark palettes.
-                bg: theme.colors.background[50], borderRadius: "2xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(ToolTip, { label: fileName || "File", placement: "bottom", children: _jsx(Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), _jsxs(Flex, { align: "center", gap: 1, children: [kind === "image" && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Zoom out", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: _jsx(Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), _jsx(ToolTip, { label: "Zoom in", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: _jsx(Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), _jsx(ToolTip, { label: "Rotate", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: _jsx(RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && (_jsx(ToolTip, { label: "Download", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: _jsx(Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), _jsx(ModalCloseButton, { position: "static" })] })] }), _jsx(ModalBody, { p: 5, children: renderBody() })] })] }));
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [_jsx(ModalOverlay, { ...overlayScrimStyles(theme.colors) }), _jsxs(MotionContent, { bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(ToolTip, { label: fileName || "File", placement: "bottom", children: _jsx(Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), _jsxs(Flex, { align: "center", gap: 1, children: [kind === "image" && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Zoom out", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: _jsx(Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), _jsx(ToolTip, { label: "Zoom in", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: _jsx(Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), _jsx(ToolTip, { label: "Rotate", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: _jsx(RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && (_jsx(ToolTip, { label: "Download", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: _jsx(Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), _jsx(ModalCloseButton, { position: "static" })] })] }), _jsx(ModalBody, { p: 5, children: renderBody() })] })] }));
 };
 /** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
 export const FilePreviewTrigger = ({ fileUrl, fileName, fileType, thumbWidth = "100px", thumbHeight = "60px", hideDownload = false, }) => {
     const theme = useCustomTheme();
     const { isOpen, onOpen, onClose } = useDisclosure();
     const kind = fileType || inferKind(fileUrl, fileName);
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", role: "group", maxW: thumbWidth, minW: "40px", minH: thumbHeight, borderRadius: "lg", overflow: "hidden", cursor: "pointer", onClick: onOpen, children: [kind === "image" ? (_jsx(Image, { src: fileUrl, alt: fileName || "file", maxH: thumbHeight, maxW: thumbWidth, objectFit: "contain", borderRadius: "lg" })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: thumbHeight, bg: theme.colors.gray[100], borderRadius: "lg", children: _jsx(Eye, { size: 18 }) })), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", bg: "blackAlpha.500", color: "white", opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: _jsx(Eye, { size: 18 }) })] }), _jsx(FilePreview, { isOpen: isOpen, onClose: onClose, fileUrl: fileUrl, fileName: fileName, fileType: fileType, hideDownload: hideDownload })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", role: "group", maxW: thumbWidth, minW: "40px", minH: thumbHeight, borderRadius: "lg", overflow: "hidden", cursor: "pointer", onClick: onOpen, children: [kind === "image" ? (_jsx(Image, { src: fileUrl, alt: fileName || "file", maxH: thumbHeight, maxW: thumbWidth, objectFit: "contain", borderRadius: "lg" })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: thumbHeight, bg: theme.colors.gray[100], borderRadius: "lg", children: _jsx(Eye, { size: 18 }) })), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", bg: blackScrim(theme.colors.black, 0.5), color: theme.colors.white, opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: _jsx(Eye, { size: 18 }) })] }), _jsx(FilePreview, { isOpen: isOpen, onClose: onClose, fileUrl: fileUrl, fileName: fileName, fileType: fileType, hideDownload: hideDownload })] }));
 };
 export default FilePreview;