pixelize-design-library 2.4.2-beta.9 → 3.0.0

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

@@ -1,9 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { Suspense, useMemo, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Suspense, useEffect, useMemo, useState } from "react";
 import { Box } from "@chakra-ui/react";
+import FieldMessage from "../Common/FieldMessage.js";
+import ErrorMessage from "../Common/ErrorMessage.js";
+import { fieldLabelStyles } from "../Common/FormLabel.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import EditorFieldBar from "./EditorFieldBar.js";
+import MakeDynamicDialog from "./MakeDynamicDialog.js";
+import { DEFAULT_TOKEN_SYNTAX, fieldOptions } from "./editorTokens.js";
+import { chipStyles, frameFocusStyles } from "./editorTokenStyles.js";
+import { resolveEditorLabels } from "./editorLabels.js";
+import { useEditorBridge } from "./useEditorBridge.js";
 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 () => {
@@ -11,8 +22,26 @@ const JoditEditor = React.lazy(async () => {
     const mod = (await import("jodit-react"));
     return { default: ((_a = mod.default) !== null && _a !== void 0 ? _a : mod) };
 });
-const Editor = React.memo(function Editor({ value, key, config, editorRef, className, onChange, onBlur, }) {
+/** Lazy-loaded Jodit wrapper — a `config.theme` or `config.popupRoot` you pass overrides this library's own dark-mode/popup fix; omit both keys. */
+const Editor = React.memo(function Editor({ value, key, config, editorRef, className, onChange, onBlur, label, isRequired, helperText, error, errorMessage, mergeFields, tokenSyntax = DEFAULT_TOKEN_SYNTAX, showMakeDynamic, toolbarButtons, onUnknownTokens, apiRef, onReady, labels, "data-testid": testId, }) {
     const theme = useCustomTheme();
+    const text = useMemo(() => resolveEditorLabels(labels), [labels]);
+    const { joditValue, attachEditor, api, instance, unknown } = useEditorBridge({
+        value,
+        onChange,
+        onBlur,
+        mergeFields,
+        syntax: tokenSyntax,
+        chipLabel: text.fieldChip,
+        apiRef,
+        onReady,
+        onUnknownTokens,
+    });
+    const hasFields = mergeFields !== undefined;
+    const options = useMemo(() => fieldOptions(mergeFields !== null && mergeFields !== void 0 ? mergeFields : [], tokenSyntax), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(mergeFields), tokenSyntax.open, tokenSyntax.close]);
+    const [dynamicText, setDynamicText] = useState(null);
     // Jodit portals dialogs/toolbar-dropdown popups (search & replace, image/link properties,
     // font-size list, ...) to `document.body` by default (`Dialog.destination` /
     // `getPopupViewRoot`), outside this wrapper's DOM subtree — so the CSS custom properties
@@ -23,6 +52,10 @@ 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,
+        // NOTE: Jodit's default -1 keeps the editing surface out of the Tab order.
+        tabIndex: 0,
         // `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
@@ -36,6 +69,35 @@ 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]);
-    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) }) }));
+    // 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]);
+    const unknownActive = hasFields && unknown.length > 0 && !(error && errorMessage);
+    const ids = useFieldIds(undefined, { error, errorMessage, helperText });
+    const describedBy = unknownActive ? ids.errorId : ids.describedBy;
+    const invalid = Boolean(error) || unknownActive;
+    const isReadOnly = Boolean(stableConfig === null || stableConfig === void 0 ? void 0 : stableConfig.readonly);
+    useEffect(() => {
+        if (!instance)
+            return;
+        const el = instance.editor;
+        const set = (name, val) => val === undefined ? el.removeAttribute(name) : el.setAttribute(name, val);
+        set("role", "textbox");
+        set("aria-multiline", "true");
+        set("aria-labelledby", label ? ids.labelId : undefined);
+        set("aria-label", label ? undefined : text.editor);
+        set("aria-describedby", describedBy);
+        set("aria-invalid", invalid ? "true" : undefined);
+        set("aria-required", isRequired ? "true" : undefined);
+        set("aria-readonly", isReadOnly ? "true" : undefined);
+    }, [instance, label, text.editor, ids.labelId, describedBy, invalid, isRequired, isReadOnly]);
+    const showFieldBar = hasFields || Boolean(toolbarButtons === null || toolbarButtons === void 0 ? void 0 : toolbarButtons.length);
+    return (_jsxs(Box, { "data-testid": testId, children: [label && (_jsxs(Box, { as: "label", id: ids.labelId, display: "block", onClick: () => api.focus(), ...fieldLabelStyles(theme.colors), children: [label, isRequired && (_jsx("span", { "aria-hidden": true, style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" }))] })), showFieldBar && (_jsx(EditorFieldBar, { options: options, labels: text, api: api, isDisabled: !instance || isReadOnly, showFieldMenu: hasFields, showMakeDynamic: hasFields && (showMakeDynamic !== null && showMakeDynamic !== void 0 ? showMakeDynamic : true), buttons: toolbarButtons !== null && toolbarButtons !== void 0 ? toolbarButtons : [], onMakeDynamic: () => setDynamicText(api.getSelectionText()) })), _jsx(Box, { ref: setPopupRoot, sx: { ...themeVars, ...chipStyles(theme.colors), ...frameFocusStyles(theme.colors) }, children: _jsx(Suspense, { fallback: null, children: popupRoot && (_jsx(JoditEditor, { config: stableConfig, value: joditValue, ref: editorRef, editorRef: attachEditor, className: className }, key)) }) }), unknownActive ? (_jsx(ErrorMessage, { id: ids.errorId, errorMessage: text.unknownTokens(unknown.join(", ")) })) : (_jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })), hasFields && (_jsx(MakeDynamicDialog, { selectedText: dynamicText, options: options, labels: text, countFor: api.countOccurrences, onReplace: api.replaceAll, onClose: () => setDynamicText(null) }))] }));
 });
 export default Editor;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Icon } from "@chakra-ui/react";
+import { WandSparkles } from "lucide-react";
+import Button from "../Button/Button.js";
+import Select from "../Select/Select.js";
+export default function EditorFieldBar({ options, labels, api, isDisabled, showFieldMenu, showMakeDynamic, buttons, onMakeDynamic, }) {
+    return (_jsxs(Flex, { role: "toolbar", "aria-label": labels.toolbar, gap: 2, wrap: "wrap", align: "center", mb: 2, children: [showFieldMenu && (_jsx(Box, { width: { base: "100%", sm: "16rem" }, children: _jsx(Select, { native: false, "aria-label": labels.insertField, placeholder: labels.insertField, options: options, value: "", noOptionsMessage: labels.noFields, isDisabled: isDisabled, onChange: (option) => {
+                        if (!option)
+                            return;
+                        api.insertField(String(option.id));
+                        window.setTimeout(api.focus, 0);
+                    }, "data-testid": "editor-insert-field" }) })), showMakeDynamic && (_jsx(Button, { variant: "outline", colorScheme: "gray", leftIcon: _jsx(WandSparkles, { size: 16, "aria-hidden": true }), label: labels.makeDynamic, onClick: onMakeDynamic, isDisabled: isDisabled, "data-testid": "editor-make-dynamic" })), buttons.map((button) => (_jsx(Button, { variant: "ghost", colorScheme: "gray", leftIcon: button.icon ? _jsx(Icon, { as: button.icon, boxSize: 4, "aria-hidden": true }) : undefined, label: button.label, onClick: () => button.onClick(api), isDisabled: isDisabled || button.isDisabled, "data-testid": `editor-button-${button.id}` }, button.id)))] }));
+}

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import Button from "../Button/Button.js";
+import Modal, { ModalBody, ModalFooter } from "../Modal/Modal.js";
+import Select from "../Select/Select.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+export default function MakeDynamicDialog({ selectedText, options, labels, countFor, onReplace, onClose, }) {
+    const { colors } = useCustomTheme();
+    const [path, setPath] = useState("");
+    const count = selectedText ? countFor(selectedText) : 0;
+    const close = () => {
+        setPath("");
+        onClose();
+    };
+    return (_jsxs(Modal, { isOpen: selectedText !== null, onClose: close, size: "md", isCentered: true, title: labels.dynamicTitle, children: [_jsx(ModalBody, { children: selectedText ? (_jsxs(Flex, { direction: "column", gap: 4, "data-testid": "editor-dynamic-dialog", children: [_jsxs(Box, { children: [_jsx(Text, { fontSize: "xs", color: colors.textMuted, children: labels.dynamicSelected }), _jsxs(Text, { fontSize: "sm", fontWeight: 500, color: colors.text[800], noOfLines: 3, children: ["\u201C", selectedText, "\u201D"] })] }), _jsx(Select, { native: false, label: labels.dynamicField, placeholder: labels.dynamicFieldPlaceholder, options: options, value: path, onChange: (option) => setPath(option ? String(option.id) : ""), "data-testid": "editor-dynamic-field" }), _jsx(Text, { fontSize: "sm", color: colors.textMuted, "aria-live": "polite", children: labels.dynamicCount(count) })] })) : (_jsx(Text, { fontSize: "sm", color: colors.text[800], "data-testid": "editor-dynamic-empty", children: labels.dynamicNoSelection })) }), _jsx(ModalFooter, { children: _jsxs(Flex, { gap: 2, justify: "flex-end", w: "100%", children: [_jsx(Button, { variant: "ghost", colorScheme: "gray", label: labels.cancel, onClick: close }), selectedText ? (_jsx(Button, { variant: "solid", colorScheme: "primary", label: labels.dynamicReplace, onClick: () => {
+                                onReplace(selectedText, path);
+                                close();
+                            }, isDisabled: !path || count === 0, "data-testid": "editor-dynamic-apply" })) : null] }) })] }));
+}

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

@@ -0,0 +1,21 @@
+export const DEFAULT_EDITOR_LABELS = {
+    editor: "Rich text editor",
+    insertField: "Insert field",
+    noFields: "No fields",
+    makeDynamic: "Make dynamic",
+    dynamicTitle: "Make dynamic",
+    dynamicField: "Field",
+    dynamicFieldPlaceholder: "Choose a field",
+    dynamicCount: (n) => `${n} ${n === 1 ? "occurrence" : "occurrences"} will be replaced`,
+    dynamicReplace: "Replace",
+    dynamicNoSelection: "Select some text in the editor first.",
+    unknownTokens: (list) => `Unknown fields: ${list}`,
+    cancel: "Cancel",
+    dynamicSelected: "Selected text",
+    toolbar: "Template fields",
+    fieldChip: (label) => `Field: ${label}`,
+};
+export const resolveEditorLabels = (labels) => ({
+    ...DEFAULT_EDITOR_LABELS,
+    ...labels,
+});

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

@@ -0,0 +1,32 @@
+import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
+import { CHIP_CLASS } from "./editorTokens.js";
+export const chipColors = (colors) => ({
+    known: { bg: colors.primary.opacity[8], ink: colors.accentText },
+    unknown: { bg: "transparent", ink: colors.semanticText.error },
+});
+export const chipStyles = (colors) => {
+    const { known, unknown } = chipColors(colors);
+    return {
+        [`.${CHIP_CLASS}`]: {
+            display: "inline-block",
+            px: "0.25rem",
+            borderRadius: "sm",
+            border: "1px solid transparent",
+            bg: known.bg,
+            color: known.ink,
+            cursor: "default",
+        },
+        [`.${CHIP_CLASS}[data-known="false"]`]: {
+            bg: unknown.bg,
+            color: unknown.ink,
+            border: "1px dashed",
+            borderColor: unknown.ink,
+        },
+    };
+};
+export const frameFocusStyles = (colors) => ({
+    ".jodit-container:not(.jodit_inline):focus-within": {
+        borderColor: colors.primary[500],
+        ...fieldFocusVisible(colors),
+    },
+});

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

@@ -0,0 +1,121 @@
+export const DEFAULT_TOKEN_SYNTAX = { open: "${", close: "}" };
+export const CHIP_CLASS = "pxl-token";
+const PATH_CHARS = "[A-Za-z0-9_.]+";
+const TAG_SPLIT = /(<[^>]*>)/;
+const CHIP_PATTERN = /<span\b([^>]*\bdata-field=(["'])([^"']*)\2[^>]*)>[^<]*<\/span>/g;
+const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const escapeHtml = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+const escapeAttr = (text) => escapeHtml(text).replace(/"/g, "&quot;");
+const patternsFor = ({ open, close }) => {
+    const o = escapeRegExp(open);
+    const c = escapeRegExp(close);
+    return {
+        match: new RegExp(`${o}(${PATH_CHARS})${c}`, "g"),
+        split: new RegExp(`(${o}(?:(?!${c})[\\s\\S])*${c})`),
+    };
+};
+export const fieldToken = (path, syntax = DEFAULT_TOKEN_SYNTAX) => `${syntax.open}${path}${syntax.close}`;
+export function fieldOptions(fields, syntax = DEFAULT_TOKEN_SYNTAX) {
+    const groups = [...new Set(fields.map((field) => field.group))];
+    return groups.flatMap((group) => fields
+        .filter((field) => field.group === group)
+        .map((field) => ({
+        id: field.path,
+        label: field.label,
+        group,
+        description: fieldToken(field.path, syntax),
+    })));
+}
+export function extractTokens(html, syntax = DEFAULT_TOKEN_SYNTAX) {
+    const { match } = patternsFor(syntax);
+    return [...new Set([...html.matchAll(match)].map((m) => m[1]))];
+}
+export function unknownTokens(html, fields, syntax = DEFAULT_TOKEN_SYNTAX) {
+    const known = new Set(fields.map((field) => field.path));
+    return extractTokens(html, syntax).filter((path) => !known.has(path));
+}
+function needlePattern(text) {
+    const words = text
+        .trim()
+        .split(/\s+/)
+        .map((word) => escapeRegExp(escapeHtml(word)));
+    return new RegExp(words.join("(?:\\s|&nbsp;|\\u00a0)+"), "g");
+}
+function mapTextOutsideTokens(html, syntax, mapText) {
+    const { split } = patternsFor(syntax);
+    return html
+        .split(TAG_SPLIT)
+        .map((segment) => segment.startsWith("<")
+        ? segment
+        : segment
+            .split(split)
+            .map((part, i) => (i % 2 === 1 ? part : mapText(part)))
+            .join(""))
+        .join("");
+}
+/** Replaces every whitespace-insensitive occurrence of `selectedText` outside tags and tokens. */
+export function makeDynamic(html, selectedText, path, syntax = DEFAULT_TOKEN_SYNTAX) {
+    if (!selectedText.trim())
+        return { html, count: 0 };
+    const pattern = needlePattern(selectedText);
+    let count = 0;
+    const next = mapTextOutsideTokens(html, syntax, (text) => text.replace(pattern, () => {
+        count += 1;
+        return fieldToken(path, syntax);
+    }));
+    return { html: next, count };
+}
+export function countOccurrences(html, selectedText, syntax = DEFAULT_TOKEN_SYNTAX) {
+    return makeDynamic(html, selectedText, "_", syntax).count;
+}
+export function chipHtml(path, { fields, syntax, chipLabel }) {
+    const field = fields.find((f) => f.path === path);
+    const text = field ? field.label : fieldToken(path, syntax);
+    const title = (field === null || field === void 0 ? void 0 : field.sample) ? ` title="${escapeAttr(field.sample)}"` : "";
+    return (`<span class="${CHIP_CLASS}" data-field="${escapeAttr(path)}" data-known="${field ? "true" : "false"}"` +
+        ` contenteditable="false" role="img" aria-label="${escapeAttr(chipLabel(text))}"${title}>${escapeHtml(text)}</span>`);
+}
+/** Raw `${path}` tokens in text nodes become non-editable chip spans; tags are left alone. */
+export function chipify(html, context) {
+    const { match } = patternsFor(context.syntax);
+    return html
+        .split(TAG_SPLIT)
+        .map((segment) => segment.startsWith("<") ? segment : segment.replace(match, (_t, path) => chipHtml(path, context)))
+        .join("");
+}
+/** Inverse of `chipify`: every chip span collapses back to its raw token. */
+export function serializeChips(html, syntax = DEFAULT_TOKEN_SYNTAX) {
+    return html.replace(CHIP_PATTERN, (_m, _attrs, _q, path) => fieldToken(path, syntax));
+}
+const isChip = (node) => !!node && node.nodeType === 1 && node.hasAttribute("data-field");
+const INVISIBLE = /[\u200b\ufeff]/g;
+const isBlankText = (node) => !node.data.replace(INVISIBLE, "");
+const skipEmptyText = (node, step) => {
+    let current = node;
+    while (current && current.nodeType === 3 && isBlankText(current))
+        current = current[step];
+    return current;
+};
+/** The chip a Backspace (backward) or Delete (forward) at a collapsed caret would eat, if any. */
+export function adjacentChip(range, direction) {
+    var _a;
+    if (!range.collapsed)
+        return null;
+    const node = range.startContainer;
+    const offset = range.startOffset;
+    const step = direction === "backward" ? "previousSibling" : "nextSibling";
+    let candidate;
+    if (node.nodeType === 3) {
+        const text = node.data;
+        const beyond = direction === "backward" ? text.slice(0, offset) : text.slice(offset);
+        const atEdge = !beyond.replace(INVISIBLE, "");
+        if (!atEdge)
+            return null;
+        candidate = node[step];
+    }
+    else {
+        candidate = (_a = node.childNodes[direction === "backward" ? offset - 1 : offset]) !== null && _a !== void 0 ? _a : null;
+    }
+    const found = skipEmptyText(candidate, step);
+    return isChip(found) ? found : null;
+}

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/Editor/useEditorBridge.js

@@ -0,0 +1,138 @@
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { adjacentChip, chipHtml, chipify, countOccurrences, fieldToken, makeDynamic, serializeChips, unknownTokens, } from "./editorTokens.js";
+export function useEditorBridge({ value, onChange, onBlur, mergeFields, syntax, chipLabel, apiRef, onReady, onUnknownTokens, }) {
+    const enabled = mergeFields !== undefined;
+    const fieldsKey = JSON.stringify(mergeFields);
+    const ctx = 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 = useRef(null);
+    const rangeRef = useRef(null);
+    const lastRef = useRef(null);
+    const appliedFieldsKey = useRef(fieldsKey);
+    const live = useRef({ enabled, ctx, onChange, onBlur, onReady, fieldsKey });
+    live.current = { enabled, ctx, onChange, onBlur, onReady, fieldsKey };
+    const [instance, setInstance] = useState(null);
+    const [raw, setRaw] = useState(value !== null && value !== void 0 ? value : "");
+    useEffect(() => {
+        if (value !== undefined)
+            setRaw(value);
+    }, [value]);
+    const handleChange = useCallback((html) => {
+        const { enabled: on, ctx: c, onChange: emit } = live.current;
+        const next = on ? serializeChips(html, c.syntax) : html;
+        lastRef.current = { raw: next, jodit: html };
+        setRaw(next);
+        emit === null || emit === void 0 ? void 0 : emit(next);
+    }, []);
+    const handleBlur = useCallback((html, event) => {
+        const { enabled: on, ctx: c, onBlur: emit } = live.current;
+        emit === null || emit === void 0 ? void 0 : emit(on ? serializeChips(html, c.syntax) : html, event);
+    }, []);
+    const attachEditor = 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 = 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]);
+    useEffect(() => {
+        if (!instance || !enabled || appliedFieldsKey.current === fieldsKey)
+            return;
+        appliedFieldsKey.current = fieldsKey;
+        const html = chipify(serializeChips(instance.value, ctx.syntax), ctx);
+        instance.value = html;
+        lastRef.current = { raw: serializeChips(html, ctx.syntax), jodit: instance.value };
+    }, [instance, enabled, fieldsKey, ctx]);
+    const api = useMemo(() => {
+        const current = () => joditRef.current;
+        const currentRaw = (jodit) => live.current.enabled ? 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 ? chipHtml(path, c) : 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 = makeDynamic(currentRaw(jodit), text, path, c.syntax);
+                if (result.count === 0)
+                    return 0;
+                jodit.value = on ? 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 ? countOccurrences(currentRaw(jodit), text, live.current.ctx.syntax) : 0;
+            },
+            focus: () => {
+                var _a;
+                (_a = current()) === null || _a === void 0 ? void 0 : _a.s.focus();
+            },
+        };
+    }, []);
+    useImperativeHandle(apiRef, () => api, [api]);
+    const unknown = useMemo(() => (enabled ? unknownTokens(raw, ctx.fields, syntax) : []), [enabled, raw, ctx, syntax]);
+    const unknownKey = unknown.join("\n");
+    const reported = useRef("");
+    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 : chipify(value, ctx);
+    }
+    return { joditValue, attachEditor, api, instance, raw, unknown, ctx };
+}

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

@@ -1,15 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HStack, PinInput, PinInputField, Box, Text, Button, Flex, } from "@chakra-ui/react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { HStack, PinInput, PinInputField, Box, Text, Flex, } from "@chakra-ui/react";
+import Button from "../../Button/Button.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { fieldFocusVisible } from "../../../Theme/chakra/focusRing.styles.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
 import { MailCheck } from "lucide-react";
-export default 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. */
+export default 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 = 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", 
-                        // [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))) }) }), _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" })] }) })] }));
+    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 (_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: 700, mb: 2, textAlign: "center", children: title }), _jsxs(Text, { fontSize: "md", textAlign: "center", color: theme.colors.textMuted, mb: 6, children: [description, subtitle && (_jsxs(_Fragment, { children: [_jsx("br", {}), subtitle] }))] }), _jsx(HStack, { spacing: 3, mb: 6, role: "group", "aria-label": codeName, children: _jsx(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) => (_jsx(PinInputField, { "aria-label": `${codeName}, ${digitName(index + 1, pins)}`, borderRadius: "lg", border: `${BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) } }, index))) }) }), _jsx(Flex, { justify: "center", children: _jsxs(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?", " ", _jsx(Button, { 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/esm/Components/EmptyState/EmptyState.js

@@ -3,38 +3,50 @@ 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 { 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];
-const EmptyState = ({ title = "No data found", description, icon: IconComp = 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 = Inbox, image, imageAlt = "", size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "15rem", sx, ...rest }) => {
     const theme = 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 = 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 (_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, { ...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 ? (_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 }), hasDescription && (_jsx(Text, { as: typeof description === "string" ? undefined : "div", 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/EmptyState/FilteredEmptyState.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import { SearchX } from "lucide-react";
+import Button from "../Button/Button.js";
+import EmptyState from "./EmptyState.js";
+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 ? (_jsxs(_Fragment, { children: [onRemoveLastFilter && (_jsx(Button, { size: buttonSize, label: removeLastFilterLabel, onClick: onRemoveLastFilter })), onClearFilters && (_jsx(Button, { size: buttonSize, variant: "outline", colorScheme: "gray", label: resolvedClearLabel, onClick: onClearFilters }))] })) : undefined;
+    return (_jsx(Box, { role: "status", w: "100%", children: _jsx(EmptyState, { icon: 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 }) }));
+};
+export default FilteredEmptyState;