@payfit/unity-components/dist/esm/modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputFreeTextAnswer.js

import { Icon as e } from "../../../../../core/components/icon/Icon.js";
import { CircularIconButton as t } from "../../../../../core/components/icon-button/CircularIconButton.js";
import { Text as n } from "../../../../../core/components/text/Text.js";
import { forwardRef as r, useId as i } from "react";
import { uyMerge as a, uyTv as o } from "@payfit/unity-themes";
import { jsx as s, jsxs as c } from "react/jsx-runtime";
import { useIntl as l } from "react-intl";
import { TextArea as u } from "react-aria-components/TextArea";
//#region src/modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputFreeTextAnswer.tsx
var d = o({ slots: {
	base: [
		"uy:group uy:relative uy:flex uy:max-h-[180px] uy:flex-col uy:justify-end uy:gap-100",
		"uy:overflow-hidden uy:rounded-150 uy:border uy:border-solid uy:border-transparent uy:p-125 uy:bg-transparent",
		"uy:hover:border-border-neutral-hover",
		"uy:hover:bg-surface-neutral-enabled",
		"uy:focus-within:border-border-neutral-hover",
		"uy:focus-within:bg-surface-neutral-enabled uy:focus-within:ring-2",
		"uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2",
		"uy:data-[active=true]:border-border-neutral-active uy:data-[active=true]:bg-surface-neutral-enabled",
		"uy:data-[loading=true]:border-border-neutral-enabled uy:data-[loading=true]:bg-surface-neutral-enabled",
		"uy:data-[invalid=true]:border-border-danger uy:data-[invalid=true]:bg-surface-neutral-enabled",
		"uy:data-[disabled=true]:bg-surface-neutral-disabled"
	],
	row: "uy:flex uy:w-full uy:min-w-0 uy:items-end",
	icon: [
		"uy:mr-100 uy:flex uy:h-300 uy:w-300 uy:shrink-0 uy:items-center uy:justify-center uy:overflow-hidden",
		"uy:text-content-neutral-lowest",
		"uy:group-focus-within:mr-0 uy:group-focus-within:w-0 uy:group-focus-within:opacity-0",
		"uy:group-data-[icon-hidden=true]:mr-0 uy:group-data-[icon-hidden=true]:w-0 uy:group-data-[icon-hidden=true]:opacity-0",
		"uy:motion-safe:transition-[width,margin,opacity] uy:motion-safe:duration-150 uy:motion-safe:ease-out"
	],
	input: [
		"uy:field-sizing-content uy:max-h-[160px] uy:min-h-300 uy:min-w-0 uy:flex-1",
		"uy:resize-none uy:overflow-y-auto uy:bg-transparent uy:p-0",
		"uy:typography-body uy:text-content-neutral uy:placeholder:text-content-neutral-lowest",
		"uy:disabled:cursor-not-allowed uy:disabled:text-content-neutral-disabled",
		"uy:disabled:placeholder:text-content-neutral-disabled uy:outline-none"
	],
	action: ["uy:shrink-0 uy:data-[active=true]:bg-surface-inverted", "uy:data-[active=true]:text-content-inverted-enabled"],
	actionContainer: [
		"uy:ml-100 uy:shrink-0 uy:scale-100 uy:opacity-100",
		"uy:motion-safe:transition-[opacity,scale] uy:motion-safe:duration-150 uy:motion-safe:ease-out",
		"uy:motion-safe:starting:scale-90 uy:motion-safe:starting:opacity-80"
	],
	feedback: "uy:flex uy:w-full uy:items-center uy:gap-50"
} }), f = r(({ value: r, onChange: o, onSubmit: f, isDisabled: p = !1, isLoading: m = !1, isInvalid: h = !1, feedbackMessage: g, feedbackId: _, submitAriaLabel: v, className: y, onKeyDown: b, "aria-describedby": x, ...S }, C) => {
	let w = l(), T = i(), E = _ ?? T, D = r.trim().length > 0, O = D || p || h || m, { action: k, actionContainer: A, base: j, feedback: M, icon: N, input: P, row: F } = d(), I = w.formatMessage({
		id: "unity:module:ai-kit:structured-input:free-text-submit",
		defaultMessage: "Save answer and continue"
	}), L = (e) => {
		b?.(e), !(e.defaultPrevented || e.key !== "Enter" || e.shiftKey || e.nativeEvent.isComposing) && (e.preventDefault(), D && !p && !m && f());
	};
	return /* @__PURE__ */ c("div", {
		className: a(j(), y),
		"data-disabled": p || void 0,
		"data-active": D || void 0,
		"data-has-value": D || void 0,
		"data-icon-hidden": D || p || h || m || void 0,
		"data-invalid": h || void 0,
		"data-loading": m || void 0,
		"data-unity-slot": "ai.structured-input.free-text-answer",
		children: [/* @__PURE__ */ c("div", {
			className: F(),
			children: [
				/* @__PURE__ */ s(e, {
					src: "PencilSimpleOutlined",
					size: 20,
					role: "presentation",
					className: N(),
					"aria-hidden": "true"
				}),
				/* @__PURE__ */ s(u, {
					...S,
					ref: C,
					value: r,
					onChange: o,
					onKeyDown: L,
					disabled: p,
					"aria-invalid": h || void 0,
					"aria-describedby": g ? [x, E].filter(Boolean).join(" ") : x,
					className: P(),
					"data-dd-privacy": "mask",
					"data-unity-slot": "ai.structured-input.free-text-answer-input"
				}),
				O && /* @__PURE__ */ s("span", {
					className: A(),
					children: /* @__PURE__ */ s(t, {
						asElement: "button",
						type: "button",
						icon: "ArrowUpOutlined",
						title: v ?? I,
						"aria-label": v ?? I,
						color: "content.neutral",
						size: "default",
						className: k(),
						isDisabled: p || m || !D,
						isLoading: m,
						onPress: f,
						"data-active": D || void 0,
						"data-unity-slot": "ai.structured-input.free-text-answer-submit"
					})
				})
			]
		}), g && /* @__PURE__ */ c("div", {
			className: M(),
			role: "alert",
			children: [/* @__PURE__ */ s(e, {
				src: "WarningCircleOutlined",
				size: 20,
				color: "content.danger",
				role: "presentation",
				"aria-hidden": "true"
			}), /* @__PURE__ */ s(n, {
				id: E,
				variant: "bodySmallStrong",
				color: "content.danger",
				children: g
			})]
		})]
	});
});
f.displayName = "AIStructuredInputFreeTextAnswer";
var p = f;
//#endregion
export { p as AIStructuredInputFreeTextAnswer };