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

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/joditThemeVars.js

@@ -0,0 +1,75 @@
+/**
+ * Maps this library's active palette to the CSS custom properties Jodit's own light/dark theme
+ * CSS reads (`node_modules/jodit/es2021/jodit.css`). Jodit's `theme: "dark" | "default"` config
+ * only toggles which of ITS OWN selectors apply (`.jodit_theme_dark`, `.jodit-ui-input_theme_dark`,
+ * …) — those selectors are still driven by Jodit's own hardcoded `--jd-dark-*` / `--jd-color-*`
+ * custom properties (a generic mid-gray `#575757` canvas, a blue `#1e88e5` accent, …), so toggling
+ * the theme alone renders the editor in Jodit's palette instead of ours. This is what shipped the
+ * reported "editor is not black" bug in dark mode.
+ *
+ * `PaletteProps.background`/`.text` are role-stable ColorScales whose LIGHTNESS (not index)
+ * flips between modes — e.g. `background[50]` is `#ffffff` in light and near-black in dark, and
+ * `text[900]` is near-black ink in light and near-white ink in dark (see
+ * `Theme/tokens/builders/buildDarkPalette.ts`). So the *same* token expression already resolves
+ * correctly in both modes; only the Jodit CSS-variable NAME differs (`--jd-dark-*` only takes
+ * effect inside `.jodit_theme_dark`, `--jd-color-*` is what the default theme reads), which is why
+ * this still branches on `isDark`.
+ */
+export const getJoditThemeVars = (colors, isDark) => {
+    const shared = {
+        // Not remapped by `.jodit_theme_dark` in Jodit's own CSS, so one declaration covers both modes.
+        "--jd-color-border-selected": colors.primary[500],
+        // `--jd-color-panel` backs the search & replace box (`.jodit-ui-search__box`) and any other
+        // panel that isn't re-themed under `.jodit_theme_dark` (that scope overrides `--jd-color-border`
+        // itself to a hardcoded `#6b6b6b`, but never touches `--jd-color-panel`) — unset in dark mode it
+        // fell back to Jodit's own `#f9f9f9`, the reported "Search & Replace panel white" bug. Role-stable
+        // like `background`/`text`: the SAME expression already resolved correctly for the light branch.
+        "--jd-color-panel": colors.backgroundColor.secondary,
+        // Dialog/insert-link/insert-image inputs (`.jodit-ui-input__input`, `.jodit-ui-select__input`)
+        // read `--jd-color-white` as their OWN background regardless of theme unless Jodit applied its
+        // `_theme_dark` modifier class to that specific element (which reads `--jd-color-gray` instead,
+        // set below) — leaving either unset is what shipped the "white inputs" bug, since portalled
+        // dialog inputs don't reliably get the modifier class. `background[50]` is this library's
+        // established "white surface, darkens in dark mode" token (same pattern as the DatePicker
+        // month/year `<select>`), so one declaration is correct in both modes.
+        "--jd-color-white": colors.background[50],
+    };
+    if (isDark) {
+        return {
+            ...shared,
+            // `.jodit-workplace`'s own background rule in jodit.css (`.jodit-container:not(.jodit_inline)
+            // .jodit-workplace { background-color: var(--jd-color-background-default) }`) is NOT scoped
+            // under `.jodit_theme_dark` — that scope only re-themes the *border* on this selector, never
+            // the background. `--jd-color-background-default` itself is declared once, at `:root`, as
+            // `var(--jd-color-white)`, and our `--jd-color-white` override lives on this instance's wrapper
+            // (a descendant), so it never reaches `:root`'s own computed value. Left unset here, the
+            // workplace canvas fell back to Jodit's own white default even with `.jodit_theme_dark` active
+            // — this is the reported "canvas renders white in dark mode" bug.
+            "--jd-color-background-default": colors.backgroundColor.main, // .jodit-workplace canvas bg
+            "--jd-dark-background-color": colors.backgroundColor.main, // canvas / toolbar-box / wysiwyg bg
+            "--jd-dark-toolbar-color": colors.backgroundColor.secondary, // toolbar + status-bar bg
+            "--jd-dark-text-color": colors.text[900], // body/button/status-bar ink
+            "--jd-dark-icon-color": colors.text[700], // toolbar icon fill/stroke
+            // Was `colors.backgroundColor.muted` — computed at ~1.3:1 against the canvas (a near-miss
+            // that shipped: both values sit within ~11 lightness points of each other down near L7-18,
+            // where WCAG contrast collapses non-linearly). This backs BOTH the toolbar/dialog-button
+            // hover fill (paired with `--jd-dark-background-color` as the flipped-to-dark hover text —
+            // see `.jodit_theme_dark .jodit-ui-button:hover` in jodit.css) and the `.jodit-select`/
+            // `.jodit-input` background (paired with `--jd-dark-border-color` as its text). `background[900]`
+            // is this palette's dark-mode "bright highlight" rung (~9.7-10.7:1 against the canvas across
+            // brands) — verified numerically before this change, not assumed.
+            "--jd-dark-background-ligher": colors.background[900],
+            "--jd-dark-border-color": colors.boxborder[500], // select/input/dialog-header border
+            // `_theme_dark`-suffixed input/select variants read this instead of `--jd-color-white` above.
+            "--jd-color-gray": colors.background[50],
+        };
+    }
+    return {
+        ...shared,
+        "--jd-color-background-default": colors.backgroundColor.main, // workplace/popup bg
+        "--jd-color-text": colors.text[900], // base button/status-bar ink
+        "--jd-color-icon": colors.text[700], // base icon fill/stroke
+        "--jd-color-button-background-hover": colors.backgroundColor.muted, // hover bg
+        "--jd-color-border": colors.boxborder[500], // container/workplace border
+    };
+};

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

@@ -0,0 +1,15 @@
+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";
+/** 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();
+    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/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.js

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

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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(-0.5rem); }
+`;
+const sizeMap = {
+    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", 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 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: "xl" }
+        : variant === "dashed"
+            ? {
+                border: "0.125rem dashed",
+                borderColor: theme.colors.boxborder[200],
+                borderRadius: "xl",
+                bg: "transparent",
+            }
+            : {};
+    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/EmptyStateProps.js

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

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;

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

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "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 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 { 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 : "");
+    const [firstName, setFirstName] = useState((_c = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.firstName) !== null && _c !== void 0 ? _c : "");
+    const [lastName, setLastName] = useState((_d = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.lastName) !== null && _d !== void 0 ? _d : "");
+    const [email, setEmail] = useState((_e = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.email) !== null && _e !== void 0 ? _e : "");
+    const errors = useMemo(() => {
+        return {
+            message: message.trim().length === 0 ? "Please describe your feedback" : "",
+            firstName: firstName.trim().length === 0 ? "First name is required" : "",
+            lastName: lastName.trim().length === 0 ? "Last name is required" : "",
+            email: email.trim().length === 0 ? "Email is required" : !emailRegex.test(email) ? "Enter a valid email" : "",
+        };
+    }, [message, firstName, lastName, email]);
+    const hasErrors = Object.values(errors).some(Boolean);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (hasErrors) {
+            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() };
+        try {
+            setIsSubmitting(true);
+            if (onSubmit) {
+                await onSubmit(payload);
+            }
+            else if (submitUrl) {
+                const res = await fetch(submitUrl, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify(payload),
+                });
+                if (!res.ok)
+                    throw new Error(`Request failed: ${res.status}`);
+            }
+            showToast({ status: "success", title: "Thank you for your feedback" });
+            setMessage("");
+            setFirstName("");
+            setLastName("");
+            setEmail("");
+            setType("comments");
+        }
+        catch (err) {
+            showToast({
+                status: "error",
+                title: "Could not submit feedback",
+                description: err instanceof Error ? err.message : String(err),
+            });
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    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 })] }));
+}