@ews-admin/global-design-system 1.29.0 → 1.31.0

package/dist/index.js

@@ -33083,6 +33083,182 @@ function useDebouncedCallback(callback, delay) {
     return debouncedCallback;
 }
 
+const matches = (query, fallback) => typeof window !== "undefined" && typeof window.matchMedia === "function"
+    ? window.matchMedia(query).matches
+    : fallback;
+/**
+ * Whether a CSS media query matches, updated when it changes. Returns
+ * `defaultValue` where `matchMedia` does not exist (server rendering, old
+ * test environments).
+ */
+const useMediaQuery = (query, defaultValue = false) => {
+    const [value, setValue] = React.useState(() => matches(query, defaultValue));
+    React.useEffect(() => {
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+            return;
+        const list = window.matchMedia(query);
+        const onChange = () => setValue(list.matches);
+        onChange();
+        // Safari < 14 only has addListener.
+        if (list.addEventListener) {
+            list.addEventListener("change", onChange);
+            return () => list.removeEventListener("change", onChange);
+        }
+        list.addListener(onChange);
+        return () => list.removeListener(onChange);
+    }, [query]);
+    return value;
+};
+
+const DEFAULT_TIMEOUT_MS = 180000;
+const DEFAULT_STORAGE_KEY = "ews-idle-lock";
+const ACTIVITY_WRITE_INTERVAL_MS = 5000;
+const ACTIVITY_EVENTS = [
+    "pointerdown",
+    "pointermove",
+    "keydown",
+    "wheel",
+    "scroll",
+    "touchstart",
+];
+const readStorage = (key) => {
+    try {
+        return typeof window === "undefined" ? null : window.localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+};
+const writeStorage = (key, value) => {
+    try {
+        if (typeof window === "undefined")
+            return;
+        if (value === null)
+            window.localStorage.removeItem(key);
+        else
+            window.localStorage.setItem(key, value);
+    }
+    catch {
+        // Storage unavailable (private mode, quota): the lock still works in this tab.
+    }
+};
+/**
+ * Locks the screen after `timeoutMs` without user activity. The locked flag is
+ * kept in localStorage (it survives a reload) and shared between tabs through
+ * a BroadcastChannel, or the `storage` event where BroadcastChannel is missing:
+ * locking or unlocking one tab does the same in every tab. Activity in any tab
+ * keeps every tab unlocked.
+ */
+function useIdleLock({ timeoutMs = DEFAULT_TIMEOUT_MS, onLock, storageKey = DEFAULT_STORAGE_KEY, enabled = true, } = {}) {
+    const activityKey = `${storageKey}:activity`;
+    const [locked, setLocked] = React.useState(() => readStorage(storageKey) === "1");
+    const lockedRef = React.useRef(locked);
+    const onLockRef = React.useRef(onLock);
+    const lastActivity = React.useRef(Date.now());
+    const lastActivityWrite = React.useRef(0);
+    const channelRef = React.useRef(null);
+    React.useEffect(() => {
+        onLockRef.current = onLock;
+    }, [onLock]);
+    const markActivity = React.useCallback((now) => {
+        lastActivity.current = now;
+        if (now - lastActivityWrite.current >= ACTIVITY_WRITE_INTERVAL_MS) {
+            lastActivityWrite.current = now;
+            writeStorage(activityKey, String(now));
+        }
+    }, [activityKey]);
+    const applyLocked = React.useCallback((next) => {
+        if (lockedRef.current === next)
+            return;
+        lockedRef.current = next;
+        setLocked(next);
+        if (next)
+            onLockRef.current?.();
+    }, []);
+    const lock = React.useCallback(() => {
+        if (lockedRef.current)
+            return;
+        writeStorage(storageKey, "1");
+        channelRef.current?.postMessage("lock");
+        applyLocked(true);
+    }, [storageKey, applyLocked]);
+    const unlock = React.useCallback(() => {
+        lastActivityWrite.current = 0;
+        markActivity(Date.now());
+        writeStorage(storageKey, null);
+        channelRef.current?.postMessage("unlock");
+        applyLocked(false);
+    }, [storageKey, applyLocked, markActivity]);
+    // Cross-tab sync.
+    React.useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const onRemote = (nextLocked) => {
+            if (!nextLocked)
+                lastActivity.current = Date.now();
+            applyLocked(nextLocked);
+        };
+        if (typeof window.BroadcastChannel === "function") {
+            const channel = new window.BroadcastChannel(storageKey);
+            channelRef.current = channel;
+            channel.onmessage = (event) => {
+                if (event.data === "lock")
+                    onRemote(true);
+                else if (event.data === "unlock")
+                    onRemote(false);
+            };
+            return () => {
+                channelRef.current = null;
+                channel.close();
+            };
+        }
+        const onStorage = (event) => {
+            if (event.key !== storageKey)
+                return;
+            onRemote(event.newValue === "1");
+        };
+        window.addEventListener("storage", onStorage);
+        return () => window.removeEventListener("storage", onStorage);
+    }, [storageKey, applyLocked]);
+    // Inactivity timer.
+    React.useEffect(() => {
+        if (!enabled || locked || typeof window === "undefined")
+            return;
+        lastActivity.current = Date.now();
+        let timer;
+        const idleFor = () => {
+            const shared = Number(readStorage(activityKey)) || 0;
+            return Date.now() - Math.max(lastActivity.current, shared);
+        };
+        const check = () => {
+            const idle = idleFor();
+            if (idle >= timeoutMs)
+                lock();
+            else
+                timer = setTimeout(check, timeoutMs - idle);
+        };
+        const onActivity = () => markActivity(Date.now());
+        // Timers are throttled in background tabs: check the delay on return.
+        const onVisibility = () => {
+            if (document.visibilityState !== "visible")
+                return;
+            if (idleFor() >= timeoutMs)
+                lock();
+            else
+                onActivity();
+        };
+        timer = setTimeout(check, timeoutMs);
+        ACTIVITY_EVENTS.forEach((name) => document.addEventListener(name, onActivity, { capture: true, passive: true }));
+        document.addEventListener("visibilitychange", onVisibility);
+        return () => {
+            clearTimeout(timer);
+            ACTIVITY_EVENTS.forEach((name) => document.removeEventListener(name, onActivity, { capture: true }));
+            document.removeEventListener("visibilitychange", onVisibility);
+        };
+    }, [enabled, locked, timeoutMs, activityKey, lock, markActivity]);
+    return { locked, lock, unlock };
+}
+
 function useSelectField({ name, control, options: _options, rules, defaultValue, }) {
     const { field, fieldState: { error, invalid }, } = reactHookForm.useController({
         name,
@@ -35292,6 +35468,383 @@ const PaymentDueBanner = ({ title, subtitle, warning, ctaLabel, onCtaClick, onDi
  */
 const SecureLoader = ({ label, description }) => (jsxRuntime.jsx("div", { "data-testid": "secure-loader", className: "flex min-h-screen items-center justify-center bg-gray-100", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center rounded-lg bg-white p-6 shadow-lg", children: [jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(Lock, { className: "h-16 w-16 text-gray-500" }), jsxRuntime.jsx("div", { className: "absolute bottom-2 right-1 h-6 w-6 animate-spin rounded-full border-4 border-gray-300 border-t-green-500" })] }), jsxRuntime.jsx("p", { className: "mt-4 text-lg text-gray-600", children: label }), description && (jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-500", children: description }))] }) }));
 
+const DIGIT_ROWS = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
+const keyClass = "flex h-16 w-16 items-center justify-center justify-self-center rounded-full text-3xl font-light text-ews-gray-900 " +
+    "transition-colors hover:bg-ews-gray-100 active:bg-ews-gray-200 " +
+    "focus-visible:ring-2 focus-visible:ring-ews-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent";
+/**
+ * iOS-style PIN entry: a row of dots filled as digits are typed and a 3x4
+ * keypad. Texts are provided by the caller (already translated).
+ */
+const PinPad = ({ length = 4, onComplete, onChange, disabled = false, invalid = false, resetKey, captureKeyboard = true, eraseLabel, progressLabel, keypadLabel, className, }) => {
+    const [value, setValue] = React.useState("");
+    const valueRef = React.useRef("");
+    const update = React.useCallback((next) => {
+        valueRef.current = next;
+        setValue(next);
+        onChange?.(next);
+        if (next.length === length)
+            onComplete(next);
+    }, [length, onChange, onComplete]);
+    // Clear the typed digits when the caller asks for it.
+    React.useEffect(() => {
+        valueRef.current = "";
+        setValue("");
+    }, [resetKey]);
+    const press = React.useCallback((digit) => {
+        if (disabled || valueRef.current.length >= length)
+            return;
+        update(valueRef.current + digit);
+    }, [disabled, length, update]);
+    const erase = React.useCallback(() => {
+        if (disabled || valueRef.current.length === 0)
+            return;
+        update(valueRef.current.slice(0, -1));
+    }, [disabled, update]);
+    React.useEffect(() => {
+        if (!captureKeyboard)
+            return;
+        const onKeyDown = (event) => {
+            if (event.ctrlKey || event.metaKey || event.altKey)
+                return;
+            const target = event.target;
+            if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA"))
+                return;
+            if (/^[0-9]$/.test(event.key)) {
+                event.preventDefault();
+                press(event.key);
+            }
+            else if (event.key === "Backspace") {
+                event.preventDefault();
+                erase();
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [captureKeyboard, press, erase]);
+    return (jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-10", className), children: [jsxRuntime.jsx("div", { dir: "ltr", "aria-hidden": "true", "data-testid": "pin-dots", className: cn("flex gap-5", invalid && "animate-pin-shake"), children: Array.from({ length }, (_, index) => (jsxRuntime.jsx("span", { "data-filled": index < value.length, className: cn("h-3.5 w-3.5 rounded-full transition-colors", invalid
+                        ? "bg-ews-error"
+                        : index < value.length
+                            ? "bg-ews-primary"
+                            : "bg-ews-primary-light", disabled && index < value.length && "animate-pulse") }, index))) }), jsxRuntime.jsx("p", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: progressLabel(value.length, length) }), jsxRuntime.jsxs("div", { dir: "ltr", role: "group", "aria-label": keypadLabel, className: "grid grid-cols-3 gap-x-8 gap-y-4", children: [DIGIT_ROWS.map((digit) => (jsxRuntime.jsx("button", { type: "button", className: keyClass, disabled: disabled, onClick: () => press(digit), children: digit }, digit))), jsxRuntime.jsx("span", { "aria-hidden": "true" }), jsxRuntime.jsx("button", { type: "button", className: keyClass, disabled: disabled, onClick: () => press("0"), children: "0" }), jsxRuntime.jsx("button", { type: "button", className: cn(keyClass, "text-ews-gray-700"), disabled: disabled || value.length === 0, "aria-label": eraseLabel, onClick: erase, children: jsxRuntime.jsx(Delete, { className: "h-7 w-7", strokeWidth: 1.5, "aria-hidden": "true" }) })] })] }));
+};
+
+const MASK = "•";
+const onlyDigits = (text) => text.replace(/\D/g, "");
+/**
+ * Row of one-digit boxes for a PIN or a one-time code (desktop keyboards):
+ * typing moves to the next box, Backspace goes back, arrows move, pasting a
+ * code fills the boxes and `onComplete` fires once every box is filled.
+ */
+const PinCodeInput = ({ length = 4, onComplete, onChange, masked = true, autoComplete = "off", autoFocus = true, disabled = false, invalid = false, resetKey, digitLabel, groupLabel, className, }) => {
+    const empty = React.useCallback(() => Array.from({ length }, () => ""), [length]);
+    const [digits, setDigits] = React.useState(empty);
+    const digitsRef = React.useRef(digits);
+    const inputs = React.useRef([]);
+    const focusBox = (index) => {
+        const input = inputs.current[Math.max(0, Math.min(index, length - 1))];
+        input?.focus();
+        input?.select();
+    };
+    const update = (next) => {
+        digitsRef.current = next;
+        setDigits(next);
+        const value = next.join("");
+        onChange?.(value);
+        if (value.length === length && next.every(Boolean))
+            onComplete(value);
+    };
+    /** Writes `chars` from box `start` on and focuses the box after them. */
+    const fill = (start, chars) => {
+        const next = [...digitsRef.current];
+        const written = chars.slice(0, length - start).split("");
+        written.forEach((char, offset) => {
+            next[start + offset] = char;
+        });
+        focusBox(start + written.length);
+        update(next);
+    };
+    // Clear the boxes when the caller asks for it.
+    React.useEffect(() => {
+        const cleared = empty();
+        digitsRef.current = cleared;
+        setDigits(cleared);
+    }, [resetKey, empty]);
+    // Focus the first empty box on mount, after a reset and once re-enabled.
+    React.useEffect(() => {
+        if (!autoFocus || disabled)
+            return;
+        const firstEmpty = digitsRef.current.findIndex((digit) => !digit);
+        focusBox(firstEmpty === -1 ? length - 1 : firstEmpty);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [autoFocus, disabled, resetKey, length]);
+    const handleChange = (index, event) => {
+        if (disabled)
+            return;
+        const { value, selectionStart } = event.target;
+        const typed = onlyDigits(value);
+        if (!typed) {
+            const next = [...digitsRef.current];
+            next[index] = "";
+            update(next);
+            return;
+        }
+        // A digit typed next to the one already in the box: keep the new one.
+        if (digitsRef.current[index] && value.length === 2) {
+            const inserted = value.charAt((selectionStart ?? value.length) - 1);
+            if (/\d/.test(inserted)) {
+                fill(index, inserted);
+                return;
+            }
+        }
+        // One digit, or a whole code (browser autofill of the one-time code).
+        fill(typed.length >= length ? 0 : index, typed);
+    };
+    const handleKeyDown = (index, event) => {
+        if (disabled)
+            return;
+        switch (event.key) {
+            case "Backspace": {
+                event.preventDefault();
+                const next = [...digitsRef.current];
+                const target = next[index] ? index : Math.max(0, index - 1);
+                next[target] = "";
+                focusBox(target);
+                update(next);
+                return;
+            }
+            case "Delete": {
+                event.preventDefault();
+                const next = [...digitsRef.current];
+                next[index] = "";
+                update(next);
+                return;
+            }
+            case "ArrowLeft":
+                event.preventDefault();
+                focusBox(index - 1);
+                return;
+            case "ArrowRight":
+                event.preventDefault();
+                focusBox(index + 1);
+                return;
+            case "Home":
+                event.preventDefault();
+                focusBox(0);
+                return;
+            case "End":
+                event.preventDefault();
+                focusBox(length - 1);
+                return;
+        }
+    };
+    const handlePaste = (index, event) => {
+        event.preventDefault();
+        if (disabled)
+            return;
+        const pasted = onlyDigits(event.clipboardData.getData("text"));
+        if (!pasted)
+            return;
+        fill(pasted.length >= length ? 0 : index, pasted);
+    };
+    return (
+    // Codes stay left-to-right in RTL locales.
+    jsxRuntime.jsx("div", { dir: "ltr", role: "group", "aria-label": groupLabel, "data-testid": "pin-code-input", className: cn("flex justify-center gap-3", invalid && "animate-pin-shake", className), children: digits.map((digit, index) => (jsxRuntime.jsx("input", { ref: (element) => {
+                inputs.current[index] = element;
+            }, type: "text", inputMode: "numeric", pattern: "[0-9]*", autoComplete: index === 0 ? autoComplete : "off", autoCorrect: "off", spellCheck: false, value: digit && masked ? MASK : digit, disabled: disabled, "aria-label": digitLabel(index + 1, length), "aria-invalid": invalid || undefined, "data-filled": !!digit, onChange: (event) => handleChange(index, event), onKeyDown: (event) => handleKeyDown(index, event), onPaste: (event) => handlePaste(index, event), onFocus: (event) => event.target.select(), className: cn("h-14 w-12 rounded-lg border bg-white text-center text-2xl font-medium text-ews-gray-900 outline-none", "transition-colors focus:border-ews-primary focus:ring-2 focus:ring-ews-primary", "disabled:cursor-not-allowed disabled:opacity-60", invalid ? "border-ews-error" : digit ? "border-ews-primary" : "border-ews-gray-300", disabled && digit && "animate-pulse") }, index))) }));
+};
+
+const FIRST_STEP = {
+    create: "new",
+    unlock: "unlock",
+    change: "current",
+    reset: "otp",
+};
+const titleOf = (mode, step, texts) => {
+    switch (step) {
+        case "unlock":
+            return texts.unlockTitle;
+        case "current":
+            return texts.currentTitle;
+        case "otp":
+            return texts.otpTitle;
+        case "new":
+            return mode === "create" ? texts.createTitle : texts.newTitle;
+        case "confirm":
+            return texts.confirmTitle;
+    }
+};
+/** Same breakpoint as Tailwind's `sm`. */
+const DESKTOP_QUERY = "(min-width: 640px)";
+/** Open lock screens, oldest first; only the last one traps focus. */
+const trapStack = [];
+const FOCUSABLE = 'button:not([disabled]), input:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])';
+/**
+ * Blocking PIN screen: creates, checks, changes or resets (with a one-time
+ * code) the user's secret code. Below 640px: full screen with an on-screen
+ * keypad. From 640px: compact dialog on a grey backdrop with one box per digit,
+ * typed on the keyboard. Submit handlers return promises: a rejection clears
+ * the code and goes back to the first step, the app shows its message in `error`.
+ */
+const LockScreen = ({ mode, texts, error, busy = false, onCreate, onUnlock, onChangePin, onReset, onForgot, onCancel, onSignOut, subtitle, pinLength = 4, otpLength = 6, logo, className, }) => {
+    const [step, setStep] = React.useState(FIRST_STEP[mode]);
+    const [firstValue, setFirstValue] = React.useState(""); // current PIN or one-time code
+    const [newPin, setNewPin] = React.useState("");
+    const [otp, setOtp] = React.useState("");
+    const [localError, setLocalError] = React.useState(null);
+    const [invalid, setInvalid] = React.useState(false);
+    const [pending, setPending] = React.useState(false);
+    const [resetKey, setResetKey] = React.useState(0);
+    const panelRef = React.useRef(null);
+    const mounted = React.useRef(true);
+    const isDesktop = useMediaQuery(DESKTOP_QUERY);
+    const restart = React.useCallback((failed) => {
+        setStep(FIRST_STEP[mode]);
+        setFirstValue("");
+        setNewPin("");
+        setOtp("");
+        setInvalid(failed);
+        setResetKey((key) => key + 1);
+    }, [mode]);
+    React.useEffect(() => {
+        restart(false);
+        setLocalError(null);
+    }, [restart]);
+    React.useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    // Block page scroll and keep focus inside the screen. Only the most recently
+    // mounted lock screen traps focus: two traps pulling focus back to their own
+    // panel would loop forever (e.g. a Storybook docs page rendering every story).
+    React.useEffect(() => {
+        const token = {};
+        trapStack.push(token);
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        const previousFocus = document.activeElement;
+        // The desktop code boxes focus themselves first.
+        if (!panelRef.current?.contains(document.activeElement))
+            panelRef.current?.focus();
+        const keepFocus = (event) => {
+            if (trapStack[trapStack.length - 1] !== token)
+                return;
+            const panel = panelRef.current;
+            if (panel && !panel.contains(event.target))
+                panel.focus();
+        };
+        document.addEventListener("focusin", keepFocus);
+        return () => {
+            const wasTop = trapStack[trapStack.length - 1] === token;
+            trapStack.splice(trapStack.indexOf(token), 1);
+            document.body.style.overflow = previousOverflow;
+            document.removeEventListener("focusin", keepFocus);
+            if (wasTop)
+                previousFocus?.focus?.();
+        };
+    }, []);
+    const trapTab = (event) => {
+        if (event.key !== "Tab" || !panelRef.current)
+            return;
+        const items = Array.from(panelRef.current.querySelectorAll(FOCUSABLE));
+        if (items.length === 0) {
+            event.preventDefault();
+            return;
+        }
+        const first = items[0];
+        const last = items[items.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey && (active === first || active === panelRef.current)) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    };
+    const submit = async (call) => {
+        if (!call)
+            return;
+        setPending(true);
+        try {
+            await call();
+            if (mounted.current)
+                restart(false);
+        }
+        catch {
+            if (mounted.current)
+                restart(true);
+        }
+        finally {
+            if (mounted.current)
+                setPending(false);
+        }
+    };
+    const handlePin = (pin) => {
+        setLocalError(null);
+        switch (step) {
+            case "unlock":
+                void submit(onUnlock && (() => onUnlock(pin)));
+                return;
+            case "current":
+                setFirstValue(pin);
+                setStep("new");
+                return;
+            case "new":
+                setNewPin(pin);
+                setStep("confirm");
+                return;
+            case "confirm":
+                if (pin !== newPin) {
+                    setLocalError(texts.mismatchError);
+                    setInvalid(true);
+                    setNewPin("");
+                    setStep("new");
+                    setResetKey((key) => key + 1);
+                    return;
+                }
+                if (mode === "create")
+                    void submit(onCreate && (() => onCreate(pin)));
+                else if (mode === "change")
+                    void submit(onChangePin && (() => onChangePin(firstValue, pin)));
+                else if (mode === "reset")
+                    void submit(onReset && (() => onReset(firstValue, pin)));
+                return;
+        }
+    };
+    const submitOtp = (event) => {
+        event.preventDefault();
+        if (otp.length !== otpLength)
+            return;
+        setFirstValue(otp);
+        setInvalid(false);
+        setStep("new");
+    };
+    const completeOtp = (code) => {
+        setLocalError(null);
+        setFirstValue(code);
+        setInvalid(false);
+        setStep("new");
+    };
+    const isBusy = busy || pending;
+    const shownError = localError ?? error;
+    const showForgot = !!onForgot &&
+        !!texts.forgot &&
+        (step === "unlock" || step === "current");
+    const title = titleOf(mode, step, texts);
+    const digitLabel = texts.digit ?? texts.progress;
+    const desktopContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "pb-5", children: logo ?? jsxRuntime.jsx(Logo, { size: "sm", variant: "normal" }) }), title && (jsxRuntime.jsx("h2", { className: "text-center text-xl font-semibold text-ews-gray-900", children: title })), subtitle && (jsxRuntime.jsx("p", { className: "mt-1 text-center text-sm text-ews-gray-600", children: subtitle })), step === "otp" && texts.otpDescription && (jsxRuntime.jsx("p", { className: "mt-2 text-center text-sm text-ews-gray-600", children: texts.otpDescription })), jsxRuntime.jsx("div", { className: "mt-6", children: step === "otp" ? (jsxRuntime.jsx(PinCodeInput, { length: otpLength, masked: false, autoComplete: "one-time-code", onComplete: completeOtp, onChange: () => setInvalid(false), disabled: isBusy, invalid: invalid, resetKey: resetKey, digitLabel: digitLabel, groupLabel: texts.otpLabel ?? title }, step)) : (jsxRuntime.jsx(PinCodeInput, { length: pinLength, onComplete: handlePin, onChange: () => setInvalid(false), disabled: isBusy, invalid: invalid, resetKey: resetKey, digitLabel: digitLabel, groupLabel: title }, step)) }), jsxRuntime.jsx("p", { role: "alert", className: "mt-3 min-h-[1.25rem] text-center text-sm text-ews-error", children: shownError }), (showForgot || (onCancel && texts.cancel) || (onSignOut && texts.signOut)) && (jsxRuntime.jsxs("div", { className: "mt-4 flex w-full flex-col items-center gap-2 border-t border-ews-gray-200 pt-4", children: [showForgot && (jsxRuntime.jsx("button", { type: "button", onClick: onForgot, disabled: isBusy, className: "text-sm font-medium text-ews-primary hover:underline focus-visible:underline", children: texts.forgot })), onCancel && texts.cancel && (jsxRuntime.jsx("button", { type: "button", onClick: onCancel, disabled: isBusy, className: "text-sm text-ews-gray-600 hover:underline focus-visible:underline", children: texts.cancel })), onSignOut && texts.signOut && (jsxRuntime.jsx("button", { type: "button", onClick: onSignOut, disabled: isBusy, className: "text-sm text-ews-gray-600 hover:underline focus-visible:underline", children: texts.signOut }))] }))] }));
+    return (jsxRuntime.jsx("div", { className: cn("fixed inset-0 z-[1000] flex justify-center overflow-y-auto bg-white", "sm:items-center sm:bg-ews-gray-900/50 sm:backdrop-blur-sm", isDesktop && "p-4", className), "data-testid": "lock-screen", "data-layout": isDesktop ? "desktop" : "mobile", children: jsxRuntime.jsx("div", { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": texts.dialogLabel, "aria-busy": isBusy, tabIndex: -1, onKeyDown: trapTab, className: isDesktop
+                ? "flex w-full max-w-[400px] flex-col items-center rounded-2xl bg-white px-8 py-8 shadow-xl outline-none"
+                : cn("flex min-h-full w-full flex-col items-center px-6 pb-8 outline-none", "sm:min-h-0 sm:w-auto sm:min-w-[22rem] sm:rounded-2xl sm:bg-white sm:px-10 sm:py-10 sm:shadow-xl"), children: isDesktop ? (desktopContent) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "flex min-h-[33vh] shrink-0 items-center justify-center sm:min-h-0 sm:pb-8", children: logo ?? jsxRuntime.jsx(Logo, { size: "lg", variant: "normal" }) }), title && (jsxRuntime.jsx("h2", { className: "mb-8 text-center text-lg font-normal text-ews-gray-900", children: title })), step === "otp" ? (jsxRuntime.jsxs("form", { onSubmit: submitOtp, className: "flex w-full max-w-xs flex-col items-center gap-4", children: [texts.otpDescription && (jsxRuntime.jsx("p", { className: "text-center text-sm text-ews-gray-600", children: texts.otpDescription })), jsxRuntime.jsx("label", { className: "sr-only", htmlFor: "lock-screen-otp", children: texts.otpLabel }), jsxRuntime.jsx("input", { id: "lock-screen-otp", dir: "ltr", inputMode: "numeric", autoComplete: "one-time-code", maxLength: otpLength, value: otp, disabled: isBusy, "aria-label": texts.otpLabel, "aria-invalid": invalid || undefined, onChange: (event) => {
+                                    setOtp(event.target.value.replace(/\D/g, "").slice(0, otpLength));
+                                    setInvalid(false);
+                                }, className: cn("w-full rounded-lg border bg-white px-4 py-3 text-center text-2xl tracking-[0.5em]", "focus:border-ews-primary focus:ring-2 focus:ring-ews-primary", invalid ? "border-ews-error" : "border-ews-gray-300") }), jsxRuntime.jsx(Button, { type: "submit", variant: "ews-primary", fullWidth: true, disabled: otp.length !== otpLength || isBusy, children: texts.otpSubmit })] })) : (jsxRuntime.jsx(PinPad, { length: pinLength, onComplete: handlePin, onChange: () => setInvalid(false), disabled: isBusy, invalid: invalid, resetKey: resetKey, eraseLabel: texts.erase, progressLabel: texts.progress, keypadLabel: texts.keypad }, step)), jsxRuntime.jsx("p", { role: "alert", className: "mt-6 min-h-[1.25rem] text-center text-sm text-ews-error", children: shownError }), jsxRuntime.jsxs("div", { className: "mt-auto flex flex-col items-center gap-3 pt-6 sm:mt-4", children: [showForgot && (jsxRuntime.jsx("button", { type: "button", onClick: onForgot, disabled: isBusy, className: "text-base font-medium text-ews-primary hover:underline focus-visible:underline", children: texts.forgot })), onCancel && texts.cancel && (jsxRuntime.jsx("button", { type: "button", onClick: onCancel, disabled: isBusy, className: "text-sm text-ews-gray-600 hover:underline focus-visible:underline", children: texts.cancel }))] })] })) }) }));
+};
+
 const SpecialtySearchAutocomplete = ({ selectedSpecialties = [], onSpecialtiesChange, specialties: availableSpecialties, placeholder = "Search and select medical specialties...", className = "", disabled = false, maxSelections, showSelectedCount = true, title = "Medical Specialties", label = "Select Specialties", getSelectedCountText, removeSpecialtyLabel = "Remove specialty", }) => {
     const [filteredSpecialties, setFilteredSpecialties] = React.useState([]);
     const [isLoading, setIsLoading] = React.useState(false);
@@ -37406,6 +37959,7 @@ exports.LockKeyholeOpen = LockKeyholeOpen;
 exports.LockKeyholeOpenIcon = LockKeyholeOpen;
 exports.LockOpen = LockOpen;
 exports.LockOpenIcon = LockOpen;
+exports.LockScreen = LockScreen;
 exports.LogIn = LogIn;
 exports.LogInIcon = LogIn;
 exports.LogOut = LogOut;
@@ -39788,9 +40342,11 @@ exports.PillBottle = PillBottle;
 exports.PillBottleIcon = PillBottle;
 exports.PillIcon = Pill;
 exports.Pin = Pin;
+exports.PinCodeInput = PinCodeInput;
 exports.PinIcon = Pin;
 exports.PinOff = PinOff;
 exports.PinOffIcon = PinOff;
+exports.PinPad = PinPad;
 exports.Pipette = Pipette;
 exports.PipetteIcon = Pipette;
 exports.Pizza = Pizza;
@@ -40964,6 +41520,8 @@ exports.isValidPhoneNumber = isValidPhoneNumber;
 exports.parseDateSafe = parseDateSafe;
 exports.useDebounce = useDebounce;
 exports.useDebouncedCallback = useDebouncedCallback;
+exports.useIdleLock = useIdleLock;
+exports.useMediaQuery = useMediaQuery;
 exports.useSelectField = useSelectField;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map