tempest-react-sdk 0.77.0 → 0.79.0

package/dist/components/ToggleGroup/ToggleGroup.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.module.js","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.module.css"],"sourcesContent":[".group {\n    display: inline-flex;\n    align-items: stretch;\n    gap: 0;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    overflow: hidden;\n}\n\n.item {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    min-height: 2.25rem;\n    padding: 0 var(--tempest-space-3);\n    border: none;\n    border-left: 1px solid var(--tempest-border);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    cursor: pointer;\n    transition:\n        var(--tempest-transition-color),\n        background-color var(--tempest-duration-base) var(--tempest-ease-emphasized);\n    white-space: nowrap;\n}\n\n.item:first-child {\n    border-left: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .item:hover {\n        background-color: var(--tempest-surface-2);\n    }\n}\n\n.item:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: -2px;\n    z-index: 1;\n}\n\n.item:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.selected {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .selected:hover {\n        background-color: var(--tempest-primary-soft-hover, var(--tempest-primary-soft));\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"ToggleGroup.module.js","names":["group","item","selected","ToggleGroup_module_default"],"sources":["../../../src/components/ToggleGroup/ToggleGroup.module.css"],"sourcesContent":[".group {\n    display: inline-flex;\n    align-items: stretch;\n    gap: 0;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    overflow: hidden;\n}\n\n.item {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    min-height: 2.25rem;\n    padding: 0 var(--tempest-space-3);\n    border: none;\n    border-left: 1px solid var(--tempest-border);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    cursor: pointer;\n    transition:\n        var(--tempest-transition-color),\n        background-color var(--tempest-duration-base) var(--tempest-ease-emphasized);\n    white-space: nowrap;\n}\n\n.item:first-child {\n    border-left: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .item:hover {\n        background-color: var(--tempest-surface-2);\n    }\n}\n\n.item:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: -2px;\n    z-index: 1;\n}\n\n.item:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.selected {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .selected:hover {\n        background-color: var(--tempest-primary-soft-hover, var(--tempest-primary-soft));\n    }\n}\n"],"mappings":";"}

package/dist/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","names":[],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* eslint-disable react-hooks/refs -- the handlers below read the timer ref, and they only\n   run on user events (hover/focus), never during render */\nimport { cloneElement, useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Tooltip.module.css\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipProps {\n    /** Tooltip content. Plain text recommended; rich content also works. */\n    content: ReactNode;\n    /** Placement relative to the trigger. Default: `\"top\"`. */\n    placement?: TooltipPlacement;\n    /** Single React element to attach hover/focus listeners to. */\n    children: ReactElement;\n    /** Disable the tooltip without changing the trigger. */\n    disabled?: boolean;\n    /** Delay (ms) before showing the tooltip. Default: 150. */\n    openDelay?: number;\n    /**\n     * Render the bubble in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the bubble —\n     * a `DataTable` cell cut it 23 px short (measured in Chrome at 1440 px). In a\n     * portal it escapes the clip and flips to the opposite side at the viewport\n     * edge. `false` keeps the in-flow bubble.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and bubble, in px — the in-flow CSS uses the same 8 px. */\nconst TOOLTIP_OFFSET = 8;\n\n/**\n * Lightweight tooltip. Shows on hover and on focus (keyboard-friendly). Wraps\n * a single child element via `cloneElement`, so the trigger keeps its own ref\n * and props.\n *\n * `Escape` hides it without moving the pointer or the focus, which is what\n * WCAG 2.2 SC 1.4.13 (Content on Hover or Focus) asks of content that appears on\n * hover. It is an `Escape` layer like the overlays, so inside a `Modal` the first\n * press hides the tooltip and the second closes the modal.\n */\nexport function Tooltip({\n    content,\n    placement = \"top\",\n    children,\n    disabled = false,\n    openDelay = 150,\n    portal = true,\n}: TooltipProps) {\n    const [open, setOpen] = useState<boolean>(false);\n    const [triggerNode, setTriggerNode] = useState<HTMLSpanElement | null>(null);\n    const [bubbleNode, setBubbleNode] = useState<HTMLSpanElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: triggerNode,\n        floating: bubbleNode,\n        side: placement,\n        align: \"center\",\n        offset: TOOLTIP_OFFSET,\n        enabled: portal && open,\n    });\n    const tooltipId = useId();\n    /**\n     * Handle of the pending open timer.\n     *\n     * A ref, not a `let` in the component body: that binding is recreated on every\n     * render, so any re-render between `show` and `hide` (a parent update, a state\n     * change elsewhere) dropped the handle and `clearTimeout` silently cancelled\n     * nothing — the tooltip then opened after the pointer had already left.\n     */\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    function clearTimer(): void {\n        if (timerRef.current !== null) {\n            clearTimeout(timerRef.current);\n            timerRef.current = null;\n        }\n    }\n\n    function show(): void {\n        if (disabled) return;\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(true), openDelay);\n    }\n\n    function hide(): void {\n        clearTimer();\n        setOpen(false);\n    }\n\n    useEffect(() => {\n        return () => {\n            clearTimer();\n        };\n    }, []);\n\n    useEscapeLayer(open, hide);\n\n    const trigger = cloneElement(children, {\n        onMouseEnter: show,\n        onMouseLeave: hide,\n        onFocus: show,\n        onBlur: hide,\n        \"aria-describedby\": open ? tooltipId : undefined,\n    } as Record<string, unknown>);\n\n    const bubble = (\n        <span\n            ref={setBubbleNode}\n            id={tooltipId}\n            role=\"tooltip\"\n            className={cn(styles.bubble, styles[placement], portal && styles.portalled)}\n            style={floatingStyle}\n        >\n            {content}\n        </span>\n    );\n\n    return (\n        <span ref={setTriggerNode} className={styles.trigger}>\n            {trigger}\n            {open && (portal ? <Portal>{bubble}</Portal> : bubble)}\n        </span>\n    );\n}\n"],"mappings":"mPAmCA,IAAM,EAAiB,EAYvB,SAAgB,EAAQ,CACpB,UACA,YAAY,MACZ,WACA,WAAW,GACX,YAAY,IACZ,SAAS,IACI,CACb,GAAM,CAAC,EAAM,IAAA,EAAW,EAAA,SAAA,CAAkB,EAAK,EACzC,CAAC,EAAa,IAAA,EAAkB,EAAA,SAAA,CAAiC,IAAI,EACrE,CAAC,EAAY,IAAA,EAAiB,EAAA,SAAA,CAAiC,IAAI,EACnE,EAAgB,EAAA,kBAAkB,CACpC,OAAQ,EACR,SAAU,EACV,KAAM,EACN,MAAO,SACP,OAAQ,EACR,QAAS,GAAU,CACvB,CAAC,EACK,GAAA,EAAY,EAAA,MAAA,CAAM,EASlB,GAAA,EAAW,EAAA,OAAA,CAA6C,IAAI,EAElE,SAAS,GAAmB,CACpB,EAAS,UAAY,OACrB,aAAa,EAAS,OAAO,EAC7B,EAAS,QAAU,KAE3B,CAEA,SAAS,GAAa,CACd,IACJ,EAAW,EACX,EAAS,QAAU,eAAiB,EAAQ,EAAI,EAAG,CAAS,EAChE,CAEA,SAAS,GAAa,CAClB,EAAW,EACX,EAAQ,EAAK,CACjB,EAEA,EAAA,EAAA,UAAA,SACiB,CACT,EAAW,CACf,EACD,CAAC,CAAC,EAEL,EAAA,eAAe,EAAM,CAAI,EAEzB,IAAM,GAAA,EAAU,EAAA,aAAA,CAAa,EAAU,CACnC,aAAc,EACd,aAAc,EACd,QAAS,EACT,OAAQ,EACR,mBAAoB,EAAO,EAAY,IAAA,EAC3C,CAA4B,EAEtB,GACF,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,IAAK,EACL,GAAI,EACJ,KAAK,UACL,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,EAAA,QAAO,GAAY,GAAU,EAAA,QAAO,SAAS,EAC1E,MAAO,EAEN,SAAA,CACC,CAAA,EAGV,OACI,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,IAAK,EAAgB,UAAW,EAAA,QAAO,QAA7C,SAAA,CACK,EACA,IAAS,GAAS,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAA,SAAS,CAAe,CAAA,EAAI,EAC7C,GAEd"}
+{"version":3,"file":"Tooltip.cjs","names":["useState","useAnchorPosition","useId","useRef","cloneElement","cn","styles","Portal","require_cn","require_escape_layer","require_Portal","require_anchor_position","require_Tooltip_module","react","react_jsx_runtime","TOOLTIP_OFFSET","Tooltip","open","setOpen","triggerNode","setTriggerNode","bubbleNode","setBubbleNode","floatingStyle","placement","portal","tooltipId","timerRef","clearTimer","show","disabled","openDelay","hide","trigger","children","bubble","content"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* eslint-disable react-hooks/refs -- the handlers below read the timer ref, and they only\n   run on user events (hover/focus), never during render */\nimport { cloneElement, useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Tooltip.module.css\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipProps {\n    /** Tooltip content. Plain text recommended; rich content also works. */\n    content: ReactNode;\n    /** Placement relative to the trigger. Default: `\"top\"`. */\n    placement?: TooltipPlacement;\n    /** Single React element to attach hover/focus listeners to. */\n    children: ReactElement;\n    /** Disable the tooltip without changing the trigger. */\n    disabled?: boolean;\n    /** Delay (ms) before showing the tooltip. Default: 150. */\n    openDelay?: number;\n    /**\n     * Render the bubble in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the bubble —\n     * a `DataTable` cell cut it 23 px short (measured in Chrome at 1440 px). In a\n     * portal it escapes the clip and flips to the opposite side at the viewport\n     * edge. `false` keeps the in-flow bubble.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and bubble, in px — the in-flow CSS uses the same 8 px. */\nconst TOOLTIP_OFFSET = 8;\n\n/**\n * Lightweight tooltip. Shows on hover and on focus (keyboard-friendly). Wraps\n * a single child element via `cloneElement`, so the trigger keeps its own ref\n * and props.\n *\n * `Escape` hides it without moving the pointer or the focus, which is what\n * WCAG 2.2 SC 1.4.13 (Content on Hover or Focus) asks of content that appears on\n * hover. It is an `Escape` layer like the overlays, so inside a `Modal` the first\n * press hides the tooltip and the second closes the modal.\n */\nexport function Tooltip({\n    content,\n    placement = \"top\",\n    children,\n    disabled = false,\n    openDelay = 150,\n    portal = true,\n}: TooltipProps) {\n    const [open, setOpen] = useState<boolean>(false);\n    const [triggerNode, setTriggerNode] = useState<HTMLSpanElement | null>(null);\n    const [bubbleNode, setBubbleNode] = useState<HTMLSpanElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: triggerNode,\n        floating: bubbleNode,\n        side: placement,\n        align: \"center\",\n        offset: TOOLTIP_OFFSET,\n        enabled: portal && open,\n    });\n    const tooltipId = useId();\n    /**\n     * Handle of the pending open timer.\n     *\n     * A ref, not a `let` in the component body: that binding is recreated on every\n     * render, so any re-render between `show` and `hide` (a parent update, a state\n     * change elsewhere) dropped the handle and `clearTimeout` silently cancelled\n     * nothing — the tooltip then opened after the pointer had already left.\n     */\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    function clearTimer(): void {\n        if (timerRef.current !== null) {\n            clearTimeout(timerRef.current);\n            timerRef.current = null;\n        }\n    }\n\n    function show(): void {\n        if (disabled) return;\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(true), openDelay);\n    }\n\n    function hide(): void {\n        clearTimer();\n        setOpen(false);\n    }\n\n    useEffect(() => {\n        return () => {\n            clearTimer();\n        };\n    }, []);\n\n    useEscapeLayer(open, hide);\n\n    const trigger = cloneElement(children, {\n        onMouseEnter: show,\n        onMouseLeave: hide,\n        onFocus: show,\n        onBlur: hide,\n        \"aria-describedby\": open ? tooltipId : undefined,\n    } as Record<string, unknown>);\n\n    const bubble = (\n        <span\n            ref={setBubbleNode}\n            id={tooltipId}\n            role=\"tooltip\"\n            className={cn(styles.bubble, styles[placement], portal && styles.portalled)}\n            style={floatingStyle}\n        >\n            {content}\n        </span>\n    );\n\n    return (\n        <span ref={setTriggerNode} className={styles.trigger}>\n            {trigger}\n            {open && (portal ? <Portal>{bubble}</Portal> : bubble)}\n        </span>\n    );\n}\n"],"mappings":"A,mPAmCA,IAAMe,EAAiB,EAYvB,SAAgBC,EAAQ,CACpB,UACA,YAAY,MACZ,WACA,WAAW,GACX,YAAY,IACZ,SAAS,IACI,CACb,GAAM,CAACC,EAAMC,IAAA,EAAWlB,EAAAA,SAAAA,CAAkB,EAAK,EACzC,CAACmB,EAAaC,IAAA,EAAkBpB,EAAAA,SAAAA,CAAiC,IAAI,EACrE,CAACqB,EAAYC,IAAA,EAAiBtB,EAAAA,SAAAA,CAAiC,IAAI,EACnEuB,EAAgBtB,EAAAA,kBAAkB,CACpC,OAAQkB,EACR,SAAUE,EACV,KAAMG,EACN,MAAO,SACP,OAAQT,EACR,QAASU,GAAUR,CACvB,CAAC,EACKS,GAAA,EAAYxB,EAAAA,MAAAA,CAAM,EASlByB,GAAA,EAAWxB,EAAAA,OAAAA,CAA6C,IAAI,EAElE,SAASyB,GAAmB,CACpBD,EAAS,UAAY,OACrB,aAAaA,EAAS,OAAO,EAC7B,EAAS,QAAU,KAE3B,CAEA,SAASE,GAAa,CACdC,IACJF,EAAW,EACX,EAAS,QAAU,eAAiBV,EAAQ,EAAI,EAAGa,CAAS,EAChE,CAEA,SAASC,GAAa,CAClBJ,EAAW,EACXV,EAAQ,EAAK,CACjB,EAEA,EAAAL,EAAA,UAAA,SACiB,CACTe,EAAW,CACf,EACD,CAAC,CAAC,EAELnB,EAAA,eAAeQ,EAAMe,CAAI,EAEzB,IAAMC,GAAA,EAAU7B,EAAAA,aAAAA,CAAa8B,EAAU,CACnC,aAAcL,EACd,aAAcG,EACd,QAASH,EACT,OAAQG,EACR,mBAAoBf,EAAOS,EAAY,IAAA,EAC3C,CAA4B,EAEtBS,GACF,EAAArB,EAAA,IAAA,CAAC,OAAD,CACI,IAAKQ,EACL,GAAII,EACJ,KAAK,UACL,UAAWrB,EAAAA,GAAGC,EAAAA,QAAO,OAAQA,EAAAA,QAAOkB,GAAYC,GAAUnB,EAAAA,QAAO,SAAS,EAC1E,MAAOiB,EAEN,SAAAa,CACC,CAAA,EAGV,OACI,EAAAtB,EAAA,KAAA,CAAC,OAAD,CAAM,IAAKM,EAAgB,UAAWd,EAAAA,QAAO,QAA7C,SAAA,CACK2B,EACAhB,IAASQ,GAAS,EAAAX,EAAA,IAAA,CAACP,EAAAA,OAAD,CAAA,SAAS4B,CAAe,CAAA,EAAIA,EAC7C,C,EAEd,C"}

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* eslint-disable react-hooks/refs -- the handlers below read the timer ref, and they only\n   run on user events (hover/focus), never during render */\nimport { cloneElement, useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Tooltip.module.css\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipProps {\n    /** Tooltip content. Plain text recommended; rich content also works. */\n    content: ReactNode;\n    /** Placement relative to the trigger. Default: `\"top\"`. */\n    placement?: TooltipPlacement;\n    /** Single React element to attach hover/focus listeners to. */\n    children: ReactElement;\n    /** Disable the tooltip without changing the trigger. */\n    disabled?: boolean;\n    /** Delay (ms) before showing the tooltip. Default: 150. */\n    openDelay?: number;\n    /**\n     * Render the bubble in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the bubble —\n     * a `DataTable` cell cut it 23 px short (measured in Chrome at 1440 px). In a\n     * portal it escapes the clip and flips to the opposite side at the viewport\n     * edge. `false` keeps the in-flow bubble.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and bubble, in px — the in-flow CSS uses the same 8 px. */\nconst TOOLTIP_OFFSET = 8;\n\n/**\n * Lightweight tooltip. Shows on hover and on focus (keyboard-friendly). Wraps\n * a single child element via `cloneElement`, so the trigger keeps its own ref\n * and props.\n *\n * `Escape` hides it without moving the pointer or the focus, which is what\n * WCAG 2.2 SC 1.4.13 (Content on Hover or Focus) asks of content that appears on\n * hover. It is an `Escape` layer like the overlays, so inside a `Modal` the first\n * press hides the tooltip and the second closes the modal.\n */\nexport function Tooltip({\n    content,\n    placement = \"top\",\n    children,\n    disabled = false,\n    openDelay = 150,\n    portal = true,\n}: TooltipProps) {\n    const [open, setOpen] = useState<boolean>(false);\n    const [triggerNode, setTriggerNode] = useState<HTMLSpanElement | null>(null);\n    const [bubbleNode, setBubbleNode] = useState<HTMLSpanElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: triggerNode,\n        floating: bubbleNode,\n        side: placement,\n        align: \"center\",\n        offset: TOOLTIP_OFFSET,\n        enabled: portal && open,\n    });\n    const tooltipId = useId();\n    /**\n     * Handle of the pending open timer.\n     *\n     * A ref, not a `let` in the component body: that binding is recreated on every\n     * render, so any re-render between `show` and `hide` (a parent update, a state\n     * change elsewhere) dropped the handle and `clearTimeout` silently cancelled\n     * nothing — the tooltip then opened after the pointer had already left.\n     */\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    function clearTimer(): void {\n        if (timerRef.current !== null) {\n            clearTimeout(timerRef.current);\n            timerRef.current = null;\n        }\n    }\n\n    function show(): void {\n        if (disabled) return;\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(true), openDelay);\n    }\n\n    function hide(): void {\n        clearTimer();\n        setOpen(false);\n    }\n\n    useEffect(() => {\n        return () => {\n            clearTimer();\n        };\n    }, []);\n\n    useEscapeLayer(open, hide);\n\n    const trigger = cloneElement(children, {\n        onMouseEnter: show,\n        onMouseLeave: hide,\n        onFocus: show,\n        onBlur: hide,\n        \"aria-describedby\": open ? tooltipId : undefined,\n    } as Record<string, unknown>);\n\n    const bubble = (\n        <span\n            ref={setBubbleNode}\n            id={tooltipId}\n            role=\"tooltip\"\n            className={cn(styles.bubble, styles[placement], portal && styles.portalled)}\n            style={floatingStyle}\n        >\n            {content}\n        </span>\n    );\n\n    return (\n        <span ref={setTriggerNode} className={styles.trigger}>\n            {trigger}\n            {open && (portal ? <Portal>{bubble}</Portal> : bubble)}\n        </span>\n    );\n}\n"],"mappings":";;;;;;;;AAmCA,IAAM,IAAiB;AAYvB,SAAgB,EAAQ,EACpB,YACA,eAAY,OACZ,aACA,cAAW,IACX,eAAY,KACZ,YAAS,MACI;CACb,IAAM,CAAC,GAAM,KAAW,EAAkB,EAAK,GACzC,CAAC,GAAa,KAAkB,EAAiC,IAAI,GACrE,CAAC,GAAY,KAAiB,EAAiC,IAAI,GACnE,IAAgB,EAAkB;EACpC,QAAQ;EACR,UAAU;EACV,MAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAS,KAAU;CACvB,CAAC,GACK,IAAY,EAAM,GASlB,IAAW,EAA6C,IAAI;CAElE,SAAS,IAAmB;EACxB,AAAI,EAAS,YAAY,SACrB,aAAa,EAAS,OAAO,GAC7B,EAAS,UAAU;CAE3B;CAEA,SAAS,IAAa;EACd,MACJ,EAAW,GACX,EAAS,UAAU,iBAAiB,EAAQ,EAAI,GAAG,CAAS;CAChE;CAEA,SAAS,IAAa;EAElB,AADA,EAAW,GACX,EAAQ,EAAK;CACjB;CAQA,AANA,cACiB;EACT,EAAW;CACf,GACD,CAAC,CAAC,GAEL,EAAe,GAAM,CAAI;CAEzB,IAAM,IAAU,EAAa,GAAU;EACnC,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EACR,oBAAoB,IAAO,IAAY,KAAA;CAC3C,CAA4B,GAEtB,IACF,kBAAC,QAAD;EACI,KAAK;EACL,IAAI;EACJ,MAAK;EACL,WAAW,EAAG,EAAO,QAAQ,EAAO,IAAY,KAAU,EAAO,SAAS;EAC1E,OAAO;EAEN,UAAA;CACC,CAAA;CAGV,OACI,kBAAC,QAAD;EAAM,KAAK;EAAgB,WAAW,EAAO;EAA7C,UAAA,CACK,GACA,MAAS,IAAS,kBAAC,GAAD,EAAA,UAAS,EAAe,CAAA,IAAI,EAC7C;;AAEd"}
+{"version":3,"file":"Tooltip.js","names":["styles","Tooltip_module_default","TOOLTIP_OFFSET","Tooltip","open","setOpen","useState","triggerNode","setTriggerNode","bubbleNode","setBubbleNode","floatingStyle","useAnchorPosition","placement","portal","tooltipId","useId","timerRef","useRef","clearTimer","show","disabled","openDelay","hide","useEffect","useEscapeLayer","trigger","cloneElement","children","bubble","cn","content","Portal"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* eslint-disable react-hooks/refs -- the handlers below read the timer ref, and they only\n   run on user events (hover/focus), never during render */\nimport { cloneElement, useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Tooltip.module.css\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipProps {\n    /** Tooltip content. Plain text recommended; rich content also works. */\n    content: ReactNode;\n    /** Placement relative to the trigger. Default: `\"top\"`. */\n    placement?: TooltipPlacement;\n    /** Single React element to attach hover/focus listeners to. */\n    children: ReactElement;\n    /** Disable the tooltip without changing the trigger. */\n    disabled?: boolean;\n    /** Delay (ms) before showing the tooltip. Default: 150. */\n    openDelay?: number;\n    /**\n     * Render the bubble in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the bubble —\n     * a `DataTable` cell cut it 23 px short (measured in Chrome at 1440 px). In a\n     * portal it escapes the clip and flips to the opposite side at the viewport\n     * edge. `false` keeps the in-flow bubble.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and bubble, in px — the in-flow CSS uses the same 8 px. */\nconst TOOLTIP_OFFSET = 8;\n\n/**\n * Lightweight tooltip. Shows on hover and on focus (keyboard-friendly). Wraps\n * a single child element via `cloneElement`, so the trigger keeps its own ref\n * and props.\n *\n * `Escape` hides it without moving the pointer or the focus, which is what\n * WCAG 2.2 SC 1.4.13 (Content on Hover or Focus) asks of content that appears on\n * hover. It is an `Escape` layer like the overlays, so inside a `Modal` the first\n * press hides the tooltip and the second closes the modal.\n */\nexport function Tooltip({\n    content,\n    placement = \"top\",\n    children,\n    disabled = false,\n    openDelay = 150,\n    portal = true,\n}: TooltipProps) {\n    const [open, setOpen] = useState<boolean>(false);\n    const [triggerNode, setTriggerNode] = useState<HTMLSpanElement | null>(null);\n    const [bubbleNode, setBubbleNode] = useState<HTMLSpanElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: triggerNode,\n        floating: bubbleNode,\n        side: placement,\n        align: \"center\",\n        offset: TOOLTIP_OFFSET,\n        enabled: portal && open,\n    });\n    const tooltipId = useId();\n    /**\n     * Handle of the pending open timer.\n     *\n     * A ref, not a `let` in the component body: that binding is recreated on every\n     * render, so any re-render between `show` and `hide` (a parent update, a state\n     * change elsewhere) dropped the handle and `clearTimeout` silently cancelled\n     * nothing — the tooltip then opened after the pointer had already left.\n     */\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    function clearTimer(): void {\n        if (timerRef.current !== null) {\n            clearTimeout(timerRef.current);\n            timerRef.current = null;\n        }\n    }\n\n    function show(): void {\n        if (disabled) return;\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(true), openDelay);\n    }\n\n    function hide(): void {\n        clearTimer();\n        setOpen(false);\n    }\n\n    useEffect(() => {\n        return () => {\n            clearTimer();\n        };\n    }, []);\n\n    useEscapeLayer(open, hide);\n\n    const trigger = cloneElement(children, {\n        onMouseEnter: show,\n        onMouseLeave: hide,\n        onFocus: show,\n        onBlur: hide,\n        \"aria-describedby\": open ? tooltipId : undefined,\n    } as Record<string, unknown>);\n\n    const bubble = (\n        <span\n            ref={setBubbleNode}\n            id={tooltipId}\n            role=\"tooltip\"\n            className={cn(styles.bubble, styles[placement], portal && styles.portalled)}\n            style={floatingStyle}\n        >\n            {content}\n        </span>\n    );\n\n    return (\n        <span ref={setTriggerNode} className={styles.trigger}>\n            {trigger}\n            {open && (portal ? <Portal>{bubble}</Portal> : bubble)}\n        </span>\n    );\n}\n"],"mappings":";;;;;;;;AAmCA,IAAME,IAAiB;AAYvB,SAAgBC,EAAQ,EACpB,YACA,eAAY,OACZ,aACA,cAAW,IACX,eAAY,KACZ,YAAS,MACI;CACb,IAAM,CAACC,GAAMC,KAAWC,EAAkB,EAAK,GACzC,CAACC,GAAaC,KAAkBF,EAAiC,IAAI,GACrE,CAACG,GAAYC,KAAiBJ,EAAiC,IAAI,GACnEK,IAAgBC,EAAkB;EACpC,QAAQL;EACR,UAAUE;EACV,MAAMI;EACN,OAAO;EACP,QAAQX;EACR,SAASY,KAAUV;CACvB,CAAC,GACKW,IAAYC,EAAM,GASlBC,IAAWC,EAA6C,IAAI;CAElE,SAASC,IAAmB;EACxB,AAAIF,EAAS,YAAY,SACrB,aAAaA,EAAS,OAAO,GAC7B,EAAS,UAAU;CAE3B;CAEA,SAASG,IAAa;EAClB,AAAIC,MACJF,EAAW,GACX,EAAS,UAAU,iBAAiBd,EAAQ,EAAI,GAAGiB,CAAS;CAChE;CAEA,SAASC,IAAa;EAElB,AADAJ,EAAW,GACXd,EAAQ,EAAK;CACjB;CAQA,AANAmB,cACiB;EACT,EAAW;CACf,GACD,CAAC,CAAC,GAELC,EAAerB,GAAMmB,CAAI;CAEzB,IAAMG,IAAUC,EAAaC,GAAU;EACnC,cAAcR;EACd,cAAcG;EACd,SAASH;EACT,QAAQG;EACR,oBAAoBnB,IAAOW,IAAY,KAAA;CAC3C,CAA4B,GAEtBc,IACF,kBAAC,QAAD;EACI,KAAKnB;EACL,IAAIK;EACJ,MAAK;EACL,WAAWe,EAAG9B,EAAO,QAAQA,EAAOa,IAAYC,KAAUd,EAAO,SAAS;EAC1E,OAAOW;EAEN,UAAAoB;CACC,CAAA;CAGV,OACI,kBAAC,QAAD;EAAM,KAAKvB;EAAgB,WAAWR,EAAO;EAA7C,UAAA,CACK0B,GACAtB,MAASU,IAAS,kBAACkB,GAAD,EAAA,UAASH,EAAe,CAAA,IAAIA,EAC7C;;AAEd"}

package/dist/components/Tooltip/Tooltip.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.module.cjs","names":[],"sources":["../../../src/components/Tooltip/Tooltip.module.css"],"sourcesContent":[".trigger {\n    display: inline-flex;\n    position: relative;\n}\n\n.bubble {\n    position: absolute;\n    z-index: var(--tempest-z-tooltip);\n    background-color: var(--tempest-gray-900);\n    color: #ffffff;\n    padding: 6px 10px;\n    border-radius: var(--tempest-radius-sm);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    white-space: nowrap;\n    pointer-events: none;\n    box-shadow: var(--tempest-shadow-lg);\n    animation: tempest-tooltip-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.portalled {\n    right: auto;\n    bottom: auto;\n    transform: none;\n}\n\n@keyframes tempest-tooltip-in {\n    from {\n        opacity: 0;\n        transform: scale(0.94) translate(var(--tempest-tx, 0), var(--tempest-ty, 0));\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .bubble {\n        animation: none;\n    }\n}\n\n/* Hide tooltip on touch / no-hover devices — tap+hold leaves\n * tooltip stuck visible and competes with native long-press menus. */\n@media (hover: none) {\n    .bubble {\n        display: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Tooltip.module.cjs","names":["trigger","bubble","tempestTooltipIn","top","bottom","left","right","portalled","Tooltip_module_default"],"sources":["../../../src/components/Tooltip/Tooltip.module.css"],"sourcesContent":[".trigger {\n    display: inline-flex;\n    position: relative;\n}\n\n.bubble {\n    position: absolute;\n    z-index: var(--tempest-z-tooltip);\n    background-color: var(--tempest-gray-900);\n    color: #ffffff;\n    padding: 6px 10px;\n    border-radius: var(--tempest-radius-sm);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    white-space: nowrap;\n    pointer-events: none;\n    box-shadow: var(--tempest-shadow-lg);\n    animation: tempest-tooltip-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.portalled {\n    right: auto;\n    bottom: auto;\n    transform: none;\n}\n\n@keyframes tempest-tooltip-in {\n    from {\n        opacity: 0;\n        transform: scale(0.94) translate(var(--tempest-tx, 0), var(--tempest-ty, 0));\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .bubble {\n        animation: none;\n    }\n}\n\n/* Hide tooltip on touch / no-hover devices — tap+hold leaves\n * tooltip stuck visible and competes with native long-press menus. */\n@media (hover: none) {\n    .bubble {\n        display: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/Tooltip/Tooltip.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.module.js","names":[],"sources":["../../../src/components/Tooltip/Tooltip.module.css"],"sourcesContent":[".trigger {\n    display: inline-flex;\n    position: relative;\n}\n\n.bubble {\n    position: absolute;\n    z-index: var(--tempest-z-tooltip);\n    background-color: var(--tempest-gray-900);\n    color: #ffffff;\n    padding: 6px 10px;\n    border-radius: var(--tempest-radius-sm);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    white-space: nowrap;\n    pointer-events: none;\n    box-shadow: var(--tempest-shadow-lg);\n    animation: tempest-tooltip-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.portalled {\n    right: auto;\n    bottom: auto;\n    transform: none;\n}\n\n@keyframes tempest-tooltip-in {\n    from {\n        opacity: 0;\n        transform: scale(0.94) translate(var(--tempest-tx, 0), var(--tempest-ty, 0));\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .bubble {\n        animation: none;\n    }\n}\n\n/* Hide tooltip on touch / no-hover devices — tap+hold leaves\n * tooltip stuck visible and competes with native long-press menus. */\n@media (hover: none) {\n    .bubble {\n        display: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Tooltip.module.js","names":["trigger","bubble","tempestTooltipIn","top","bottom","left","right","portalled","Tooltip_module_default"],"sources":["../../../src/components/Tooltip/Tooltip.module.css"],"sourcesContent":[".trigger {\n    display: inline-flex;\n    position: relative;\n}\n\n.bubble {\n    position: absolute;\n    z-index: var(--tempest-z-tooltip);\n    background-color: var(--tempest-gray-900);\n    color: #ffffff;\n    padding: 6px 10px;\n    border-radius: var(--tempest-radius-sm);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    white-space: nowrap;\n    pointer-events: none;\n    box-shadow: var(--tempest-shadow-lg);\n    animation: tempest-tooltip-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.portalled {\n    right: auto;\n    bottom: auto;\n    transform: none;\n}\n\n@keyframes tempest-tooltip-in {\n    from {\n        opacity: 0;\n        transform: scale(0.94) translate(var(--tempest-tx, 0), var(--tempest-ty, 0));\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .bubble {\n        animation: none;\n    }\n}\n\n/* Hide tooltip on touch / no-hover devices — tap+hold leaves\n * tooltip stuck visible and competes with native long-press menus. */\n@media (hover: none) {\n    .bubble {\n        display: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/Tour/Tour.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("../../hooks/use-focus-trap.cjs"),n=require("./tour-position.cjs"),r=require("./Tour.module.cjs");let i=require("react"),a=require("react/jsx-runtime");var o={next:`Próximo`,back:`Voltar`,finish:`Concluir`,skip:`Pular`,close:`Fechar tour`,progress:(e,t)=>`Passo ${e} de ${t}`},s={next:`Next`,back:`Back`,finish:`Done`,skip:`Skip`,close:`Close tour`,progress:(e,t)=>`Step ${e} of ${t}`};function c({steps:c,open:l,onClose:u,onFinish:d,index:f,onIndexChange:p,locale:m=`pt-BR`,spotlightPadding:h=4,className:g}){let _=m===`en`?s:o,[v,y]=(0,i.useState)(0),b=Math.min(f??v,Math.max(0,c.length-1)),x=c[b],S=(0,i.useRef)(null),[C,w]=(0,i.useState)(null),[T,E]=(0,i.useState)({placement:`center`,top:0,left:0}),[D,O]=(0,i.useState)({width:0,height:0}),k=(0,i.useId)(),A=(0,i.useId)();t.useFocusTrap(S,l);let j=(0,i.useCallback)(e=>{f===void 0&&y(e),p?.(e)},[f,p]);(0,i.useEffect)(()=>{l&&f===void 0&&y(0)},[l,f]);let M=(0,i.useCallback)(()=>{if(!l||!x)return;let e=(x.target?document.querySelector(x.target):null)?.getBoundingClientRect()??null;w(e?{top:e.top,left:e.left,width:e.width,height:e.height}:null);let t={width:S.current?.offsetWidth??320,height:S.current?.offsetHeight??160},r={width:window.innerWidth,height:window.innerHeight};O(r),E(n.placeCard({target:e?{top:e.top,left:e.left,width:e.width,height:e.height}:null,card:t,viewport:r,preferred:x.placement}))},[l,x]);if((0,i.useLayoutEffect)(()=>{if(!l||!x)return;(x.target?document.querySelector(x.target):null)?.scrollIntoView({block:`center`,inline:`nearest`,behavior:`smooth`});let e=requestAnimationFrame(M);return()=>cancelAnimationFrame(e)},[l,x,M]),(0,i.useEffect)(()=>{if(l)return window.addEventListener(`resize`,M),window.addEventListener(`scroll`,M,!0),()=>{window.removeEventListener(`resize`,M),window.removeEventListener(`scroll`,M,!0)}},[l,M]),(0,i.useEffect)(()=>{l&&S.current?.focus()},[l,b]),!l||!x)return null;let N=b===c.length-1,P=()=>{d?.(),u()};return(0,a.jsxs)(`div`,{className:r.default.root,"data-placement":T.placement,children:[n.backdropRects(C,D,h).map((e,t)=>(0,a.jsx)(`div`,{className:r.default.backdrop,style:{top:e.top,left:e.left,width:e.width,height:e.height},onClick:u},t)),C&&(0,a.jsx)(`div`,{className:r.default.spotlight,style:{top:C.top-h,left:C.left-h,width:C.width+h*2,height:C.height+h*2}}),(0,a.jsxs)(`div`,{ref:S,className:e.cn(r.default.card,g),style:{top:T.top,left:T.left},role:`dialog`,"aria-modal":`true`,"aria-labelledby":x.title?k:void 0,"aria-describedby":A,tabIndex:-1,onKeyDown:e=>{if(e.key===`Escape`){e.stopPropagation(),u();return}e.key===`ArrowRight`&&!N&&(e.preventDefault(),j(b+1)),e.key===`ArrowLeft`&&b>0&&(e.preventDefault(),j(b-1))},children:[(0,a.jsxs)(`div`,{className:r.default.header,children:[(0,a.jsx)(`span`,{className:r.default.progress,children:_.progress(b+1,c.length)}),(0,a.jsx)(`button`,{type:`button`,className:r.default.close,"aria-label":_.close,onClick:u,children:`×`})]}),x.title&&(0,a.jsx)(`h2`,{className:r.default.title,id:k,children:x.title}),(0,a.jsx)(`div`,{className:r.default.body,id:A,children:x.body}),(0,a.jsxs)(`div`,{className:r.default.footer,children:[!N&&(0,a.jsx)(`button`,{type:`button`,className:r.default.skip,onClick:u,children:_.skip}),(0,a.jsxs)(`div`,{className:r.default.actions,children:[b>0&&(0,a.jsx)(`button`,{type:`button`,className:r.default.secondary,onClick:()=>j(b-1),children:_.back}),(0,a.jsx)(`button`,{type:`button`,className:r.default.primary,onClick:()=>N?P():j(b+1),children:N?_.finish:_.next})]})]})]})]})}exports.Tour=c;
+const e=require("../../utils/cn.cjs"),t=require("../../hooks/use-focus-trap.cjs"),n=require("./tour-position.cjs"),r=require("./Tour.module.cjs");let i=require("react"),a=require("react/jsx-runtime");var o={next:`Próximo`,back:`Voltar`,finish:`Concluir`,skip:`Pular`,close:`Fechar tour`,progress:(e,t)=>`Passo ${e} de ${t}`},s={next:`Next`,back:`Back`,finish:`Done`,skip:`Skip`,close:`Close tour`,progress:(e,t)=>`Step ${e} of ${t}`};function c({steps:c,open:l,onClose:u,onFinish:d,index:f,onIndexChange:p,locale:m=`pt-BR`,spotlightPadding:h=4,className:g}){let _=m===`en`?s:o,[v,y]=(0,i.useState)(0),b=Math.min(f??v,Math.max(0,c.length-1)),x=c[b],S=(0,i.useRef)(null),[C,w]=(0,i.useState)(null),[T,E]=(0,i.useState)({placement:`center`,top:0,left:0}),[D,O]=(0,i.useState)({width:0,height:0}),k=(0,i.useId)(),A=(0,i.useId)();t.useFocusTrap(S,l);let j=(0,i.useCallback)(e=>{f===void 0&&y(e),p?.(e)},[f,p]);(0,i.useEffect)(()=>{l&&f===void 0&&y(0)},[l,f]);let M=(0,i.useCallback)(()=>{if(!l||!x)return;let e=(x.target?document.querySelector(x.target):null)?.getBoundingClientRect()??null;w(e?{top:e.top,left:e.left,width:e.width,height:e.height}:null);let t={width:S.current?.offsetWidth??320,height:S.current?.offsetHeight??160},r={width:window.innerWidth,height:window.innerHeight};O(r),E(n.placeCard({target:e?{top:e.top,left:e.left,width:e.width,height:e.height}:null,card:t,viewport:r,preferred:x.placement}))},[l,x]);if((0,i.useLayoutEffect)(()=>{if(!l||!x)return;(x.target?document.querySelector(x.target):null)?.scrollIntoView({block:`center`,inline:`nearest`,behavior:`smooth`});let e=requestAnimationFrame(M);return()=>cancelAnimationFrame(e)},[l,x,M]),(0,i.useEffect)(()=>{if(l)return window.addEventListener(`resize`,M),window.addEventListener(`scroll`,M,!0),()=>{window.removeEventListener(`resize`,M),window.removeEventListener(`scroll`,M,!0)}},[l,M]),(0,i.useEffect)(()=>{l&&S.current?.focus()},[l,b]),!l||!x)return null;let N=b===c.length-1,P=()=>{d?.(),u()};return(0,a.jsxs)(`div`,{className:r.default.root,"data-placement":T.placement,children:[n.backdropRects(C,D,h).map((e,t)=>(0,a.jsx)(`div`,{className:r.default.backdrop,style:{top:e.top,left:e.left,width:e.width,height:e.height},onClick:u},t)),C&&(0,a.jsx)(`div`,{className:r.default.spotlight,style:{top:C.top-h,left:C.left-h,width:C.width+h*2,height:C.height+h*2}}),(0,a.jsxs)(`div`,{ref:S,className:e.cn(r.default.card,g),style:{top:T.top,left:T.left},role:`dialog`,"aria-modal":`true`,"aria-labelledby":x.title?k:void 0,"aria-describedby":A,tabIndex:-1,onKeyDown:e=>{e.key===`Escape`?(e.stopPropagation(),u()):(e.key===`ArrowRight`&&!N&&(e.preventDefault(),j(b+1)),e.key===`ArrowLeft`&&b>0&&(e.preventDefault(),j(b-1)))},children:[(0,a.jsxs)(`div`,{className:r.default.header,children:[(0,a.jsx)(`span`,{className:r.default.progress,children:_.progress(b+1,c.length)}),(0,a.jsx)(`button`,{type:`button`,className:r.default.close,"aria-label":_.close,onClick:u,children:`×`})]}),x.title&&(0,a.jsx)(`h2`,{className:r.default.title,id:k,children:x.title}),(0,a.jsx)(`div`,{className:r.default.body,id:A,children:x.body}),(0,a.jsxs)(`div`,{className:r.default.footer,children:[!N&&(0,a.jsx)(`button`,{type:`button`,className:r.default.skip,onClick:u,children:_.skip}),(0,a.jsxs)(`div`,{className:r.default.actions,children:[b>0&&(0,a.jsx)(`button`,{type:`button`,className:r.default.secondary,onClick:()=>j(b-1),children:_.back}),(0,a.jsx)(`button`,{type:`button`,className:r.default.primary,onClick:()=>N?P():j(b+1),children:N?_.finish:_.next})]})]})]})]})}exports.Tour=c;
 //# sourceMappingURL=Tour.cjs.map

package/dist/components/Tour/Tour.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tour.cjs","names":[],"sources":["../../../src/components/Tour/Tour.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — a product tour is a\n * controlled sequence (steps, index, onIndexChange, open, onClose, onFinish) drawn\n * over someone else's DOM (spotlightPadding, locale, className). The body measures\n * the target element, positions the spotlight and the card against it, and re-\n * measures on scroll and resize — one geometry, three triggers.\n */\nimport {\n    useCallback,\n    useEffect,\n    useId,\n    useLayoutEffect,\n    useRef,\n    useState,\n    type KeyboardEvent,\n    type ReactNode,\n} from \"react\";\n\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\nimport { cn } from \"@/utils/cn\";\n\nimport { backdropRects, placeCard, type TourPlacement, type TourRect } from \"./tour-position\";\nimport styles from \"./Tour.module.css\";\n\n/** One stop of the tour. */\nexport interface TourStep {\n    /**\n     * CSS selector of the element to point at.\n     *\n     * A selector rather than a ref, so a tour can be declared as data — in a config\n     * file, from the backend, next to the copy — without every screen having to\n     * thread refs up to whoever renders the tour.\n     */\n    target?: string;\n    /** Heading of the card. */\n    title?: ReactNode;\n    /** The explanation. */\n    body: ReactNode;\n    /** Preferred side. Default `\"bottom\"`, flipped when it does not fit. */\n    placement?: TourPlacement;\n}\n\n/** Labels, per locale. */\ninterface TourStrings {\n    next: string;\n    back: string;\n    finish: string;\n    skip: string;\n    close: string;\n    progress: (current: number, total: number) => string;\n}\n\nconst PT_BR: TourStrings = {\n    next: \"Próximo\",\n    back: \"Voltar\",\n    finish: \"Concluir\",\n    skip: \"Pular\",\n    close: \"Fechar tour\",\n    progress: (current, total) => `Passo ${current} de ${total}`,\n};\n\nconst EN: TourStrings = {\n    next: \"Next\",\n    back: \"Back\",\n    finish: \"Done\",\n    skip: \"Skip\",\n    close: \"Close tour\",\n    progress: (current, total) => `Step ${current} of ${total}`,\n};\n\nexport interface TourProps {\n    /** The stops, in order. */\n    steps: readonly TourStep[];\n    /** Whether the tour is showing. Controlled. */\n    open: boolean;\n    /** Closed by `Esc`, by the close button or by \"skip\". */\n    onClose: () => void;\n    /** Called after the last step is confirmed. `onClose` follows it. */\n    onFinish?: () => void;\n    /** Current step index, when the app wants to drive it. */\n    index?: number;\n    /** Step changed — required only when `index` is given. */\n    onIndexChange?: (index: number) => void;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Space kept clear around the highlighted element, in px. Default 4. */\n    spotlightPadding?: number;\n    /** Extra class on the card. */\n    className?: string;\n}\n\n/**\n * A guided tour: dim the page, highlight one element at a time, explain it.\n *\n * The highlighted element stays **clickable** while everything else is blocked,\n * because the useful kind of coachmark says \"press this\" and lets you press it. That\n * is why the backdrop is four rectangles around the target rather than one overlay\n * with a `box-shadow` hole — a shadow is not hit-testable, so a hole made that way\n * would not block anything.\n *\n * Whether a user has seen the tour is the app's business: this component takes\n * `open` and emits `onClose`/`onFinish`. Persisting a flag in `localStorage` is one\n * line in the app and a wrong default here.\n *\n * @example\n * const [open, setOpen] = useState(!storage.get(\"tour-v1\"));\n *\n * <Tour\n *     open={open}\n *     steps={[\n *         { target: \"#novo-pedido\", title: \"Comece aqui\", body: \"Todo pedido nasce deste botão.\" },\n *         { target: \"[data-tour='filtros']\", body: \"E filtre por período aqui.\" },\n *     ]}\n *     onClose={() => setOpen(false)}\n *     onFinish={() => storage.set(\"tour-v1\", true)}\n * />\n */\nexport function Tour({\n    steps,\n    open,\n    onClose,\n    onFinish,\n    index,\n    onIndexChange,\n    locale = \"pt-BR\",\n    spotlightPadding = 4,\n    className,\n}: TourProps) {\n    const strings = locale === \"en\" ? EN : PT_BR;\n    const [internal, setInternal] = useState(0);\n    const current = Math.min(index ?? internal, Math.max(0, steps.length - 1));\n    const step = steps[current];\n\n    const card = useRef<HTMLDivElement | null>(null);\n    const [target, setTarget] = useState<TourRect | null>(null);\n    const [position, setPosition] = useState<{\n        placement: TourPlacement;\n        top: number;\n        left: number;\n    }>({ placement: \"center\", top: 0, left: 0 });\n    const [viewport, setViewport] = useState({ width: 0, height: 0 });\n    const titleId = useId();\n    const bodyId = useId();\n\n    useFocusTrap(card, open);\n\n    const goTo = useCallback(\n        (next: number) => {\n            if (index === undefined) setInternal(next);\n            onIndexChange?.(next);\n        },\n        [index, onIndexChange],\n    );\n\n    /** Reset to the first step whenever the tour opens again. */\n    useEffect(() => {\n        if (open && index === undefined) setInternal(0);\n    }, [open, index]);\n\n    /**\n     * Find the step's element, bring it into view, and measure everything.\n     *\n     * The scroll happens before measuring, and the measurement is deferred to the\n     * next frame: reading a rect in the same tick as `scrollIntoView` gives the\n     * position the element had *before* the scroll, which lands the card over the\n     * wrong part of the page.\n     */\n    const measure = useCallback(() => {\n        if (!open || !step) return;\n        const element = step.target ? document.querySelector<HTMLElement>(step.target) : null;\n        const rect = element?.getBoundingClientRect() ?? null;\n        setTarget(\n            rect\n                ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }\n                : null,\n        );\n\n        const size = {\n            width: card.current?.offsetWidth ?? 320,\n            height: card.current?.offsetHeight ?? 160,\n        };\n        const view = { width: window.innerWidth, height: window.innerHeight };\n        setViewport(view);\n        setPosition(\n            placeCard({\n                target: rect\n                    ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }\n                    : null,\n                card: size,\n                viewport: view,\n                preferred: step.placement,\n            }),\n        );\n    }, [open, step]);\n\n    useLayoutEffect(() => {\n        if (!open || !step) return;\n        const element = step.target ? document.querySelector<HTMLElement>(step.target) : null;\n        element?.scrollIntoView({ block: \"center\", inline: \"nearest\", behavior: \"smooth\" });\n        const frame = requestAnimationFrame(measure);\n        return () => cancelAnimationFrame(frame);\n    }, [open, step, measure]);\n\n    useEffect(() => {\n        if (!open) return;\n        window.addEventListener(\"resize\", measure);\n        window.addEventListener(\"scroll\", measure, true);\n        return () => {\n            window.removeEventListener(\"resize\", measure);\n            window.removeEventListener(\"scroll\", measure, true);\n        };\n    }, [open, measure]);\n\n    useEffect(() => {\n        if (open) card.current?.focus();\n    }, [open, current]);\n\n    if (!open || !step) return null;\n\n    const last = current === steps.length - 1;\n\n    const finish = (): void => {\n        onFinish?.();\n        onClose();\n    };\n\n    /**\n     * Arrow keys walk the tour and `Esc` leaves it.\n     *\n     * `Esc` is handled here rather than on `window` so a tour opened over a modal\n     * does not close both: the innermost handler that sees the key wins, and the\n     * card has focus.\n     */\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {\n        if (event.key === \"Escape\") {\n            event.stopPropagation();\n            onClose();\n            return;\n        }\n        if (event.key === \"ArrowRight\" && !last) {\n            event.preventDefault();\n            goTo(current + 1);\n        }\n        if (event.key === \"ArrowLeft\" && current > 0) {\n            event.preventDefault();\n            goTo(current - 1);\n        }\n    };\n\n    return (\n        <div className={styles.root} data-placement={position.placement}>\n            {backdropRects(target, viewport, spotlightPadding).map((rect, i) => (\n                <div\n                    key={i}\n                    className={styles.backdrop}\n                    style={{\n                        top: rect.top,\n                        left: rect.left,\n                        width: rect.width,\n                        height: rect.height,\n                    }}\n                    onClick={onClose}\n                />\n            ))}\n\n            {target && (\n                <div\n                    className={styles.spotlight}\n                    style={{\n                        top: target.top - spotlightPadding,\n                        left: target.left - spotlightPadding,\n                        width: target.width + spotlightPadding * 2,\n                        height: target.height + spotlightPadding * 2,\n                    }}\n                />\n            )}\n\n            <div\n                ref={card}\n                className={cn(styles.card, className)}\n                style={{ top: position.top, left: position.left }}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-labelledby={step.title ? titleId : undefined}\n                aria-describedby={bodyId}\n                tabIndex={-1}\n                onKeyDown={handleKeyDown}\n            >\n                <div className={styles.header}>\n                    <span className={styles.progress}>\n                        {strings.progress(current + 1, steps.length)}\n                    </span>\n                    <button\n                        type=\"button\"\n                        className={styles.close}\n                        aria-label={strings.close}\n                        onClick={onClose}\n                    >\n                        ×\n                    </button>\n                </div>\n\n                {step.title && (\n                    <h2 className={styles.title} id={titleId}>\n                        {step.title}\n                    </h2>\n                )}\n                <div className={styles.body} id={bodyId}>\n                    {step.body}\n                </div>\n\n                <div className={styles.footer}>\n                    {!last && (\n                        <button type=\"button\" className={styles.skip} onClick={onClose}>\n                            {strings.skip}\n                        </button>\n                    )}\n                    <div className={styles.actions}>\n                        {current > 0 && (\n                            <button\n                                type=\"button\"\n                                className={styles.secondary}\n                                onClick={() => goTo(current - 1)}\n                            >\n                                {strings.back}\n                            </button>\n                        )}\n                        <button\n                            type=\"button\"\n                            className={styles.primary}\n                            onClick={() => (last ? finish() : goTo(current + 1))}\n                        >\n                            {last ? strings.finish : strings.next}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Tour.cjs","names":["useState","useRef","useId","useCallback","placeCard","styles","backdropRects","cn","require_cn","require_use_focus_trap","require_tour_position","require_Tour_module","react","react_jsx_runtime","PT_BR","current","total","EN","Tour","strings","locale","internal","setInternal","index","steps","step","card","target","setTarget","position","setPosition","viewport","setViewport","titleId","bodyId","open","goTo","next","onIndexChange","measure","rect","size","view","frame","last","finish","onFinish","onClose","spotlightPadding","i","className","event"],"sources":["../../../src/components/Tour/Tour.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — a product tour is a\n * controlled sequence (steps, index, onIndexChange, open, onClose, onFinish) drawn\n * over someone else's DOM (spotlightPadding, locale, className). The body measures\n * the target element, positions the spotlight and the card against it, and re-\n * measures on scroll and resize — one geometry, three triggers.\n */\nimport {\n    useCallback,\n    useEffect,\n    useId,\n    useLayoutEffect,\n    useRef,\n    useState,\n    type KeyboardEvent,\n    type ReactNode,\n} from \"react\";\n\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\nimport { cn } from \"@/utils/cn\";\n\nimport { backdropRects, placeCard, type TourPlacement, type TourRect } from \"./tour-position\";\nimport styles from \"./Tour.module.css\";\n\n/** One stop of the tour. */\nexport interface TourStep {\n    /**\n     * CSS selector of the element to point at.\n     *\n     * A selector rather than a ref, so a tour can be declared as data — in a config\n     * file, from the backend, next to the copy — without every screen having to\n     * thread refs up to whoever renders the tour.\n     */\n    target?: string;\n    /** Heading of the card. */\n    title?: ReactNode;\n    /** The explanation. */\n    body: ReactNode;\n    /** Preferred side. Default `\"bottom\"`, flipped when it does not fit. */\n    placement?: TourPlacement;\n}\n\n/** Labels, per locale. */\ninterface TourStrings {\n    next: string;\n    back: string;\n    finish: string;\n    skip: string;\n    close: string;\n    progress: (current: number, total: number) => string;\n}\n\nconst PT_BR: TourStrings = {\n    next: \"Próximo\",\n    back: \"Voltar\",\n    finish: \"Concluir\",\n    skip: \"Pular\",\n    close: \"Fechar tour\",\n    progress: (current, total) => `Passo ${current} de ${total}`,\n};\n\nconst EN: TourStrings = {\n    next: \"Next\",\n    back: \"Back\",\n    finish: \"Done\",\n    skip: \"Skip\",\n    close: \"Close tour\",\n    progress: (current, total) => `Step ${current} of ${total}`,\n};\n\nexport interface TourProps {\n    /** The stops, in order. */\n    steps: readonly TourStep[];\n    /** Whether the tour is showing. Controlled. */\n    open: boolean;\n    /** Closed by `Esc`, by the close button or by \"skip\". */\n    onClose: () => void;\n    /** Called after the last step is confirmed. `onClose` follows it. */\n    onFinish?: () => void;\n    /** Current step index, when the app wants to drive it. */\n    index?: number;\n    /** Step changed — required only when `index` is given. */\n    onIndexChange?: (index: number) => void;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Space kept clear around the highlighted element, in px. Default 4. */\n    spotlightPadding?: number;\n    /** Extra class on the card. */\n    className?: string;\n}\n\n/**\n * A guided tour: dim the page, highlight one element at a time, explain it.\n *\n * The highlighted element stays **clickable** while everything else is blocked,\n * because the useful kind of coachmark says \"press this\" and lets you press it. That\n * is why the backdrop is four rectangles around the target rather than one overlay\n * with a `box-shadow` hole — a shadow is not hit-testable, so a hole made that way\n * would not block anything.\n *\n * Whether a user has seen the tour is the app's business: this component takes\n * `open` and emits `onClose`/`onFinish`. Persisting a flag in `localStorage` is one\n * line in the app and a wrong default here.\n *\n * @example\n * const [open, setOpen] = useState(!storage.get(\"tour-v1\"));\n *\n * <Tour\n *     open={open}\n *     steps={[\n *         { target: \"#novo-pedido\", title: \"Comece aqui\", body: \"Todo pedido nasce deste botão.\" },\n *         { target: \"[data-tour='filtros']\", body: \"E filtre por período aqui.\" },\n *     ]}\n *     onClose={() => setOpen(false)}\n *     onFinish={() => storage.set(\"tour-v1\", true)}\n * />\n */\nexport function Tour({\n    steps,\n    open,\n    onClose,\n    onFinish,\n    index,\n    onIndexChange,\n    locale = \"pt-BR\",\n    spotlightPadding = 4,\n    className,\n}: TourProps) {\n    const strings = locale === \"en\" ? EN : PT_BR;\n    const [internal, setInternal] = useState(0);\n    const current = Math.min(index ?? internal, Math.max(0, steps.length - 1));\n    const step = steps[current];\n\n    const card = useRef<HTMLDivElement | null>(null);\n    const [target, setTarget] = useState<TourRect | null>(null);\n    const [position, setPosition] = useState<{\n        placement: TourPlacement;\n        top: number;\n        left: number;\n    }>({ placement: \"center\", top: 0, left: 0 });\n    const [viewport, setViewport] = useState({ width: 0, height: 0 });\n    const titleId = useId();\n    const bodyId = useId();\n\n    useFocusTrap(card, open);\n\n    const goTo = useCallback(\n        (next: number) => {\n            if (index === undefined) setInternal(next);\n            onIndexChange?.(next);\n        },\n        [index, onIndexChange],\n    );\n\n    /** Reset to the first step whenever the tour opens again. */\n    useEffect(() => {\n        if (open && index === undefined) setInternal(0);\n    }, [open, index]);\n\n    /**\n     * Find the step's element, bring it into view, and measure everything.\n     *\n     * The scroll happens before measuring, and the measurement is deferred to the\n     * next frame: reading a rect in the same tick as `scrollIntoView` gives the\n     * position the element had *before* the scroll, which lands the card over the\n     * wrong part of the page.\n     */\n    const measure = useCallback(() => {\n        if (!open || !step) return;\n        const element = step.target ? document.querySelector<HTMLElement>(step.target) : null;\n        const rect = element?.getBoundingClientRect() ?? null;\n        setTarget(\n            rect\n                ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }\n                : null,\n        );\n\n        const size = {\n            width: card.current?.offsetWidth ?? 320,\n            height: card.current?.offsetHeight ?? 160,\n        };\n        const view = { width: window.innerWidth, height: window.innerHeight };\n        setViewport(view);\n        setPosition(\n            placeCard({\n                target: rect\n                    ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }\n                    : null,\n                card: size,\n                viewport: view,\n                preferred: step.placement,\n            }),\n        );\n    }, [open, step]);\n\n    useLayoutEffect(() => {\n        if (!open || !step) return;\n        const element = step.target ? document.querySelector<HTMLElement>(step.target) : null;\n        element?.scrollIntoView({ block: \"center\", inline: \"nearest\", behavior: \"smooth\" });\n        const frame = requestAnimationFrame(measure);\n        return () => cancelAnimationFrame(frame);\n    }, [open, step, measure]);\n\n    useEffect(() => {\n        if (!open) return;\n        window.addEventListener(\"resize\", measure);\n        window.addEventListener(\"scroll\", measure, true);\n        return () => {\n            window.removeEventListener(\"resize\", measure);\n            window.removeEventListener(\"scroll\", measure, true);\n        };\n    }, [open, measure]);\n\n    useEffect(() => {\n        if (open) card.current?.focus();\n    }, [open, current]);\n\n    if (!open || !step) return null;\n\n    const last = current === steps.length - 1;\n\n    const finish = (): void => {\n        onFinish?.();\n        onClose();\n    };\n\n    /**\n     * Arrow keys walk the tour and `Esc` leaves it.\n     *\n     * `Esc` is handled here rather than on `window` so a tour opened over a modal\n     * does not close both: the innermost handler that sees the key wins, and the\n     * card has focus.\n     */\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {\n        if (event.key === \"Escape\") {\n            event.stopPropagation();\n            onClose();\n            return;\n        }\n        if (event.key === \"ArrowRight\" && !last) {\n            event.preventDefault();\n            goTo(current + 1);\n        }\n        if (event.key === \"ArrowLeft\" && current > 0) {\n            event.preventDefault();\n            goTo(current - 1);\n        }\n    };\n\n    return (\n        <div className={styles.root} data-placement={position.placement}>\n            {backdropRects(target, viewport, spotlightPadding).map((rect, i) => (\n                <div\n                    key={i}\n                    className={styles.backdrop}\n                    style={{\n                        top: rect.top,\n                        left: rect.left,\n                        width: rect.width,\n                        height: rect.height,\n                    }}\n                    onClick={onClose}\n                />\n            ))}\n\n            {target && (\n                <div\n                    className={styles.spotlight}\n                    style={{\n                        top: target.top - spotlightPadding,\n                        left: target.left - spotlightPadding,\n                        width: target.width + spotlightPadding * 2,\n                        height: target.height + spotlightPadding * 2,\n                    }}\n                />\n            )}\n\n            <div\n                ref={card}\n                className={cn(styles.card, className)}\n                style={{ top: position.top, left: position.left }}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-labelledby={step.title ? titleId : undefined}\n                aria-describedby={bodyId}\n                tabIndex={-1}\n                onKeyDown={handleKeyDown}\n            >\n                <div className={styles.header}>\n                    <span className={styles.progress}>\n                        {strings.progress(current + 1, steps.length)}\n                    </span>\n                    <button\n                        type=\"button\"\n                        className={styles.close}\n                        aria-label={strings.close}\n                        onClick={onClose}\n                    >\n                        ×\n                    </button>\n                </div>\n\n                {step.title && (\n                    <h2 className={styles.title} id={titleId}>\n                        {step.title}\n                    </h2>\n                )}\n                <div className={styles.body} id={bodyId}>\n                    {step.body}\n                </div>\n\n                <div className={styles.footer}>\n                    {!last && (\n                        <button type=\"button\" className={styles.skip} onClick={onClose}>\n                            {strings.skip}\n                        </button>\n                    )}\n                    <div className={styles.actions}>\n                        {current > 0 && (\n                            <button\n                                type=\"button\"\n                                className={styles.secondary}\n                                onClick={() => goTo(current - 1)}\n                            >\n                                {strings.back}\n                            </button>\n                        )}\n                        <button\n                            type=\"button\"\n                            className={styles.primary}\n                            onClick={() => (last ? finish() : goTo(current + 1))}\n                        >\n                            {last ? strings.finish : strings.next}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Tour/Tour.js

@@ -123,11 +123,7 @@ function h({ steps: h, open: g, onClose: _, onFinish: v, index: y, onIndexChange
 				"aria-describedby": L,
 				tabIndex: -1,
 				onKeyDown: (e) => {
-					if (e.key === "Escape") {
-						e.stopPropagation(), _();
-						return;
-					}
-					e.key === "ArrowRight" && !B && (e.preventDefault(), R(D + 1)), e.key === "ArrowLeft" && D > 0 && (e.preventDefault(), R(D - 1));
+					e.key === "Escape" ? (e.stopPropagation(), _()) : (e.key === "ArrowRight" && !B && (e.preventDefault(), R(D + 1)), e.key === "ArrowLeft" && D > 0 && (e.preventDefault(), R(D - 1)));
 				},
 				children: [
 					/* @__PURE__ */ f("div", {

package/dist/components/Tour/Tour.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tour.js","names":[],"sources":["../../../src/components/Tour/Tour.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — a product tour is a\n * controlled sequence (steps, index, onIndexChange, open, onClose, onFinish) drawn\n * over someone else's DOM (spotlightPadding, locale, className). The body measures\n * the target element, positions the spotlight and the card against it, and re-\n * measures on scroll and resize — one geometry, three triggers.\n */\nimport {\n    useCallback,\n    useEffect,\n    useId,\n    useLayoutEffect,\n    useRef,\n    useState,\n    type KeyboardEvent,\n    type ReactNode,\n} from \"react\";\n\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\nimport { cn } from \"@/utils/cn\";\n\nimport { backdropRects, placeCard, type TourPlacement, type TourRect } from \"./tour-position\";\nimport styles from \"./Tour.module.css\";\n\n/** One stop of the tour. */\nexport interface TourStep {\n    /**\n     * CSS selector of the element to point at.\n     *\n     * A selector rather than a ref, so a tour can be declared as data — in a config\n     * file, from the backend, next to the copy — without every screen having to\n     * thread refs up to whoever renders the tour.\n     */\n    target?: string;\n    /** Heading of the card. */\n    title?: ReactNode;\n    /** The explanation. */\n    body: ReactNode;\n    /** Preferred side. Default `\"bottom\"`, flipped when it does not fit. */\n    placement?: TourPlacement;\n}\n\n/** Labels, per locale. */\ninterface TourStrings {\n    next: string;\n    back: string;\n    finish: string;\n    skip: string;\n    close: string;\n    progress: (current: number, total: number) => string;\n}\n\nconst PT_BR: TourStrings = {\n    next: \"Próximo\",\n    back: \"Voltar\",\n    finish: \"Concluir\",\n    skip: \"Pular\",\n    close: \"Fechar tour\",\n    progress: (current, total) => `Passo ${current} de ${total}`,\n};\n\nconst EN: TourStrings = {\n    next: \"Next\",\n    back: \"Back\",\n    finish: \"Done\",\n    skip: \"Skip\",\n    close: \"Close tour\",\n    progress: (current, total) => `Step ${current} of ${total}`,\n};\n\nexport interface TourProps {\n    /** The stops, in order. */\n    steps: readonly TourStep[];\n    /** Whether the tour is showing. Controlled. */\n    open: boolean;\n    /** Closed by `Esc`, by the close button or by \"skip\". */\n    onClose: () => void;\n    /** Called after the last step is confirmed. `onClose` follows it. */\n    onFinish?: () => void;\n    /** Current step index, when the app wants to drive it. */\n    index?: number;\n    /** Step changed — required only when `index` is given. */\n    onIndexChange?: (index: number) => void;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Space kept clear around the highlighted element, in px. Default 4. */\n    spotlightPadding?: number;\n    /** Extra class on the card. */\n    className?: string;\n}\n\n/**\n * A guided tour: dim the page, highlight one element at a time, explain it.\n *\n * The highlighted element stays **clickable** while everything else is blocked,\n * because the useful kind of coachmark says \"press this\" and lets you press it. That\n * is why the backdrop is four rectangles around the target rather than one overlay\n * with a `box-shadow` hole — a shadow is not hit-testable, so a hole made that way\n * would not block anything.\n *\n * Whether a user has seen the tour is the app's business: this component takes\n * `open` and emits `onClose`/`onFinish`. Persisting a flag in `localStorage` is one\n * line in the app and a wrong default here.\n *\n * @example\n * const [open, setOpen] = useState(!storage.get(\"tour-v1\"));\n *\n * <Tour\n *     open={open}\n *     steps={[\n *         { target: \"#novo-pedido\", title: \"Comece aqui\", body: \"Todo pedido nasce deste botão.\" },\n *         { target: \"[data-tour='filtros']\", body: \"E filtre por período aqui.\" },\n *     ]}\n *     onClose={() => setOpen(false)}\n *     onFinish={() => storage.set(\"tour-v1\", true)}\n * />\n */\nexport function Tour({\n    steps,\n    open,\n    onClose,\n    onFinish,\n    index,\n    onIndexChange,\n    locale = \"pt-BR\",\n    spotlightPadding = 4,\n    className,\n}: TourProps) {\n    const strings = locale === \"en\" ? EN : PT_BR;\n    const [internal, setInternal] = useState(0);\n    const current = Math.min(index ?? internal, Math.max(0, steps.length - 1));\n    const step = steps[current];\n\n    const card = useRef<HTMLDivElement | null>(null);\n    const [target, setTarget] = useState<TourRect | null>(null);\n    const [position, setPosition] = useState<{\n        placement: TourPlacement;\n        top: number;\n        left: number;\n    }>({ placement: \"center\", top: 0, left: 0 });\n    const [viewport, setViewport] = useState({ width: 0, height: 0 });\n    const titleId = useId();\n    const bodyId = useId();\n\n    useFocusTrap(card, open);\n\n    const goTo = useCallback(\n        (next: number) => {\n            if (index === undefined) setInternal(next);\n            onIndexChange?.(next);\n        },\n        [index, onIndexChange],\n    );\n\n    /** Reset to the first step whenever the tour opens again. */\n    useEffect(() => {\n        if (open && index === undefined) setInternal(0);\n    }, [open, index]);\n\n    /**\n     * Find the step's element, bring it into view, and measure everything.\n     *\n     * The scroll happens before measuring, and the measurement is deferred to the\n     * next frame: reading a rect in the same tick as `scrollIntoView` gives the\n     * position the element had *before* the scroll, which lands the card over the\n     * wrong part of the page.\n     */\n    const measure = useCallback(() => {\n        if (!open || !step) return;\n        const element = step.target ? document.querySelector<HTMLElement>(step.target) : null;\n        const rect = element?.getBoundingClientRect() ?? null;\n        setTarget(\n            rect\n                ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }\n                : null,\n        );\n\n        const size = {\n            width: card.current?.offsetWidth ?? 320,\n            height: card.current?.offsetHeight ?? 160,\n        };\n        const view = { width: window.innerWidth, height: window.innerHeight };\n        setViewport(view);\n        setPosition(\n            placeCard({\n                target: rect\n                    ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }\n                    : null,\n                card: size,\n                viewport: view,\n                preferred: step.placement,\n            }),\n        );\n    }, [open, step]);\n\n    useLayoutEffect(() => {\n        if (!open || !step) return;\n        const element = step.target ? document.querySelector<HTMLElement>(step.target) : null;\n        element?.scrollIntoView({ block: \"center\", inline: \"nearest\", behavior: \"smooth\" });\n        const frame = requestAnimationFrame(measure);\n        return () => cancelAnimationFrame(frame);\n    }, [open, step, measure]);\n\n    useEffect(() => {\n        if (!open) return;\n        window.addEventListener(\"resize\", measure);\n        window.addEventListener(\"scroll\", measure, true);\n        return () => {\n            window.removeEventListener(\"resize\", measure);\n            window.removeEventListener(\"scroll\", measure, true);\n        };\n    }, [open, measure]);\n\n    useEffect(() => {\n        if (open) card.current?.focus();\n    }, [open, current]);\n\n    if (!open || !step) return null;\n\n    const last = current === steps.length - 1;\n\n    const finish = (): void => {\n        onFinish?.();\n        onClose();\n    };\n\n    /**\n     * Arrow keys walk the tour and `Esc` leaves it.\n     *\n     * `Esc` is handled here rather than on `window` so a tour opened over a modal\n     * does not close both: the innermost handler that sees the key wins, and the\n     * card has focus.\n     */\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {\n        if (event.key === \"Escape\") {\n            event.stopPropagation();\n            onClose();\n            return;\n        }\n        if (event.key === \"ArrowRight\" && !last) {\n            event.preventDefault();\n            goTo(current + 1);\n        }\n        if (event.key === \"ArrowLeft\" && current > 0) {\n            event.preventDefault();\n            goTo(current - 1);\n        }\n    };\n\n    return (\n        <div className={styles.root} data-placement={position.placement}>\n            {backdropRects(target, viewport, spotlightPadding).map((rect, i) => (\n                <div\n                    key={i}\n                    className={styles.backdrop}\n                    style={{\n                        top: rect.top,\n                        left: rect.left,\n                        width: rect.width,\n                        height: rect.height,\n                    }}\n                    onClick={onClose}\n                />\n            ))}\n\n            {target && (\n                <div\n                    className={styles.spotlight}\n                    style={{\n                        top: target.top - spotlightPadding,\n                        left: target.left - spotlightPadding,\n                        width: target.width + spotlightPadding * 2,\n                        height: target.height + spotlightPadding * 2,\n                    }}\n                />\n            )}\n\n            <div\n                ref={card}\n                className={cn(styles.card, className)}\n                style={{ top: position.top, left: position.left }}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-labelledby={step.title ? titleId : undefined}\n                aria-describedby={bodyId}\n                tabIndex={-1}\n                onKeyDown={handleKeyDown}\n            >\n                <div className={styles.header}>\n                    <span className={styles.progress}>\n                        {strings.progress(current + 1, steps.length)}\n                    </span>\n                    <button\n                        type=\"button\"\n                        className={styles.close}\n                        aria-label={strings.close}\n                        onClick={onClose}\n                    >\n                        ×\n                    </button>\n                </div>\n\n                {step.title && (\n                    <h2 className={styles.title} id={titleId}>\n                        {step.title}\n                    </h2>\n                )}\n                <div className={styles.body} id={bodyId}>\n                    {step.body}\n                </div>\n\n                <div className={styles.footer}>\n                    {!last && (\n                        <button type=\"button\" className={styles.skip} onClick={onClose}>\n                            {strings.skip}\n                        </button>\n                    )}\n                    <div className={styles.actions}>\n                        {current > 0 && (\n                            <button\n                                type=\"button\"\n                                className={styles.secondary}\n                                onClick={() => goTo(current - 1)}\n                            >\n                                {strings.back}\n                            </button>\n                        )}\n                        <button\n                            type=\"button\"\n                            className={styles.primary}\n                            onClick={() => (last ? finish() : goTo(current + 1))}\n                        >\n                            {last ? strings.finish : strings.next}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Tour.js","names":["styles","Tour_module_default","PT_BR","current","total","EN","Tour","strings","locale","internal","setInternal","useState","index","steps","step","card","useRef","target","setTarget","position","setPosition","viewport","setViewport","titleId","useId","bodyId","open","goTo","useCallback","next","onIndexChange","measure","rect","size","view","placeCard","useLayoutEffect","frame","useEffect","last","finish","onFinish","onClose","backdropRects","spotlightPadding","i","cn","className","event"],"sources":["../../../src/components/Tour/Tour.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — a product tour is a\n * controlled sequence (steps, index, onIndexChange, open, onClose, onFinish) drawn\n * over someone else's DOM (spotlightPadding, locale, className). The body measures\n * the target element, positions the spotlight and the card against it, and re-\n * measures on scroll and resize — one geometry, three triggers.\n */\nimport {\n    useCallback,\n    useEffect,\n    useId,\n    useLayoutEffect,\n    useRef,\n    useState,\n    type KeyboardEvent,\n    type ReactNode,\n} from \"react\";\n\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\nimport { cn } from \"@/utils/cn\";\n\nimport { backdropRects, placeCard, type TourPlacement, type TourRect } from \"./tour-position\";\nimport styles from \"./Tour.module.css\";\n\n/** One stop of the tour. */\nexport interface TourStep {\n    /**\n     * CSS selector of the element to point at.\n     *\n     * A selector rather than a ref, so a tour can be declared as data — in a config\n     * file, from the backend, next to the copy — without every screen having to\n     * thread refs up to whoever renders the tour.\n     */\n    target?: string;\n    /** Heading of the card. */\n    title?: ReactNode;\n    /** The explanation. */\n    body: ReactNode;\n    /** Preferred side. Default `\"bottom\"`, flipped when it does not fit. */\n    placement?: TourPlacement;\n}\n\n/** Labels, per locale. */\ninterface TourStrings {\n    next: string;\n    back: string;\n    finish: string;\n    skip: string;\n    close: string;\n    progress: (current: number, total: number) => string;\n}\n\nconst PT_BR: TourStrings = {\n    next: \"Próximo\",\n    back: \"Voltar\",\n    finish: \"Concluir\",\n    skip: \"Pular\",\n    close: \"Fechar tour\",\n    progress: (current, total) => `Passo ${current} de ${total}`,\n};\n\nconst EN: TourStrings = {\n    next: \"Next\",\n    back: \"Back\",\n    finish: \"Done\",\n    skip: \"Skip\",\n    close: \"Close tour\",\n    progress: (current, total) => `Step ${current} of ${total}`,\n};\n\nexport interface TourProps {\n    /** The stops, in order. */\n    steps: readonly TourStep[];\n    /** Whether the tour is showing. Controlled. */\n    open: boolean;\n    /** Closed by `Esc`, by the close button or by \"skip\". */\n    onClose: () => void;\n    /** Called after the last step is confirmed. `onClose` follows it. */\n    onFinish?: () => void;\n    /** Current step index, when the app wants to drive it. */\n    index?: number;\n    /** Step changed — required only when `index` is given. */\n    onIndexChange?: (index: number) => void;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Space kept clear around the highlighted element, in px. Default 4. */\n    spotlightPadding?: number;\n    /** Extra class on the card. */\n    className?: string;\n}\n\n/**\n * A guided tour: dim the page, highlight one element at a time, explain it.\n *\n * The highlighted element stays **clickable** while everything else is blocked,\n * because the useful kind of coachmark says \"press this\" and lets you press it. That\n * is why the backdrop is four rectangles around the target rather than one overlay\n * with a `box-shadow` hole — a shadow is not hit-testable, so a hole made that way\n * would not block anything.\n *\n * Whether a user has seen the tour is the app's business: this component takes\n * `open` and emits `onClose`/`onFinish`. Persisting a flag in `localStorage` is one\n * line in the app and a wrong default here.\n *\n * @example\n * const [open, setOpen] = useState(!storage.get(\"tour-v1\"));\n *\n * <Tour\n *     open={open}\n *     steps={[\n *         { target: \"#novo-pedido\", title: \"Comece aqui\", body: \"Todo pedido nasce deste botão.\" },\n *         { target: \"[data-tour='filtros']\", body: \"E filtre por período aqui.\" },\n *     ]}\n *     onClose={() => setOpen(false)}\n *     onFinish={() => storage.set(\"tour-v1\", true)}\n * />\n */\nexport function Tour({\n    steps,\n    open,\n    onClose,\n    onFinish,\n    index,\n    onIndexChange,\n    locale = \"pt-BR\",\n    spotlightPadding = 4,\n    className,\n}: TourProps) {\n    const strings = locale === \"en\" ? EN : PT_BR;\n    const [internal, setInternal] = useState(0);\n    const current = Math.min(index ?? internal, Math.max(0, steps.length - 1));\n    const step = steps[current];\n\n    const card = useRef<HTMLDivElement | null>(null);\n    const [target, setTarget] = useState<TourRect | null>(null);\n    const [position, setPosition] = useState<{\n        placement: TourPlacement;\n        top: number;\n        left: number;\n    }>({ placement: \"center\", top: 0, left: 0 });\n    const [viewport, setViewport] = useState({ width: 0, height: 0 });\n    const titleId = useId();\n    const bodyId = useId();\n\n    useFocusTrap(card, open);\n\n    const goTo = useCallback(\n        (next: number) => {\n            if (index === undefined) setInternal(next);\n            onIndexChange?.(next);\n        },\n        [index, onIndexChange],\n    );\n\n    /** Reset to the first step whenever the tour opens again. */\n    useEffect(() => {\n        if (open && index === undefined) setInternal(0);\n    }, [open, index]);\n\n    /**\n     * Find the step's element, bring it into view, and measure everything.\n     *\n     * The scroll happens before measuring, and the measurement is deferred to the\n     * next frame: reading a rect in the same tick as `scrollIntoView` gives the\n     * position the element had *before* the scroll, which lands the card over the\n     * wrong part of the page.\n     */\n    const measure = useCallback(() => {\n        if (!open || !step) return;\n        const element = step.target ? document.querySelector<HTMLElement>(step.target) : null;\n        const rect = element?.getBoundingClientRect() ?? null;\n        setTarget(\n            rect\n                ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }\n                : null,\n        );\n\n        const size = {\n            width: card.current?.offsetWidth ?? 320,\n            height: card.current?.offsetHeight ?? 160,\n        };\n        const view = { width: window.innerWidth, height: window.innerHeight };\n        setViewport(view);\n        setPosition(\n            placeCard({\n                target: rect\n                    ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }\n                    : null,\n                card: size,\n                viewport: view,\n                preferred: step.placement,\n            }),\n        );\n    }, [open, step]);\n\n    useLayoutEffect(() => {\n        if (!open || !step) return;\n        const element = step.target ? document.querySelector<HTMLElement>(step.target) : null;\n        element?.scrollIntoView({ block: \"center\", inline: \"nearest\", behavior: \"smooth\" });\n        const frame = requestAnimationFrame(measure);\n        return () => cancelAnimationFrame(frame);\n    }, [open, step, measure]);\n\n    useEffect(() => {\n        if (!open) return;\n        window.addEventListener(\"resize\", measure);\n        window.addEventListener(\"scroll\", measure, true);\n        return () => {\n            window.removeEventListener(\"resize\", measure);\n            window.removeEventListener(\"scroll\", measure, true);\n        };\n    }, [open, measure]);\n\n    useEffect(() => {\n        if (open) card.current?.focus();\n    }, [open, current]);\n\n    if (!open || !step) return null;\n\n    const last = current === steps.length - 1;\n\n    const finish = (): void => {\n        onFinish?.();\n        onClose();\n    };\n\n    /**\n     * Arrow keys walk the tour and `Esc` leaves it.\n     *\n     * `Esc` is handled here rather than on `window` so a tour opened over a modal\n     * does not close both: the innermost handler that sees the key wins, and the\n     * card has focus.\n     */\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {\n        if (event.key === \"Escape\") {\n            event.stopPropagation();\n            onClose();\n            return;\n        }\n        if (event.key === \"ArrowRight\" && !last) {\n            event.preventDefault();\n            goTo(current + 1);\n        }\n        if (event.key === \"ArrowLeft\" && current > 0) {\n            event.preventDefault();\n            goTo(current - 1);\n        }\n    };\n\n    return (\n        <div className={styles.root} data-placement={position.placement}>\n            {backdropRects(target, viewport, spotlightPadding).map((rect, i) => (\n                <div\n                    key={i}\n                    className={styles.backdrop}\n                    style={{\n                        top: rect.top,\n                        left: rect.left,\n                        width: rect.width,\n                        height: rect.height,\n                    }}\n                    onClick={onClose}\n                />\n            ))}\n\n            {target && (\n                <div\n                    className={styles.spotlight}\n                    style={{\n                        top: target.top - spotlightPadding,\n                        left: target.left - spotlightPadding,\n                        width: target.width + spotlightPadding * 2,\n                        height: target.height + spotlightPadding * 2,\n                    }}\n                />\n            )}\n\n            <div\n                ref={card}\n                className={cn(styles.card, className)}\n                style={{ top: position.top, left: position.left }}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-labelledby={step.title ? titleId : undefined}\n                aria-describedby={bodyId}\n                tabIndex={-1}\n                onKeyDown={handleKeyDown}\n            >\n                <div className={styles.header}>\n                    <span className={styles.progress}>\n                        {strings.progress(current + 1, steps.length)}\n                    </span>\n                    <button\n                        type=\"button\"\n                        className={styles.close}\n                        aria-label={strings.close}\n                        onClick={onClose}\n                    >\n                        ×\n                    </button>\n                </div>\n\n                {step.title && (\n                    <h2 className={styles.title} id={titleId}>\n                        {step.title}\n                    </h2>\n                )}\n                <div className={styles.body} id={bodyId}>\n                    {step.body}\n                </div>\n\n                <div className={styles.footer}>\n                    {!last && (\n                        <button type=\"button\" className={styles.skip} onClick={onClose}>\n                            {strings.skip}\n                        </button>\n                    )}\n                    <div className={styles.actions}>\n                        {current > 0 && (\n                            <button\n                                type=\"button\"\n                                className={styles.secondary}\n                                onClick={() => goTo(current - 1)}\n                            >\n                                {strings.back}\n                            </button>\n                        )}\n                        <button\n                            type=\"button\"\n                            className={styles.primary}\n                            onClick={() => (last ? finish() : goTo(current + 1))}\n                        >\n                            {last ? strings.finish : strings.next}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;;;;;AAoDA,IAAME,IAAqB;CACvB,MAAM;CACN,MAAM;CACN,QAAQ;CACR,MAAM;CACN,OAAO;CACP,WAAW,GAAS,MAAU,SAASC,EAAQ,MAAMC;AACzD,GAEMC,IAAkB;CACpB,MAAM;CACN,MAAM;CACN,QAAQ;CACR,MAAM;CACN,OAAO;CACP,WAAW,GAAS,MAAU,QAAQF,EAAQ,MAAMC;AACxD;AAiDA,SAAgBE,EAAK,EACjB,UACA,SACA,YACA,aACA,UACA,kBACA,YAAS,SACT,sBAAmB,GACnB,gBACU;CACV,IAAMC,IAAUC,MAAW,OAAOH,IAAKH,GACjC,CAACO,GAAUC,KAAeC,EAAS,CAAC,GACpCR,IAAU,KAAK,IAAIS,KAASH,GAAU,KAAK,IAAI,GAAGI,EAAM,SAAS,CAAC,CAAC,GACnEC,IAAOD,EAAMV,IAEbY,IAAOC,EAA8B,IAAI,GACzC,CAACC,GAAQC,KAAaP,EAA0B,IAAI,GACpD,CAACQ,GAAUC,KAAeT,EAI7B;EAAE,WAAW;EAAU,KAAK;EAAG,MAAM;CAAE,CAAC,GACrC,CAACU,GAAUC,KAAeX,EAAS;EAAE,OAAO;EAAG,QAAQ;CAAE,CAAC,GAC1DY,IAAUC,EAAM,GAChBC,IAASD,EAAM;CAErB,EAAaT,GAAMW,CAAI;CAEvB,IAAMC,IAAOC,GACR,MAAiB;EAEd,AADIhB,MAAU,KAAA,KAAWF,EAAYmB,CAAI,GACzCC,IAAgBD,CAAI;CACxB,GACA,CAACjB,GAAOkB,CAAa,CACzB;CAGA,QAAgB;EACZ,AAAIJ,KAAQd,MAAU,KAAA,KAAWF,EAAY,CAAC;CAClD,GAAG,CAACgB,GAAMd,CAAK,CAAC;CAUhB,IAAMmB,IAAUH,QAAkB;EAC9B,IAAI,CAACF,KAAQ,CAACZ,GAAM;EAEpB,IAAMkB,KADUlB,EAAK,SAAS,SAAS,cAA2BA,EAAK,MAAM,IAAI,KAAA,EAC3D,sBAAsB,KAAK;EACjD,EACIkB,IACM;GAAE,KAAKA,EAAK;GAAK,MAAMA,EAAK;GAAM,OAAOA,EAAK;GAAO,QAAQA,EAAK;EAAO,IACzE,IACV;EAEA,IAAMC,IAAO;GACT,OAAOlB,EAAK,SAAS,eAAe;GACpC,QAAQA,EAAK,SAAS,gBAAgB;EAC1C,GACMmB,IAAO;GAAE,OAAO,OAAO;GAAY,QAAQ,OAAO;EAAY;EAEpE,AADAZ,EAAYY,CAAI,GAChBd,EACIe,EAAU;GACN,QAAQH,IACF;IAAE,KAAKA,EAAK;IAAK,MAAMA,EAAK;IAAM,OAAOA,EAAK;IAAO,QAAQA,EAAK;GAAO,IACzE;GACN,MAAMC;GACN,UAAUC;GACV,WAAWpB,EAAK;EACpB,CAAC,CACL;CACJ,GAAG,CAACY,GAAMZ,CAAI,CAAC;CAwBf,IAtBAsB,QAAsB;EAClB,IAAI,CAACV,KAAQ,CAACZ,GAAM;EAEpB,CADgBA,EAAK,SAAS,SAAS,cAA2BA,EAAK,MAAM,IAAI,KAAA,EACxE,eAAe;GAAE,OAAO;GAAU,QAAQ;GAAW,UAAU;EAAS,CAAC;EAClF,IAAMuB,IAAQ,sBAAsBN,CAAO;EAC3C,aAAa,qBAAqBM,CAAK;CAC3C,GAAG;EAACX;EAAMZ;EAAMiB;CAAO,CAAC,GAExBO,QAAgB;EACZ,IAAKZ,GAGL,OAFA,OAAO,iBAAiB,UAAUK,CAAO,GACzC,OAAO,iBAAiB,UAAUA,GAAS,EAAI,SAClC;GAET,AADA,OAAO,oBAAoB,UAAUA,CAAO,GAC5C,OAAO,oBAAoB,UAAUA,GAAS,EAAI;EACtD;CACJ,GAAG,CAACL,GAAMK,CAAO,CAAC,GAElBO,QAAgB;EACZ,AAAIZ,KAAMX,EAAK,SAAS,MAAM;CAClC,GAAG,CAACW,GAAMvB,CAAO,CAAC,GAEd,CAACuB,KAAQ,CAACZ,GAAM,OAAO;CAE3B,IAAMyB,IAAOpC,MAAYU,EAAM,SAAS,GAElC2B,UAAqB;EAEvB,AADAC,IAAW,GACXC,EAAQ;CACZ;CAyBA,OACI,kBAAC,OAAD;EAAK,WAAW1C,EAAO;EAAM,kBAAgBmB,EAAS;EAAtD,UAAA;GACKwB,EAAc1B,GAAQI,GAAUuB,CAAgB,CAAC,CAAC,KAAK,GAAM,MAC1D,kBAAC,OAAD;IAEI,WAAW5C,EAAO;IAClB,OAAO;KACH,KAAKgC,EAAK;KACV,MAAMA,EAAK;KACX,OAAOA,EAAK;KACZ,QAAQA,EAAK;IACjB;IACA,SAASU;GACZ,GATQG,CASR,CACJ;GAEA5B,KACG,kBAAC,OAAD;IACI,WAAWjB,EAAO;IAClB,OAAO;KACH,KAAKiB,EAAO,MAAM2B;KAClB,MAAM3B,EAAO,OAAO2B;KACpB,OAAO3B,EAAO,QAAQ2B,IAAmB;KACzC,QAAQ3B,EAAO,SAAS2B,IAAmB;IAC/C;GACH,CAAA;GAGL,kBAAC,OAAD;IACI,KAAK7B;IACL,WAAW+B,EAAG9C,EAAO,MAAM+C,CAAS;IACpC,OAAO;KAAE,KAAK5B,EAAS;KAAK,MAAMA,EAAS;IAAK;IAChD,MAAK;IACL,cAAW;IACX,mBAAiBL,EAAK,QAAQS,IAAU,KAAA;IACxC,oBAAkBE;IAClB,UAAU;IACV,YArDW,MAA+C;KAClE,AAAIuB,EAAM,QAAQ,YACdA,EAAM,gBAAgB,GACtBN,EAAQ,MAGRM,EAAM,QAAQ,gBAAgB,CAACT,MAC/BS,EAAM,eAAe,GACrBrB,EAAKxB,IAAU,CAAC,IAEhB6C,EAAM,QAAQ,eAAe7C,IAAU,MACvC6C,EAAM,eAAe,GACrBrB,EAAKxB,IAAU,CAAC;IAExB;IA8BQ,UAAA;KAWI,kBAAC,OAAD;MAAK,WAAWH,EAAO;MAAvB,UAAA,CACI,kBAAC,QAAD;OAAM,WAAWA,EAAO;OACnB,UAAAO,EAAQ,SAASJ,IAAU,GAAGU,EAAM,MAAM;MACzC,CAAA,GACN,kBAAC,UAAD;OACI,MAAK;OACL,WAAWb,EAAO;OAClB,cAAYO,EAAQ;OACpB,SAASmC;OACZ,UAAA;MAEO,CAAA,CACP;;KAEJ5B,EAAK,SACF,kBAAC,MAAD;MAAI,WAAWd,EAAO;MAAO,IAAIuB;MAC5B,UAAAT,EAAK;KACN,CAAA;KAER,kBAAC,OAAD;MAAK,WAAWd,EAAO;MAAM,IAAIyB;MAC5B,UAAAX,EAAK;KACL,CAAA;KAEL,kBAAC,OAAD;MAAK,WAAWd,EAAO;MAAvB,UAAA,CACK,CAACuC,KACE,kBAAC,UAAD;OAAQ,MAAK;OAAS,WAAWvC,EAAO;OAAM,SAAS0C;OAClD,UAAAnC,EAAQ;MACL,CAAA,GAEZ,kBAAC,OAAD;OAAK,WAAWP,EAAO;OAAvB,UAAA,CACKG,IAAU,KACP,kBAAC,UAAD;QACI,MAAK;QACL,WAAWH,EAAO;QAClB,eAAe2B,EAAKxB,IAAU,CAAC;QAE9B,UAAAI,EAAQ;OACL,CAAA,GAEZ,kBAAC,UAAD;QACI,MAAK;QACL,WAAWP,EAAO;QAClB,eAAgBuC,IAAOC,EAAO,IAAIb,EAAKxB,IAAU,CAAC;QAEjD,UAAAoC,IAAOhC,EAAQ,SAASA,EAAQ;OAC7B,CAAA,CACP;MACJ,CAAA,CAAA;;IACJ;;EACJ;;AAEb"}

package/dist/components/Tour/Tour.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tour.module.cjs","names":[],"sources":["../../../src/components/Tour/Tour.module.css"],"sourcesContent":[".root {\n    position: fixed;\n    inset: 0;\n    z-index: var(--tempest-z-modal, 1000);\n    font-family: var(--tempest-font-sans);\n    pointer-events: none;\n}\n\n/*\n * The dimmed area is four rectangles, each one hit-testable, so the page behind is\n * blocked while the highlighted element stays clickable. A single overlay with a\n * `box-shadow` hole looks the same and blocks nothing: a shadow is not hit-tested.\n */\n.backdrop {\n    position: fixed;\n    background-color: var(--tempest-tour-backdrop, rgb(0 0 0 / 55%));\n    pointer-events: auto;\n}\n\n.spotlight {\n    position: fixed;\n    border-radius: var(--tempest-radius-md);\n    box-shadow: 0 0 0 2px var(--tempest-primary);\n    pointer-events: none;\n}\n\n.card {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n    width: min(22rem, calc(100vw - 2rem));\n    padding: var(--tempest-space-4);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n    box-shadow: var(--tempest-shadow-lg);\n    color: var(--tempest-text);\n    pointer-events: auto;\n}\n\n.card:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n}\n\n.progress {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.75rem;\n    height: 1.75rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-lg);\n    line-height: 1;\n    cursor: pointer;\n}\n\n.close:hover {\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-base);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.body {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    margin-block-start: var(--tempest-space-2);\n}\n\n.actions {\n    display: flex;\n    gap: var(--tempest-space-2);\n    margin-inline-start: auto;\n}\n\n.skip {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-text-muted);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.primary,\n.secondary {\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    border-radius: var(--tempest-radius-md);\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    cursor: pointer;\n}\n\n.primary {\n    border: none;\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.secondary {\n    border: 1px solid var(--tempest-border);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n}\n\n.primary:focus-visible,\n.secondary:focus-visible,\n.skip:focus-visible,\n.close:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n/* The spotlight ring is decoration; a reader who asked for less motion gets none. */\n@media (prefers-reduced-motion: no-preference) {\n    .spotlight {\n        transition:\n            top var(--tempest-duration-base) var(--tempest-ease-out),\n            left var(--tempest-duration-base) var(--tempest-ease-out),\n            width var(--tempest-duration-base) var(--tempest-ease-out),\n            height var(--tempest-duration-base) var(--tempest-ease-out);\n    }\n\n    .card {\n        transition:\n            top var(--tempest-duration-base) var(--tempest-ease-out),\n            left var(--tempest-duration-base) var(--tempest-ease-out);\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Tour.module.cjs","names":["root","backdrop","spotlight","card","header","progress","close","title","body","footer","actions","skip","primary","secondary","Tour_module_default"],"sources":["../../../src/components/Tour/Tour.module.css"],"sourcesContent":[".root {\n    position: fixed;\n    inset: 0;\n    z-index: var(--tempest-z-modal, 1000);\n    font-family: var(--tempest-font-sans);\n    pointer-events: none;\n}\n\n/*\n * The dimmed area is four rectangles, each one hit-testable, so the page behind is\n * blocked while the highlighted element stays clickable. A single overlay with a\n * `box-shadow` hole looks the same and blocks nothing: a shadow is not hit-tested.\n */\n.backdrop {\n    position: fixed;\n    background-color: var(--tempest-tour-backdrop, rgb(0 0 0 / 55%));\n    pointer-events: auto;\n}\n\n.spotlight {\n    position: fixed;\n    border-radius: var(--tempest-radius-md);\n    box-shadow: 0 0 0 2px var(--tempest-primary);\n    pointer-events: none;\n}\n\n.card {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n    width: min(22rem, calc(100vw - 2rem));\n    padding: var(--tempest-space-4);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n    box-shadow: var(--tempest-shadow-lg);\n    color: var(--tempest-text);\n    pointer-events: auto;\n}\n\n.card:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n}\n\n.progress {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.75rem;\n    height: 1.75rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-lg);\n    line-height: 1;\n    cursor: pointer;\n}\n\n.close:hover {\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-base);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.body {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    margin-block-start: var(--tempest-space-2);\n}\n\n.actions {\n    display: flex;\n    gap: var(--tempest-space-2);\n    margin-inline-start: auto;\n}\n\n.skip {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-text-muted);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.primary,\n.secondary {\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    border-radius: var(--tempest-radius-md);\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    cursor: pointer;\n}\n\n.primary {\n    border: none;\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.secondary {\n    border: 1px solid var(--tempest-border);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n}\n\n.primary:focus-visible,\n.secondary:focus-visible,\n.skip:focus-visible,\n.close:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n/* The spotlight ring is decoration; a reader who asked for less motion gets none. */\n@media (prefers-reduced-motion: no-preference) {\n    .spotlight {\n        transition:\n            top var(--tempest-duration-base) var(--tempest-ease-out),\n            left var(--tempest-duration-base) var(--tempest-ease-out),\n            width var(--tempest-duration-base) var(--tempest-ease-out),\n            height var(--tempest-duration-base) var(--tempest-ease-out);\n    }\n\n    .card {\n        transition:\n            top var(--tempest-duration-base) var(--tempest-ease-out),\n            left var(--tempest-duration-base) var(--tempest-ease-out);\n    }\n}\n"],"mappings":";"}

package/dist/components/Tour/Tour.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tour.module.js","names":[],"sources":["../../../src/components/Tour/Tour.module.css"],"sourcesContent":[".root {\n    position: fixed;\n    inset: 0;\n    z-index: var(--tempest-z-modal, 1000);\n    font-family: var(--tempest-font-sans);\n    pointer-events: none;\n}\n\n/*\n * The dimmed area is four rectangles, each one hit-testable, so the page behind is\n * blocked while the highlighted element stays clickable. A single overlay with a\n * `box-shadow` hole looks the same and blocks nothing: a shadow is not hit-tested.\n */\n.backdrop {\n    position: fixed;\n    background-color: var(--tempest-tour-backdrop, rgb(0 0 0 / 55%));\n    pointer-events: auto;\n}\n\n.spotlight {\n    position: fixed;\n    border-radius: var(--tempest-radius-md);\n    box-shadow: 0 0 0 2px var(--tempest-primary);\n    pointer-events: none;\n}\n\n.card {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n    width: min(22rem, calc(100vw - 2rem));\n    padding: var(--tempest-space-4);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n    box-shadow: var(--tempest-shadow-lg);\n    color: var(--tempest-text);\n    pointer-events: auto;\n}\n\n.card:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n}\n\n.progress {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.75rem;\n    height: 1.75rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-lg);\n    line-height: 1;\n    cursor: pointer;\n}\n\n.close:hover {\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-base);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.body {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    margin-block-start: var(--tempest-space-2);\n}\n\n.actions {\n    display: flex;\n    gap: var(--tempest-space-2);\n    margin-inline-start: auto;\n}\n\n.skip {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-text-muted);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.primary,\n.secondary {\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    border-radius: var(--tempest-radius-md);\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    cursor: pointer;\n}\n\n.primary {\n    border: none;\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.secondary {\n    border: 1px solid var(--tempest-border);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n}\n\n.primary:focus-visible,\n.secondary:focus-visible,\n.skip:focus-visible,\n.close:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n/* The spotlight ring is decoration; a reader who asked for less motion gets none. */\n@media (prefers-reduced-motion: no-preference) {\n    .spotlight {\n        transition:\n            top var(--tempest-duration-base) var(--tempest-ease-out),\n            left var(--tempest-duration-base) var(--tempest-ease-out),\n            width var(--tempest-duration-base) var(--tempest-ease-out),\n            height var(--tempest-duration-base) var(--tempest-ease-out);\n    }\n\n    .card {\n        transition:\n            top var(--tempest-duration-base) var(--tempest-ease-out),\n            left var(--tempest-duration-base) var(--tempest-ease-out);\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Tour.module.js","names":["root","backdrop","spotlight","card","header","progress","close","title","body","footer","actions","skip","primary","secondary","Tour_module_default"],"sources":["../../../src/components/Tour/Tour.module.css"],"sourcesContent":[".root {\n    position: fixed;\n    inset: 0;\n    z-index: var(--tempest-z-modal, 1000);\n    font-family: var(--tempest-font-sans);\n    pointer-events: none;\n}\n\n/*\n * The dimmed area is four rectangles, each one hit-testable, so the page behind is\n * blocked while the highlighted element stays clickable. A single overlay with a\n * `box-shadow` hole looks the same and blocks nothing: a shadow is not hit-tested.\n */\n.backdrop {\n    position: fixed;\n    background-color: var(--tempest-tour-backdrop, rgb(0 0 0 / 55%));\n    pointer-events: auto;\n}\n\n.spotlight {\n    position: fixed;\n    border-radius: var(--tempest-radius-md);\n    box-shadow: 0 0 0 2px var(--tempest-primary);\n    pointer-events: none;\n}\n\n.card {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n    width: min(22rem, calc(100vw - 2rem));\n    padding: var(--tempest-space-4);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n    box-shadow: var(--tempest-shadow-lg);\n    color: var(--tempest-text);\n    pointer-events: auto;\n}\n\n.card:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n}\n\n.progress {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.75rem;\n    height: 1.75rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-lg);\n    line-height: 1;\n    cursor: pointer;\n}\n\n.close:hover {\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-base);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.body {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    margin-block-start: var(--tempest-space-2);\n}\n\n.actions {\n    display: flex;\n    gap: var(--tempest-space-2);\n    margin-inline-start: auto;\n}\n\n.skip {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-text-muted);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.primary,\n.secondary {\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    border-radius: var(--tempest-radius-md);\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    cursor: pointer;\n}\n\n.primary {\n    border: none;\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.secondary {\n    border: 1px solid var(--tempest-border);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n}\n\n.primary:focus-visible,\n.secondary:focus-visible,\n.skip:focus-visible,\n.close:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n/* The spotlight ring is decoration; a reader who asked for less motion gets none. */\n@media (prefers-reduced-motion: no-preference) {\n    .spotlight {\n        transition:\n            top var(--tempest-duration-base) var(--tempest-ease-out),\n            left var(--tempest-duration-base) var(--tempest-ease-out),\n            width var(--tempest-duration-base) var(--tempest-ease-out),\n            height var(--tempest-duration-base) var(--tempest-ease-out);\n    }\n\n    .card {\n        transition:\n            top var(--tempest-duration-base) var(--tempest-ease-out),\n            left var(--tempest-duration-base) var(--tempest-ease-out);\n    }\n}\n"],"mappings":";"}

package/dist/components/Tour/tour-position.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tour-position.cjs","names":[],"sources":["../../../src/components/Tour/tour-position.ts"],"sourcesContent":["/** Where the card sits relative to the highlighted element. */\nexport type TourPlacement = \"top\" | \"bottom\" | \"left\" | \"right\" | \"center\";\n\n/** A rectangle in viewport coordinates. */\nexport interface TourRect {\n    top: number;\n    left: number;\n    width: number;\n    height: number;\n}\n\n/** Viewport size the placement is solved against. */\nexport interface TourViewport {\n    width: number;\n    height: number;\n}\n\n/** Gap between the highlighted element and the card. */\nconst OFFSET = 12;\n\n/** Smallest margin the card keeps from the viewport edge. */\nconst MARGIN = 8;\n\n/** Clamp a value into a range, tolerating a range narrower than the value. */\nfunction clamp(value: number, min: number, max: number): number {\n    return Math.max(min, Math.min(value, Math.max(min, max)));\n}\n\n/** Does the card fit on this side of the target? */\nfunction fits(\n    placement: TourPlacement,\n    target: TourRect,\n    card: { width: number; height: number },\n    viewport: TourViewport,\n): boolean {\n    switch (placement) {\n        case \"top\":\n            return target.top - OFFSET - card.height >= MARGIN;\n        case \"bottom\":\n            return target.top + target.height + OFFSET + card.height <= viewport.height - MARGIN;\n        case \"left\":\n            return target.left - OFFSET - card.width >= MARGIN;\n        case \"right\":\n            return target.left + target.width + OFFSET + card.width <= viewport.width - MARGIN;\n        default:\n            return true;\n    }\n}\n\n/** Sides tried, in order, when the preferred one does not fit. */\nconst FALLBACKS: Record<Exclude<TourPlacement, \"center\">, TourPlacement[]> = {\n    bottom: [\"bottom\", \"top\", \"right\", \"left\"],\n    top: [\"top\", \"bottom\", \"right\", \"left\"],\n    right: [\"right\", \"left\", \"bottom\", \"top\"],\n    left: [\"left\", \"right\", \"bottom\", \"top\"],\n};\n\n/**\n * Place the tour card next to the highlighted element.\n *\n * The preferred side is tried first and the opposite one second, because flipping\n * a \"below\" card to \"above\" keeps the reading relationship with the target;\n * jumping to a side would move the card across the screen for no reason the reader\n * can see.\n *\n * Nothing fitting anywhere ends at `center`: a card pinned half off-screen is worse\n * than a card in the middle, and this happens for real whenever the target is\n * taller than the viewport.\n *\n * The result is always clamped inside the viewport, so the card cannot be pushed\n * off the edge by a target near a corner.\n *\n * @param params.target - The highlighted element's rect, viewport coordinates.\n * @param params.card - Measured card size.\n * @param params.viewport - Viewport size.\n * @param params.preferred - Placement the step asked for. Default `\"bottom\"`.\n * @returns The chosen placement and the card's top/left.\n */\nexport function placeCard({\n    target,\n    card,\n    viewport,\n    preferred = \"bottom\",\n}: {\n    target: TourRect | null;\n    card: { width: number; height: number };\n    viewport: TourViewport;\n    preferred?: TourPlacement;\n}): { placement: TourPlacement; top: number; left: number } {\n    const centered = {\n        placement: \"center\" as TourPlacement,\n        top: Math.max(MARGIN, (viewport.height - card.height) / 2),\n        left: Math.max(MARGIN, (viewport.width - card.width) / 2),\n    };\n\n    // No target — a step whose element is not on the page still has to show its\n    // message, so it is shown centered rather than dropped.\n    if (!target || preferred === \"center\") return centered;\n\n    const order = FALLBACKS[preferred as Exclude<TourPlacement, \"center\">] ?? FALLBACKS.bottom;\n    const placement = order.find((candidate) => fits(candidate, target, card, viewport));\n    if (!placement) return centered;\n\n    const horizontalCenter = target.left + target.width / 2 - card.width / 2;\n    const verticalCenter = target.top + target.height / 2 - card.height / 2;\n\n    const raw =\n        placement === \"top\"\n            ? { top: target.top - OFFSET - card.height, left: horizontalCenter }\n            : placement === \"bottom\"\n              ? { top: target.top + target.height + OFFSET, left: horizontalCenter }\n              : placement === \"left\"\n                ? { top: verticalCenter, left: target.left - OFFSET - card.width }\n                : { top: verticalCenter, left: target.left + target.width + OFFSET };\n\n    return {\n        placement,\n        top: clamp(raw.top, MARGIN, viewport.height - card.height - MARGIN),\n        left: clamp(raw.left, MARGIN, viewport.width - card.width - MARGIN),\n    };\n}\n\n/**\n * The four backdrop rectangles that surround the highlighted element.\n *\n * Four rects rather than one overlay with a `box-shadow` hole: a box-shadow is not\n * hit-testable, so the \"dimmed\" area would not block clicks — and blocking the rest\n * of the page while leaving the highlighted control usable is the whole behaviour a\n * coachmark needs. Any rect that comes out empty is dropped, which is what happens\n * when the target touches an edge.\n *\n * @param target - Highlighted rect, or `null` for a full-screen backdrop.\n * @param viewport - Viewport size.\n * @param padding - Extra space kept clear around the target.\n */\nexport function backdropRects(\n    target: TourRect | null,\n    viewport: TourViewport,\n    padding = 4,\n): TourRect[] {\n    if (!target) {\n        return [{ top: 0, left: 0, width: viewport.width, height: viewport.height }];\n    }\n    const top = Math.max(0, target.top - padding);\n    const left = Math.max(0, target.left - padding);\n    const right = Math.min(viewport.width, target.left + target.width + padding);\n    const bottom = Math.min(viewport.height, target.top + target.height + padding);\n\n    return [\n        { top: 0, left: 0, width: viewport.width, height: top },\n        { top: bottom, left: 0, width: viewport.width, height: viewport.height - bottom },\n        { top, left: 0, width: left, height: bottom - top },\n        { top, left: right, width: viewport.width - right, height: bottom - top },\n    ].filter((rect) => rect.width > 0 && rect.height > 0);\n}\n"],"mappings":"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"}
+{"version":3,"file":"tour-position.cjs","names":["clamp","min","value","max","fits","placement","target","card","viewport","FALLBACKS","placeCard","centered","preferred","candidate","horizontalCenter","verticalCenter","raw","backdropRects","top","padding","left","right","bottom","rect"],"sources":["../../../src/components/Tour/tour-position.ts"],"sourcesContent":["/** Where the card sits relative to the highlighted element. */\nexport type TourPlacement = \"top\" | \"bottom\" | \"left\" | \"right\" | \"center\";\n\n/** A rectangle in viewport coordinates. */\nexport interface TourRect {\n    top: number;\n    left: number;\n    width: number;\n    height: number;\n}\n\n/** Viewport size the placement is solved against. */\nexport interface TourViewport {\n    width: number;\n    height: number;\n}\n\n/** Gap between the highlighted element and the card. */\nconst OFFSET = 12;\n\n/** Smallest margin the card keeps from the viewport edge. */\nconst MARGIN = 8;\n\n/** Clamp a value into a range, tolerating a range narrower than the value. */\nfunction clamp(value: number, min: number, max: number): number {\n    return Math.max(min, Math.min(value, Math.max(min, max)));\n}\n\n/** Does the card fit on this side of the target? */\nfunction fits(\n    placement: TourPlacement,\n    target: TourRect,\n    card: { width: number; height: number },\n    viewport: TourViewport,\n): boolean {\n    switch (placement) {\n        case \"top\":\n            return target.top - OFFSET - card.height >= MARGIN;\n        case \"bottom\":\n            return target.top + target.height + OFFSET + card.height <= viewport.height - MARGIN;\n        case \"left\":\n            return target.left - OFFSET - card.width >= MARGIN;\n        case \"right\":\n            return target.left + target.width + OFFSET + card.width <= viewport.width - MARGIN;\n        default:\n            return true;\n    }\n}\n\n/** Sides tried, in order, when the preferred one does not fit. */\nconst FALLBACKS: Record<Exclude<TourPlacement, \"center\">, TourPlacement[]> = {\n    bottom: [\"bottom\", \"top\", \"right\", \"left\"],\n    top: [\"top\", \"bottom\", \"right\", \"left\"],\n    right: [\"right\", \"left\", \"bottom\", \"top\"],\n    left: [\"left\", \"right\", \"bottom\", \"top\"],\n};\n\n/**\n * Place the tour card next to the highlighted element.\n *\n * The preferred side is tried first and the opposite one second, because flipping\n * a \"below\" card to \"above\" keeps the reading relationship with the target;\n * jumping to a side would move the card across the screen for no reason the reader\n * can see.\n *\n * Nothing fitting anywhere ends at `center`: a card pinned half off-screen is worse\n * than a card in the middle, and this happens for real whenever the target is\n * taller than the viewport.\n *\n * The result is always clamped inside the viewport, so the card cannot be pushed\n * off the edge by a target near a corner.\n *\n * @param params.target - The highlighted element's rect, viewport coordinates.\n * @param params.card - Measured card size.\n * @param params.viewport - Viewport size.\n * @param params.preferred - Placement the step asked for. Default `\"bottom\"`.\n * @returns The chosen placement and the card's top/left.\n */\nexport function placeCard({\n    target,\n    card,\n    viewport,\n    preferred = \"bottom\",\n}: {\n    target: TourRect | null;\n    card: { width: number; height: number };\n    viewport: TourViewport;\n    preferred?: TourPlacement;\n}): { placement: TourPlacement; top: number; left: number } {\n    const centered = {\n        placement: \"center\" as TourPlacement,\n        top: Math.max(MARGIN, (viewport.height - card.height) / 2),\n        left: Math.max(MARGIN, (viewport.width - card.width) / 2),\n    };\n\n    // No target — a step whose element is not on the page still has to show its\n    // message, so it is shown centered rather than dropped.\n    if (!target || preferred === \"center\") return centered;\n\n    const order = FALLBACKS[preferred as Exclude<TourPlacement, \"center\">] ?? FALLBACKS.bottom;\n    const placement = order.find((candidate) => fits(candidate, target, card, viewport));\n    if (!placement) return centered;\n\n    const horizontalCenter = target.left + target.width / 2 - card.width / 2;\n    const verticalCenter = target.top + target.height / 2 - card.height / 2;\n\n    const raw =\n        placement === \"top\"\n            ? { top: target.top - OFFSET - card.height, left: horizontalCenter }\n            : placement === \"bottom\"\n              ? { top: target.top + target.height + OFFSET, left: horizontalCenter }\n              : placement === \"left\"\n                ? { top: verticalCenter, left: target.left - OFFSET - card.width }\n                : { top: verticalCenter, left: target.left + target.width + OFFSET };\n\n    return {\n        placement,\n        top: clamp(raw.top, MARGIN, viewport.height - card.height - MARGIN),\n        left: clamp(raw.left, MARGIN, viewport.width - card.width - MARGIN),\n    };\n}\n\n/**\n * The four backdrop rectangles that surround the highlighted element.\n *\n * Four rects rather than one overlay with a `box-shadow` hole: a box-shadow is not\n * hit-testable, so the \"dimmed\" area would not block clicks — and blocking the rest\n * of the page while leaving the highlighted control usable is the whole behaviour a\n * coachmark needs. Any rect that comes out empty is dropped, which is what happens\n * when the target touches an edge.\n *\n * @param target - Highlighted rect, or `null` for a full-screen backdrop.\n * @param viewport - Viewport size.\n * @param padding - Extra space kept clear around the target.\n */\nexport function backdropRects(\n    target: TourRect | null,\n    viewport: TourViewport,\n    padding = 4,\n): TourRect[] {\n    if (!target) {\n        return [{ top: 0, left: 0, width: viewport.width, height: viewport.height }];\n    }\n    const top = Math.max(0, target.top - padding);\n    const left = Math.max(0, target.left - padding);\n    const right = Math.min(viewport.width, target.left + target.width + padding);\n    const bottom = Math.min(viewport.height, target.top + target.height + padding);\n\n    return [\n        { top: 0, left: 0, width: viewport.width, height: top },\n        { top: bottom, left: 0, width: viewport.width, height: viewport.height - bottom },\n        { top, left: 0, width: left, height: bottom - top },\n        { top, left: right, width: viewport.width - right, height: bottom - top },\n    ].filter((rect) => rect.width > 0 && rect.height > 0);\n}\n"],"mappings":"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"}

package/dist/components/Tour/tour-position.js.map

@@ -1 +1 @@
-{"version":3,"file":"tour-position.js","names":[],"sources":["../../../src/components/Tour/tour-position.ts"],"sourcesContent":["/** Where the card sits relative to the highlighted element. */\nexport type TourPlacement = \"top\" | \"bottom\" | \"left\" | \"right\" | \"center\";\n\n/** A rectangle in viewport coordinates. */\nexport interface TourRect {\n    top: number;\n    left: number;\n    width: number;\n    height: number;\n}\n\n/** Viewport size the placement is solved against. */\nexport interface TourViewport {\n    width: number;\n    height: number;\n}\n\n/** Gap between the highlighted element and the card. */\nconst OFFSET = 12;\n\n/** Smallest margin the card keeps from the viewport edge. */\nconst MARGIN = 8;\n\n/** Clamp a value into a range, tolerating a range narrower than the value. */\nfunction clamp(value: number, min: number, max: number): number {\n    return Math.max(min, Math.min(value, Math.max(min, max)));\n}\n\n/** Does the card fit on this side of the target? */\nfunction fits(\n    placement: TourPlacement,\n    target: TourRect,\n    card: { width: number; height: number },\n    viewport: TourViewport,\n): boolean {\n    switch (placement) {\n        case \"top\":\n            return target.top - OFFSET - card.height >= MARGIN;\n        case \"bottom\":\n            return target.top + target.height + OFFSET + card.height <= viewport.height - MARGIN;\n        case \"left\":\n            return target.left - OFFSET - card.width >= MARGIN;\n        case \"right\":\n            return target.left + target.width + OFFSET + card.width <= viewport.width - MARGIN;\n        default:\n            return true;\n    }\n}\n\n/** Sides tried, in order, when the preferred one does not fit. */\nconst FALLBACKS: Record<Exclude<TourPlacement, \"center\">, TourPlacement[]> = {\n    bottom: [\"bottom\", \"top\", \"right\", \"left\"],\n    top: [\"top\", \"bottom\", \"right\", \"left\"],\n    right: [\"right\", \"left\", \"bottom\", \"top\"],\n    left: [\"left\", \"right\", \"bottom\", \"top\"],\n};\n\n/**\n * Place the tour card next to the highlighted element.\n *\n * The preferred side is tried first and the opposite one second, because flipping\n * a \"below\" card to \"above\" keeps the reading relationship with the target;\n * jumping to a side would move the card across the screen for no reason the reader\n * can see.\n *\n * Nothing fitting anywhere ends at `center`: a card pinned half off-screen is worse\n * than a card in the middle, and this happens for real whenever the target is\n * taller than the viewport.\n *\n * The result is always clamped inside the viewport, so the card cannot be pushed\n * off the edge by a target near a corner.\n *\n * @param params.target - The highlighted element's rect, viewport coordinates.\n * @param params.card - Measured card size.\n * @param params.viewport - Viewport size.\n * @param params.preferred - Placement the step asked for. Default `\"bottom\"`.\n * @returns The chosen placement and the card's top/left.\n */\nexport function placeCard({\n    target,\n    card,\n    viewport,\n    preferred = \"bottom\",\n}: {\n    target: TourRect | null;\n    card: { width: number; height: number };\n    viewport: TourViewport;\n    preferred?: TourPlacement;\n}): { placement: TourPlacement; top: number; left: number } {\n    const centered = {\n        placement: \"center\" as TourPlacement,\n        top: Math.max(MARGIN, (viewport.height - card.height) / 2),\n        left: Math.max(MARGIN, (viewport.width - card.width) / 2),\n    };\n\n    // No target — a step whose element is not on the page still has to show its\n    // message, so it is shown centered rather than dropped.\n    if (!target || preferred === \"center\") return centered;\n\n    const order = FALLBACKS[preferred as Exclude<TourPlacement, \"center\">] ?? FALLBACKS.bottom;\n    const placement = order.find((candidate) => fits(candidate, target, card, viewport));\n    if (!placement) return centered;\n\n    const horizontalCenter = target.left + target.width / 2 - card.width / 2;\n    const verticalCenter = target.top + target.height / 2 - card.height / 2;\n\n    const raw =\n        placement === \"top\"\n            ? { top: target.top - OFFSET - card.height, left: horizontalCenter }\n            : placement === \"bottom\"\n              ? { top: target.top + target.height + OFFSET, left: horizontalCenter }\n              : placement === \"left\"\n                ? { top: verticalCenter, left: target.left - OFFSET - card.width }\n                : { top: verticalCenter, left: target.left + target.width + OFFSET };\n\n    return {\n        placement,\n        top: clamp(raw.top, MARGIN, viewport.height - card.height - MARGIN),\n        left: clamp(raw.left, MARGIN, viewport.width - card.width - MARGIN),\n    };\n}\n\n/**\n * The four backdrop rectangles that surround the highlighted element.\n *\n * Four rects rather than one overlay with a `box-shadow` hole: a box-shadow is not\n * hit-testable, so the \"dimmed\" area would not block clicks — and blocking the rest\n * of the page while leaving the highlighted control usable is the whole behaviour a\n * coachmark needs. Any rect that comes out empty is dropped, which is what happens\n * when the target touches an edge.\n *\n * @param target - Highlighted rect, or `null` for a full-screen backdrop.\n * @param viewport - Viewport size.\n * @param padding - Extra space kept clear around the target.\n */\nexport function backdropRects(\n    target: TourRect | null,\n    viewport: TourViewport,\n    padding = 4,\n): TourRect[] {\n    if (!target) {\n        return [{ top: 0, left: 0, width: viewport.width, height: viewport.height }];\n    }\n    const top = Math.max(0, target.top - padding);\n    const left = Math.max(0, target.left - padding);\n    const right = Math.min(viewport.width, target.left + target.width + padding);\n    const bottom = Math.min(viewport.height, target.top + target.height + padding);\n\n    return [\n        { top: 0, left: 0, width: viewport.width, height: top },\n        { top: bottom, left: 0, width: viewport.width, height: viewport.height - bottom },\n        { top, left: 0, width: left, height: bottom - top },\n        { top, left: right, width: viewport.width - right, height: bottom - top },\n    ].filter((rect) => rect.width > 0 && rect.height > 0);\n}\n"],"mappings":"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"}
+{"version":3,"file":"tour-position.js","names":["clamp","min","value","max","fits","placement","target","card","viewport","FALLBACKS","placeCard","centered","preferred","candidate","horizontalCenter","verticalCenter","raw","backdropRects","top","padding","left","right","bottom","rect"],"sources":["../../../src/components/Tour/tour-position.ts"],"sourcesContent":["/** Where the card sits relative to the highlighted element. */\nexport type TourPlacement = \"top\" | \"bottom\" | \"left\" | \"right\" | \"center\";\n\n/** A rectangle in viewport coordinates. */\nexport interface TourRect {\n    top: number;\n    left: number;\n    width: number;\n    height: number;\n}\n\n/** Viewport size the placement is solved against. */\nexport interface TourViewport {\n    width: number;\n    height: number;\n}\n\n/** Gap between the highlighted element and the card. */\nconst OFFSET = 12;\n\n/** Smallest margin the card keeps from the viewport edge. */\nconst MARGIN = 8;\n\n/** Clamp a value into a range, tolerating a range narrower than the value. */\nfunction clamp(value: number, min: number, max: number): number {\n    return Math.max(min, Math.min(value, Math.max(min, max)));\n}\n\n/** Does the card fit on this side of the target? */\nfunction fits(\n    placement: TourPlacement,\n    target: TourRect,\n    card: { width: number; height: number },\n    viewport: TourViewport,\n): boolean {\n    switch (placement) {\n        case \"top\":\n            return target.top - OFFSET - card.height >= MARGIN;\n        case \"bottom\":\n            return target.top + target.height + OFFSET + card.height <= viewport.height - MARGIN;\n        case \"left\":\n            return target.left - OFFSET - card.width >= MARGIN;\n        case \"right\":\n            return target.left + target.width + OFFSET + card.width <= viewport.width - MARGIN;\n        default:\n            return true;\n    }\n}\n\n/** Sides tried, in order, when the preferred one does not fit. */\nconst FALLBACKS: Record<Exclude<TourPlacement, \"center\">, TourPlacement[]> = {\n    bottom: [\"bottom\", \"top\", \"right\", \"left\"],\n    top: [\"top\", \"bottom\", \"right\", \"left\"],\n    right: [\"right\", \"left\", \"bottom\", \"top\"],\n    left: [\"left\", \"right\", \"bottom\", \"top\"],\n};\n\n/**\n * Place the tour card next to the highlighted element.\n *\n * The preferred side is tried first and the opposite one second, because flipping\n * a \"below\" card to \"above\" keeps the reading relationship with the target;\n * jumping to a side would move the card across the screen for no reason the reader\n * can see.\n *\n * Nothing fitting anywhere ends at `center`: a card pinned half off-screen is worse\n * than a card in the middle, and this happens for real whenever the target is\n * taller than the viewport.\n *\n * The result is always clamped inside the viewport, so the card cannot be pushed\n * off the edge by a target near a corner.\n *\n * @param params.target - The highlighted element's rect, viewport coordinates.\n * @param params.card - Measured card size.\n * @param params.viewport - Viewport size.\n * @param params.preferred - Placement the step asked for. Default `\"bottom\"`.\n * @returns The chosen placement and the card's top/left.\n */\nexport function placeCard({\n    target,\n    card,\n    viewport,\n    preferred = \"bottom\",\n}: {\n    target: TourRect | null;\n    card: { width: number; height: number };\n    viewport: TourViewport;\n    preferred?: TourPlacement;\n}): { placement: TourPlacement; top: number; left: number } {\n    const centered = {\n        placement: \"center\" as TourPlacement,\n        top: Math.max(MARGIN, (viewport.height - card.height) / 2),\n        left: Math.max(MARGIN, (viewport.width - card.width) / 2),\n    };\n\n    // No target — a step whose element is not on the page still has to show its\n    // message, so it is shown centered rather than dropped.\n    if (!target || preferred === \"center\") return centered;\n\n    const order = FALLBACKS[preferred as Exclude<TourPlacement, \"center\">] ?? FALLBACKS.bottom;\n    const placement = order.find((candidate) => fits(candidate, target, card, viewport));\n    if (!placement) return centered;\n\n    const horizontalCenter = target.left + target.width / 2 - card.width / 2;\n    const verticalCenter = target.top + target.height / 2 - card.height / 2;\n\n    const raw =\n        placement === \"top\"\n            ? { top: target.top - OFFSET - card.height, left: horizontalCenter }\n            : placement === \"bottom\"\n              ? { top: target.top + target.height + OFFSET, left: horizontalCenter }\n              : placement === \"left\"\n                ? { top: verticalCenter, left: target.left - OFFSET - card.width }\n                : { top: verticalCenter, left: target.left + target.width + OFFSET };\n\n    return {\n        placement,\n        top: clamp(raw.top, MARGIN, viewport.height - card.height - MARGIN),\n        left: clamp(raw.left, MARGIN, viewport.width - card.width - MARGIN),\n    };\n}\n\n/**\n * The four backdrop rectangles that surround the highlighted element.\n *\n * Four rects rather than one overlay with a `box-shadow` hole: a box-shadow is not\n * hit-testable, so the \"dimmed\" area would not block clicks — and blocking the rest\n * of the page while leaving the highlighted control usable is the whole behaviour a\n * coachmark needs. Any rect that comes out empty is dropped, which is what happens\n * when the target touches an edge.\n *\n * @param target - Highlighted rect, or `null` for a full-screen backdrop.\n * @param viewport - Viewport size.\n * @param padding - Extra space kept clear around the target.\n */\nexport function backdropRects(\n    target: TourRect | null,\n    viewport: TourViewport,\n    padding = 4,\n): TourRect[] {\n    if (!target) {\n        return [{ top: 0, left: 0, width: viewport.width, height: viewport.height }];\n    }\n    const top = Math.max(0, target.top - padding);\n    const left = Math.max(0, target.left - padding);\n    const right = Math.min(viewport.width, target.left + target.width + padding);\n    const bottom = Math.min(viewport.height, target.top + target.height + padding);\n\n    return [\n        { top: 0, left: 0, width: viewport.width, height: top },\n        { top: bottom, left: 0, width: viewport.width, height: viewport.height - bottom },\n        { top, left: 0, width: left, height: bottom - top },\n        { top, left: right, width: viewport.width - right, height: bottom - top },\n    ].filter((rect) => rect.width > 0 && rect.height > 0);\n}\n"],"mappings":"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"}

package/dist/components/Transfer/Transfer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Transfer.cjs","names":[],"sources":["../../../src/components/Transfer/Transfer.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — two lists that hand\n * items to each other: items and value are the model, onChange the move,\n * sourceTitle/targetTitle/renderItem/locale/height the presentation, and\n * searchable/disabled the behaviour. The body keeps both selections and the filter\n * query, and every move reads all three.\n */\nimport { useId, useMemo, useState, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport { Checkbox } from \"../Checkbox\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport {\n    applyMove,\n    filterItems,\n    movableIds,\n    splitSides,\n    transferStrings,\n    type TransferItem,\n    type TransferSide,\n} from \"./transfer-state\";\nimport styles from \"./Transfer.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\" | \"onChange\" | \"defaultValue\";\n\nexport interface TransferProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /** The whole catalogue. Both panes are derived from it. */\n    items: readonly TransferItem[];\n    /** Ids on the target side. Controlled. */\n    value: readonly string[];\n    /** Next value, always in catalogue order. */\n    onChange: (value: string[]) => void;\n    /** Heading of the left pane. Default `\"Disponíveis\"`. */\n    sourceTitle?: ReactNode;\n    /** Heading of the right pane. Default `\"Selecionados\"`. */\n    targetTitle?: ReactNode;\n    /** Show a search box above each pane. Default `true` past 8 items. */\n    searchable?: boolean;\n    /** Custom row body. Gets the item and which side it is on. */\n    renderItem?: (item: TransferItem, side: TransferSide) => ReactNode;\n    /** Locale for labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Height of each pane's scroll area, any CSS length. Default `\"16rem\"`. */\n    height?: string;\n    /** Block every move. */\n    disabled?: boolean;\n}\n\n/**\n * Two panes and a set of move controls: pick a subset out of a catalogue.\n *\n * Controlled on **ids of the target side only**. The panes are derived on every\n * render, never stored, because two stored lists drift the moment the catalogue\n * changes under them — a permission removed upstream lingers in whichever pane\n * held it, and an id in both panes is a bug nobody can see.\n *\n * @example\n * const [roles, setRoles] = useState<string[]>([]);\n *\n * <Transfer\n *     items={allRoles}\n *     value={roles}\n *     onChange={setRoles}\n *     sourceTitle=\"Papéis disponíveis\"\n *     targetTitle=\"Papéis do usuário\"\n * />\n */\nexport function Transfer({\n    items,\n    value,\n    onChange,\n    sourceTitle,\n    targetTitle,\n    searchable,\n    renderItem,\n    locale = \"pt-BR\",\n    height = \"16rem\",\n    disabled = false,\n    className,\n    ...rest\n}: TransferProps) {\n    const strings = transferStrings(locale);\n    const baseId = useId();\n    const [checked, setChecked] = useState<Set<string>>(new Set());\n    const [queries, setQueries] = useState<{ source: string; target: string }>({\n        source: \"\",\n        target: \"\",\n    });\n    const [announcement, setAnnouncement] = useState(\"\");\n\n    const { source, target } = useMemo(() => splitSides(items, value), [items, value]);\n    const withSearch = searchable ?? items.length > 8;\n\n    /**\n     * What each pane is showing right now — the filter included.\n     *\n     * Every control acts on this, not on the pane's full contents: filtering to\n     * \"sao\" and pressing \"move all\" has to move what you are looking at. Moving\n     * rows the filter hid is the kind of surprise that makes people stop trusting\n     * the bulk button.\n     */\n    const visible: Record<TransferSide, TransferItem[]> = {\n        source: withSearch ? filterItems(source, queries.source) : [...source],\n        target: withSearch ? filterItems(target, queries.target) : [...target],\n    };\n\n    const panes: Array<{ side: TransferSide; title: ReactNode; items: TransferItem[] }> = [\n        { side: \"source\", title: sourceTitle ?? strings.sourceTitle, items: source },\n        { side: \"target\", title: targetTitle ?? strings.targetTitle, items: target },\n    ];\n\n    /**\n     * Move ids and drop them from the checked set.\n     *\n     * Clearing the checks is the point: after a move the rows are on the other\n     * side, and leaving them checked means the next click on the opposite button\n     * sends them straight back — which reads as the component undoing itself.\n     */\n    const move = (moving: readonly string[], to: TransferSide): void => {\n        if (disabled || moving.length === 0) return;\n        const next = applyMove({ value, moving, to, items });\n        const changed = to === \"target\" ? next.length - value.length : value.length - next.length;\n        onChange(next);\n        setChecked((current) => {\n            const remaining = new Set(current);\n            for (const id of moving) remaining.delete(id);\n            return remaining;\n        });\n        if (changed > 0) {\n            const sideName = to === \"target\" ? strings.targetTitle : strings.sourceTitle;\n            setAnnouncement(strings.moved(changed, String(sideName).toLowerCase()));\n        }\n    };\n\n    const toggle = (id: string): void => {\n        setChecked((current) => {\n            const next = new Set(current);\n            if (next.has(id)) next.delete(id);\n            else next.add(id);\n            return next;\n        });\n    };\n\n    /** Ids checked **and visible** on one side — what the move buttons act on. */\n    const checkedOn = (side: TransferSide): string[] =>\n        movableIds(visible[side]).filter((id) => checked.has(id));\n\n    const checkedSource = checkedOn(\"source\");\n    const checkedTarget = checkedOn(\"target\");\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            {panes.map((pane) => {\n                const shown = visible[pane.side];\n                const movable = movableIds(shown);\n                const checkedHere = movable.filter((id) => checked.has(id));\n                const allChecked = movable.length > 0 && checkedHere.length === movable.length;\n                const titleId = `${baseId}-${pane.side}-title`;\n\n                return (\n                    <section key={pane.side} className={styles.pane} aria-labelledby={titleId}>\n                        <div className={styles.paneHeader}>\n                            <div className={styles.paneTitle}>\n                                <Checkbox\n                                    checked={allChecked}\n                                    indeterminate={checkedHere.length > 0 && !allChecked}\n                                    disabled={disabled || movable.length === 0}\n                                    aria-label={\n                                        typeof pane.title === \"string\"\n                                            ? pane.title\n                                            : String(pane.side)\n                                    }\n                                    onChange={() =>\n                                        setChecked((current) => {\n                                            const next = new Set(current);\n                                            for (const id of movable) {\n                                                if (allChecked) next.delete(id);\n                                                else next.add(id);\n                                            }\n                                            return next;\n                                        })\n                                    }\n                                />\n                                <h3 className={styles.title} id={titleId}>\n                                    {pane.title}\n                                </h3>\n                            </div>\n                            <span className={styles.count}>\n                                {strings.selected(checkedHere.length, pane.items.length)}\n                            </span>\n                        </div>\n\n                        {withSearch && (\n                            <input\n                                type=\"search\"\n                                className={styles.search}\n                                value={queries[pane.side]}\n                                placeholder={strings.search}\n                                aria-label={`${strings.search}: ${\n                                    typeof pane.title === \"string\" ? pane.title : pane.side\n                                }`}\n                                onChange={(event) =>\n                                    setQueries((current) => ({\n                                        ...current,\n                                        [pane.side]: event.target.value,\n                                    }))\n                                }\n                            />\n                        )}\n\n                        <ul className={styles.list} style={{ height }}>\n                            {shown.length === 0 ? (\n                                <li className={styles.empty}>\n                                    {queries[pane.side] ? strings.noMatches : strings.empty}\n                                </li>\n                            ) : (\n                                shown.map((item) => (\n                                    <li key={item.id} className={styles.row}>\n                                        <Checkbox\n                                            checked={checked.has(item.id)}\n                                            disabled={disabled || item.disabled}\n                                            label={\n                                                renderItem\n                                                    ? renderItem(item, pane.side)\n                                                    : item.label\n                                            }\n                                            onChange={() => toggle(item.id)}\n                                            onDoubleClick={() =>\n                                                move(\n                                                    [item.id],\n                                                    pane.side === \"source\" ? \"target\" : \"source\",\n                                                )\n                                            }\n                                        />\n                                    </li>\n                                ))\n                            )}\n                        </ul>\n                    </section>\n                );\n            })}\n\n            <div className={styles.controls}>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || movableIds(visible.source).length === 0}\n                    aria-label={strings.allToTarget}\n                    title={strings.allToTarget}\n                    onClick={() => move(movableIds(visible.source), \"target\")}\n                >\n                    »\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || checkedSource.length === 0}\n                    aria-label={strings.toTarget}\n                    title={strings.toTarget}\n                    onClick={() => move(checkedSource, \"target\")}\n                >\n                    ›\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || checkedTarget.length === 0}\n                    aria-label={strings.toSource}\n                    title={strings.toSource}\n                    onClick={() => move(checkedTarget, \"source\")}\n                >\n                    ‹\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || movableIds(visible.target).length === 0}\n                    aria-label={strings.allToSource}\n                    title={strings.allToSource}\n                    onClick={() => move(movableIds(visible.target), \"source\")}\n                >\n                    «\n                </button>\n            </div>\n\n            <VisuallyHidden aria-live=\"polite\" role=\"status\">\n                {announcement}\n            </VisuallyHidden>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Transfer.cjs","names":["transferStrings","useId","useState","useMemo","splitSides","filterItems","applyMove","movableIds","cn","styles","Checkbox","VisuallyHidden","require_cn","require_Checkbox","require_VisuallyHidden","require_transfer_state","require_Transfer_module","react","react_jsx_runtime","Transfer","rest","strings","locale","baseId","checked","setChecked","queries","setQueries","announcement","setAnnouncement","items","value","withSearch","searchable","visible","source","target","panes","sourceTitle","targetTitle","move","disabled","moving","next","changed","to","onChange","remaining","current","id","sideName","toggle","checkedOn","side","checkedSource","checkedTarget","className","shown","pane","movable","checkedHere","allChecked","titleId","event","item","renderItem"],"sources":["../../../src/components/Transfer/Transfer.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — two lists that hand\n * items to each other: items and value are the model, onChange the move,\n * sourceTitle/targetTitle/renderItem/locale/height the presentation, and\n * searchable/disabled the behaviour. The body keeps both selections and the filter\n * query, and every move reads all three.\n */\nimport { useId, useMemo, useState, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport { Checkbox } from \"../Checkbox\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport {\n    applyMove,\n    filterItems,\n    movableIds,\n    splitSides,\n    transferStrings,\n    type TransferItem,\n    type TransferSide,\n} from \"./transfer-state\";\nimport styles from \"./Transfer.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\" | \"onChange\" | \"defaultValue\";\n\nexport interface TransferProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /** The whole catalogue. Both panes are derived from it. */\n    items: readonly TransferItem[];\n    /** Ids on the target side. Controlled. */\n    value: readonly string[];\n    /** Next value, always in catalogue order. */\n    onChange: (value: string[]) => void;\n    /** Heading of the left pane. Default `\"Disponíveis\"`. */\n    sourceTitle?: ReactNode;\n    /** Heading of the right pane. Default `\"Selecionados\"`. */\n    targetTitle?: ReactNode;\n    /** Show a search box above each pane. Default `true` past 8 items. */\n    searchable?: boolean;\n    /** Custom row body. Gets the item and which side it is on. */\n    renderItem?: (item: TransferItem, side: TransferSide) => ReactNode;\n    /** Locale for labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Height of each pane's scroll area, any CSS length. Default `\"16rem\"`. */\n    height?: string;\n    /** Block every move. */\n    disabled?: boolean;\n}\n\n/**\n * Two panes and a set of move controls: pick a subset out of a catalogue.\n *\n * Controlled on **ids of the target side only**. The panes are derived on every\n * render, never stored, because two stored lists drift the moment the catalogue\n * changes under them — a permission removed upstream lingers in whichever pane\n * held it, and an id in both panes is a bug nobody can see.\n *\n * @example\n * const [roles, setRoles] = useState<string[]>([]);\n *\n * <Transfer\n *     items={allRoles}\n *     value={roles}\n *     onChange={setRoles}\n *     sourceTitle=\"Papéis disponíveis\"\n *     targetTitle=\"Papéis do usuário\"\n * />\n */\nexport function Transfer({\n    items,\n    value,\n    onChange,\n    sourceTitle,\n    targetTitle,\n    searchable,\n    renderItem,\n    locale = \"pt-BR\",\n    height = \"16rem\",\n    disabled = false,\n    className,\n    ...rest\n}: TransferProps) {\n    const strings = transferStrings(locale);\n    const baseId = useId();\n    const [checked, setChecked] = useState<Set<string>>(new Set());\n    const [queries, setQueries] = useState<{ source: string; target: string }>({\n        source: \"\",\n        target: \"\",\n    });\n    const [announcement, setAnnouncement] = useState(\"\");\n\n    const { source, target } = useMemo(() => splitSides(items, value), [items, value]);\n    const withSearch = searchable ?? items.length > 8;\n\n    /**\n     * What each pane is showing right now — the filter included.\n     *\n     * Every control acts on this, not on the pane's full contents: filtering to\n     * \"sao\" and pressing \"move all\" has to move what you are looking at. Moving\n     * rows the filter hid is the kind of surprise that makes people stop trusting\n     * the bulk button.\n     */\n    const visible: Record<TransferSide, TransferItem[]> = {\n        source: withSearch ? filterItems(source, queries.source) : [...source],\n        target: withSearch ? filterItems(target, queries.target) : [...target],\n    };\n\n    const panes: Array<{ side: TransferSide; title: ReactNode; items: TransferItem[] }> = [\n        { side: \"source\", title: sourceTitle ?? strings.sourceTitle, items: source },\n        { side: \"target\", title: targetTitle ?? strings.targetTitle, items: target },\n    ];\n\n    /**\n     * Move ids and drop them from the checked set.\n     *\n     * Clearing the checks is the point: after a move the rows are on the other\n     * side, and leaving them checked means the next click on the opposite button\n     * sends them straight back — which reads as the component undoing itself.\n     */\n    const move = (moving: readonly string[], to: TransferSide): void => {\n        if (disabled || moving.length === 0) return;\n        const next = applyMove({ value, moving, to, items });\n        const changed = to === \"target\" ? next.length - value.length : value.length - next.length;\n        onChange(next);\n        setChecked((current) => {\n            const remaining = new Set(current);\n            for (const id of moving) remaining.delete(id);\n            return remaining;\n        });\n        if (changed > 0) {\n            const sideName = to === \"target\" ? strings.targetTitle : strings.sourceTitle;\n            setAnnouncement(strings.moved(changed, String(sideName).toLowerCase()));\n        }\n    };\n\n    const toggle = (id: string): void => {\n        setChecked((current) => {\n            const next = new Set(current);\n            if (next.has(id)) next.delete(id);\n            else next.add(id);\n            return next;\n        });\n    };\n\n    /** Ids checked **and visible** on one side — what the move buttons act on. */\n    const checkedOn = (side: TransferSide): string[] =>\n        movableIds(visible[side]).filter((id) => checked.has(id));\n\n    const checkedSource = checkedOn(\"source\");\n    const checkedTarget = checkedOn(\"target\");\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            {panes.map((pane) => {\n                const shown = visible[pane.side];\n                const movable = movableIds(shown);\n                const checkedHere = movable.filter((id) => checked.has(id));\n                const allChecked = movable.length > 0 && checkedHere.length === movable.length;\n                const titleId = `${baseId}-${pane.side}-title`;\n\n                return (\n                    <section key={pane.side} className={styles.pane} aria-labelledby={titleId}>\n                        <div className={styles.paneHeader}>\n                            <div className={styles.paneTitle}>\n                                <Checkbox\n                                    checked={allChecked}\n                                    indeterminate={checkedHere.length > 0 && !allChecked}\n                                    disabled={disabled || movable.length === 0}\n                                    aria-label={\n                                        typeof pane.title === \"string\"\n                                            ? pane.title\n                                            : String(pane.side)\n                                    }\n                                    onChange={() =>\n                                        setChecked((current) => {\n                                            const next = new Set(current);\n                                            for (const id of movable) {\n                                                if (allChecked) next.delete(id);\n                                                else next.add(id);\n                                            }\n                                            return next;\n                                        })\n                                    }\n                                />\n                                <h3 className={styles.title} id={titleId}>\n                                    {pane.title}\n                                </h3>\n                            </div>\n                            <span className={styles.count}>\n                                {strings.selected(checkedHere.length, pane.items.length)}\n                            </span>\n                        </div>\n\n                        {withSearch && (\n                            <input\n                                type=\"search\"\n                                className={styles.search}\n                                value={queries[pane.side]}\n                                placeholder={strings.search}\n                                aria-label={`${strings.search}: ${\n                                    typeof pane.title === \"string\" ? pane.title : pane.side\n                                }`}\n                                onChange={(event) =>\n                                    setQueries((current) => ({\n                                        ...current,\n                                        [pane.side]: event.target.value,\n                                    }))\n                                }\n                            />\n                        )}\n\n                        <ul className={styles.list} style={{ height }}>\n                            {shown.length === 0 ? (\n                                <li className={styles.empty}>\n                                    {queries[pane.side] ? strings.noMatches : strings.empty}\n                                </li>\n                            ) : (\n                                shown.map((item) => (\n                                    <li key={item.id} className={styles.row}>\n                                        <Checkbox\n                                            checked={checked.has(item.id)}\n                                            disabled={disabled || item.disabled}\n                                            label={\n                                                renderItem\n                                                    ? renderItem(item, pane.side)\n                                                    : item.label\n                                            }\n                                            onChange={() => toggle(item.id)}\n                                            onDoubleClick={() =>\n                                                move(\n                                                    [item.id],\n                                                    pane.side === \"source\" ? \"target\" : \"source\",\n                                                )\n                                            }\n                                        />\n                                    </li>\n                                ))\n                            )}\n                        </ul>\n                    </section>\n                );\n            })}\n\n            <div className={styles.controls}>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || movableIds(visible.source).length === 0}\n                    aria-label={strings.allToTarget}\n                    title={strings.allToTarget}\n                    onClick={() => move(movableIds(visible.source), \"target\")}\n                >\n                    »\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || checkedSource.length === 0}\n                    aria-label={strings.toTarget}\n                    title={strings.toTarget}\n                    onClick={() => move(checkedSource, \"target\")}\n                >\n                    ›\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || checkedTarget.length === 0}\n                    aria-label={strings.toSource}\n                    title={strings.toSource}\n                    onClick={() => move(checkedTarget, \"source\")}\n                >\n                    ‹\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || movableIds(visible.target).length === 0}\n                    aria-label={strings.allToSource}\n                    title={strings.allToSource}\n                    onClick={() => move(movableIds(visible.target), \"source\")}\n                >\n                    «\n                </button>\n            </div>\n\n            <VisuallyHidden aria-live=\"polite\" role=\"status\">\n                {announcement}\n            </VisuallyHidden>\n        </div>\n    );\n}\n"],"mappings":"A,yPAqEA,SAAgBmB,EAAS,CACrB,QACA,QACA,WACA,cACA,cACA,aACA,aACA,SAAS,QACT,SAAS,QACT,WAAW,GACX,YACA,GAAGC,GACW,CACd,IAAMC,EAAUrB,EAAAA,gBAAgBsB,CAAM,EAChCC,GAAA,EAAStB,EAAAA,MAAAA,CAAM,EACf,CAACuB,EAASC,IAAA,EAAcvB,EAAAA,SAAAA,CAAsB,IAAI,GAAK,EACvD,CAACwB,EAASC,IAAA,EAAczB,EAAAA,SAAAA,CAA6C,CACvE,OAAQ,GACR,OAAQ,EACZ,CAAC,EACK,CAAC0B,EAAcC,IAAA,EAAmB3B,EAAAA,SAAAA,CAAS,EAAE,EAE7C,CAAE,SAAQ,WAAA,EAAWC,EAAAA,QAAAA,KAAcC,EAAAA,WAAW0B,EAAOC,CAAK,EAAG,CAACD,EAAOC,CAAK,CAAC,EAC3EC,EAAaC,GAAcH,EAAM,OAAS,EAU1CI,EAAgD,CAClD,OAAQF,EAAa3B,EAAAA,YAAY8B,EAAQT,EAAQ,MAAM,EAAI,CAAC,GAAGS,CAAM,EACrE,OAAQH,EAAa3B,EAAAA,YAAY+B,EAAQV,EAAQ,MAAM,EAAI,CAAC,GAAGU,CAAM,CACzE,EAEMC,EAAgF,CAClF,CAAE,KAAM,SAAU,MAAOC,GAAejB,EAAQ,YAAa,MAAOc,CAAO,EAC3E,CAAE,KAAM,SAAU,MAAOI,GAAelB,EAAQ,YAAa,MAAOe,CAAO,CAC/E,EASMI,GAAQ,EAA2B,IAA2B,CAChE,GAAIC,GAAYC,EAAO,SAAW,EAAG,OACrC,IAAMC,EAAOrC,EAAAA,UAAU,CAAE,QAAO,SAAQ,KAAI,OAAM,CAAC,EAC7CsC,EAAUC,IAAO,SAAWF,EAAK,OAASZ,EAAM,OAASA,EAAM,OAASY,EAAK,OAOnF,GANAG,EAASH,CAAI,EACblB,EAAY,GAAY,CACpB,IAAMsB,EAAY,IAAI,IAAIC,CAAO,EACjC,IAAK,IAAMC,KAAMP,EAAQK,EAAU,OAAOE,CAAE,EAC5C,OAAOF,CACX,CAAC,EACGH,EAAU,EAAG,CACb,IAAMM,EAAWL,IAAO,SAAWxB,EAAQ,YAAcA,EAAQ,YACjEQ,EAAgBR,EAAQ,MAAMuB,EAAS,OAAOM,CAAQ,CAAC,CAAC,YAAY,CAAC,CAAC,CAC1E,CACJ,EAEMC,EAAU,GAAqB,CACjC1B,EAAY,GAAY,CACpB,IAAMkB,EAAO,IAAI,IAAIK,CAAO,EAG5B,OAFIL,EAAK,IAAIM,CAAE,EAAGN,EAAK,OAAOM,CAAE,EAC3BN,EAAK,IAAIM,CAAE,EACTN,CACX,CAAC,CACL,EAGMS,EAAa,GACf7C,EAAAA,WAAW2B,EAAQmB,EAAK,CAAC,CAAC,OAAQ,GAAO7B,EAAQ,IAAIyB,CAAE,CAAC,EAEtDK,EAAgBF,EAAU,QAAQ,EAClCG,EAAgBH,EAAU,QAAQ,EAExC,OACI,EAAAlC,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWV,EAAAA,GAAGC,EAAAA,QAAO,QAAS+C,CAAS,EAAG,GAAIpC,EAAnD,SAAA,CACKiB,EAAM,IAAK,GAAS,CACjB,IAAMoB,EAAQvB,EAAQwB,EAAK,MACrBC,EAAUpD,EAAAA,WAAWkD,CAAK,EAC1BG,EAAcD,EAAQ,OAAQ,GAAOnC,EAAQ,IAAIyB,CAAE,CAAC,EACpDY,EAAaF,EAAQ,OAAS,GAAKC,EAAY,SAAWD,EAAQ,OAClEG,EAAU,GAAGvC,EAAO,GAAGmC,EAAK,KAAK,QAEvC,OACI,EAAAxC,EAAA,KAAA,CAAC,UAAD,CAAyB,UAAWT,EAAAA,QAAO,KAAM,kBAAiBqD,EAAlE,SAAA,EACI,EAAA5C,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWT,EAAAA,QAAO,WAAvB,SAAA,EACI,EAAAS,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWT,EAAAA,QAAO,UAAvB,SAAA,EACI,EAAAS,EAAA,IAAA,CAACR,EAAAA,SAAD,CACI,QAASmD,EACT,cAAeD,EAAY,OAAS,GAAK,CAACC,EAC1C,SAAUpB,GAAYkB,EAAQ,SAAW,EACzC,aACI,OAAOD,EAAK,OAAU,SAChBA,EAAK,MACL,OAAOA,EAAK,IAAI,EAE1B,aACIjC,EAAY,GAAY,CACpB,IAAMkB,EAAO,IAAI,IAAIK,CAAO,EAC5B,IAAK,IAAMC,KAAMU,EACTE,EAAYlB,EAAK,OAAOM,CAAE,EACzBN,EAAK,IAAIM,CAAE,EAEpB,OAAON,CACX,CAAC,CAER,CAAA,GACD,EAAAzB,EAAA,IAAA,CAAC,KAAD,CAAI,UAAWT,EAAAA,QAAO,MAAO,GAAIqD,EAC5B,SAAAJ,EAAK,KACN,CAAA,CACH,CACL,CAAA,GAAA,EAAAxC,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWT,EAAAA,QAAO,MACnB,SAAAY,EAAQ,SAASuC,EAAY,OAAQF,EAAK,MAAM,MAAM,CACrD,CAAA,CACL,C,GAEJ1B,IACG,EAAAd,EAAA,IAAA,CAAC,QAAD,CACI,KAAK,SACL,UAAWT,EAAAA,QAAO,OAClB,MAAOiB,EAAQgC,EAAK,MACpB,YAAarC,EAAQ,OACrB,aAAY,GAAGA,EAAQ,OAAO,IAC1B,OAAOqC,EAAK,OAAU,SAAWA,EAAK,MAAQA,EAAK,OAEvD,SAAW,GACP/B,EAAY,IAAa,CACrB,GAAGqB,GACFU,EAAK,MAAOK,EAAM,OAAO,KAC9B,EAAE,CAET,CAAA,GAGL,EAAA7C,EAAA,IAAA,CAAC,KAAD,CAAI,UAAWT,EAAAA,QAAO,KAAM,MAAO,CAAE,QAAO,EACvC,SAAAgD,EAAM,SAAW,GACd,EAAAvC,EAAA,IAAA,CAAC,KAAD,CAAI,UAAWT,EAAAA,QAAO,MACjB,SAAAiB,EAAQgC,EAAK,MAAQrC,EAAQ,UAAYA,EAAQ,KAClD,CAAA,EAEJoC,EAAM,IAAK,IACP,EAAAvC,EAAA,IAAA,CAAC,KAAD,CAAkB,UAAWT,EAAAA,QAAO,IAChC,UAAA,EAAAS,EAAA,IAAA,CAACR,EAAAA,SAAD,CACI,QAASc,EAAQ,IAAIwC,EAAK,EAAE,EAC5B,SAAUvB,GAAYuB,EAAK,SAC3B,MACIC,EACMA,EAAWD,EAAMN,EAAK,IAAI,EAC1BM,EAAK,MAEf,aAAgBb,EAAOa,EAAK,EAAE,EAC9B,kBACIxB,EACI,CAACwB,EAAK,EAAE,EACRN,EAAK,OAAS,SAAW,SAAW,QACxC,CAEP,CAAA,CACD,EAjBKM,EAAK,EAiBV,CACP,CAEL,CAAA,CACC,CA9EK,EAAAN,EAAK,IA8EV,CAEjB,CAAC,GAED,EAAAxC,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWT,EAAAA,QAAO,SAAvB,SAAA,EACI,EAAAS,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAWT,EAAAA,QAAO,QAClB,SAAUgC,GAAYlC,EAAAA,WAAW2B,EAAQ,MAAM,CAAC,CAAC,SAAW,EAC5D,aAAYb,EAAQ,YACpB,MAAOA,EAAQ,YACf,YAAemB,EAAKjC,EAAAA,WAAW2B,EAAQ,MAAM,EAAG,QAAQ,EAC3D,SAAA,GAEO,CAAA,GACR,EAAAhB,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAWT,EAAAA,QAAO,QAClB,SAAUgC,GAAYa,EAAc,SAAW,EAC/C,aAAYjC,EAAQ,SACpB,MAAOA,EAAQ,SACf,YAAemB,EAAKc,EAAe,QAAQ,EAC9C,SAAA,GAEO,CAAA,GACR,EAAApC,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAWT,EAAAA,QAAO,QAClB,SAAUgC,GAAYc,EAAc,SAAW,EAC/C,aAAYlC,EAAQ,SACpB,MAAOA,EAAQ,SACf,YAAemB,EAAKe,EAAe,QAAQ,EAC9C,SAAA,GAEO,CAAA,GACR,EAAArC,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAWT,EAAAA,QAAO,QAClB,SAAUgC,GAAYlC,EAAAA,WAAW2B,EAAQ,MAAM,CAAC,CAAC,SAAW,EAC5D,aAAYb,EAAQ,YACpB,MAAOA,EAAQ,YACf,YAAemB,EAAKjC,EAAAA,WAAW2B,EAAQ,MAAM,EAAG,QAAQ,EAC3D,SAAA,GAEO,CAAA,CACP,C,IAEL,EAAAhB,EAAA,IAAA,CAACP,EAAAA,eAAD,CAAgB,YAAU,SAAS,KAAK,SACnC,SAAAiB,CACW,CAAA,CACf,C,EAEb,C"}