pixelize-design-library 2.4.2 → 3.0.0

package/dist/Components/Editor/useEditorBridge.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditorBridge = useEditorBridge;
+const react_1 = require("react");
+const editorTokens_1 = require("./editorTokens");
+function useEditorBridge({ value, onChange, onBlur, mergeFields, syntax, chipLabel, apiRef, onReady, onUnknownTokens, }) {
+    const enabled = mergeFields !== undefined;
+    const fieldsKey = JSON.stringify(mergeFields);
+    const ctx = (0, react_1.useMemo)(() => ({ fields: mergeFields !== null && mergeFields !== void 0 ? mergeFields : [], syntax, chipLabel }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [fieldsKey, syntax.open, syntax.close, chipLabel]);
+    const joditRef = (0, react_1.useRef)(null);
+    const rangeRef = (0, react_1.useRef)(null);
+    const lastRef = (0, react_1.useRef)(null);
+    const appliedFieldsKey = (0, react_1.useRef)(fieldsKey);
+    const live = (0, react_1.useRef)({ enabled, ctx, onChange, onBlur, onReady, fieldsKey });
+    live.current = { enabled, ctx, onChange, onBlur, onReady, fieldsKey };
+    const [instance, setInstance] = (0, react_1.useState)(null);
+    const [raw, setRaw] = (0, react_1.useState)(value !== null && value !== void 0 ? value : "");
+    (0, react_1.useEffect)(() => {
+        if (value !== undefined)
+            setRaw(value);
+    }, [value]);
+    const handleChange = (0, react_1.useCallback)((html) => {
+        const { enabled: on, ctx: c, onChange: emit } = live.current;
+        const next = on ? (0, editorTokens_1.serializeChips)(html, c.syntax) : html;
+        lastRef.current = { raw: next, jodit: html };
+        setRaw(next);
+        emit === null || emit === void 0 ? void 0 : emit(next);
+    }, []);
+    const handleBlur = (0, react_1.useCallback)((html, event) => {
+        const { enabled: on, ctx: c, onBlur: emit } = live.current;
+        emit === null || emit === void 0 ? void 0 : emit(on ? (0, editorTokens_1.serializeChips)(html, c.syntax) : html, event);
+    }, []);
+    const attachEditor = (0, react_1.useCallback)((jodit) => {
+        joditRef.current = jodit;
+        rangeRef.current = null;
+        appliedFieldsKey.current = live.current.fieldsKey;
+        const remember = () => {
+            if (jodit.s.isInsideArea)
+                rangeRef.current = jodit.s.range.cloneRange();
+        };
+        jodit.events.on("keyup mouseup touchend", remember);
+        jodit.events.on("change", handleChange);
+        jodit.events.on("blur", (event) => handleBlur(jodit.value, event));
+        const deleteChip = (event) => {
+            if (!live.current.enabled)
+                return false;
+            if (event.key !== "Backspace" && event.key !== "Delete")
+                return false;
+            const chip = (0, editorTokens_1.adjacentChip)(jodit.s.range, event.key === "Backspace" ? "backward" : "forward");
+            if (!chip)
+                return false;
+            chip.remove();
+            jodit.synchronizeValues();
+            event.preventDefault();
+            return true;
+        };
+        jodit.events.on("keydown", ((event) => (deleteChip(event) ? false : undefined)));
+        jodit.editor.addEventListener("keydown", (event) => {
+            if (deleteChip(event))
+                event.stopImmediatePropagation();
+        }, true);
+        jodit.waitForReady().then(() => {
+            var _a, _b;
+            if (joditRef.current !== jodit)
+                return;
+            setInstance(jodit);
+            (_b = (_a = live.current).onReady) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+    }, [handleChange, handleBlur]);
+    (0, react_1.useEffect)(() => {
+        if (!instance || !enabled || appliedFieldsKey.current === fieldsKey)
+            return;
+        appliedFieldsKey.current = fieldsKey;
+        const html = (0, editorTokens_1.chipify)((0, editorTokens_1.serializeChips)(instance.value, ctx.syntax), ctx);
+        instance.value = html;
+        lastRef.current = { raw: (0, editorTokens_1.serializeChips)(html, ctx.syntax), jodit: instance.value };
+    }, [instance, enabled, fieldsKey, ctx]);
+    const api = (0, react_1.useMemo)(() => {
+        const current = () => joditRef.current;
+        const currentRaw = (jodit) => live.current.enabled ? (0, editorTokens_1.serializeChips)(jodit.value, live.current.ctx.syntax) : jodit.value;
+        const insertHTML = (html) => {
+            const jodit = current();
+            if (!jodit)
+                return;
+            if (rangeRef.current)
+                jodit.s.selectRange(rangeRef.current, true);
+            jodit.s.insertHTML(html);
+            rangeRef.current = jodit.s.range.cloneRange();
+        };
+        return {
+            insertHTML,
+            insertField: (path) => {
+                const { enabled: on, ctx: c } = live.current;
+                insertHTML(on ? (0, editorTokens_1.chipHtml)(path, c) : (0, editorTokens_1.fieldToken)(path, c.syntax));
+            },
+            getSelectionText: () => (rangeRef.current ? rangeRef.current.toString().trim() : ""),
+            replaceAll: (text, path) => {
+                const jodit = current();
+                if (!jodit)
+                    return 0;
+                const { enabled: on, ctx: c, onChange: emit } = live.current;
+                const result = (0, editorTokens_1.makeDynamic)(currentRaw(jodit), text, path, c.syntax);
+                if (result.count === 0)
+                    return 0;
+                jodit.value = on ? (0, editorTokens_1.chipify)(result.html, c) : result.html;
+                lastRef.current = { raw: result.html, jodit: jodit.value };
+                rangeRef.current = null;
+                setRaw(result.html);
+                emit === null || emit === void 0 ? void 0 : emit(result.html);
+                return result.count;
+            },
+            countOccurrences: (text) => {
+                const jodit = current();
+                return jodit ? (0, editorTokens_1.countOccurrences)(currentRaw(jodit), text, live.current.ctx.syntax) : 0;
+            },
+            focus: () => {
+                var _a;
+                (_a = current()) === null || _a === void 0 ? void 0 : _a.s.focus();
+            },
+        };
+    }, []);
+    (0, react_1.useImperativeHandle)(apiRef, () => api, [api]);
+    const unknown = (0, react_1.useMemo)(() => (enabled ? (0, editorTokens_1.unknownTokens)(raw, ctx.fields, syntax) : []), [enabled, raw, ctx, syntax]);
+    const unknownKey = unknown.join("\n");
+    const reported = (0, react_1.useRef)("");
+    (0, react_1.useEffect)(() => {
+        if (!enabled || reported.current === unknownKey)
+            return;
+        reported.current = unknownKey;
+        onUnknownTokens === null || onUnknownTokens === void 0 ? void 0 : onUnknownTokens(unknown);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enabled, unknownKey]);
+    const last = lastRef.current;
+    let joditValue = value;
+    if (enabled && value !== undefined) {
+        joditValue = last && last.raw === value ? last.jodit : (0, editorTokens_1.chipify)(value, ctx);
+    }
+    return { joditValue, attachEditor, api, instance, raw, unknown, ctx };
+}

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.d.ts

@@ -1,2 +1,3 @@
 import { VerifyEmailOtpProps } from "./VerifyEmailOtpProps";
-export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder, pins, description, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): import("react/jsx-runtime").JSX.Element;
+/** 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, description, subtitle, labels, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,18 +1,21 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = VerifyEmailOtp;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const Button_1 = __importDefault(require("../../Button/Button"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
 const lucide_react_1 = require("lucide-react");
-function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder = "", pins = 5, description, title, isDisabled = false, isInvalid = false, styles, }) {
+/** Full verification card (icon, title, description, resend link, digits-only PinInput) — for a bare OTP field in your own layout, use PinInput instead. */
+function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder = "", pins = 5, description, subtitle = "your new Pixel Account", labels, title, isDisabled = false, isInvalid = false, styles, }) {
+    var _a, _b, _c;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(react_1.Box, { mb: 4, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MailCheck, { size: 80, color: theme.colors.accentText }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "md", textAlign: "center", color: theme.colors.gray[600], mb: 6, children: [description, (0, jsx_runtime_1.jsx)("br", {}), "your new Pixel Account"] }), (0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 3, mb: 6, children: (0, jsx_runtime_1.jsx)(react_1.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) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { borderRadius: "md", border: "0.063rem solid", 
-                        // [800], not [300]: WCAG 1.4.11 needs >=3.0 for a control boundary against any
-                        // named surface up to `muted` (lightest); [300] fails there, [800] clears all
-                        // with margin.
-                        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))) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: theme.colors.gray[600], children: ["Didn\u2019t receive the code?", " ", (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", color: theme.colors.accentText, fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));
+    const codeName = title || (labels === null || labels === void 0 ? void 0 : labels.verificationCode) || "Verification code";
+    const digitName = (_a = labels === null || labels === void 0 ? void 0 : labels.digit) !== null && _a !== void 0 ? _a : ((index, total) => `digit ${index} of ${total}`);
+    return ((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(react_1.Box, { mb: 4, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MailCheck, { size: 80, color: theme.colors.accentText }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "2xl", fontWeight: 700, mb: 2, textAlign: "center", children: title }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "md", textAlign: "center", color: theme.colors.textMuted, mb: 6, children: [description, subtitle && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), subtitle] }))] }), (0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 3, mb: 6, role: "group", "aria-label": codeName, children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { otp: true, placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { "aria-label": `${codeName}, ${digitName(index + 1, pins)}`, borderRadius: "lg", border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: { borderColor: theme.colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) } }, index))) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: theme.colors.textMuted, children: [(_b = labels === null || labels === void 0 ? void 0 : labels.didntReceive) !== null && _b !== void 0 ? _b : "Didn’t receive the code?", " ", (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "link", sx: { color: theme.colors.accentText }, fontWeight: 600, onClick: resendMail, children: (_c = labels === null || labels === void 0 ? void 0 : labels.resend) !== null && _c !== void 0 ? _c : "Resend Code" })] }) })] }));
 }

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.d.ts

@@ -1,12 +1,38 @@
+type VerifyEmailOtpLabels = {
+    /** Group and cell name used when `title` is empty. Default "Verification code". */
+    verificationCode?: string;
+    /** Accessible name suffix of one cell. Default "digit N of M". */
+    digit?: (index: number, total: number) => string;
+    /** Text before the resend button. Default "Didn’t receive the code?". */
+    didntReceive?: string;
+    /** Resend button text. Default "Resend Code". */
+    resend?: string;
+};
+/** Props for the full OTP verification card (icon, title, resend link); for a bare input in your own layout use PinInput. */
 export type VerifyEmailOtpProps = {
+    /** Called when the Resend Code button is pressed. */
     resendMail: () => void;
+    /** Called with the digits typed so far on every change. */
     onChange: (value: string) => void;
+    /** Fires once all `pins` cells are filled — a `pins` value that doesn't match the actual OTP length blocks or truncates completion. */
     onComplete: (value: string) => void;
+    /** Character shown in each empty cell; none by default. */
     placeholder?: string;
+    /** Typed as required, but the implementation silently defaults to 5 if a caller bypasses the type and omits it. */
     pins: number;
+    /** Card heading; also the accessible name of the cell group when set. */
     title: string;
+    /** First line under the heading. */
     description: string;
+    /** Second line under `description`. Defaults to "your new Pixel Account"; pass "" to drop the line. */
+    subtitle?: string;
+    /** Replaces the English UI text; any label left out keeps its default. */
+    labels?: VerifyEmailOtpLabels;
+    /** Disables every cell. */
     isDisabled?: boolean;
+    /** Marks the cells invalid. */
     isInvalid?: boolean;
+    /** Inline style on the card's outer box. */
     styles?: React.CSSProperties;
 };
+export {};

package/dist/Components/EmptyState/EmptyState.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { EmptyStateProps } from "./EmptyStateProps";
+/** Centered empty/zero-data placeholder — purely decorative; pass `action` for any real button(s)/CTA. */
 declare const EmptyState: React.FC<EmptyStateProps>;
 export default EmptyState;

package/dist/Components/EmptyState/EmptyState.js

@@ -5,38 +5,50 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("@emotion/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const motion_1 = require("../../Theme/chakra/motion");
 const float = (0, react_2.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];
-const EmptyState = ({ title = "No data found", description, icon: IconComp = lucide_react_1.Inbox, image, size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "240px", sx, }) => {
+/** Centered empty/zero-data placeholder — purely decorative; pass `action` for any real button(s)/CTA. */
+const EmptyState = ({ title = "No data found", titleAs = "h3", description, icon: IconComp = lucide_react_1.Inbox, image, imageAlt = "", size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "15rem", sx, ...rest }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const s = sizeMap[size];
+    const hasDescription = description !== undefined && description !== null && description !== false && description !== "";
     const palette = scaleFor(theme.colors, colorScheme);
-    const accent = palette[500];
-    const accentSoft = palette[50];
+    const tone = (0, tone_1.resolveSoftTone)(theme.colors, palette, theme.colors.background[50]);
+    const accentSoft = tone.bg;
+    const accent = tone.fg;
     const containerStyles = variant === "subtle"
-        ? { bg: theme.colors.gray[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 ((0, jsx_runtime_1.jsxs)(react_1.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 ? ((0, jsx_runtime_1.jsx)(react_1.Image, { src: image, alt: title, boxSize: s.badge, objectFit: "contain", animation: animate ? `${float} 3s ease-in-out infinite` : undefined })) : ((0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsx)(IconComp, { size: s.icon, strokeWidth: 1.75 }) })), (0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: s.title, fontWeight: 600, color: theme.colors.gray[800], mt: 1, children: title }), description && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: s.desc, color: theme.colors.gray[500], mt: 1, maxW: "380px", children: description }))] }), action && ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { ...rest, 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 ? ((0, jsx_runtime_1.jsx)(react_1.Image, { src: image, alt: imageAlt, boxSize: s.badge, objectFit: "contain", animation: animate ? `${float} 3s ease-in-out infinite` : undefined, sx: (0, motion_1.reducedMotionSx)() })) : ((0, jsx_runtime_1.jsx)(react_1.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: (0, motion_1.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(IconComp, { size: s.icon, strokeWidth: 1.75, "aria-hidden": true }) })), (0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: titleAs, fontSize: s.title, fontWeight: 600, color: theme.colors.header[900], mt: 1, children: title }), hasDescription && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: typeof description === "string" ? undefined : "div", fontSize: s.desc, color: theme.colors.textMuted, mt: 1, maxW: "23.75rem", children: description }))] }), action && ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
 };
 exports.default = EmptyState;

package/dist/Components/EmptyState/EmptyStateProps.d.ts

@@ -1,16 +1,23 @@
-import { ElementType, ReactNode } from "react";
+import { ElementType, HTMLAttributes, ReactNode } from "react";
 import { BoxProps } from "@chakra-ui/react";
+/** Controls badge/icon size, type scale, and spacing together. */
 export type EmptyStateSize = "sm" | "md" | "lg";
+/** Palette used to tint the icon badge — brand scale or semantic tone. */
 export type EmptyStateColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "success" | "error" | "warning" | "info";
-export interface EmptyStateProps {
+/** Centered empty/zero-data placeholder; other `<div>` attributes (id, className, data-*, aria-*) land on the root. */
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "color" | "children" | "dangerouslySetInnerHTML"> {
     /** Heading text. Defaults to "No data found". */
     title?: string;
-    /** Supporting line under the title. */
-    description?: string;
+    /** Heading element for the title; defaults to "h3" — pick the level that fits the page outline. */
+    titleAs?: "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+    /** Supporting text under the title; a node (bold, link) is wrapped in the same muted block and renders above `action`. */
+    description?: ReactNode;
     /** A lucide-react (or any) icon component rendered inside the badge. */
     icon?: ElementType;
     /** Illustration image URL. When provided it replaces the icon badge. */
     image?: string;
+    /** Alt text for `image`; defaults to "" (decorative) because the title already says it. */
+    imageAlt?: string;
     /** Controls spacing, icon and font sizes. */
     size?: EmptyStateSize;
     /** Accent color for the icon badge. */
@@ -19,10 +26,31 @@ export interface EmptyStateProps {
     variant?: "default" | "subtle" | "dashed";
     /** Action node(s) — usually a Button or a pair of buttons. */
     action?: ReactNode;
-    /** Float the icon gently to draw attention. */
+    /** Float the icon gently to draw attention; off under reduced motion. */
     animate?: boolean;
     /** Minimum height of the container. */
     minH?: BoxProps["minH"];
     /** Escape hatch for extra Chakra styles on the outer container. */
     sx?: BoxProps["sx"];
 }
+/** "Nothing matches your filters" panel; unlike a first-run empty list it names the filters and offers the undo. */
+export interface FilteredEmptyStateProps {
+    /** Defaults to "Nothing matched these filters". */
+    title?: string;
+    /** Replaces the counted default; omit it and, with `filterCount`, a counted line is shown. */
+    description?: ReactNode;
+    /** "card" renders at `sm` size with a 6rem floor so it fits inside a panel; "page" (default) owns the screen. */
+    scale?: "page" | "card";
+    /** Active filter count; drives the default description and the "Clear N filters" label. */
+    filterCount?: number;
+    /** Renders the outline Clear button; omit it and no Clear button appears. */
+    onClearFilters?: () => void;
+    /** Defaults to "Clear filters", or "Clear N filters" when `filterCount` is set. */
+    clearLabel?: string;
+    /** Renders the primary button that drops only the filter doing the narrowing. */
+    onRemoveLastFilter?: () => void;
+    /** Name that filter, e.g. `Remove "Status: Absent"`; defaults to "Remove last filter". */
+    removeLastFilterLabel?: string;
+    /** Overrides the height floor that `scale` sets. */
+    minH?: EmptyStateProps["minH"];
+}

package/dist/Components/EmptyState/FilteredEmptyState.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { FilteredEmptyStateProps } from "./EmptyStateProps";
+/** Empty because filters excluded everything: announces itself (`role="status"`) and offers Clear / Remove-last. */
+declare const FilteredEmptyState: React.FC<FilteredEmptyStateProps>;
+export default FilteredEmptyState;

package/dist/Components/EmptyState/FilteredEmptyState.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const EmptyState_1 = __importDefault(require("./EmptyState"));
+const plural = (count, one, many) => (count === 1 ? one : many);
+/** Empty because filters excluded everything: announces itself (`role="status"`) and offers Clear / Remove-last. */
+const FilteredEmptyState = ({ title = "Nothing matched these filters", description, scale = "page", filterCount, onClearFilters, clearLabel, onRemoveLastFilter, removeLastFilterLabel = "Remove last filter", minH, }) => {
+    const hasCount = filterCount !== undefined && filterCount > 0;
+    const resolvedDescription = description !== null && description !== void 0 ? description : (hasCount
+        ? `${filterCount} ${plural(filterCount, "filter is", "filters are")} active. Remove or clear ${plural(filterCount, "it", "them")} to see more results.`
+        : undefined);
+    const resolvedClearLabel = clearLabel !== null && clearLabel !== void 0 ? clearLabel : (hasCount ? `Clear ${filterCount} ${plural(filterCount, "filter", "filters")}` : "Clear filters");
+    const buttonSize = scale === "card" ? "sm" : "md";
+    const actions = onRemoveLastFilter || onClearFilters ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onRemoveLastFilter && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: buttonSize, label: removeLastFilterLabel, onClick: onRemoveLastFilter })), onClearFilters && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: buttonSize, variant: "outline", colorScheme: "gray", label: resolvedClearLabel, onClick: onClearFilters }))] })) : undefined;
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "status", w: "100%", children: (0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.SearchX, colorScheme: "gray", variant: "subtle", size: scale === "card" ? "sm" : "md", minH: minH !== null && minH !== void 0 ? minH : (scale === "card" ? "6rem" : undefined), title: title, description: resolvedDescription, action: actions }) }));
+};
+exports.default = FilteredEmptyState;

package/dist/Components/FeedbackForm/FeedbackForm.d.ts

@@ -5,12 +5,15 @@ export type FeedbackPayload = {
     lastName: string;
     email: string;
 };
+/** Provide onSubmit or submitUrl — with neither, the form still validates and shows a success toast, but nothing is ever sent. */
 export type FeedbackFormProps = {
     onSubmit?: (payload: FeedbackPayload) => Promise<void> | void;
     submitUrl?: string;
     isSubmittingText?: string;
     submitText?: string;
+    /** Only seeds state via useState's initializer on mount — changing this prop later does not resync the rendered fields. */
     defaultValues?: Partial<FeedbackPayload>;
     isDisabled?: boolean;
 };
+/** Renders its own success/error toast via this library's Toaster — needs a mounted ToasterProvider. */
 export default function FeedbackForm(props: FeedbackFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/FeedbackForm/FeedbackForm.js

@@ -1,15 +1,29 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = FeedbackForm;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
+const TextInput_1 = __importDefault(require("../Input/TextInput"));
+const InputTextArea_1 = __importDefault(require("../InputTextArea/InputTextArea"));
+const RadioButton_1 = require("../RadioButton/RadioButton");
+const Button_1 = __importDefault(require("../Button/Button"));
+const Toaster_1 = require("../Toaster/Toaster");
+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 this library's Toaster — needs a mounted ToasterProvider. */
 function FeedbackForm(props) {
     var _a, _b, _c, _d, _e;
     const { onSubmit, submitUrl, isDisabled, defaultValues, submitText = "Submit", isSubmittingText = "Submitting..." } = props;
-    const toast = (0, react_2.useToast)();
+    const { showToast } = (0, Toaster_1.useToaster)();
     const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
     const [type, setType] = (0, react_1.useState)((_a = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.type) !== null && _a !== void 0 ? _a : "comments");
     const [message, setMessage] = (0, react_1.useState)((_b = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.message) !== null && _b !== void 0 ? _b : "");
@@ -28,7 +42,7 @@ 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() };
@@ -46,7 +60,7 @@ 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("");
@@ -54,7 +68,7 @@ function FeedbackForm(props) {
             setType("comments");
         }
         catch (err) {
-            toast({
+            showToast({
                 status: "error",
                 title: "Could not submit feedback",
                 description: err instanceof Error ? err.message : String(err),
@@ -64,5 +78,5 @@ function FeedbackForm(props) {
             setIsSubmitting(false);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "form", onSubmit: handleSubmit, width: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.FormControl, { as: react_2.Box, mb: 6, isDisabled: isDisabled, children: [(0, jsx_runtime_1.jsx)(react_2.FormLabel, { children: "Feedback Type" }), (0, jsx_runtime_1.jsx)(react_2.RadioGroup, { value: type, onChange: (v) => setType(v), children: (0, jsx_runtime_1.jsxs)(react_2.Stack, { direction: "row", spacing: 8, children: [(0, jsx_runtime_1.jsx)(react_2.Radio, { value: "comments", children: "Comments" }), (0, jsx_runtime_1.jsx)(react_2.Radio, { value: "suggestions", children: "Suggestions" }), (0, jsx_runtime_1.jsx)(react_2.Radio, { value: "questions", children: "Questions" })] }) })] }), (0, jsx_runtime_1.jsxs)(react_2.FormControl, { mb: 6, isInvalid: !!errors.message, isRequired: true, isDisabled: isDisabled, children: [(0, jsx_runtime_1.jsx)(react_2.FormLabel, { children: "Describe Your Feedback" }), (0, jsx_runtime_1.jsx)(react_2.Textarea, { value: message, onChange: (e) => setMessage(e.target.value), rows: 6, placeholder: "Tell us more..." }), (0, jsx_runtime_1.jsx)(react_2.FormErrorMessage, { children: errors.message })] }), (0, jsx_runtime_1.jsxs)(react_2.Grid, { templateColumns: { base: "1fr", md: "1fr 1fr" }, gap: 4, mb: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: !!errors.firstName, isRequired: true, isDisabled: isDisabled, children: [(0, jsx_runtime_1.jsx)(react_2.FormLabel, { children: "First Name" }), (0, jsx_runtime_1.jsx)(react_2.Input, { value: firstName, onChange: (e) => setFirstName(e.target.value), placeholder: "First name" }), (0, jsx_runtime_1.jsx)(react_2.FormErrorMessage, { children: errors.firstName })] }), (0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: !!errors.lastName, isRequired: true, isDisabled: isDisabled, children: [(0, jsx_runtime_1.jsx)(react_2.FormLabel, { children: "Last Name" }), (0, jsx_runtime_1.jsx)(react_2.Input, { value: lastName, onChange: (e) => setLastName(e.target.value), placeholder: "Last name" }), (0, jsx_runtime_1.jsx)(react_2.FormErrorMessage, { children: errors.lastName })] })] }), (0, jsx_runtime_1.jsxs)(react_2.FormControl, { mb: 6, isInvalid: !!errors.email, isRequired: true, isDisabled: isDisabled, children: [(0, jsx_runtime_1.jsx)(react_2.FormLabel, { children: "E-mail" }), (0, jsx_runtime_1.jsx)(react_2.Input, { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "ex: myname@example.com" }), (0, jsx_runtime_1.jsx)(react_2.FormErrorMessage, { children: errors.email })] }), (0, jsx_runtime_1.jsx)(react_2.Button, { type: "submit", colorScheme: "primary", isLoading: isSubmitting, loadingText: isSubmittingText, isDisabled: isDisabled, children: submitText })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "form", onSubmit: handleSubmit, width: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { mb: 6, children: (0, jsx_runtime_1.jsx)(RadioButton_1.RadioButtonGroup, { label: "Feedback Type", options: TYPE_OPTIONS, value: type, onChange: (v) => setType(v), isDisabled: isDisabled }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { mb: 6, children: (0, jsx_runtime_1.jsx)(InputTextArea_1.default, { 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 }) }), (0, jsx_runtime_1.jsxs)(react_2.Grid, { templateColumns: { base: "1fr", md: "1fr 1fr" }, gap: 4, mb: 6, children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: "First Name", value: firstName, onChange: (e) => setFirstName(e.target.value), placeholder: "First name", isRequired: true, isDisabled: isDisabled, error: !!errors.firstName, errorMessage: errors.firstName }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: "Last Name", value: lastName, onChange: (e) => setLastName(e.target.value), placeholder: "Last name", isRequired: true, isDisabled: isDisabled, error: !!errors.lastName, errorMessage: errors.lastName })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { mb: 6, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }) }), (0, jsx_runtime_1.jsx)(Button_1.default, { type: "submit", colorScheme: "primary", isLoading: isSubmitting, loadingText: isSubmittingText, isDisabled: isDisabled, children: submitText })] }));
 }

package/dist/Components/FieldSelectModal/FieldSelectModal.d.ts

@@ -5,6 +5,7 @@ export interface SelectableField {
     /** Human-readable label. */
     field_label: string;
 }
+/** Modal that lets the user pick which fields to include, confirmed via `onConfirm`. */
 export interface FieldSelectModalProps {
     isOpen: boolean;
     onClose: () => void;
@@ -15,12 +16,13 @@ export interface FieldSelectModalProps {
     confirmText?: string;
     loadingText?: string;
     isLoading?: boolean;
-    /** Pre-selected field_name values. Defaults to all selected. */
+    /** Pre-selected field_name values (defaults to all selected); re-applied whenever this or `fields` changes reference while open. */
     defaultSelected?: string[];
     /** Columns in the field grid. */
     columns?: number;
-    /** Show the search box (auto-hidden under 8 fields by default). */
+    /** Show the search box (auto-hidden under 8 fields by default); "Select all" still applies to every field, not just visible matches. */
     searchable?: boolean;
 }
+/** Modal checkbox-grid for choosing which fields/columns to show — a bulk toggle UI, not an inline Select/SelectV2 field. */
 declare const FieldSelectModal: React.FC<FieldSelectModalProps>;
 export default FieldSelectModal;

package/dist/Components/FieldSelectModal/FieldSelectModal.js

@@ -7,8 +7,10 @@ const framer_motion_1 = require("framer-motion");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const MotionModalContent = (0, framer_motion_1.motion)(react_2.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 = (0, useCustomTheme_1.useCustomTheme)();
+    const prefersReducedMotion = (0, framer_motion_1.useReducedMotion)();
     const [selected, setSelected] = (0, react_1.useState)([]);
     const [query, setQuery] = (0, react_1.useState)("");
     (0, react_1.useEffect)(() => {
@@ -27,9 +29,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 ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, size: "xl", isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: "blackAlpha.400", backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { pb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: 600, children: title }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, fontWeight: 400, children: [selected.length, " of ", fields.length, " selected"] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { overflowY: "auto", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", mb: 3, gap: 3, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: (e) => setSelected(e.target.checked ? fields.map((f) => f.field_name) : []), fontWeight: 500, children: "Select all" }), showSearch && ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", maxW: "220px", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search fields", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "lg" })] }))] }), (0, jsx_runtime_1.jsx)(react_2.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 3, children: visibleFields.map((field) => ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: selected.includes(field.field_name), onChange: () => toggle(field.field_name), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", children: field.field_label }) }, field.field_name))) }), visibleFields.length === 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: ["No fields match \"", query, "\""] }))] }), (0, jsx_runtime_1.jsxs)(react_2.ModalFooter, { gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Button, { variant: "outline", colorScheme: "gray", size: "sm", onClick: onClose, children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_2.Button, { colorScheme: "primary", size: "sm", isLoading: isLoading, loadingText: loadingText, isDisabled: selected.length === 0, onClick: () => onConfirm(selected), children: confirmText })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, size: "xl", isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, {}), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.text[900], children: title }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, fontWeight: 400, children: [selected.length, " of ", fields.length, " selected"] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { overflowY: "auto", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", mb: 3, gap: 3, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: (e) => setSelected(e.target.checked ? fields.map((f) => f.field_name) : []), fontWeight: 500, children: "Select all" }), showSearch && ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", maxW: "13.75rem", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search fields", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "lg" })] }))] }), (0, jsx_runtime_1.jsx)(react_2.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 3, children: visibleFields.map((field) => ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: selected.includes(field.field_name), onChange: () => toggle(field.field_name), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", children: field.field_label }) }, field.field_name))) }), visibleFields.length === 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: ["No fields match \"", query, "\""] }))] }), (0, jsx_runtime_1.jsxs)(react_2.ModalFooter, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { variant: "outline", colorScheme: "gray", size: "sm", onClick: onClose, children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_2.Button, { colorScheme: "primary", size: "sm", isLoading: isLoading, loadingText: loadingText, isDisabled: selected.length === 0, onClick: () => onConfirm(selected), children: confirmText })] })] })] }));
 };
 exports.default = FieldSelectModal;

package/dist/Components/FilePreview/FilePreview.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { FilePreviewProps, FilePreviewTriggerProps } from "./FilePreviewProps";
+/** Modal previewer inferring image/pdf/video/other from the extension — for an always-inline PDF-only panel use PdfViewer. */
 export declare const FilePreview: React.FC<FilePreviewProps>;
 /** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
 export declare const FilePreviewTrigger: React.FC<FilePreviewTriggerProps>;