import { html } from "lit";
import { multiClassMap, tw } from "../../../directives/multi-class-map.js";
const renderSearchBoxWrapper = ({ props })=>(children)=>{
        const classes = tw({
            'bg-background border-neutral absolute top-0 left-0 flex w-full rounded-md border focus-within:ring-3': true,
            'focus-within:border-disabled focus-within:ring-neutral': props.disabled,
            'focus-within:border-primary focus-within:ring-ring-primary': !props.disabled
        });
        return html`<div
      part="wrapper"
      class=${multiClassMap(classes)}
      @focusout=${props.onFocusout}
    >
      ${children}
    </div>`;
    };
export { renderSearchBoxWrapper };
