50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T9dd5,// Brio UI · faq · MIT License · Copyright (c) 2026 Harjot Singh Rana · https://brioui.com/docs/components/faq 'use client' /* * Reduced-motion preference, hydration-safe: the server and the hydrating render both read * `false`, then React re-renders with the real value, so server HTML and the first client * render always agree. */ const REDUCED_QUERY = '(prefers-reduced-motion: reduce)' function subscribeReduced(onChange: () => void) { const mq = window.matchMedia(REDUCED_QUERY) mq.addEventListener('change', onChange) return () => mq.removeEventListener('change', onChange) } const getReduced = () => window.matchMedia(REDUCED_QUERY).matches const getServerReduced = () => false /** * FAQ — the accordion every landing page has, done properly. * * Answers open on a spring with a line drawn down their edge; the plus * folds into a minus. Every question has a link: open one and the URL * points to it, paste that URL and the page lands on the answer, already open. * Browser find-in-page (⌘F) searches closed answers too and opens the match. * Optional search filters as you type and highlights what matched. * * Functional: * - FAQPage JSON-LD for Google rich results (on by default) * - deep links, "Copy link" on every open answer (hidden with hashLinks={false}); * generated anchor ids are scoped per instance, your own `id`s are used as-is * - single or multiple open, default-open items; in single mode the answer * that closes above the clicked one closes in place (no page scroll), and only * its off-screen part is made up by scrolling, so nothing on screen jumps * - hidden="until-found" on closed answers, so ⌘F and search engines see them * - JSX answers need `text` to be searchable and in the JSON-LD (dev warning) * - `contactHref` goes through a URL allow-list (http(s), mailto, tel, relative) * * Accessible: headings wrap real buttons with aria-expanded / aria-controls, * answers are labelled regions, ↑ ↓ Home End move between questions. * Reduced motion: panels open instantly. * * Corners follow --ui-radius, --ui-radius-sm (see Theming → Corners). * Theme via library tokens (--ui-ink, --ui-surface, --ui-accent) or * --faq-* overrides. * * Requires: react >= 19, motion >= 11. */ import { AnimatePresence, motion } from 'motion/react' import { Children, cloneElement, createElement, isValidElement, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore, type CSSProperties, type KeyboardEvent, type ReactNode, } from 'react' /* Icons: Iconoir (MIT, © 2021 Luca Burgio, iconoir.com), inlined so the component stays dependency-free. */ const UI_ICONS = { 'search': [['path', { d: 'M17 17L21 21' }], ['path', { d: 'M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z' }]], 'link': [['path', { d: 'M14 11.9976C14 9.5059 11.683 7 8.85714 7C8.52241 7 7.41904 7.00001 7.14286 7.00001C4.30254 7.00001 2 9.23752 2 11.9976C2 14.376 3.70973 16.3664 6 16.8714C6.36756 16.9525 6.75006 16.9952 7.14286 16.9952' }], ['path', { d: 'M10 11.9976C10 14.4893 12.317 16.9952 15.1429 16.9952C15.4776 16.9952 16.581 16.9952 16.8571 16.9952C19.6975 16.9952 22 14.7577 22 11.9976C22 9.6192 20.2903 7.62884 18 7.12383C17.6324 7.04278 17.2499 6.99999 16.8571 6.99999' }]], 'check': [['path', { d: 'M5 13L9 17L19 7' }]], 'xmark': [['path', { d: 'M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426' }]], 'chat-bubble': [['path', { d: 'M17 12.5C17.2761 12.5 17.5 12.2761 17.5 12C17.5 11.7239 17.2761 11.5 17 11.5C16.7239 11.5 16.5 11.7239 16.5 12C16.5 12.2761 16.7239 12.5 17 12.5Z', fill: 'currentColor' }], ['path', { d: 'M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z', fill: 'currentColor' }], ['path', { d: 'M7 12.5C7.27614 12.5 7.5 12.2761 7.5 12C7.5 11.7239 7.27614 11.5 7 11.5C6.72386 11.5 6.5 11.7239 6.5 12C6.5 12.2761 6.72386 12.5 7 12.5Z', fill: 'currentColor' }], ['path', { d: 'M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.8214 2.48697 15.5291 3.33782 17L2.5 21.5L7 20.6622C8.47087 21.513 10.1786 22 12 22Z' }]], } as const satisfies Record])[]> type UiIconName = keyof typeof UI_ICONS function UiIcon({ name, size = 16, className }: { name: UiIconName; size?: number; className?: string }) { return ( ) } /** One question and its answer. */ export type FaqItem = { /** The question. Also the button label, and the source of the default anchor id. */ q: string /** The answer. A string, or any React content (paragraphs, lists, links). */ a: ReactNode /** * Anchor id, used for deep links and `defaultOpen`. Used as the heading's DOM id exactly as * given, so it is the stable way to link to an answer (keep it unique on the page). Without it * the id is a slug of the question (`faq-how-do-refunds-work`, what `defaultOpen` takes) that is * scoped per FAQ instance in the DOM and URL (`faq--how-do-refunds-work`), so two FAQs * never share an id; a URL hash with the plain slug still opens it. Repeated ids get `-2`, `-3`… * appended. The slug is lowercase, accent-free, dash-separated and at most 64 characters after * the prefix; a question with no Latin letters or digits to slug (emoji only, for example) gets * `faq-question-`. Duplicate ids get `-2`, `-3`… appended. * * @default `faq-` + slug of `q` */ id?: string /** * Plain-text answer for search and JSON-LD. Required in practice when `a` isn't a string: without * it that answer can't be found by the search field and is left out of the FAQPage JSON-LD (a * dev-only console warning says so). Set it whenever `a` is not a string: otherwise the answer is * not searchable, is left out of the JSON-LD, and a dev-only console warning names it. * * @default `a` when it is a string, else `''` */ text?: string /** Small icon before the question (decorative, 16px). */ icon?: ReactNode } /** Props for {@link Faq}. */ export type FaqProps = { /** * The questions, in display order. Items whose `q` or `a` is blank (empty or whitespace) are left * out, with a dev-only console warning. An empty list renders nothing, not even the search field. */ items: FaqItem[] /** * One answer open at a time, or any number. * @default 'single' */ type?: 'single' | 'multiple' /** * Ids open on first render. Use each item's `id`, or its generated `faq-…` slug. With * `type="single"` only the first id is used. Read once, on mount. * * @default [] */ defaultOpen?: string[] /** * Show a search field that filters by question and plain-text answer, and highlights matches in * both, including text inside elements in an answer (paragraphs, lists, links). * * @default false */ searchable?: boolean /** * Placeholder and accessible label of the search field. * @default 'Search questions' */ searchPlaceholder?: string /** * With `searchable`: ⌘F (Ctrl+F) and `/` jump to the search field while the FAQ is on screen. ⌘F * again from inside the field opens the browser's find. A small ⌘F hint shows in the empty field * on pointer devices. With `searchable`: ⌘F (Ctrl+F) and / jump to the search field while the FAQ * is on screen. ⌘F again, from inside the field, opens the browser's own find, which still * reaches closed answers. * * @default true */ searchShortcut?: boolean /** * Accessible name of the ✕ button that clears the search. * * @default 'Clear search' */ clearLabel?: string /** * Render a `