@payfit/unity-components/dist/esm/components/search/Search.js

import { Icon as e } from "../icon/Icon.js";
import { Spinner as t } from "../spinner/Spinner.js";
import { CircularIconButton as n } from "../icon-button/CircularIconButton.js";
import { forwardRef as r } from "react";
import { uyTv as i } from "@payfit/unity-themes";
import { jsx as a, jsxs as o } from "react/jsx-runtime";
import { useIntl as s } from "react-intl";
import { Input as c } from "react-aria-components/Input";
import { FieldError as l } from "react-aria-components/FieldError";
import { SearchField as u } from "react-aria-components/SearchField";
//#region src/components/search/Search.tsx
var d = i({
	slots: {
		base: [
			"uy:w-full uy:flex uy:h-5.5 uy:sm:h-500 uy:gap-100 uy:transition-colors uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:bg-surface-form-high-enabled uy:items-center",
			"uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:focus-within:bg-surface-form-high-focus",
			"uy:active:border uy:active:border-solid uy:active:border-border-form-active",
			"uy:group-data-[disabled=true]:border uy:group-data-[disabled=true]:border-solid uy:group-data-[disabled=true]:border-border-form-disabled uy:group-data-[disabled=true]:bg-surface-form-high-disabled uy:hover:group-data-[disabled=true]:bg-surface-form-high-disabled uy:hover:group-data-[disabled=true]:border-border-form-disabled uy:group-data-[disabled=true]:cursor-not-allowed",
			"uy:group-data-[invalid=true]:border uy:group-data-[invalid=true]:border-solid uy:group-data-[invalid=true]:border-border-form-error uy:group-data-[invalid=true]:bg-surface-form-high-error"
		],
		input: [
			"uy:h-300 uy:typography-body uy:flex-grow uy:outline-none uy:[&::-webkit-search-cancel-button]:hidden",
			"uy:enabled:text-content-form-enabled",
			"uy:hover:text-content-form-hover",
			"uy:focus-visible:text-content-form-focus",
			"uy:active:text-content-form-active",
			"uy:group-data-[invalid=true]:bg-surface-form-high-error",
			"uy:group-data-[disabled=true]:cursor-not-allowed"
		],
		icon: ["uy:group-data-[disabled=true]:text-content-neutral-lowest-disabled"],
		invalidIcon: ["uy:hidden", "uy:group-data-[invalid=true]:block"],
		wrapperState: ["uy:flex uy:items-center"],
		feedbackText: ["uy:typography-body-small-strong uy:text-content-form-invalid"],
		closeButton: ["uy:text-content-neutral-enabled uy:group-data-[empty=true]:hidden"]
	},
	variants: { isReadOnly: {
		true: {
			base: "uy:bg-surface-form-high-disabled",
			icon: "uy:text-content-neutral-lowest-disabled",
			button: "uy:bg-surface-form-high-error uy:text-content-neutral-disabled",
			input: "uy:bg-surface-form-high-disabled uy:text-content-form-read-only uy:placeholder-content-form-read-only"
		},
		false: {
			base: ["uy:bg-surface-form-high-enabled", "uy:hover:border-border-form-hover uy:hover:bg-surface-form-high-hover"],
			icon: "uy:text-content-neutral-lowest",
			input: "uy:bg-text-content-form-active uy:placeholder-content-neutral-lowest"
		}
	} }
}), f = ({ intl: e, placeholder: t, isDisabled: n }) => n ? "" : t || e.formatMessage({
	id: "unity:component:search:placeholder",
	defaultMessage: "Search"
}), p = r(({ isLoading: r = !1, isInvalid: i, isDisabled: p, isReadOnly: m, name: h, placeholder: g, feedbackText: _, label: v, ...y }, b) => {
	let { base: x, icon: S, input: C, invalidIcon: w, wrapperState: T, feedbackText: E, closeButton: D } = d({ isReadOnly: m }), O = s();
	return /* @__PURE__ */ o(u, {
		"aria-label": v,
		className: "uy:group",
		name: h,
		ref: b,
		isInvalid: i,
		isDisabled: p || m,
		isReadOnly: m,
		...y,
		children: [/* @__PURE__ */ o("div", {
			className: x(),
			children: [
				/* @__PURE__ */ a(e, {
					src: "MagnifyingGlassOutlined",
					className: S(),
					"aria-hidden": "true"
				}),
				/* @__PURE__ */ a(c, {
					className: C(),
					placeholder: f({
						intl: O,
						placeholder: g,
						isDisabled: p
					})
				}),
				/* @__PURE__ */ o("div", {
					className: T(),
					children: [
						/* @__PURE__ */ a(e, {
							className: w(),
							src: "WarningCircleOutlined",
							color: "content.form.invalid",
							alt: O.formatMessage({
								id: "unity:component:form-field:form-input:error:alt",
								defaultMessage: "Error"
							})
						}),
						r && /* @__PURE__ */ a(t, {
							label: O.formatMessage({
								id: "unity:component:common:loading:label",
								defaultMessage: "Loading..."
							}),
							color: "primary",
							size: "small",
							"aria-hidden": "true"
						}),
						/* @__PURE__ */ a(n, {
							asElement: "button",
							title: O.formatMessage({
								id: "unity:component:common:clear:title",
								defaultMessage: "Clear"
							}),
							className: D(),
							icon: "CloseOutlined"
						})
					]
				})
			]
		}), /* @__PURE__ */ a(l, {
			className: E(),
			children: _
		})]
	});
});
p.displayName = "Search";
//#endregion
export { p as Search, d as search };