@stackone/malachite 2.70.0 → 2.71.0

package/dist/components/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../src/components/Modal.tsx"],"sourcesContent":["import type React from 'react';\nimport { useCallback, useEffect, useId, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport type { AlertType } from './Alert';\nimport CalloutStrip from './CalloutStrip';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport type { RenderLink } from './PageLayout/types';\nimport { getDeepActiveElement } from './activeElement';\nimport { GLASS_SURFACE_STYLE } from './glassSurface';\nimport { MODAL_TRAY_BACKGROUND, MODAL_TRAY_CAPTION_COLOR, type ModalTrayTone } from './modalTray';\nimport { OVERLAY_ICON_BUTTON_CLASSES, useOverlayBehaviour } from './overlayBehaviour';\nimport { OVERLAY_ELEVATED_ATTR, overlayIdentity } from './portalOverlay';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/** Widths keyed to the size union — a raw `width` prop would let a consumer off the scale. */\nconst SIZE_MAX_WIDTH: Record<ModalSize, string> = {\n    small: '420px',\n    medium: '612px',\n    large: '760px',\n};\n\nconst TRANSITION_MS = 200;\n\nexport interface ModalProps {\n    open: boolean;\n    /** Dismiss handler — close button, ESC, or overlay click. */\n    onClose: () => void;\n    title: React.ReactNode;\n    /** Secondary line beneath the title. */\n    subtitle?: React.ReactNode;\n    /** Leading header slot, typically an icon or logo. */\n    icon?: React.ReactNode;\n    /** Content pinned right in the header, before the close button. */\n    headerExtra?: React.ReactNode;\n    titleAdornment?: React.ReactNode;\n    tray?: { tone?: ModalTrayTone; caption?: { label?: string; message: string } };\n    /** Divider under the header. Default: false. */\n    headerDivider?: boolean;\n    /** Pinned action row below the scrolling body. */\n    footer?: React.ReactNode;\n    size?: ModalSize;\n    /** Default: true. */\n    showCloseButton?: boolean;\n    /** Default: true. Turn off for a dialog whose choice must be made deliberately. */\n    closeOnOverlayClick?: boolean;\n    /** Whether the body gets default padding. Default: true. */\n    bodyPadding?: boolean;\n    /** Full-width Alert bands at the top of the body, above `children`, in order. Unaffected by\n     *  `bodyPadding`, and announced ahead of the dialog's description. The message is markdown. */\n    callouts?: { type?: AlertType; message: string }[];\n    /** Routes root-relative links in `callouts` through the app's router; see `MarkdownBlock`. */\n    renderLink?: RenderLink;\n    /**\n     * `alertdialog` for a dialog interrupting the user over a consequential choice — it\n     * tells assistive tech to announce the body, not just the name.\n     */\n    role?: 'dialog' | 'alertdialog';\n    /** Accessible dialog name; required when `title` isn't a plain string. */\n    'aria-label'?: string;\n    /** ID of a visible element naming the dialog (alternative to `aria-label`). */\n    'aria-labelledby'?: string;\n    /** ID of the element describing what the dialog is asking. */\n    'aria-describedby'?: string;\n    /**\n     * Work is in flight: suppresses the pointer dismissal routes and announces the busy\n     * state. Never ESC — that is the only guaranteed keyboard exit from a focus trap, so it\n     * always reaches `onClose` and whether to abort is left to the caller.\n     */\n    busy?: boolean;\n    children: React.ReactNode;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n    open,\n    onClose,\n    title,\n    subtitle,\n    icon,\n    headerExtra,\n    titleAdornment,\n    tray,\n    headerDivider = false,\n    footer,\n    size = 'medium',\n    showCloseButton = true,\n    closeOnOverlayClick = true,\n    bodyPadding = true,\n    callouts,\n    renderLink,\n    role = 'dialog',\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    busy = false,\n    children,\n}) => {\n    const captionId = useId();\n    const calloutId = useId();\n    const shownCallouts = callouts?.filter((callout) => callout.message.trim()) ?? [];\n    const [isVisible, setIsVisible] = useState(false);\n    // Starts false even when `open` does: portals are unsupported on the server, so the\n    // dialog must reach `document.body` from the client effect below and nowhere else.\n    const [isMounted, setIsMounted] = useState(false);\n    // Distinct from `!isVisible`, which is also false on the frame the dialog opens.\n    const [isExiting, setIsExiting] = useState(false);\n    const panelRef = useRef<HTMLElement | null>(null);\n    const frameRef = useRef<number | null>(null);\n    const unmountTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const busyRef = useRef(busy);\n    const onCloseRef = useRef(onClose);\n    useEffect(() => {\n        busyRef.current = busy;\n        onCloseRef.current = onClose;\n    }, [busy, onClose]);\n\n    // Pointer routes only. Removing ESC too would leave a focus-trapped keyboard user no\n    // exit while a request hangs (WCAG 2.1.2), so ESC always reaches onClose.\n    const dismissByPointer = useCallback(() => {\n        if (!busyRef.current) {\n            onCloseRef.current();\n        }\n    }, []);\n    const hostRef = useRef<HTMLDivElement | null>(null);\n    // No prop of its own: it stays in the base band unless a SidePanel elevated the stack,\n    // and follows it up when one has.\n    const {\n        ref: takePanelRef,\n        isTopmost,\n        zIndex,\n        elevated,\n    } = useOverlayBehaviour({\n        open,\n        onClose,\n        hostRef,\n    });\n    const handlePanelRef = useCallback(\n        (node: HTMLElement | null) => {\n            panelRef.current = node;\n            takePanelRef(node);\n        },\n        [takePanelRef],\n    );\n\n    // Mounted outlives `open` by one transition, so the dialog can animate out.\n    useEffect(() => {\n        if (open) {\n            setIsMounted(true);\n            setIsExiting(false);\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n            frameRef.current = requestAnimationFrame(() => {\n                frameRef.current = null;\n                setIsVisible(true);\n            });\n        } else {\n            // A browser refuses `aria-hidden` on a subtree still holding focus, so the\n            // attribute waits for this point — after useOverlayBehaviour's cleanup has\n            // returned focus to the trigger — and blurs what is left if the trigger has gone.\n            const active = getDeepActiveElement();\n            if (active && panelRef.current?.contains(active)) {\n                active.blur();\n            }\n            setIsExiting(true);\n            setIsVisible(false);\n            unmountTimerRef.current = setTimeout(() => {\n                unmountTimerRef.current = null;\n                setIsMounted(false);\n            }, TRANSITION_MS);\n        }\n        return () => {\n            if (frameRef.current !== null) {\n                cancelAnimationFrame(frameRef.current);\n                frameRef.current = null;\n            }\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n        };\n    }, [open]);\n\n    if (!isMounted) {\n        return null;\n    }\n\n    return createPortal(\n        // Host carries the stacking context — ShadowRootWrapper's `isolation` would otherwise\n        // flatten our z-index. Not promoted to the top layer, so host dialogs can cover us.\n        <ShadowRootWrapper\n            hostRef={hostRef}\n            hostStyle={{ position: 'relative', zIndex }}\n            hostProps={\n                elevated\n                    ? { ...overlayIdentity('modal'), [OVERLAY_ELEVATED_ATTR]: '' }\n                    : overlayIdentity('modal')\n            }\n        >\n            {/* The exit transition outlives `open`, so a closed-but-mounted dialog has to stop\n                taking clicks and leave the a11y tree — a faded opacity does neither. */}\n            <div\n                className={`fixed inset-0 z-[1000] flex items-center justify-center p-[16px] ${\n                    open ? '' : 'pointer-events-none'\n                }`}\n            >\n                <div\n                    aria-hidden=\"true\"\n                    onClick={closeOnOverlayClick ? dismissByPointer : undefined}\n                    className={`absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${\n                        isVisible ? 'opacity-100' : 'opacity-0'\n                    }`}\n                />\n                <div\n                    ref={handlePanelRef}\n                    role={role}\n                    aria-hidden={isExiting ? 'true' : undefined}\n                    aria-modal={isTopmost ? 'true' : undefined}\n                    aria-describedby={\n                        [\n                            ...shownCallouts.map((_, index) => `${calloutId}-${index}`),\n                            ariaDescribedBy,\n                            tray?.caption ? captionId : null,\n                        ]\n                            .filter(Boolean)\n                            .join(' ') || undefined\n                    }\n                    aria-busy={busy || undefined}\n                    tabIndex={-1}\n                    aria-label={\n                        ariaLabelledBy\n                            ? undefined\n                            : (ariaLabel ?? (typeof title === 'string' ? title : undefined))\n                    }\n                    aria-labelledby={ariaLabelledBy}\n                    className={\n                        tray\n                            ? 'relative flex max-h-full w-full flex-col gap-[4px] rounded-[20px] p-[4px] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-glow,var(--malachite-shadow-lg))]'\n                            : 'relative flex max-h-full w-full flex-col overflow-hidden rounded-[20px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-glow,var(--malachite-shadow-lg))]'\n                    }\n                    style={{\n                        maxWidth: tray\n                            ? `calc(${SIZE_MAX_WIDTH[size]} + 8px)`\n                            : SIZE_MAX_WIDTH[size],\n                        ...(tray\n                            ? {\n                                  backgroundColor: MODAL_TRAY_BACKGROUND[tray.tone ?? 'neutral'],\n                              }\n                            : {}),\n                        // Inline: Tailwind scale/translate utilities silently break inside\n                        // shadow roots (see CLAUDE.md Shadow DOM caveats).\n                        transform: isVisible ? 'scale(1)' : 'scale(0.96)',\n                        opacity: isVisible ? 1 : 0,\n                        transition: `transform ${TRANSITION_MS}ms ease-out, opacity ${TRANSITION_MS}ms ease-out`,\n                    }}\n                >\n                    <div\n                        className={\n                            tray\n                                ? 'flex min-h-0 flex-col overflow-hidden rounded-[16px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] [box-shadow:var(--malachite-shadow-glow-lg,var(--malachite-shadow-xl))]'\n                                : 'contents'\n                        }\n                    >\n                        <div\n                            className={`flex gap-[20px] p-[20px] ${\n                                subtitle ? 'items-start' : 'items-center'\n                            } ${\n                                headerDivider\n                                    ? 'border-0 border-b border-solid border-[var(--malachite-card-border)]'\n                                    : ''\n                            }`}\n                        >\n                            <div className=\"flex h-[18px] min-w-0 flex-1 items-center gap-[12px]\">\n                                <div className=\"flex min-w-0 items-center gap-[8px]\">\n                                    {icon ? (\n                                        <span className=\"flex shrink-0 items-center\">{icon}</span>\n                                    ) : null}\n                                    <div className=\"flex min-w-0 flex-col gap-[4px]\">\n                                        <span className=\"truncate text-[14px] font-medium leading-[1.25] tracking-[-0.14px] text-[var(--malachite-text-primary)]\">\n                                            {title}\n                                        </span>\n                                        {subtitle ? (\n                                            <span className=\"text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]\">\n                                                {subtitle}\n                                            </span>\n                                        ) : null}\n                                    </div>\n                                </div>\n                                {titleAdornment ? (\n                                    <>\n                                        <span\n                                            aria-hidden=\"true\"\n                                            className=\"h-[12px] w-px shrink-0 bg-[var(--malachite-card-border)]\"\n                                        />\n                                        <span className=\"flex min-w-0 items-center overflow-hidden\">\n                                            {titleAdornment}\n                                        </span>\n                                    </>\n                                ) : null}\n                            </div>\n                            {headerExtra ? (\n                                <span className=\"flex shrink-0 items-center\">{headerExtra}</span>\n                            ) : null}\n                            {showCloseButton ? (\n                                <button\n                                    type=\"button\"\n                                    aria-label=\"Close\"\n                                    onClick={dismissByPointer}\n                                    disabled={busy}\n                                    className={OVERLAY_ICON_BUTTON_CLASSES}\n                                >\n                                    <DismissIcon size={10} />\n                                </button>\n                            ) : null}\n                        </div>\n                        <div\n                            className={`min-h-0 flex-1 overflow-y-auto ${\n                                bodyPadding && shownCallouts.length === 0 ? 'px-[20px]' : ''\n                            }`}\n                        >\n                            {shownCallouts.map((callout, index) => (\n                                <CalloutStrip\n                                    key={index}\n                                    id={`${calloutId}-${index}`}\n                                    type={callout.type}\n                                    message={callout.message}\n                                    renderLink={renderLink}\n                                />\n                            ))}\n                            {bodyPadding ? (\n                                <div\n                                    className={\n                                        shownCallouts.length > 0\n                                            ? 'px-[20px] pt-[18px] pb-[20px]'\n                                            : `pb-[20px] ${headerDivider ? 'pt-[18px]' : ''}`\n                                    }\n                                >\n                                    {children}\n                                </div>\n                            ) : (\n                                children\n                            )}\n                        </div>\n                        {footer ? (\n                            <div\n                                className=\"flex min-h-[56px] shrink-0 items-center border-0 border-t border-solid border-[var(--malachite-card-border)] px-[12px]\"\n                                style={GLASS_SURFACE_STYLE}\n                            >\n                                {footer}\n                            </div>\n                        ) : null}\n                    </div>\n                    {tray?.caption ? (\n                        <div\n                            id={captionId}\n                            className=\"flex h-[48px] shrink-0 items-center justify-center px-[16px] text-[13px] tracking-[0.13px]\"\n                            style={{ color: MODAL_TRAY_CAPTION_COLOR[tray.tone ?? 'neutral'] }}\n                        >\n                            <span>\n                                {tray.caption.label ? (\n                                    <>\n                                        <span className=\"font-medium\">\n                                            {tray.caption.label}\n                                        </span>{' '}\n                                    </>\n                                ) : null}\n                                {tray.caption.message}\n                            </span>\n                        </div>\n                    ) : null}\n                </div>\n            </div>\n        </ShadowRootWrapper>,\n        document.body,\n    );\n};\n\nexport default Modal;\nexport { Modal };\n"],"names":["SIZE_MAX_WIDTH","TRANSITION_MS","Modal","open","onClose","title","subtitle","icon","headerExtra","titleAdornment","tray","headerDivider","footer","size","showCloseButton","closeOnOverlayClick","bodyPadding","callouts","renderLink","role","ariaLabel","ariaLabelledBy","ariaDescribedBy","busy","children","captionId","useId","calloutId","shownCallouts","callout","isVisible","setIsVisible","useState","isMounted","setIsMounted","isExiting","setIsExiting","panelRef","useRef","frameRef","unmountTimerRef","busyRef","onCloseRef","useEffect","dismissByPointer","useCallback","hostRef","takePanelRef","isTopmost","zIndex","elevated","useOverlayBehaviour","handlePanelRef","node","active","getDeepActiveElement","_a","createPortal","jsx","ShadowRootWrapper","overlayIdentity","OVERLAY_ELEVATED_ATTR","jsxs","_","index","MODAL_TRAY_BACKGROUND","Fragment","OVERLAY_ICON_BUTTON_CLASSES","DismissIcon","CalloutStrip","GLASS_SURFACE_STYLE","MODAL_TRAY_CAPTION_COLOR"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../src/components/Modal.tsx"],"sourcesContent":["import type React from 'react';\nimport { useCallback, useEffect, useId, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport type { AlertType } from './Alert';\nimport CalloutStrip from './CalloutStrip';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport type { RenderLink } from './PageLayout/types';\nimport { getDeepActiveElement } from './activeElement';\nimport { GLASS_SURFACE_STYLE } from './glassSurface';\nimport { MODAL_TRAY_BACKGROUND, MODAL_TRAY_CAPTION_COLOR, type ModalTrayTone } from './modalTray';\nimport { OVERLAY_ICON_BUTTON_CLASSES, useOverlayBehaviour } from './overlayBehaviour';\nimport { OVERLAY_ELEVATED_ATTR, overlayIdentity } from './portalOverlay';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/** Widths keyed to the size union — a raw `width` prop would let a consumer off the scale. */\nconst SIZE_MAX_WIDTH: Record<ModalSize, string> = {\n    small: '420px',\n    medium: '612px',\n    large: '760px',\n};\n\nconst TRANSITION_MS = 200;\n\n// A basis of its own: a `flex-1` body's zero basis would override the height in Chrome.\nconst TALL_BODY = 'flex-[0_1_auto] h-[min(600px,calc(100dvh-160px))]';\n\nexport interface ModalProps {\n    open: boolean;\n    /** Dismiss handler — close button, ESC, or overlay click. */\n    onClose: () => void;\n    title: React.ReactNode;\n    /** Secondary line beneath the title. */\n    subtitle?: React.ReactNode;\n    /** Leading header slot, typically an icon or logo. */\n    icon?: React.ReactNode;\n    /** Content pinned right in the header, before the close button. */\n    headerExtra?: React.ReactNode;\n    titleAdornment?: React.ReactNode;\n    tray?: { tone?: ModalTrayTone; caption?: { label?: string; message: string } };\n    /** Divider under the header. Default: false. */\n    headerDivider?: boolean;\n    /** Pinned action row below the scrolling body. */\n    footer?: React.ReactNode;\n    size?: ModalSize;\n    /** Default: true. */\n    showCloseButton?: boolean;\n    /** Default: true. Turn off for a dialog whose choice must be made deliberately. */\n    closeOnOverlayClick?: boolean;\n    /** Whether the body gets default padding. Default: true. */\n    bodyPadding?: boolean;\n    /** `tall`: 600px, or the viewport less 160px, for content that sizes to its box. */\n    bodyHeight?: 'auto' | 'tall';\n    /** Full-width Alert bands at the top of the body, above `children`, in order. Unaffected by\n     *  `bodyPadding`, and announced ahead of the dialog's description. The message is markdown. */\n    callouts?: { type?: AlertType; message: string }[];\n    /** Routes root-relative links in `callouts` through the app's router; see `MarkdownBlock`. */\n    renderLink?: RenderLink;\n    /**\n     * `alertdialog` for a dialog interrupting the user over a consequential choice — it\n     * tells assistive tech to announce the body, not just the name.\n     */\n    role?: 'dialog' | 'alertdialog';\n    /** Accessible dialog name; required when `title` isn't a plain string. */\n    'aria-label'?: string;\n    /** ID of a visible element naming the dialog (alternative to `aria-label`). */\n    'aria-labelledby'?: string;\n    /** ID of the element describing what the dialog is asking. */\n    'aria-describedby'?: string;\n    /**\n     * Work is in flight: suppresses the pointer dismissal routes and announces the busy\n     * state. Never ESC — that is the only guaranteed keyboard exit from a focus trap, so it\n     * always reaches `onClose` and whether to abort is left to the caller.\n     */\n    busy?: boolean;\n    children: React.ReactNode;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n    open,\n    onClose,\n    title,\n    subtitle,\n    icon,\n    headerExtra,\n    titleAdornment,\n    tray,\n    headerDivider = false,\n    footer,\n    size = 'medium',\n    showCloseButton = true,\n    closeOnOverlayClick = true,\n    bodyPadding = true,\n    bodyHeight = 'auto',\n    callouts,\n    renderLink,\n    role = 'dialog',\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    busy = false,\n    children,\n}) => {\n    const captionId = useId();\n    const calloutId = useId();\n    const shownCallouts = callouts?.filter((callout) => callout.message.trim()) ?? [];\n    const [isVisible, setIsVisible] = useState(false);\n    // Starts false even when `open` does: portals are unsupported on the server, so the\n    // dialog must reach `document.body` from the client effect below and nowhere else.\n    const [isMounted, setIsMounted] = useState(false);\n    // Distinct from `!isVisible`, which is also false on the frame the dialog opens.\n    const [isExiting, setIsExiting] = useState(false);\n    const panelRef = useRef<HTMLElement | null>(null);\n    const frameRef = useRef<number | null>(null);\n    const unmountTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const busyRef = useRef(busy);\n    const onCloseRef = useRef(onClose);\n    useEffect(() => {\n        busyRef.current = busy;\n        onCloseRef.current = onClose;\n    }, [busy, onClose]);\n\n    // Pointer routes only. Removing ESC too would leave a focus-trapped keyboard user no\n    // exit while a request hangs (WCAG 2.1.2), so ESC always reaches onClose.\n    const dismissByPointer = useCallback(() => {\n        if (!busyRef.current) {\n            onCloseRef.current();\n        }\n    }, []);\n    const hostRef = useRef<HTMLDivElement | null>(null);\n    // No prop of its own: it stays in the base band unless a SidePanel elevated the stack,\n    // and follows it up when one has.\n    const {\n        ref: takePanelRef,\n        isTopmost,\n        zIndex,\n        elevated,\n    } = useOverlayBehaviour({\n        open,\n        onClose,\n        hostRef,\n    });\n    const handlePanelRef = useCallback(\n        (node: HTMLElement | null) => {\n            panelRef.current = node;\n            takePanelRef(node);\n        },\n        [takePanelRef],\n    );\n\n    // Mounted outlives `open` by one transition, so the dialog can animate out.\n    useEffect(() => {\n        if (open) {\n            setIsMounted(true);\n            setIsExiting(false);\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n            frameRef.current = requestAnimationFrame(() => {\n                frameRef.current = null;\n                setIsVisible(true);\n            });\n        } else {\n            // A browser refuses `aria-hidden` on a subtree still holding focus, so the\n            // attribute waits for this point — after useOverlayBehaviour's cleanup has\n            // returned focus to the trigger — and blurs what is left if the trigger has gone.\n            const active = getDeepActiveElement();\n            if (active && panelRef.current?.contains(active)) {\n                active.blur();\n            }\n            setIsExiting(true);\n            setIsVisible(false);\n            unmountTimerRef.current = setTimeout(() => {\n                unmountTimerRef.current = null;\n                setIsMounted(false);\n            }, TRANSITION_MS);\n        }\n        return () => {\n            if (frameRef.current !== null) {\n                cancelAnimationFrame(frameRef.current);\n                frameRef.current = null;\n            }\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n        };\n    }, [open]);\n\n    if (!isMounted) {\n        return null;\n    }\n\n    return createPortal(\n        // Host carries the stacking context — ShadowRootWrapper's `isolation` would otherwise\n        // flatten our z-index. Not promoted to the top layer, so host dialogs can cover us.\n        <ShadowRootWrapper\n            hostRef={hostRef}\n            hostStyle={{ position: 'relative', zIndex }}\n            hostProps={\n                elevated\n                    ? { ...overlayIdentity('modal'), [OVERLAY_ELEVATED_ATTR]: '' }\n                    : overlayIdentity('modal')\n            }\n        >\n            {/* The exit transition outlives `open`, so a closed-but-mounted dialog has to stop\n                taking clicks and leave the a11y tree — a faded opacity does neither. */}\n            <div\n                className={`fixed inset-0 z-[1000] flex items-center justify-center p-[16px] ${\n                    open ? '' : 'pointer-events-none'\n                }`}\n            >\n                <div\n                    aria-hidden=\"true\"\n                    onClick={closeOnOverlayClick ? dismissByPointer : undefined}\n                    className={`absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${\n                        isVisible ? 'opacity-100' : 'opacity-0'\n                    }`}\n                />\n                <div\n                    ref={handlePanelRef}\n                    role={role}\n                    aria-hidden={isExiting ? 'true' : undefined}\n                    aria-modal={isTopmost ? 'true' : undefined}\n                    aria-describedby={\n                        [\n                            ...shownCallouts.map((_, index) => `${calloutId}-${index}`),\n                            ariaDescribedBy,\n                            tray?.caption ? captionId : null,\n                        ]\n                            .filter(Boolean)\n                            .join(' ') || undefined\n                    }\n                    aria-busy={busy || undefined}\n                    tabIndex={-1}\n                    aria-label={\n                        ariaLabelledBy\n                            ? undefined\n                            : (ariaLabel ?? (typeof title === 'string' ? title : undefined))\n                    }\n                    aria-labelledby={ariaLabelledBy}\n                    className={\n                        tray\n                            ? 'relative flex max-h-full w-full flex-col gap-[4px] rounded-[20px] p-[4px] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-glow,var(--malachite-shadow-lg))]'\n                            : 'relative flex max-h-full w-full flex-col overflow-hidden rounded-[20px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-glow,var(--malachite-shadow-lg))]'\n                    }\n                    style={{\n                        maxWidth: tray\n                            ? `calc(${SIZE_MAX_WIDTH[size]} + 8px)`\n                            : SIZE_MAX_WIDTH[size],\n                        ...(tray\n                            ? {\n                                  backgroundColor: MODAL_TRAY_BACKGROUND[tray.tone ?? 'neutral'],\n                              }\n                            : {}),\n                        // Inline: Tailwind scale/translate utilities silently break inside\n                        // shadow roots (see CLAUDE.md Shadow DOM caveats).\n                        transform: isVisible ? 'scale(1)' : 'scale(0.96)',\n                        opacity: isVisible ? 1 : 0,\n                        transition: `transform ${TRANSITION_MS}ms ease-out, opacity ${TRANSITION_MS}ms ease-out`,\n                    }}\n                >\n                    <div\n                        className={\n                            tray\n                                ? 'flex min-h-0 flex-col overflow-hidden rounded-[16px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] [box-shadow:var(--malachite-shadow-glow-lg,var(--malachite-shadow-xl))]'\n                                : 'contents'\n                        }\n                    >\n                        <div\n                            className={`flex gap-[20px] p-[20px] ${\n                                subtitle ? 'items-start' : 'items-center'\n                            } ${\n                                headerDivider\n                                    ? 'border-0 border-b border-solid border-[var(--malachite-card-border)]'\n                                    : ''\n                            }`}\n                        >\n                            <div className=\"flex h-[18px] min-w-0 flex-1 items-center gap-[12px]\">\n                                <div className=\"flex min-w-0 items-center gap-[8px]\">\n                                    {icon ? (\n                                        <span className=\"flex shrink-0 items-center\">{icon}</span>\n                                    ) : null}\n                                    <div className=\"flex min-w-0 flex-col gap-[4px]\">\n                                        <span className=\"truncate text-[14px] font-medium leading-[1.25] tracking-[-0.14px] text-[var(--malachite-text-primary)]\">\n                                            {title}\n                                        </span>\n                                        {subtitle ? (\n                                            <span className=\"text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]\">\n                                                {subtitle}\n                                            </span>\n                                        ) : null}\n                                    </div>\n                                </div>\n                                {titleAdornment ? (\n                                    <>\n                                        <span\n                                            aria-hidden=\"true\"\n                                            className=\"h-[12px] w-px shrink-0 bg-[var(--malachite-card-border)]\"\n                                        />\n                                        <span className=\"flex min-w-0 items-center overflow-hidden\">\n                                            {titleAdornment}\n                                        </span>\n                                    </>\n                                ) : null}\n                            </div>\n                            {headerExtra ? (\n                                <span className=\"flex shrink-0 items-center\">{headerExtra}</span>\n                            ) : null}\n                            {showCloseButton ? (\n                                <button\n                                    type=\"button\"\n                                    aria-label=\"Close\"\n                                    onClick={dismissByPointer}\n                                    disabled={busy}\n                                    className={OVERLAY_ICON_BUTTON_CLASSES}\n                                >\n                                    <DismissIcon size={10} />\n                                </button>\n                            ) : null}\n                        </div>\n                        <div\n                            className={`min-h-0 ${bodyHeight === 'tall' ? TALL_BODY : 'flex-1'} overflow-y-auto ${\n                                bodyPadding && shownCallouts.length === 0 ? 'px-[20px]' : ''\n                            }`}\n                        >\n                            {shownCallouts.map((callout, index) => (\n                                <CalloutStrip\n                                    key={index}\n                                    id={`${calloutId}-${index}`}\n                                    type={callout.type}\n                                    message={callout.message}\n                                    renderLink={renderLink}\n                                />\n                            ))}\n                            {bodyPadding ? (\n                                <div\n                                    className={\n                                        shownCallouts.length > 0\n                                            ? 'px-[20px] pt-[18px] pb-[20px]'\n                                            : `pb-[20px] ${headerDivider ? 'pt-[18px]' : ''}`\n                                    }\n                                >\n                                    {children}\n                                </div>\n                            ) : (\n                                children\n                            )}\n                        </div>\n                        {footer ? (\n                            <div\n                                className=\"flex min-h-[56px] shrink-0 items-center border-0 border-t border-solid border-[var(--malachite-card-border)] px-[12px]\"\n                                style={GLASS_SURFACE_STYLE}\n                            >\n                                {footer}\n                            </div>\n                        ) : null}\n                    </div>\n                    {tray?.caption ? (\n                        <div\n                            id={captionId}\n                            className=\"flex h-[48px] shrink-0 items-center justify-center px-[16px] text-[13px] tracking-[0.13px]\"\n                            style={{ color: MODAL_TRAY_CAPTION_COLOR[tray.tone ?? 'neutral'] }}\n                        >\n                            <span>\n                                {tray.caption.label ? (\n                                    <>\n                                        <span className=\"font-medium\">\n                                            {tray.caption.label}\n                                        </span>{' '}\n                                    </>\n                                ) : null}\n                                {tray.caption.message}\n                            </span>\n                        </div>\n                    ) : null}\n                </div>\n            </div>\n        </ShadowRootWrapper>,\n        document.body,\n    );\n};\n\nexport default Modal;\nexport { Modal };\n"],"names":["SIZE_MAX_WIDTH","TRANSITION_MS","TALL_BODY","Modal","open","onClose","title","subtitle","icon","headerExtra","titleAdornment","tray","headerDivider","footer","size","showCloseButton","closeOnOverlayClick","bodyPadding","bodyHeight","callouts","renderLink","role","ariaLabel","ariaLabelledBy","ariaDescribedBy","busy","children","captionId","useId","calloutId","shownCallouts","callout","isVisible","setIsVisible","useState","isMounted","setIsMounted","isExiting","setIsExiting","panelRef","useRef","frameRef","unmountTimerRef","busyRef","onCloseRef","useEffect","dismissByPointer","useCallback","hostRef","takePanelRef","isTopmost","zIndex","elevated","useOverlayBehaviour","handlePanelRef","node","active","getDeepActiveElement","_a","createPortal","jsx","ShadowRootWrapper","overlayIdentity","OVERLAY_ELEVATED_ATTR","jsxs","_","index","MODAL_TRAY_BACKGROUND","Fragment","OVERLAY_ICON_BUTTON_CLASSES","DismissIcon","CalloutStrip","GLASS_SURFACE_STYLE","MODAL_TRAY_CAPTION_COLOR"],"mappings":"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"}

package/dist/components/PopoverParts.js

@@ -1,5 +1,5 @@
-import { jsx as n, jsxs as u, Fragment as f } from "react/jsx-runtime";
-import { forwardRef as v, useContext as x, useRef as h, useLayoutEffect as b } from "react";
+import { jsx as n, jsxs as u, Fragment as v } from "react/jsx-runtime";
+import { forwardRef as x, useContext as f, useRef as h, useLayoutEffect as b } from "react";
 import { Button as g } from "./Button.js";
 import T from "./Tooltip.js";
 import { BORDER as c, NO_SCROLLBAR as N } from "./chromeStyles.js";
@@ -7,26 +7,26 @@ import { FOCUS_RING_INSET as y } from "./focusRing.js";
 import { isPlainClick as S } from "./linkClick.js";
 import { PopoverShownContext as w } from "./popoverTree.js";
 import { safeHref as R } from "./safeHref.js";
-const F = ({ title: e, action: t }) => /* @__PURE__ */ u(
+const F = ({ title: e, action: r, divider: t = !0 }) => /* @__PURE__ */ u(
   "div",
   {
-    className: `flex items-center justify-between border-0 border-b border-solid ${c} px-5 py-4 text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`,
+    className: `flex items-center justify-between border-0 ${t ? `border-b border-solid ${c} px-5 py-4` : "px-5 pt-4 pb-[4px]"} text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`,
     children: [
       /* @__PURE__ */ n("span", { children: e }),
-      t
+      r
     ]
   }
 ), E = '[aria-current]:not([aria-current="false"]):not([aria-current=""]), [aria-selected="true"], [role="radio"][aria-checked="true"]', P = ["aria-current", "aria-selected", "aria-checked"], m = (e) => {
-  const t = e.querySelector(E);
-  if (!t)
+  const r = e.querySelector(E);
+  if (!r)
     return !1;
-  const r = e.getBoundingClientRect().top + e.clientTop, { top: l, bottom: o } = t.getBoundingClientRect(), a = l - r + e.scrollTop, i = o - r + e.scrollTop;
+  const t = e.getBoundingClientRect().top + e.clientTop, { top: l, bottom: o } = r.getBoundingClientRect(), a = l - t + e.scrollTop, i = o - t + e.scrollTop;
   return a < e.scrollTop ? e.scrollTop = a : i > e.scrollTop + e.clientHeight && (e.scrollTop = i - e.clientHeight), !0;
-}, U = ({ children: e, scrollToSelected: t = !1 }) => {
-  const r = x(w), l = h(null);
+}, U = ({ children: e, scrollToSelected: r = !1 }) => {
+  const t = f(w), l = h(null);
   return b(() => {
     const o = l.current;
-    if (!t || !r || !o || m(o))
+    if (!r || !t || !o || m(o))
       return;
     const a = new MutationObserver(() => {
       m(o) && a.disconnect();
@@ -37,7 +37,7 @@ const F = ({ title: e, action: t }) => /* @__PURE__ */ u(
       attributes: !0,
       attributeFilter: P
     }), () => a.disconnect();
-  }, [t, r]), /* @__PURE__ */ n(
+  }, [r, t]), /* @__PURE__ */ n(
     "div",
     {
       ref: l,
@@ -45,8 +45,8 @@ const F = ({ title: e, action: t }) => /* @__PURE__ */ u(
       children: e
     }
   );
-}, C = v(
-  ({ children: e }, t) => /* @__PURE__ */ n("div", { ref: t, className: `border-0 border-t border-solid ${c} p-2`, children: e })
+}, C = x(
+  ({ children: e }, r) => /* @__PURE__ */ n("div", { ref: r, className: `border-0 border-t border-solid ${c} p-2`, children: e })
 );
 C.displayName = "Popover.Section";
 const M = ({ children: e }) => /* @__PURE__ */ n("div", { className: "px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none", children: e }), q = ({ children: e }) => /* @__PURE__ */ n("div", { className: "px-2 pt-2", children: e }), G = ({ children: e }) => /* @__PURE__ */ n(
@@ -55,13 +55,13 @@ const M = ({ children: e }) => /* @__PURE__ */ n("div", { className: "px-3 py-2
     className: `border-0 border-t border-solid ${c} px-5 py-3 text-[length:var(--malachite-font-size-xsmall,11px)] leading-4 text-[var(--malachite-text-secondary,rgb(123,123,123))]`,
     children: e
   }
-), O = {
+), $ = {
   default: "text-[var(--malachite-text-secondary,rgb(123,123,123))]",
   error: "text-[var(--malachite-text-error,rgb(237,53,54))]"
-}, _ = (e) => e != null && e !== !1 && e !== "", $ = v(
-  ({ message: e, tone: t = "default", action: r, focusable: l = !1 }, o) => {
-    const a = _(e);
-    return /* @__PURE__ */ u(f, { children: [
+}, O = (e) => e != null && e !== !1 && e !== "", _ = x(
+  ({ message: e, tone: r = "default", action: t, focusable: l = !1 }, o) => {
+    const a = O(e);
+    return /* @__PURE__ */ u(v, { children: [
       /* @__PURE__ */ n(
         "div",
         {
@@ -72,41 +72,41 @@ const M = ({ children: e }) => /* @__PURE__ */ n("div", { className: "px-3 py-2
           children: a && /* @__PURE__ */ n(
             "div",
             {
-              className: `px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] ${O[t]}`,
+              className: `px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] ${$[r]}`,
               children: e
             }
           )
         }
       ),
-      a && r && /* @__PURE__ */ n("div", { className: "px-3 pb-2", children: /* @__PURE__ */ n(
+      a && t && /* @__PURE__ */ n("div", { className: "px-3 pb-2", children: /* @__PURE__ */ n(
         g,
         {
           variant: "outline",
           size: "small",
-          loading: r.pending,
-          onClick: r.onClick,
-          children: r.label
+          loading: t.pending,
+          onClick: t.onClick,
+          children: t.label
         }
       ) })
     ] });
   }
 );
-$.displayName = "Popover.Status";
+_.displayName = "Popover.Status";
 const V = ({
   icon: e,
-  "aria-label": t,
-  onClick: r,
+  "aria-label": r,
+  onClick: t,
   href: l,
   disabled: o = !1,
   tooltip: a
 }) => {
-  const i = o ? void 0 : R(l), s = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${o ? "cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50" : "cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]"} ${y}`, d = i !== void 0 ? /* @__PURE__ */ n(
+  const i = o ? void 0 : R(l), s = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${o ? "cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50" : "cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]"} ${y}`, p = i !== void 0 ? /* @__PURE__ */ n(
     "a",
     {
       href: i,
-      "aria-label": t,
-      onClick: (p) => {
-        S(p) && r && (p.preventDefault(), r());
+      "aria-label": r,
+      onClick: (d) => {
+        S(d) && t && (d.preventDefault(), t());
       },
       className: `no-underline ${s}`,
       children: e
@@ -115,14 +115,14 @@ const V = ({
     "button",
     {
       type: "button",
-      "aria-label": t,
+      "aria-label": r,
       "aria-disabled": o || void 0,
-      onClick: o ? void 0 : r,
+      onClick: o ? void 0 : t,
       className: s,
       children: e
     }
   );
-  return a ? /* @__PURE__ */ n(T, { text: a, children: d }) : d;
+  return a ? /* @__PURE__ */ n(T, { text: a, children: p }) : p;
 };
 export {
   V as PopoverAction,
@@ -132,6 +132,6 @@ export {
   G as PopoverNote,
   q as PopoverSearch,
   C as PopoverSection,
-  $ as PopoverStatus
+  _ as PopoverStatus
 };
 //# sourceMappingURL=PopoverParts.js.map

package/dist/components/PopoverParts.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverParts.js","sources":["../../src/components/PopoverParts.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useLayoutEffect, useRef } from 'react';\nimport Button from './Button';\nimport Tooltip from './Tooltip';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { isPlainClick } from './linkClick';\nimport { PopoverShownContext } from './popoverTree';\nimport { safeHref } from './safeHref';\n\nexport interface PopoverHeaderProps {\n    title: string;\n    action?: React.ReactNode;\n}\n\nexport const PopoverHeader: React.FC<PopoverHeaderProps> = ({ title, action }) => (\n    <div\n        className={`flex items-center justify-between border-0 border-b border-solid ${BORDER} px-5 py-4 text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`}\n    >\n        <span>{title}</span>\n        {action}\n    </div>\n);\n\nconst SELECTED_ROW =\n    '[aria-current]:not([aria-current=\"false\"]):not([aria-current=\"\"]), [aria-selected=\"true\"], [role=\"radio\"][aria-checked=\"true\"]';\nconst SELECTION_ATTRIBUTES = ['aria-current', 'aria-selected', 'aria-checked'];\n\n// Not `scrollIntoView`: that also scrolls every scrollable ancestor, the page included.\nconst scrollSelectedRowIntoView = (list: HTMLElement): boolean => {\n    const row = list.querySelector<HTMLElement>(SELECTED_ROW);\n    if (!row) {\n        return false;\n    }\n    const listTop = list.getBoundingClientRect().top + list.clientTop;\n    const { top, bottom } = row.getBoundingClientRect();\n    const rowTop = top - listTop + list.scrollTop;\n    const rowBottom = bottom - listTop + list.scrollTop;\n    if (rowTop < list.scrollTop) {\n        list.scrollTop = rowTop;\n    } else if (rowBottom > list.scrollTop + list.clientHeight) {\n        list.scrollTop = rowBottom - list.clientHeight;\n    }\n    return true;\n};\n\nexport interface PopoverListProps {\n    children: React.ReactNode;\n    /**\n     * Scrolls the list to its selected row (`aria-current`, `aria-selected` or a checked radio)\n     * each time the popover is shown, once that row mounts. Only the list scrolls.\n     */\n    scrollToSelected?: boolean;\n}\n\nexport const PopoverList: React.FC<PopoverListProps> = ({ children, scrollToSelected = false }) => {\n    const shown = useContext(PopoverShownContext);\n    const listRef = useRef<HTMLDivElement>(null);\n\n    // Before paint, so a shown panel never draws a frame at the top and then jumps.\n    useLayoutEffect(() => {\n        const list = listRef.current;\n        if (!scrollToSelected || !shown || !list || scrollSelectedRowIntoView(list)) {\n            return;\n        }\n        const observer = new MutationObserver(() => {\n            if (scrollSelectedRowIntoView(list)) {\n                observer.disconnect();\n            }\n        });\n        observer.observe(list, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: SELECTION_ATTRIBUTES,\n        });\n        return () => observer.disconnect();\n    }, [scrollToSelected, shown]);\n\n    return (\n        <div\n            ref={listRef}\n            className={`flex max-h-80 flex-col gap-[2px] overflow-y-auto p-2 ${NO_SCROLLBAR}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport const PopoverSection = forwardRef<HTMLDivElement, { children: React.ReactNode }>(\n    ({ children }, ref) => (\n        <div ref={ref} className={`border-0 border-t border-solid ${BORDER} p-2`}>\n            {children}\n        </div>\n    ),\n);\nPopoverSection.displayName = 'Popover.Section';\n\nexport const PopoverEmpty: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none\">\n        {children}\n    </div>\n);\n\nexport const PopoverSearch: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"px-2 pt-2\">{children}</div>\n);\n\nexport const PopoverNote: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div\n        className={`border-0 border-t border-solid ${BORDER} px-5 py-3 text-[length:var(--malachite-font-size-xsmall,11px)] leading-4 text-[var(--malachite-text-secondary,rgb(123,123,123))]`}\n    >\n        {children}\n    </div>\n);\n\nexport type PopoverStatusTone = 'default' | 'error';\n\nexport interface PopoverStatusAction {\n    label: string;\n    onClick: () => void;\n    /** Shows the button's spinner and ignores clicks, e.g. while a retry is in flight. */\n    pending?: boolean;\n}\n\nexport interface PopoverStatusProps {\n    /**\n     * What the panel is waiting on, or why it is empty. Clear it rather than unmount the part:\n     * only a region already in the tree announces a new message.\n     */\n    message?: React.ReactNode;\n    tone?: PopoverStatusTone;\n    /** A button under the message that resolves it, such as Retry. Shown only with a message. */\n    action?: PopoverStatusAction;\n    /** Lets the region take focus from script (`tabIndex={-1}`), e.g. from `initialFocus`. */\n    focusable?: boolean;\n}\n\nconst STATUS_TONE_TEXT: Record<PopoverStatusTone, string> = {\n    default: 'text-[var(--malachite-text-secondary,rgb(123,123,123))]',\n    error: 'text-[var(--malachite-text-error,rgb(237,53,54))]',\n};\n\nconst hasMessage = (message: React.ReactNode): boolean =>\n    message !== undefined && message !== null && message !== false && message !== '';\n\nexport const PopoverStatus = forwardRef<HTMLDivElement, PopoverStatusProps>(\n    ({ message, tone = 'default', action, focusable = false }, ref) => {\n        const shown = hasMessage(message);\n        return (\n            <>\n                {/* Stays `status` while empty and for errors: a role or aria-hidden changed with the\n                    text is not reliably announced. No ring: a focus target, not a control. */}\n                <div\n                    ref={ref}\n                    role=\"status\"\n                    tabIndex={focusable ? -1 : undefined}\n                    className={shown ? 'outline-none' : 'sr-only'}\n                >\n                    {shown && (\n                        <div\n                            className={`px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] ${STATUS_TONE_TEXT[tone]}`}\n                        >\n                            {message}\n                        </div>\n                    )}\n                </div>\n                {shown && action && (\n                    <div className=\"px-3 pb-2\">\n                        <Button\n                            variant=\"outline\"\n                            size=\"small\"\n                            loading={action.pending}\n                            onClick={action.onClick}\n                        >\n                            {action.label}\n                        </Button>\n                    </div>\n                )}\n            </>\n        );\n    },\n);\nPopoverStatus.displayName = 'Popover.Status';\n\nexport interface PopoverActionProps {\n    icon: React.ReactNode;\n    'aria-label': string;\n    onClick?: () => void;\n    /** Renders a link; a plain click runs `onClick` instead of following it, when one is given. */\n    href?: string;\n    disabled?: boolean;\n    tooltip?: string;\n}\n\nexport const PopoverAction: React.FC<PopoverActionProps> = ({\n    icon,\n    'aria-label': ariaLabel,\n    onClick,\n    href: rawHref,\n    disabled = false,\n    tooltip,\n}) => {\n    const href = disabled ? undefined : safeHref(rawHref);\n    const className = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${disabled ? 'cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50' : `cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]`} ${FOCUS_RING_INSET}`;\n    const button =\n        href !== undefined ? (\n            <a\n                href={href}\n                aria-label={ariaLabel}\n                onClick={(event) => {\n                    if (isPlainClick(event) && onClick) {\n                        event.preventDefault();\n                        onClick();\n                    }\n                }}\n                className={`no-underline ${className}`}\n            >\n                {icon}\n            </a>\n        ) : (\n            <button\n                type=\"button\"\n                aria-label={ariaLabel}\n                aria-disabled={disabled || undefined}\n                onClick={disabled ? undefined : onClick}\n                className={className}\n            >\n                {icon}\n            </button>\n        );\n    return tooltip ? <Tooltip text={tooltip}>{button}</Tooltip> : button;\n};\n"],"names":["PopoverHeader","title","action","jsxs","BORDER","jsx","SELECTED_ROW","SELECTION_ATTRIBUTES","scrollSelectedRowIntoView","list","row","listTop","top","bottom","rowTop","rowBottom","PopoverList","children","scrollToSelected","shown","useContext","PopoverShownContext","listRef","useRef","useLayoutEffect","observer","NO_SCROLLBAR","PopoverSection","forwardRef","ref","PopoverEmpty","PopoverSearch","PopoverNote","STATUS_TONE_TEXT","hasMessage","message","PopoverStatus","tone","focusable","Fragment","Button","PopoverAction","icon","ariaLabel","onClick","rawHref","disabled","tooltip","href","safeHref","className","FOCUS_RING_INSET","button","event","isPlainClick","Tooltip"],"mappings":"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"}
+{"version":3,"file":"PopoverParts.js","sources":["../../src/components/PopoverParts.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useLayoutEffect, useRef } from 'react';\nimport Button from './Button';\nimport Tooltip from './Tooltip';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { isPlainClick } from './linkClick';\nimport { PopoverShownContext } from './popoverTree';\nimport { safeHref } from './safeHref';\n\nexport interface PopoverHeaderProps {\n    title: string;\n    action?: React.ReactNode;\n    /** `false` drops the rule and sits the header 4px over the list. */\n    divider?: boolean;\n}\n\nexport const PopoverHeader: React.FC<PopoverHeaderProps> = ({ title, action, divider = true }) => (\n    <div\n        className={`flex items-center justify-between border-0 ${divider ? `border-b border-solid ${BORDER} px-5 py-4` : 'px-5 pt-4 pb-[4px]'} text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`}\n    >\n        <span>{title}</span>\n        {action}\n    </div>\n);\n\nconst SELECTED_ROW =\n    '[aria-current]:not([aria-current=\"false\"]):not([aria-current=\"\"]), [aria-selected=\"true\"], [role=\"radio\"][aria-checked=\"true\"]';\nconst SELECTION_ATTRIBUTES = ['aria-current', 'aria-selected', 'aria-checked'];\n\n// Not `scrollIntoView`: that also scrolls every scrollable ancestor, the page included.\nconst scrollSelectedRowIntoView = (list: HTMLElement): boolean => {\n    const row = list.querySelector<HTMLElement>(SELECTED_ROW);\n    if (!row) {\n        return false;\n    }\n    const listTop = list.getBoundingClientRect().top + list.clientTop;\n    const { top, bottom } = row.getBoundingClientRect();\n    const rowTop = top - listTop + list.scrollTop;\n    const rowBottom = bottom - listTop + list.scrollTop;\n    if (rowTop < list.scrollTop) {\n        list.scrollTop = rowTop;\n    } else if (rowBottom > list.scrollTop + list.clientHeight) {\n        list.scrollTop = rowBottom - list.clientHeight;\n    }\n    return true;\n};\n\nexport interface PopoverListProps {\n    children: React.ReactNode;\n    /**\n     * Scrolls the list to its selected row (`aria-current`, `aria-selected` or a checked radio)\n     * each time the popover is shown, once that row mounts. Only the list scrolls.\n     */\n    scrollToSelected?: boolean;\n}\n\nexport const PopoverList: React.FC<PopoverListProps> = ({ children, scrollToSelected = false }) => {\n    const shown = useContext(PopoverShownContext);\n    const listRef = useRef<HTMLDivElement>(null);\n\n    // Before paint, so a shown panel never draws a frame at the top and then jumps.\n    useLayoutEffect(() => {\n        const list = listRef.current;\n        if (!scrollToSelected || !shown || !list || scrollSelectedRowIntoView(list)) {\n            return;\n        }\n        const observer = new MutationObserver(() => {\n            if (scrollSelectedRowIntoView(list)) {\n                observer.disconnect();\n            }\n        });\n        observer.observe(list, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: SELECTION_ATTRIBUTES,\n        });\n        return () => observer.disconnect();\n    }, [scrollToSelected, shown]);\n\n    return (\n        <div\n            ref={listRef}\n            className={`flex max-h-80 flex-col gap-[2px] overflow-y-auto p-2 ${NO_SCROLLBAR}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport const PopoverSection = forwardRef<HTMLDivElement, { children: React.ReactNode }>(\n    ({ children }, ref) => (\n        <div ref={ref} className={`border-0 border-t border-solid ${BORDER} p-2`}>\n            {children}\n        </div>\n    ),\n);\nPopoverSection.displayName = 'Popover.Section';\n\nexport const PopoverEmpty: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none\">\n        {children}\n    </div>\n);\n\nexport const PopoverSearch: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"px-2 pt-2\">{children}</div>\n);\n\nexport const PopoverNote: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div\n        className={`border-0 border-t border-solid ${BORDER} px-5 py-3 text-[length:var(--malachite-font-size-xsmall,11px)] leading-4 text-[var(--malachite-text-secondary,rgb(123,123,123))]`}\n    >\n        {children}\n    </div>\n);\n\nexport type PopoverStatusTone = 'default' | 'error';\n\nexport interface PopoverStatusAction {\n    label: string;\n    onClick: () => void;\n    /** Shows the button's spinner and ignores clicks, e.g. while a retry is in flight. */\n    pending?: boolean;\n}\n\nexport interface PopoverStatusProps {\n    /**\n     * What the panel is waiting on, or why it is empty. Clear it rather than unmount the part:\n     * only a region already in the tree announces a new message.\n     */\n    message?: React.ReactNode;\n    tone?: PopoverStatusTone;\n    /** A button under the message that resolves it, such as Retry. Shown only with a message. */\n    action?: PopoverStatusAction;\n    /** Lets the region take focus from script (`tabIndex={-1}`), e.g. from `initialFocus`. */\n    focusable?: boolean;\n}\n\nconst STATUS_TONE_TEXT: Record<PopoverStatusTone, string> = {\n    default: 'text-[var(--malachite-text-secondary,rgb(123,123,123))]',\n    error: 'text-[var(--malachite-text-error,rgb(237,53,54))]',\n};\n\nconst hasMessage = (message: React.ReactNode): boolean =>\n    message !== undefined && message !== null && message !== false && message !== '';\n\nexport const PopoverStatus = forwardRef<HTMLDivElement, PopoverStatusProps>(\n    ({ message, tone = 'default', action, focusable = false }, ref) => {\n        const shown = hasMessage(message);\n        return (\n            <>\n                {/* Stays `status` while empty and for errors: a role or aria-hidden changed with the\n                    text is not reliably announced. No ring: a focus target, not a control. */}\n                <div\n                    ref={ref}\n                    role=\"status\"\n                    tabIndex={focusable ? -1 : undefined}\n                    className={shown ? 'outline-none' : 'sr-only'}\n                >\n                    {shown && (\n                        <div\n                            className={`px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] ${STATUS_TONE_TEXT[tone]}`}\n                        >\n                            {message}\n                        </div>\n                    )}\n                </div>\n                {shown && action && (\n                    <div className=\"px-3 pb-2\">\n                        <Button\n                            variant=\"outline\"\n                            size=\"small\"\n                            loading={action.pending}\n                            onClick={action.onClick}\n                        >\n                            {action.label}\n                        </Button>\n                    </div>\n                )}\n            </>\n        );\n    },\n);\nPopoverStatus.displayName = 'Popover.Status';\n\nexport interface PopoverActionProps {\n    icon: React.ReactNode;\n    'aria-label': string;\n    onClick?: () => void;\n    /** Renders a link; a plain click runs `onClick` instead of following it, when one is given. */\n    href?: string;\n    disabled?: boolean;\n    tooltip?: string;\n}\n\nexport const PopoverAction: React.FC<PopoverActionProps> = ({\n    icon,\n    'aria-label': ariaLabel,\n    onClick,\n    href: rawHref,\n    disabled = false,\n    tooltip,\n}) => {\n    const href = disabled ? undefined : safeHref(rawHref);\n    const className = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${disabled ? 'cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50' : `cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]`} ${FOCUS_RING_INSET}`;\n    const button =\n        href !== undefined ? (\n            <a\n                href={href}\n                aria-label={ariaLabel}\n                onClick={(event) => {\n                    if (isPlainClick(event) && onClick) {\n                        event.preventDefault();\n                        onClick();\n                    }\n                }}\n                className={`no-underline ${className}`}\n            >\n                {icon}\n            </a>\n        ) : (\n            <button\n                type=\"button\"\n                aria-label={ariaLabel}\n                aria-disabled={disabled || undefined}\n                onClick={disabled ? undefined : onClick}\n                className={className}\n            >\n                {icon}\n            </button>\n        );\n    return tooltip ? <Tooltip text={tooltip}>{button}</Tooltip> : button;\n};\n"],"names":["PopoverHeader","title","action","divider","jsxs","BORDER","jsx","SELECTED_ROW","SELECTION_ATTRIBUTES","scrollSelectedRowIntoView","list","row","listTop","top","bottom","rowTop","rowBottom","PopoverList","children","scrollToSelected","shown","useContext","PopoverShownContext","listRef","useRef","useLayoutEffect","observer","NO_SCROLLBAR","PopoverSection","forwardRef","ref","PopoverEmpty","PopoverSearch","PopoverNote","STATUS_TONE_TEXT","hasMessage","message","PopoverStatus","tone","focusable","Fragment","Button","PopoverAction","icon","ariaLabel","onClick","rawHref","disabled","tooltip","href","safeHref","className","FOCUS_RING_INSET","button","event","isPlainClick","Tooltip"],"mappings":"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"}

package/dist/components/Search.js

@@ -1,56 +1,57 @@
-import { jsxs as M, jsx as a } from "react/jsx-runtime";
-import { forwardRef as T, useState as Z, useRef as A, useMemo as B } from "react";
-import D from "./CustomIcons/DismissIcon.js";
-import P from "./CustomIcons/SearchIcon.js";
-import { composeRefs as z } from "./composeRefs.js";
-import { CONTROL_TEXT_SIZE_CLASS as G } from "./controlTextSize.js";
-import { controlWidthStyle as L } from "./controlWidth.js";
+import { jsxs as A, jsx as a } from "react/jsx-runtime";
+import { forwardRef as B, useState as D, useRef as M, useMemo as Z } from "react";
+import z from "./CustomIcons/DismissIcon.js";
+import L from "./CustomIcons/SearchIcon.js";
+import { composeRefs as P } from "./composeRefs.js";
+import { CONTROL_TEXT_SIZE_CLASS as X } from "./controlTextSize.js";
+import { controlWidthStyle as G } from "./controlWidth.js";
 import { FOCUS_RING as U } from "./focusRing.js";
-const W = {
+const W = "text-[length:var(--malachite-font-size-medium,14px)]", Y = {
   small: "h-[var(--malachite-control-height-small,28px)] gap-[6px] px-[10px] rounded-[var(--malachite-radius-10,10px)]",
   medium: "h-[var(--malachite-control-height-medium,32px)] gap-[10px] px-[10px] rounded-xl",
   large: "h-[var(--malachite-control-height-large,42px)] gap-[12px] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]"
-}, X = 15, q = (c) => c.preventDefault(), te = T(function({
+}, q = 15, H = (c) => c.preventDefault(), oe = B(function({
   value: s,
   onChange: n,
   placeholder: i,
   size: p = "large",
   variant: g = "default",
+  textSize: S = "control",
   disabled: t = !1,
-  autoFocus: S = !1,
-  className: C = "",
-  width: y,
-  style: $,
-  clearable: E = !1,
+  autoFocus: C = !1,
+  className: y = "",
+  width: $,
+  style: E,
+  clearable: I = !1,
   onClear: o,
   onKeyDown: l,
   "aria-label": m,
   "aria-labelledby": d
 }, h) {
-  const [x, u] = Z(!1), f = A(null), I = B(() => z(h, f), [h]), b = E && s.length > 0 && !t, v = () => {
+  const [x, u] = D(!1), f = M(null), _ = Z(() => P(h, f), [h]), b = I && s.length > 0 && !t, v = () => {
     var e;
     n(""), o == null || o(), (e = f.current) == null || e.focus();
   }, k = (e) => {
     l == null || l(e);
     const j = e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
     e.key !== "Escape" || e.defaultPrevented || j || !b || (e.preventDefault(), e.stopPropagation(), v());
-  }, r = g === "muted", w = r ? "bg-[var(--malachite-card-border)]" : "bg-[var(--malachite-card-background)]", N = r ? "border-transparent" : "border-[var(--malachite-card-border)]", R = t ? "" : "hover:border-[var(--malachite-text-placeholder)]", _ = r ? "text-[var(--malachite-text-secondary)]" : "text-[var(--malachite-text-placeholder)]", F = r ? "placeholder:text-[var(--malachite-text-secondary)]" : "placeholder:text-[var(--malachite-text-placeholder)]", O = r ? "none" : x ? "var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))" : "0px 1px 1px 0px rgba(0, 0, 0, 0.15)";
-  return /* @__PURE__ */ M(
+  }, r = g === "muted", w = r ? "bg-[var(--malachite-card-border)]" : "bg-[var(--malachite-card-background)]", N = r ? "border-transparent" : "border-[var(--malachite-card-border)]", R = t ? "" : "hover:border-[var(--malachite-text-placeholder)]", O = r ? "text-[var(--malachite-text-secondary)]" : "text-[var(--malachite-text-placeholder)]", T = r ? "placeholder:text-[var(--malachite-text-secondary)]" : "placeholder:text-[var(--malachite-text-placeholder)]", F = r ? "none" : x ? "var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))" : "0px 1px 1px 0px rgba(0, 0, 0, 0.15)";
+  return /* @__PURE__ */ A(
     "div",
     {
-      className: `w-full ${w} border border-solid ${N} ${R} transition-colors flex items-center ${W[p]} ${t ? "opacity-60 cursor-not-allowed" : ""} ${C}`,
+      className: `w-full ${w} border border-solid ${N} ${R} transition-colors flex items-center ${Y[p]} ${t ? "opacity-60 cursor-not-allowed" : ""} ${y}`,
       style: {
-        boxShadow: O,
+        boxShadow: F,
         borderColor: x ? "var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))" : void 0,
-        ...L(y),
-        ...$
+        ...G($),
+        ...E
       },
       children: [
-        /* @__PURE__ */ a(P, { size: X, className: `${_} shrink-0` }),
+        /* @__PURE__ */ a(L, { size: q, className: `${O} shrink-0` }),
         /* @__PURE__ */ a(
           "input",
           {
-            ref: I,
+            ref: _,
             type: "text",
             value: s,
             onChange: (e) => n(e.target.value),
@@ -61,8 +62,8 @@ const W = {
             "aria-label": d ? m : m ?? i ?? "Search",
             "aria-labelledby": d,
             disabled: t,
-            autoFocus: S,
-            className: `flex-1 bg-transparent border-none outline-none ${G[p]} font-medium text-[var(--malachite-text-primary)] ${F} placeholder:font-medium disabled:cursor-not-allowed min-w-0`
+            autoFocus: C,
+            className: `flex-1 bg-transparent border-none outline-none ${S === "body" ? W : X[p]} font-medium text-[var(--malachite-text-primary)] ${T} placeholder:font-medium disabled:cursor-not-allowed min-w-0`
           }
         ),
         b && /* @__PURE__ */ a(
@@ -70,10 +71,10 @@ const W = {
           {
             type: "button",
             "aria-label": "Clear search",
-            onMouseDown: q,
+            onMouseDown: H,
             onClick: v,
             className: `shrink-0 flex items-center justify-center w-6 h-6 -mr-[5px] bg-transparent border-none rounded text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer ${U}`,
-            children: /* @__PURE__ */ a(D, { size: 10 })
+            children: /* @__PURE__ */ a(z, { size: 10 })
           }
         )
       ]
@@ -81,7 +82,7 @@ const W = {
   );
 });
 export {
-  te as Search,
-  te as default
+  oe as Search,
+  oe as default
 };
 //# sourceMappingURL=Search.js.map

package/dist/components/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../src/components/Search.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef, useState } from 'react';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport SearchIcon from './CustomIcons/SearchIcon';\nimport { composeRefs } from './composeRefs';\nimport { CONTROL_TEXT_SIZE_CLASS } from './controlTextSize';\nimport { controlWidthStyle } from './controlWidth';\nimport { FOCUS_RING } from './focusRing';\n\nexport type SearchSize = 'small' | 'medium' | 'large';\nexport type SearchVariant = 'default' | 'muted';\n\n// Figma \"Search Element - Standard\": Small 28px, Medium 32px, Large 42px, with the radius\n// tracking the tier (10/12/14) and the icon staying 15px throughout.\nconst SIZE_CLASSES: Record<SearchSize, string> = {\n    small: 'h-[var(--malachite-control-height-small,28px)] gap-[6px] px-[10px] rounded-[var(--malachite-radius-10,10px)]',\n    medium: 'h-[var(--malachite-control-height-medium,32px)] gap-[10px] px-[10px] rounded-xl',\n    large: 'h-[var(--malachite-control-height-large,42px)] gap-[12px] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]',\n};\n\nconst ICON_SIZE = 15;\n\nexport interface SearchProps {\n    value: string;\n    onChange: (value: string) => void;\n    placeholder?: string;\n    /** 'large' (42px) for form inputs; 'medium' (32px) for toolbars; 'small' (28px) in a table. */\n    size?: SearchSize;\n    variant?: SearchVariant;\n    disabled?: boolean;\n    autoFocus?: boolean;\n    className?: string;\n    width?: string | number;\n    style?: React.CSSProperties;\n    /**\n     * Shows a clear button while the field has text, and lets Escape clear it. Either way focus\n     * stays in the field, and Escape that clears is not also passed to a surrounding panel.\n     */\n    clearable?: boolean;\n    /** Called after `onChange('')` when the clear button or Escape empties the field. */\n    onClear?: () => void;\n    /** Runs before Search's own Escape handling; call `preventDefault()` to skip it. */\n    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n    /** The field's accessible name. Falls back to the placeholder, then \"Search\". */\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\nconst keepFocus = (event: React.MouseEvent) => event.preventDefault();\n\n/** Forwards a ref to the input, so a consumer can focus the field. */\nconst Search = forwardRef<HTMLInputElement, SearchProps>(function Search(\n    {\n        value,\n        onChange,\n        placeholder,\n        size = 'large',\n        variant = 'default',\n        disabled = false,\n        autoFocus = false,\n        className = '',\n        width,\n        style,\n        clearable = false,\n        onClear,\n        onKeyDown,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n    },\n    ref,\n) {\n    const [focused, setFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const setInputRef = useMemo(() => composeRefs(ref, inputRef), [ref]);\n    const canClear = clearable && value.length > 0 && !disabled;\n\n    const clear = () => {\n        onChange('');\n        onClear?.();\n        inputRef.current?.focus();\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        onKeyDown?.(event);\n        // Escape mid-composition cancels the IME's candidate text, not the query.\n        const composing = event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;\n        if (event.key !== 'Escape' || event.defaultPrevented || composing || !canClear) {\n            return;\n        }\n        // Both, as Dropdown does: an ancestor's own onKeyDown runs before the escape layers.\n        event.preventDefault();\n        event.stopPropagation();\n        clear();\n    };\n    const isMuted = variant === 'muted';\n\n    // Muted variant: a borderless search that sits on a surface (no shadow). Default:\n    // white field with border + subtle shadow. Both keep a visible focus border.\n    // The fill is the Border colour by design; the dimmed grey vanishes on a sunken page.\n    const bgClass = isMuted\n        ? 'bg-[var(--malachite-card-border)]'\n        : 'bg-[var(--malachite-card-background)]';\n    const restingBorderClass = isMuted\n        ? 'border-transparent'\n        : 'border-[var(--malachite-card-border)]';\n    // Hover darkens the border; focus (inline below) takes precedence.\n    const hoverBorderClass = disabled ? '' : 'hover:border-[var(--malachite-text-placeholder)]';\n    const iconColorClass = isMuted\n        ? 'text-[var(--malachite-text-secondary)]'\n        : 'text-[var(--malachite-text-placeholder)]';\n    const placeholderColorClass = isMuted\n        ? 'placeholder:text-[var(--malachite-text-secondary)]'\n        : 'placeholder:text-[var(--malachite-text-placeholder)]';\n    const boxShadow = isMuted\n        ? 'none'\n        : focused\n          ? 'var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))'\n          : '0px 1px 1px 0px rgba(0, 0, 0, 0.15)';\n\n    return (\n        <div\n            className={`w-full ${bgClass} border border-solid ${restingBorderClass} ${hoverBorderClass} transition-colors flex items-center ${SIZE_CLASSES[size]} ${disabled ? 'opacity-60 cursor-not-allowed' : ''} ${className}`}\n            style={{\n                boxShadow,\n                borderColor: focused\n                    ? 'var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))'\n                    : undefined,\n                ...controlWidthStyle(width),\n                ...style,\n            }}\n        >\n            <SearchIcon size={ICON_SIZE} className={`${iconColorClass} shrink-0`} />\n            <input\n                ref={setInputRef}\n                type=\"text\"\n                value={value}\n                onChange={(e) => onChange(e.target.value)}\n                onKeyDown={handleKeyDown}\n                onFocus={() => setFocused(true)}\n                onBlur={() => setFocused(false)}\n                placeholder={placeholder}\n                aria-label={ariaLabelledBy ? ariaLabel : (ariaLabel ?? placeholder ?? 'Search')}\n                aria-labelledby={ariaLabelledBy}\n                disabled={disabled}\n                autoFocus={autoFocus}\n                className={`flex-1 bg-transparent border-none outline-none ${CONTROL_TEXT_SIZE_CLASS[size]} font-medium text-[var(--malachite-text-primary)] ${placeholderColorClass} placeholder:font-medium disabled:cursor-not-allowed min-w-0`}\n            />\n            {canClear && (\n                <button\n                    type=\"button\"\n                    aria-label=\"Clear search\"\n                    onMouseDown={keepFocus}\n                    onClick={clear}\n                    className={`shrink-0 flex items-center justify-center w-6 h-6 -mr-[5px] bg-transparent border-none rounded text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer ${FOCUS_RING}`}\n                >\n                    <DismissIcon size={10} />\n                </button>\n            )}\n        </div>\n    );\n});\n\nexport default Search;\nexport { Search };\n"],"names":["SIZE_CLASSES","ICON_SIZE","keepFocus","event","Search","forwardRef","value","onChange","placeholder","size","variant","disabled","autoFocus","className","width","style","clearable","onClear","onKeyDown","ariaLabel","ariaLabelledBy","ref","focused","setFocused","useState","inputRef","useRef","setInputRef","useMemo","composeRefs","canClear","clear","_a","handleKeyDown","composing","isMuted","bgClass","restingBorderClass","hoverBorderClass","iconColorClass","placeholderColorClass","boxShadow","jsxs","controlWidthStyle","jsx","SearchIcon","CONTROL_TEXT_SIZE_CLASS","FOCUS_RING","DismissIcon"],"mappings":";;;;;;;;AAaA,MAAMA,IAA2C;AAAA,EAC7C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAEMC,IAAY,IA4BZC,IAAY,CAACC,MAA4BA,EAAM,eAAA,GAG/CC,KAASC,EAA0C,SACrD;AAAA,EACI,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAcC;AAAA,EACd,mBAAmBC;AACvB,GACAC,GACF;AACE,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAWC,EAAyB,IAAI,GACxCC,IAAcC,EAAQ,MAAMC,EAAYR,GAAKI,CAAQ,GAAG,CAACJ,CAAG,CAAC,GAC7DS,IAAWd,KAAaV,EAAM,SAAS,KAAK,CAACK,GAE7CoB,IAAQ,MAAM;;AAChB,IAAAxB,EAAS,EAAE,GACXU,KAAA,QAAAA,MACAe,IAAAP,EAAS,YAAT,QAAAO,EAAkB;AAAA,EACtB,GAEMC,IAAgB,CAAC9B,MAAiD;AACpE,IAAAe,KAAA,QAAAA,EAAYf;AAEZ,UAAM+B,IAAY/B,EAAM,YAAY,eAAeA,EAAM,YAAY,YAAY;AACjF,IAAIA,EAAM,QAAQ,YAAYA,EAAM,oBAAoB+B,KAAa,CAACJ,MAItE3B,EAAM,eAAA,GACNA,EAAM,gBAAA,GACN4B,EAAA;AAAA,EACJ,GACMI,IAAUzB,MAAY,SAKtB0B,IAAUD,IACV,sCACA,yCACAE,IAAqBF,IACrB,uBACA,yCAEAG,IAAmB3B,IAAW,KAAK,oDACnC4B,IAAiBJ,IACjB,2CACA,4CACAK,IAAwBL,IACxB,uDACA,wDACAM,IAAYN,IACZ,SACAb,IACE,4EACA;AAER,SACI,gBAAAoB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,UAAUN,CAAO,wBAAwBC,CAAkB,IAAIC,CAAgB,wCAAwCtC,EAAaS,CAAI,CAAC,IAAIE,IAAW,kCAAkC,EAAE,IAAIE,CAAS;AAAA,MACpN,OAAO;AAAA,QACH,WAAA4B;AAAA,QACA,aAAanB,IACP,kEACA;AAAA,QACN,GAAGqB,EAAkB7B,CAAK;AAAA,QAC1B,GAAGC;AAAA,MAAA;AAAA,MAGP,UAAA;AAAA,QAAA,gBAAA6B,EAACC,KAAW,MAAM5C,GAAW,WAAW,GAAGsC,CAAc,aAAa;AAAA,QACtE,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,KAAKjB;AAAA,YACL,MAAK;AAAA,YACL,OAAArB;AAAA,YACA,UAAU,CAAC,MAAMC,EAAS,EAAE,OAAO,KAAK;AAAA,YACxC,WAAW0B;AAAA,YACX,SAAS,MAAMV,EAAW,EAAI;AAAA,YAC9B,QAAQ,MAAMA,EAAW,EAAK;AAAA,YAC9B,aAAAf;AAAA,YACA,cAAYY,IAAiBD,IAAaA,KAAaX,KAAe;AAAA,YACtE,mBAAiBY;AAAA,YACjB,UAAAT;AAAA,YACA,WAAAC;AAAA,YACA,WAAW,kDAAkDkC,EAAwBrC,CAAI,CAAC,qDAAqD+B,CAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEvKV,KACG,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,cAAW;AAAA,YACX,aAAa1C;AAAA,YACb,SAAS6B;AAAA,YACT,WAAW,qMAAqMgB,CAAU;AAAA,YAE1N,UAAA,gBAAAH,EAACI,GAAA,EAAY,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3B;AAAA,IAAA;AAAA,EAAA;AAIhB,CAAC;"}
+{"version":3,"file":"Search.js","sources":["../../src/components/Search.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef, useState } from 'react';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport SearchIcon from './CustomIcons/SearchIcon';\nimport { composeRefs } from './composeRefs';\nimport { CONTROL_TEXT_SIZE_CLASS } from './controlTextSize';\nimport { controlWidthStyle } from './controlWidth';\nimport { FOCUS_RING } from './focusRing';\n\nexport type SearchSize = 'small' | 'medium' | 'large';\nexport type SearchVariant = 'default' | 'muted';\n/** `body` is the 14px body step at any size. */\nexport type SearchTextSize = 'control' | 'body';\n\nconst BODY_TEXT_CLASS = 'text-[length:var(--malachite-font-size-medium,14px)]';\n\n// Figma \"Search Element - Standard\": Small 28px, Medium 32px, Large 42px, with the radius\n// tracking the tier (10/12/14) and the icon staying 15px throughout.\nconst SIZE_CLASSES: Record<SearchSize, string> = {\n    small: 'h-[var(--malachite-control-height-small,28px)] gap-[6px] px-[10px] rounded-[var(--malachite-radius-10,10px)]',\n    medium: 'h-[var(--malachite-control-height-medium,32px)] gap-[10px] px-[10px] rounded-xl',\n    large: 'h-[var(--malachite-control-height-large,42px)] gap-[12px] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]',\n};\n\nconst ICON_SIZE = 15;\n\nexport interface SearchProps {\n    value: string;\n    onChange: (value: string) => void;\n    placeholder?: string;\n    /** 'large' (42px) for form inputs; 'medium' (32px) for toolbars; 'small' (28px) in a table. */\n    size?: SearchSize;\n    variant?: SearchVariant;\n    textSize?: SearchTextSize;\n    disabled?: boolean;\n    autoFocus?: boolean;\n    className?: string;\n    width?: string | number;\n    style?: React.CSSProperties;\n    /**\n     * Shows a clear button while the field has text, and lets Escape clear it. Either way focus\n     * stays in the field, and Escape that clears is not also passed to a surrounding panel.\n     */\n    clearable?: boolean;\n    /** Called after `onChange('')` when the clear button or Escape empties the field. */\n    onClear?: () => void;\n    /** Runs before Search's own Escape handling; call `preventDefault()` to skip it. */\n    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n    /** The field's accessible name. Falls back to the placeholder, then \"Search\". */\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\nconst keepFocus = (event: React.MouseEvent) => event.preventDefault();\n\n/** Forwards a ref to the input, so a consumer can focus the field. */\nconst Search = forwardRef<HTMLInputElement, SearchProps>(function Search(\n    {\n        value,\n        onChange,\n        placeholder,\n        size = 'large',\n        variant = 'default',\n        textSize = 'control',\n        disabled = false,\n        autoFocus = false,\n        className = '',\n        width,\n        style,\n        clearable = false,\n        onClear,\n        onKeyDown,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n    },\n    ref,\n) {\n    const [focused, setFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const setInputRef = useMemo(() => composeRefs(ref, inputRef), [ref]);\n    const canClear = clearable && value.length > 0 && !disabled;\n\n    const clear = () => {\n        onChange('');\n        onClear?.();\n        inputRef.current?.focus();\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        onKeyDown?.(event);\n        // Escape mid-composition cancels the IME's candidate text, not the query.\n        const composing = event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;\n        if (event.key !== 'Escape' || event.defaultPrevented || composing || !canClear) {\n            return;\n        }\n        // Both, as Dropdown does: an ancestor's own onKeyDown runs before the escape layers.\n        event.preventDefault();\n        event.stopPropagation();\n        clear();\n    };\n    const isMuted = variant === 'muted';\n\n    // Muted variant: a borderless search that sits on a surface (no shadow). Default:\n    // white field with border + subtle shadow. Both keep a visible focus border.\n    // The fill is the Border colour by design; the dimmed grey vanishes on a sunken page.\n    const bgClass = isMuted\n        ? 'bg-[var(--malachite-card-border)]'\n        : 'bg-[var(--malachite-card-background)]';\n    const restingBorderClass = isMuted\n        ? 'border-transparent'\n        : 'border-[var(--malachite-card-border)]';\n    // Hover darkens the border; focus (inline below) takes precedence.\n    const hoverBorderClass = disabled ? '' : 'hover:border-[var(--malachite-text-placeholder)]';\n    const iconColorClass = isMuted\n        ? 'text-[var(--malachite-text-secondary)]'\n        : 'text-[var(--malachite-text-placeholder)]';\n    const placeholderColorClass = isMuted\n        ? 'placeholder:text-[var(--malachite-text-secondary)]'\n        : 'placeholder:text-[var(--malachite-text-placeholder)]';\n    const boxShadow = isMuted\n        ? 'none'\n        : focused\n          ? 'var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))'\n          : '0px 1px 1px 0px rgba(0, 0, 0, 0.15)';\n\n    return (\n        <div\n            className={`w-full ${bgClass} border border-solid ${restingBorderClass} ${hoverBorderClass} transition-colors flex items-center ${SIZE_CLASSES[size]} ${disabled ? 'opacity-60 cursor-not-allowed' : ''} ${className}`}\n            style={{\n                boxShadow,\n                borderColor: focused\n                    ? 'var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))'\n                    : undefined,\n                ...controlWidthStyle(width),\n                ...style,\n            }}\n        >\n            <SearchIcon size={ICON_SIZE} className={`${iconColorClass} shrink-0`} />\n            <input\n                ref={setInputRef}\n                type=\"text\"\n                value={value}\n                onChange={(e) => onChange(e.target.value)}\n                onKeyDown={handleKeyDown}\n                onFocus={() => setFocused(true)}\n                onBlur={() => setFocused(false)}\n                placeholder={placeholder}\n                aria-label={ariaLabelledBy ? ariaLabel : (ariaLabel ?? placeholder ?? 'Search')}\n                aria-labelledby={ariaLabelledBy}\n                disabled={disabled}\n                autoFocus={autoFocus}\n                className={`flex-1 bg-transparent border-none outline-none ${textSize === 'body' ? BODY_TEXT_CLASS : CONTROL_TEXT_SIZE_CLASS[size]} font-medium text-[var(--malachite-text-primary)] ${placeholderColorClass} placeholder:font-medium disabled:cursor-not-allowed min-w-0`}\n            />\n            {canClear && (\n                <button\n                    type=\"button\"\n                    aria-label=\"Clear search\"\n                    onMouseDown={keepFocus}\n                    onClick={clear}\n                    className={`shrink-0 flex items-center justify-center w-6 h-6 -mr-[5px] bg-transparent border-none rounded text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer ${FOCUS_RING}`}\n                >\n                    <DismissIcon size={10} />\n                </button>\n            )}\n        </div>\n    );\n});\n\nexport default Search;\nexport { Search };\n"],"names":["BODY_TEXT_CLASS","SIZE_CLASSES","ICON_SIZE","keepFocus","event","Search","forwardRef","value","onChange","placeholder","size","variant","textSize","disabled","autoFocus","className","width","style","clearable","onClear","onKeyDown","ariaLabel","ariaLabelledBy","ref","focused","setFocused","useState","inputRef","useRef","setInputRef","useMemo","composeRefs","canClear","clear","_a","handleKeyDown","composing","isMuted","bgClass","restingBorderClass","hoverBorderClass","iconColorClass","placeholderColorClass","boxShadow","jsxs","controlWidthStyle","jsx","SearchIcon","CONTROL_TEXT_SIZE_CLASS","FOCUS_RING","DismissIcon"],"mappings":"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"}

package/dist/components/StatusPill.js

@@ -0,0 +1,61 @@
+import { jsxs as o, jsx as r, Fragment as p } from "react/jsx-runtime";
+import u from "./CustomIcons/CheckCircleFilled.js";
+import x from "./CustomIcons/ErrorCircleFilled.js";
+import g from "./CustomIcons/InfoCircleFilled.js";
+import f from "./CustomIcons/WarningCircleFilled.js";
+import h from "./Spinner.js";
+const b = {
+  success: "bg-[var(--malachite-alert-success-background)] text-[var(--malachite-alert-success-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-success-foreground)_70%,var(--malachite-text-primary))]",
+  neutral: "bg-[var(--malachite-alert-info-background)] text-[var(--malachite-alert-info-foreground)]",
+  warning: "bg-[var(--malachite-alert-warning-background)] text-[var(--malachite-alert-warning-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-warning-foreground)_70%,var(--malachite-text-primary))]",
+  error: "bg-[var(--malachite-alert-error-background)] text-[var(--malachite-alert-error-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-error-foreground)_70%,var(--malachite-text-primary))]"
+}, v = {
+  success: u,
+  neutral: g,
+  warning: f,
+  error: x
+}, _ = "border border-solid border-[var(--malachite-card-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,currentColor_24%,transparent)]", F = ({
+  label: n,
+  detail: l,
+  tone: i = "neutral",
+  icon: s,
+  busy: e = !1,
+  live: a = !1,
+  "aria-label": c,
+  "aria-labelledby": t,
+  className: m = ""
+}) => {
+  const d = v[i];
+  return /* @__PURE__ */ o(
+    "span",
+    {
+      role: a ? "status" : void 0,
+      "aria-label": a && !t ? c : void 0,
+      "aria-labelledby": a ? t : void 0,
+      "aria-busy": e || void 0,
+      className: `inline-flex items-center gap-[6px] h-[28px] max-w-full min-w-0 pl-[8px] pr-[10px] rounded-full overflow-hidden whitespace-nowrap text-[12px] font-medium ${_} ${b[i]} ${m}`,
+      children: [
+        /* @__PURE__ */ r(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `inline-flex shrink-0 items-center justify-center size-[16px] ${e ? "" : "[&_svg]:size-full!"}`,
+            children: e ? /* @__PURE__ */ r(h, { size: "xxxsmall" }) : s ?? /* @__PURE__ */ r(d, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ o("span", { className: "min-w-0 overflow-hidden text-ellipsis", children: [
+          n,
+          l ? /* @__PURE__ */ o(p, { children: [
+            " · ",
+            /* @__PURE__ */ r("span", { className: "font-mono", children: l })
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+};
+export {
+  F as StatusPill,
+  F as default
+};
+//# sourceMappingURL=StatusPill.js.map

package/dist/components/StatusPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPill.js","sources":["../../src/components/StatusPill.tsx"],"sourcesContent":["import React from 'react';\nimport CheckCircleFilled, { type IconProps } from './CustomIcons/CheckCircleFilled';\nimport ErrorCircleFilled from './CustomIcons/ErrorCircleFilled';\nimport InfoCircleFilled from './CustomIcons/InfoCircleFilled';\nimport WarningCircleFilled from './CustomIcons/WarningCircleFilled';\nimport Spinner from './Spinner';\n\nexport type StatusPillTone = 'success' | 'neutral' | 'warning' | 'error';\n\nexport interface StatusPillProps {\n    label: string;\n    /** Set in the mono face after a `·`. */\n    detail?: string;\n    tone?: StatusPillTone;\n    icon?: React.ReactNode;\n    busy?: boolean;\n    /** Makes it a `status` live region. Off by default, as on `Alert`. */\n    live?: boolean;\n    /** Names the live region; only applies with `live`. */\n    'aria-label'?: string;\n    /** Only applies with `live`. */\n    'aria-labelledby'?: string;\n    className?: string;\n}\n\n// Text leans 30% toward the primary colour so every tone holds 4.5:1 on its tint.\nconst TONE_CLASSES: Record<StatusPillTone, string> = {\n    success:\n        'bg-[var(--malachite-alert-success-background)] text-[var(--malachite-alert-success-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-success-foreground)_70%,var(--malachite-text-primary))]',\n    neutral:\n        'bg-[var(--malachite-alert-info-background)] text-[var(--malachite-alert-info-foreground)]',\n    warning:\n        'bg-[var(--malachite-alert-warning-background)] text-[var(--malachite-alert-warning-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-warning-foreground)_70%,var(--malachite-text-primary))]',\n    error: 'bg-[var(--malachite-alert-error-background)] text-[var(--malachite-alert-error-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-error-foreground)_70%,var(--malachite-text-primary))]',\n};\n\nconst TONE_ICONS: Record<StatusPillTone, React.FC<IconProps>> = {\n    success: CheckCircleFilled,\n    neutral: InfoCircleFilled,\n    warning: WarningCircleFilled,\n    error: ErrorCircleFilled,\n};\n\nconst BORDER =\n    'border border-solid border-[var(--malachite-card-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,currentColor_24%,transparent)]';\n\nconst StatusPill: React.FC<StatusPillProps> = ({\n    label,\n    detail,\n    tone = 'neutral',\n    icon,\n    busy = false,\n    live = false,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n}) => {\n    const ToneIcon = TONE_ICONS[tone];\n\n    return (\n        <span\n            role={live ? 'status' : undefined}\n            aria-label={live && !ariaLabelledBy ? ariaLabel : undefined}\n            aria-labelledby={live ? ariaLabelledBy : undefined}\n            aria-busy={busy || undefined}\n            className={`inline-flex items-center gap-[6px] h-[28px] max-w-full min-w-0 pl-[8px] pr-[10px] rounded-full overflow-hidden whitespace-nowrap text-[12px] font-medium ${BORDER} ${TONE_CLASSES[tone]} ${className}`}\n        >\n            <span\n                aria-hidden=\"true\"\n                className={`inline-flex shrink-0 items-center justify-center size-[16px] ${busy ? '' : '[&_svg]:size-full!'}`}\n            >\n                {busy ? <Spinner size=\"xxxsmall\" /> : (icon ?? <ToneIcon size={16} />)}\n            </span>\n            <span className=\"min-w-0 overflow-hidden text-ellipsis\">\n                {label}\n                {detail ? (\n                    <>\n                        {' · '}\n                        <span className=\"font-mono\">{detail}</span>\n                    </>\n                ) : null}\n            </span>\n        </span>\n    );\n};\n\nexport default StatusPill;\nexport { StatusPill };\n"],"names":["TONE_CLASSES","TONE_ICONS","CheckCircleFilled","InfoCircleFilled","WarningCircleFilled","ErrorCircleFilled","BORDER","StatusPill","label","detail","tone","icon","busy","live","ariaLabel","ariaLabelledBy","className","ToneIcon","jsxs","jsx","Spinner","Fragment"],"mappings":";;;;;;AA0BA,MAAMA,IAA+C;AAAA,EACjD,SACI;AAAA,EACJ,SACI;AAAA,EACJ,SACI;AAAA,EACJ,OAAO;AACX,GAEMC,IAA0D;AAAA,EAC5D,SAASC;AAAA,EACT,SAASC;AAAA,EACT,SAASC;AAAA,EACT,OAAOC;AACX,GAEMC,IACF,kKAEEC,IAAwC,CAAC;AAAA,EAC3C,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,cAAcC;AAAA,EACd,mBAAmBC;AAAA,EACnB,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAWhB,EAAWS,CAAI;AAEhC,SACI,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAML,IAAO,WAAW;AAAA,MACxB,cAAYA,KAAQ,CAACE,IAAiBD,IAAY;AAAA,MAClD,mBAAiBD,IAAOE,IAAiB;AAAA,MACzC,aAAWH,KAAQ;AAAA,MACnB,WAAW,4JAA4JN,CAAM,IAAIN,EAAaU,CAAI,CAAC,IAAIM,CAAS;AAAA,MAEhN,UAAA;AAAA,QAAA,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,eAAY;AAAA,YACZ,WAAW,gEAAgEP,IAAO,KAAK,oBAAoB;AAAA,YAE1G,UAAAA,IAAO,gBAAAO,EAACC,GAAA,EAAQ,MAAK,YAAW,IAAMT,KAAQ,gBAAAQ,EAACF,GAAA,EAAS,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAEvE,gBAAAC,EAAC,QAAA,EAAK,WAAU,yCACX,UAAA;AAAA,UAAAV;AAAA,UACAC,IACG,gBAAAS,EAAAG,GAAA,EACK,UAAA;AAAA,YAAA;AAAA,YACD,gBAAAF,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAV,EAAA,CAAO;AAAA,UAAA,EAAA,CACxC,IACA;AAAA,QAAA,EAAA,CACR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;"}