import { Input as e } from "../../../atomic/atoms/input/Input.js";
import { ModalCloseSvg as t } from "../../../icons/ModalCloseSvg.js";
import { SidebarSearchSvg as n } from "../../../icons/SidebarSearchSvg.js";
import { ShortcutHint as r } from "../../atoms/shortcut_hint/ShortcutHint.js";
import { clearButton as i, container as a } from "./globalSearchInput.css.js";
import { useId as o } from "react";
import { jsx as s, jsxs as c } from "react/jsx-runtime";
import { useTranslation as l } from "react-i18next";
//#region src/backoffice/molecules/global_search_input/GlobalSearchInput.tsx
var u = ({ id: u, name: d, value: f, onChange: p, placeholder: m, ariaLabel: h, className: g, shortcut: _, rightSlot: v, clearLabel: y }) => {
	let { t: b } = l("ui"), x = o(), S = f.trim() !== "", C = m ?? b("backoffice.globalSearch.placeholder"), w = y ?? b("backoffice.globalSearch.clear"), T = h ?? C, E = u ?? x, D = null;
	S && (D = /* @__PURE__ */ s("button", {
		type: "button",
		"aria-label": w,
		onClick: () => {
			p("");
		},
		className: i,
		children: /* @__PURE__ */ s(t, {
			width: 16,
			height: 16,
			"aria-hidden": "true"
		})
	}));
	let O = null;
	return _ != null && (O = /* @__PURE__ */ s(r, { keys: _ })), /* @__PURE__ */ s(e, {
		id: E,
		name: d,
		className: g,
		value: f,
		onChange: (e) => {
			p(e.target.value);
		},
		placeholder: C,
		"aria-label": T,
		size: "small",
		fullWidth: !0,
		leftIcon: /* @__PURE__ */ s(n, {
			width: 18,
			height: 18,
			"aria-hidden": "true"
		}),
		rightIcon: /* @__PURE__ */ c("span", {
			className: a,
			children: [
				D,
				O,
				v
			]
		}),
		rightIconIsInteractive: !0
	});
};
//#endregion
export { u as GlobalSearchInput, u as default };

//# sourceMappingURL=GlobalSearchInput.js.map