import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as o}from"./index-CO-0pc0F.js";import{M as a,C as i}from"./index-Z-6k0Xrj.js";import{S as s,D as c}from"./SearchInput.stories-B-8f0CS7.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./SearchInput-CsfDnQ1p.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./input-DRdNoobV.js";function r(n){const t={code:"code",h1:"h1",p:"p",pre:"pre",...o(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{of:s}),`
`,e.jsx(t.h1,{id:"searchinput",children:"SearchInput"}),`
`,e.jsxs(t.p,{children:["The ",e.jsx(t.code,{children:"SearchInput"})," component creates a search bar."]}),`
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<script>
  import { SearchInput } from '@reuters-graphics/graphics-components';

  function filterData(newSearchText: string) {
    /** This function would typically filter a dataset based on the search input.*/
    console.log('Filtering data with:', newSearchText);
  }
  function handleSearchInput(newSearchText: string) {
    /** Here's where you might update a variable, 
    filter a dataset or make an API call based on the user's input.*/
    filterData(newSearchText);
  }
<\/script>

<SearchInput onsearch={handleSearchInput} />
`})}),`
`,e.jsx(i,{of:c})]})}function v(n={}){const{wrapper:t}={...o(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(r,{...n})}):r(n)}export{v as default};