@payfit/unity-components 3.1.13 → 3.1.15

package/dist/esm/core/components/table/parts/TablePagination.js

@@ -0,0 +1,119 @@
+import { Select as e } from "../../select/Select.js";
+import { SelectOption as t } from "../../select/parts/SelectOption.js";
+import { ClientSidePagination as n } from "../../client-side-pagination/ClientSidePagination.js";
+import { forwardRef as r, useState as i } from "react";
+import { uyTv as a } from "@payfit/unity-themes";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useIntl as c } from "react-intl";
+import { useId as l } from "react-aria/useId";
+//#region src/core/components/table/parts/TablePagination.tsx
+var u = a({ base: [
+	"uy:bg-surface-neutral-low",
+	"uy:sticky uy:bottom-0",
+	"uy:grid uy:grid-cols-3 uy:items-center",
+	"uy:ps-200 uy:py-100 uy:pe-100"
+] }), d = [
+	{
+		value: "10",
+		label: "10"
+	},
+	{
+		value: "50",
+		label: "50"
+	},
+	{
+		value: "100",
+		label: "100"
+	},
+	{
+		value: "200",
+		label: "200"
+	}
+], f = r((r, a) => {
+	let { pageCount: f, rowCount: p, currentPage: m, rowsPerPage: h, defaultPage: g, pageSizeOptions: _ = d, defaultPageSize: v = h, onPageChange: y, onNextPress: b, onPreviousPress: x, onPageSizeChange: S, onPageHover: C, itemLabel: w = "unity:component:table:pagination:item", ...T } = r, E = l(), D = c(), [O, k] = i(v), A = {
+		pageCount: f,
+		defaultPage: g,
+		currentPage: m,
+		onPageChange: y,
+		onNextPress: b,
+		onPreviousPress: x,
+		onPageHover: C
+	}, j = Math.max(((m ?? g ?? 1) - 1) * h + 1, 1), M = Math.min(j + h - 1, p), N = {
+		singular: D.formatMessage({
+			id: w,
+			defaultMessage: "items"
+		}, { count: 1 }),
+		plural: D.formatMessage({
+			id: w,
+			defaultMessage: "items"
+		}, { count: 2 })
+	};
+	return /* @__PURE__ */ s("div", {
+		"data-dd-privacy": "allow",
+		...T,
+		ref: a,
+		className: u(),
+		"data-unity-slot": "table-pagination",
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: "uy:justify-self-start",
+				children: /* @__PURE__ */ o("span", {
+					id: `table-pagination-${E}-label`,
+					className: "uy:typography-body uy:text-content-neutral",
+					children: D.formatMessage({
+						id: "unity:component:table:pagination:label",
+						defaultMessage: `${j}-${M} out of ${p} items`
+					}, {
+						pageCount: f,
+						startRow: j,
+						endRow: M,
+						totalRows: p,
+						itemLabel: N.plural
+					})
+				})
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "uy:justify-self-center",
+				children: f > 1 && /* @__PURE__ */ o(n, {
+					...A,
+					"aria-labelledby": `table-pagination-${E}-label`
+				})
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "uy:justify-self-end",
+				children: /* @__PURE__ */ s("form", {
+					className: "uy:flex uy:gap-100 uy:items-center",
+					children: [/* @__PURE__ */ o("label", {
+						className: "uy:shrink-0",
+						id: `table-pagination-${E}-pagesize-label`,
+						htmlFor: `table-pagination-${E}-pagesize-select`,
+						children: D.formatMessage({
+							id: "unity:component:table:pagination:page-size-control-label",
+							defaultMessage: "Items per page"
+						}, { itemLabel: N.plural })
+					}), /* @__PURE__ */ o("div", {
+						className: "uy:grow-0 uy:w-1000",
+						children: /* @__PURE__ */ o(e, {
+							id: `table-pagination-${E}-pagesize-select`,
+							items: _,
+							placeholder: "",
+							value: `${O}`,
+							onChange: (e) => {
+								let t = parseInt(e, 10);
+								S?.(t), k(t);
+							},
+							"aria-labelledby": `table-pagination-${E}-pagesize-label`,
+							children: (e) => /* @__PURE__ */ o(t, {
+								id: e.value,
+								children: e.label
+							})
+						})
+					})]
+				})
+			})
+		]
+	});
+});
+f.displayName = "TablePagination";
+//#endregion
+export { f as TablePagination, u as tablePagination };

package/dist/esm/core/components/table/parts/TableRow.js

@@ -0,0 +1,36 @@
+import e, { Children as t, cloneElement as n, forwardRef as r, memo as i, useMemo as a } from "react";
+import { uyTv as o } from "@payfit/unity-themes";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/core/components/table/parts/TableRow.tsx
+var c = o({ base: [
+	"uy:group uy:h-500",
+	"uy:bg-surface-neutral uy:border-b uy:border-solid uy:border-b-border-neutral-enabled",
+	"uy:transition-colors uy:duration-200 uy:ease-in-out",
+	"uy:hover:border-b-border-neutral-hover uy:hover:bg-surface-neutral-low-hover",
+	"uy:aria-[selected=true]:bg-surface-neutral-selected uy:aria-[selected=true]:border-b-border-neutral-selected",
+	"uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-[-2px] uy:focus-visible:outline-utility-focus-ring"
+] }), l = i(r(({ children: r, className: i, rowIndex: o = 0, onKeyDown: l, isSelected: u, ...d }, f) => {
+	let p = a(() => c({ className: i }), [i]), m = a(() => t.map(r, (t, r) => e.isValidElement(t) ? n(t, {
+		rowIndex: o,
+		colIndex: r,
+		...t.props
+	}) : t), [r, o]);
+	return /* @__PURE__ */ s("tr", {
+		ref: f,
+		role: "row",
+		className: p,
+		"aria-rowindex": o + 1,
+		"data-index": o + 1,
+		"aria-selected": u,
+		onKeyDown: (e) => {
+			l?.(e);
+		},
+		"data-dd-privacy": "mask",
+		"data-selectable": u !== void 0,
+		...d,
+		children: m
+	});
+}));
+l.displayName = "TableRow";
+//#endregion
+export { l as TableRow, c as tableRow };

package/dist/esm/core/components/tabs/Tabs.context.js

@@ -0,0 +1,23 @@
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/components/tabs/Tabs.context.tsx
+var r = e({
+	variant: "primary",
+	scrollable: !1
+});
+function i({ children: e, variant: t, scrollable: i }) {
+	return /* @__PURE__ */ n(r.Provider, {
+		value: {
+			variant: t,
+			scrollable: i
+		},
+		children: e
+	});
+}
+function a() {
+	let e = t(r);
+	if (!e) throw Error("useTabsContext must be used within an TabsProvider");
+	return e;
+}
+//#endregion
+export { r as TabsContext, i as TabsProvider, a as useTabsContext };

package/dist/esm/core/components/tabs/Tabs.js

@@ -0,0 +1,26 @@
+import { TabsProvider as e } from "./Tabs.context.js";
+import { tabsVariant as t } from "./Tabs.variant.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { Tabs as i } from "react-aria-components/Tabs";
+//#region src/core/components/tabs/Tabs.tsx
+var a = n(({ children: n, variant: a, scrollable: o = !1, ...s }, c) => {
+	let { base: l } = t({
+		variant: a,
+		scrollable: o
+	});
+	return /* @__PURE__ */ r(e, {
+		variant: a,
+		scrollable: o,
+		children: /* @__PURE__ */ r(i, {
+			"data-dd-privacy": "allow",
+			ref: c,
+			className: l(),
+			...s,
+			children: n
+		})
+	});
+});
+a.displayName = "Tabs";
+//#endregion
+export { a as Tabs };

package/dist/esm/core/components/tabs/Tabs.variant.js

@@ -0,0 +1,36 @@
+import { uyTv as e } from "@payfit/unity-themes";
+//#region src/core/components/tabs/Tabs.variant.ts
+var t = e({
+	slots: {
+		base: "uy:w-full",
+		tabList: "uy:flex uy:gap-250 uy:mb-25",
+		scroller: "uy:overflow-x-auto uy:overflow-y-hidden [scrollbar-width:thin]",
+		tab: [
+			"uy:flex uy:relative uy:shrink-0 uy:gap-100 uy:whitespace-nowrap uy:min-w-[3ch] uy:text-center uy:text-content-neutral-lowest-enabled uy:py-125 uy:cursor-pointer",
+			" ",
+			"uy:z-10 uy:min-h-[44px] uy:items-center uy:justify-center uy:typography-action-large uy:sm:typography-action uy:rounded-100",
+			"uy:data-[selected]:text-content-form-enabled uy:data-[selected]:after:block uy:data-[selected]:after:content:\" \"uy:data-[selected]:after:w-full uy:data-[selected]:after:h-25 uy:data-[selected]:after:absolute uy:data-[selected]:after:bottom-0 uy:data-[selected]:after:left-0 uy:data-[selected]:after:right-0 uy:data-[selected]:after:rounded-pill",
+			"uy:data-[status=active]:text-content-form-enabled uy:data-[status=active]:after:block uy:data-[status=active]:after:content:\" \"uy:data-[status=active]:after:w-full uy:data-[status=active]:after:h-25 uy:data-[status=active]:after:absolute uy:data-[status=active]:after:bottom-0 uy:data-[status=active]:after:left-0 uy:data-[status=active]:after:right-0 uy:data-[status=active]:after:rounded-pill",
+			"uy:hover:cursor-pointer uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring  uy:focus-visible:outline-offset-0"
+		]
+	},
+	variants: {
+		variant: {
+			primary: { tab: [" ", "uy:data-[selected]:after:bg-surface-primary uy:data-[status=active]:after:bg-surface-primary"] },
+			neutral: { tab: "uy:data-[selected]:after:bg-content-neutral uy:data-[status=active]:after:bg-content-neutral" }
+		},
+		scrollable: {
+			true: { tabList: "" },
+			false: {
+				base: "",
+				scroller: ""
+			}
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		scrollable: !1
+	}
+});
+//#endregion
+export { t as tabsVariant };

package/dist/esm/core/components/tabs/parts/NavigationButton.js

@@ -0,0 +1,38 @@
+import { Icon as e } from "../../icon/Icon.js";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+import { Button as r } from "react-aria-components/Button";
+//#region src/core/components/tabs/parts/NavigationButton.tsx
+var i = t({
+	slots: {
+		base: "uy:absolute uy:pt-150 uy:pb-150",
+		button: [
+			"uy:hover:text-content-neutral-hover uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
+			"",
+			"uy:rounded-75"
+		],
+		icon: "uy:text-content-neutral-enabled"
+	},
+	variants: { direction: {
+		left: { base: "uy:top-0 uy:left-0 uy:z-10 uy:bg-gradient-to-r uy:from-grayscale-l0/100 uy:to-grayscale-L0/0 uy:pl-50 uy:pr-200" },
+		right: { base: "uy:right-0 uy:top-0 uy:z-10 uy:bg-gradient-to-l uy:from-grayscale-l0/100 uy:to-grayscale-L0/0 uy:pl-200 uy:pr-50" }
+	} }
+}), a = ({ direction: t, onPress: a }) => {
+	let { base: o, button: s, icon: c } = i({ direction: t });
+	return /* @__PURE__ */ n("div", {
+		className: o(),
+		children: /* @__PURE__ */ n(r, {
+			id: `scroll-${t}`,
+			className: s(),
+			"aria-label": `Scroll ${t}`,
+			onPress: a,
+			children: /* @__PURE__ */ n(e, {
+				className: c(),
+				"aria-labelledby": `scroll-${t}`,
+				src: t === "left" ? "CaretLeftOutlined" : "CaretRightOutlined"
+			})
+		})
+	});
+};
+//#endregion
+export { a as NavigationButton };

package/dist/esm/core/components/tabs/parts/RawTab.js

@@ -0,0 +1,22 @@
+import { useTabsContext as e } from "../Tabs.context.js";
+import { tabsVariant as t } from "../Tabs.variant.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Tab as a } from "react-aria-components/Tabs";
+//#region src/core/components/tabs/parts/RawTab.tsx
+var o = n(({ children: n, suffix: o, id: s, ...c }, l) => {
+	let { variant: u, scrollable: d } = e(), { tab: f } = t({
+		variant: u,
+		scrollable: d
+	});
+	return /* @__PURE__ */ i(a, {
+		...c,
+		ref: l,
+		id: s,
+		className: f(),
+		children: [n, o ? /* @__PURE__ */ r("span", { children: o }) : null]
+	});
+});
+o.displayName = "RawTab";
+//#endregion
+export { o as RawTab };

package/dist/esm/core/components/tabs/parts/TabList.js

@@ -0,0 +1,86 @@
+import { useTabsContext as e } from "../Tabs.context.js";
+import { tabsVariant as t } from "../Tabs.variant.js";
+import { NavigationButton as n } from "./NavigationButton.js";
+import { forwardRef as r, useCallback as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useResizeObserver as l } from "usehooks-ts";
+import { TabList as u } from "react-aria-components/Tabs";
+//#region src/core/components/tabs/parts/TabList.tsx
+var d = r(function({ children: r, ...d }, f) {
+	let p = a(null), [m, h] = o(!1), [g, _] = o(!1), { variant: v, scrollable: y } = e(), { tabList: b, scroller: x } = t({
+		variant: v,
+		scrollable: y
+	}), S = i(() => {
+		if (!p.current) return;
+		let { scrollLeft: e, scrollWidth: t, clientWidth: n } = p.current;
+		h(e > 0), _(e + n < t);
+	}, []);
+	l({
+		ref: p,
+		onResize: S
+	});
+	let C = () => {
+		S();
+	}, w = () => {
+		let e = p.current?.querySelectorAll("[role=tab]");
+		if (!p.current || !e) return 0;
+		let { scrollLeft: t } = p.current, n = Array.from(e);
+		for (let e = n.length - 1; e >= 0; e--) {
+			let r = n[e];
+			if (r.offsetLeft < t) return -r.offsetWidth;
+		}
+		return 0;
+	}, T = () => {
+		let e = p.current?.querySelectorAll("[role=tab]");
+		if (!p.current || !e) return 0;
+		let { scrollLeft: t, clientWidth: n } = p.current, r = Array.from(e), i = t + n;
+		for (let e = 0; e < r.length - 1; e++) {
+			let t = r[e], n = t.offsetLeft + t.offsetWidth;
+			if (n > i || n < i) return t.offsetWidth;
+		}
+		return 0;
+	};
+	return y ? /* @__PURE__ */ c("div", {
+		className: "uy:relative",
+		children: [
+			m && /* @__PURE__ */ s(n, {
+				direction: "left",
+				onPress: () => {
+					p.current?.scrollBy({
+						behavior: "smooth",
+						left: w()
+					});
+				}
+			}),
+			/* @__PURE__ */ s("div", {
+				ref: p,
+				"data-testid": "scrollable-tab-list",
+				className: x(),
+				onScroll: C,
+				children: /* @__PURE__ */ s(u, {
+					...d,
+					ref: f,
+					className: b(),
+					children: r
+				})
+			}),
+			g && /* @__PURE__ */ s(n, {
+				direction: "right",
+				onPress: () => {
+					p.current?.scrollBy({
+						behavior: "smooth",
+						left: T()
+					});
+				}
+			})
+		]
+	}) : /* @__PURE__ */ s(u, {
+		...d,
+		ref: f,
+		className: b(),
+		children: r
+	});
+});
+d.displayName = "TabList";
+//#endregion
+export { d as TabList };

package/dist/esm/core/components/tabs/parts/TabPanel.js

@@ -0,0 +1,14 @@
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import { TabPanel as n } from "react-aria-components/Tabs";
+//#region src/core/components/tabs/parts/TabPanel.tsx
+var r = e(({ children: e, id: r, ...i }, a) => /* @__PURE__ */ t(n, {
+	"data-dd-privacy": "mask",
+	id: r,
+	ref: a,
+	...i,
+	children: e
+}));
+r.displayName = "TabPanel";
+//#endregion
+export { r as TabPanel };

package/dist/esm/core/components/tabs/parts/TabPanels.js

@@ -0,0 +1,13 @@
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import { TabPanels as n } from "react-aria-components/Tabs";
+//#region src/core/components/tabs/parts/TabPanels.tsx
+var r = e(function(e, r) {
+	return /* @__PURE__ */ t(n, {
+		...e,
+		ref: r
+	});
+});
+r.displayName = "TabPanels";
+//#endregion
+export { r as TabPanels };

package/dist/esm/core/components/task-menu/TaskGroup.context.js

@@ -0,0 +1,5 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/core/components/task-menu/TaskGroup.context.ts
+var n = e(null), r = () => t(n);
+//#endregion
+export { n as TaskGroupContext, r as useTaskGroupId };

package/dist/esm/core/components/task-menu/TaskMenu.context.js

@@ -0,0 +1,49 @@
+import { createContext as e, useCallback as t, useContext as n, useRef as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { useId as o } from "react-aria/useId";
+import { useOverlayTriggerState as s } from "react-stately/useOverlayTriggerState";
+import { useOverlayTrigger as c } from "react-aria/useOverlayTrigger";
+//#region src/core/components/task-menu/TaskMenu.context.tsx
+var l = e({
+	currentTask: void 0,
+	setCurrentTask: void 0,
+	toggleTaskGroup: void 0,
+	expandedTaskGroup: void 0,
+	taskMenuId: "",
+	taskMenuContentId: "",
+	state: null,
+	triggerRef: { current: null },
+	overlayRef: { current: null },
+	triggerProps: {},
+	overlayProps: {}
+});
+function u({ children: e }) {
+	let n = o(), [u, d] = i(null), [f, p] = i(null), [m, h] = i(null), g = s({}), _ = r(null), v = r(null), { triggerProps: y, overlayProps: b } = c({ type: "dialog" }, g, _), x = `task-menu-${n}`, S = t((e, t) => {
+		d(e), h(t ?? null), p(t ?? null);
+	}, []);
+	return /* @__PURE__ */ a(l.Provider, {
+		value: {
+			currentTask: u,
+			setCurrentTask: S,
+			toggleTaskGroup: (e) => {
+				e === m ? (h(null), p(null)) : (h(e), p(f === e ? null : e));
+			},
+			expandedTaskGroup: f,
+			taskMenuId: n,
+			taskMenuContentId: x,
+			state: g,
+			triggerRef: _,
+			overlayRef: v,
+			triggerProps: y,
+			overlayProps: b
+		},
+		children: e
+	});
+}
+function d() {
+	let e = n(l);
+	if (!e) throw Error("useTaskMenuContext must be used within an TaskMenuProvider");
+	return e;
+}
+//#endregion
+export { l as TaskMenuContext, u as TaskMenuProvider, d as useTaskMenuContext };

package/dist/esm/core/components/task-menu/TaskMenu.js

@@ -0,0 +1,21 @@
+import { useBreakpointListener as e } from "../../hooks/use-breakpoint-listener.js";
+import { TaskMenuProvider as t } from "./TaskMenu.context.js";
+import { Content as n } from "./parts/Content.js";
+import { Header as r } from "./parts/Header.js";
+import { forwardRef as i } from "react";
+import { uyTv as a } from "@payfit/unity-themes";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/core/components/task-menu/TaskMenu.tsx
+var c = a({ slots: { base: ["uy:relative uy:flex uy:flex-col uy:shadow-raising uy:bg-surface-neutral", "uy:md:border uy:md:border-solid uy:md:border-border-neutral uy:md:rounded-300 uy:md:p-300"] } }), l = i(({ children: i, label: a, ...l }, u) => {
+	let { base: d } = c(), f = e(), p = f === "xs" || f === "sm";
+	return /* @__PURE__ */ o("nav", {
+		...l,
+		className: d(),
+		ref: u,
+		"aria-label": a,
+		children: /* @__PURE__ */ s(t, { children: [p && /* @__PURE__ */ o(r, {}), /* @__PURE__ */ o(n, { children: i })] })
+	});
+});
+l.displayName = "TaskMenu";
+//#endregion
+export { l as TaskMenu, c as taskMenu };

package/dist/esm/core/components/task-menu/parts/Content.js

@@ -0,0 +1,44 @@
+import { useBreakpointListener as e } from "../../../hooks/use-breakpoint-listener.js";
+import { useTaskMenuContext as t } from "../TaskMenu.context.js";
+import { uyTv as n } from "@payfit/unity-themes";
+import { jsx as r } from "react/jsx-runtime";
+import { mergeProps as i } from "react-aria/mergeProps";
+import { useOverlay as a } from "react-aria/useOverlay";
+import { FocusScope as o } from "react-aria/FocusScope";
+//#region src/core/components/task-menu/parts/Content.tsx
+var s = n({ base: [
+	"uy:flex uy:flex-col uy:mt-100",
+	"uy:flex uy:md:flex-col uy:md:gap-200 uy:md:list-none uy:md:mt-0",
+	"uy:focus-visible:outline-2 uy:focus-visible:outline uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+] }), c = ({ children: n }) => {
+	let { taskMenuContentId: o, state: c, overlayProps: l, overlayRef: u } = t(), d = e(), f = d === "xs" || d === "sm", { overlayProps: p } = a({
+		onClose: () => c?.close(),
+		isOpen: c?.isOpen,
+		isDismissable: !1
+	}, u);
+	return /* @__PURE__ */ r("ol", {
+		...i(p, l),
+		ref: u,
+		className: s(),
+		id: o,
+		...f && { "data-mobile-open": c?.isOpen },
+		children: n
+	});
+}, l = ({ children: e }) => {
+	let { state: n } = t();
+	return !!n?.isOpen && /* @__PURE__ */ r("div", {
+		className: "uy:absolute uy:z-9 uy:top-full uy:inset-x-0 uy:h-[100dvh] uy:bg-surface-neutral",
+		children: /* @__PURE__ */ r(o, {
+			contain: !0,
+			restoreFocus: !0,
+			autoFocus: !0,
+			children: /* @__PURE__ */ r(c, { children: e })
+		})
+	});
+}, u = ({ children: t }) => {
+	let n = e();
+	return r(n === "xs" || n === "sm" ? l : c, { children: t });
+};
+u.displayName = "TaskMenuContent";
+//#endregion
+export { u as Content };

package/dist/esm/core/components/task-menu/parts/Header.js

@@ -0,0 +1,40 @@
+import { IconButton as e } from "../../icon-button/IconButton.js";
+import { Text as t } from "../../text/Text.js";
+import { useTaskMenuContext as n } from "../TaskMenu.context.js";
+import { uyTv as r } from "@payfit/unity-themes";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useIntl as o } from "react-intl";
+//#region src/core/components/task-menu/parts/Header.tsx
+var s = r({ slots: {
+	header: ["uy:flex uy:px-300 uy:py-200 uy:gap-200 uy:shadow-raising"],
+	headerSelectedTask: ["uy:flex-1 uy:basis-full uy:self-center"]
+} }), c = () => {
+	let { currentTask: r, taskMenuId: c, taskMenuContentId: l, state: u, triggerProps: d, triggerRef: f } = n(), p = o(), { header: m, headerSelectedTask: h } = s();
+	return /* @__PURE__ */ a("div", {
+		className: m(),
+		children: [/* @__PURE__ */ i(t, {
+			asElement: "span",
+			className: h(),
+			"aria-describedby": c,
+			children: r?.label
+		}), /* @__PURE__ */ i(e, {
+			...d,
+			ref: f,
+			variant: "ghost",
+			color: "neutral",
+			icon: u?.isOpen ? "CloseOutlined" : "ListOutlined",
+			label: p.formatMessage({
+				id: u?.isOpen ? "unity:component:task-menu:header:menu-close" : "unity:component:task-menu:header:menu-open",
+				defaultMessage: u?.isOpen ? "Close task menu" : "Open task menu"
+			}),
+			onClick: () => {
+				u?.toggle();
+			},
+			"aria-expanded": !!u?.isOpen,
+			"aria-controls": l
+		})]
+	});
+};
+c.displayName = "Header";
+//#endregion
+export { c as Header };