@payfit/unity-components/dist/esm/components/funnel-layout/parts/FunnelTopBar.js

import { useFunnelLayoutContext as e } from "../FunnelLayout.context.js";
import { FunnelProgressBar as t } from "./FunnelProgressBar.js";
import { forwardRef as n, useMemo 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";
//#region src/components/funnel-layout/parts/FunnelTopBar.tsx
var c = i({ slots: {
	base: ["uy:bg-surface-neutral uy:shadow-raising uy:min-h-800"],
	titleWrapper: ["uy:px-200 uy:py-150 uy:md:px-500 uy:min-h-[calc(var(--uy-spacing-800)-4px)]", "uy:flex uy:justify-between uy:items-center"],
	title: ["uy:text-content-neutral uy:typography-body-strong uy:sm:typography-h4 uy:flex-1 uy:sm:flex-auto uy:text-center uy:col-2"]
} }), l = n(({ actions: n, currentTaskDescription: i, leading: l, progressAnnouncement: u, progressValue: d, showProgress: f = !0, title: p, ...m }, h) => {
	let g = s(), { ids: _ } = e(), { base: v, titleWrapper: y, title: b } = c(), x = r(() => ({
		navigationDescription: g.formatMessage({
			id: "unity:layout:funnel:top-bar:navigation-desc",
			defaultMessage: "Process navigation"
		}),
		progressAnnouncement: u ?? g.formatMessage({
			id: "unity:layout:funnel:top-bar:progress-announcement",
			defaultMessage: d === void 0 ? "Progress status unavailable" : `Process is ${d}% complete`
		}, { progress: d })
	}), [
		g,
		u,
		d
	]);
	return /* @__PURE__ */ o("header", {
		ref: h,
		id: _.topbarId,
		className: v(),
		role: "banner",
		"aria-labelledby": _.funnelTitleId,
		"aria-describedby": _.funnelStatusId,
		"data-dd-privacy": "allow",
		...m,
		children: [
			/* @__PURE__ */ o("nav", {
				className: y(),
				"aria-label": x.navigationDescription,
				children: [
					/* @__PURE__ */ a("div", {
						className: "uy:grow-0 uy:basis-[100px]",
						children: l
					}),
					/* @__PURE__ */ o("h1", {
						className: b(),
						id: _.funnelTitleId,
						children: [p, i && /* @__PURE__ */ a("span", {
							className: "uy:sr-only",
							children: i
						})]
					}),
					/* @__PURE__ */ a("div", {
						className: "uy:grow-0 uy:basis-[100px]",
						"aria-hidden": !n,
						role: n ? "group" : "presentation",
						children: n
					})
				]
			}),
			f && /* @__PURE__ */ a("div", {
				"aria-hidden": "true",
				children: /* @__PURE__ */ a(t, { value: d ?? 0 })
			}),
			/* @__PURE__ */ a("div", {
				id: _.funnelStatusId,
				role: "status",
				"aria-live": "polite",
				"aria-atomic": "true",
				className: "uy:sr-only",
				children: x.progressAnnouncement
			})
		]
	});
});
l.displayName = "FunnelTopBar";
//#endregion
export { l as FunnelTopBar, c as funnelTopBar };