"use client";
import { jsxs, jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { Search } from "../Search/Search.js";
import { Spacing } from "../../tokens/Spacing.js";
import { buildBorder } from "../../tokens/utils.js";
const MenuSearchInput = ({ value, onChange, placeholder, ...rest }) => {
  return /* @__PURE__ */ jsxs(
    Search.Container,
    {
      sx: {
        px: Spacing["24px"],
        py: Spacing["16px"],
        borderBottom: buildBorder("White16"),
        borderRadius: 0,
        flexShrink: 0
      },
      ...rest,
      children: [
        /* @__PURE__ */ jsx(
          Search.Input,
          {
            autoFocus: true,
            onBlur: (event) => {
              event.target.focus();
            },
            value,
            onChange: (event) => onChange(event.target.value),
            placeholder,
            sx: {
              flexGrow: 1
            }
          }
        ),
        /* @__PURE__ */ jsx(Search.ResetButton, { sx: { "input:placeholder-shown + &": { opacity: 0 } }, onClick: () => onChange("") })
      ]
    }
  );
};
export {
  MenuSearchInput
};
