import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./ObserveIntersection-zL3YLMv6.js";var o,s,c,l,u;t((()=>{o=e(n(),1),i(),s=r(),c={title:`components/ObserveIntersection`,component:a,parameters:{tags:[`!test`],chromatic:{disableSnapshot:!0}}},l=()=>{let[e,t]=(0,o.useState)(!1);return(0,s.jsxs)(`div`,{tabIndex:0,style:{height:`200px`,overflowY:`scroll`,position:`relative`},children:[(0,s.jsx)(`div`,{style:{position:`sticky`,top:`2px`},children:e?`Intersected`:`Scroll down to intersect`}),(0,s.jsx)(`div`,{style:{height:`400px`,display:`flex`,alignItems:`end`},children:(0,s.jsx)(a,{onIntersect:()=>t(!0),children:`Observer`})})]})},l.storyName=`ObserveIntersection`,l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`() => {
  const [isIntersecting, setIsIntersecting] = useState(false);
  return (
    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- This element is interactive; it's scrollable.
    <div tabIndex={0} style={{
      height: '200px',
      overflowY: 'scroll',
      position: 'relative'
    }}>
            <div style={{
        position: 'sticky',
        top: '2px'
      }}>
                {isIntersecting ? 'Intersected' : 'Scroll down to intersect'}
            </div>
            <div style={{
        height: '400px',
        display: 'flex',
        alignItems: 'end'
      }}>
                <ObserveIntersection onIntersect={() => setIsIntersecting(true)}>
                    Observer
                </ObserveIntersection>
            </div>
        </div>
  );
}`,...l.parameters?.docs?.source}}},u=[`Base`]}))();export{l as Base,u as __namedExportsOrder,c as default};