@payfit/unity-components
Version:
54 lines (53 loc) • 1.82 kB
JavaScript
import { Text as e } from "../../text/Text.js";
import { useFunnelLayoutContext as t } from "../FunnelLayout.context.js";
import { forwardRef as n } from "react";
import { uyTv as r } from "@payfit/unity-themes";
import { jsx as i, jsxs as a } from "react/jsx-runtime";
//#region src/components/funnel-layout/parts/FunnelPageHeader.tsx
var o = r({
slots: {
base: "uy:flex uy:flex-col uy:justify-between uy:p-300 uy:md:py-600 uy:md:px-400 uy:md:flex-row uy:md:items-center uy:md:rounded-t-300",
hgroup: "uy:space-y-100",
figure: "uy:hidden uy:lg:block uy:lg:h-full uy:lg:max-h-[160px] uy:lg:ml-800 uy:lg:mr-150 uy:shrink-0",
figcaption: "uy:sr-only"
},
variants: { gradient: { default: { base: "uy:md:bg-gradient-to-b uy:md:from-blue-l1/30 uy:md:to-grayscale-L0" } } },
defaultVariants: { gradient: "default" }
}), s = n(({ title: n, subtitle: r, imageSlot: s, imageSlotAltText: c, children: l, style: u, ...d }, f) => {
let { ids: p } = t(), { base: m, hgroup: h, figure: g, figcaption: _ } = o({ gradient: u });
return /* @__PURE__ */ a("header", {
ref: f,
className: m(),
"data-unity-component": "FunnelPageHeader",
"data-dd-privacy": "allow",
...d,
children: [/* @__PURE__ */ a("hgroup", {
className: h(),
id: p.funnelDescriptionId,
children: [
/* @__PURE__ */ i(e, {
asElement: "h2",
variant: "h1",
children: n
}),
/* @__PURE__ */ i(e, {
asElement: "h3",
variant: "subtitle",
color: "content.neutral.low",
children: r
}),
l
]
}), s && /* @__PURE__ */ a("figure", {
className: g(),
"aria-hidden": "true",
children: [s, /* @__PURE__ */ i("figcaption", {
className: _(),
children: c
})]
})]
});
});
s.displayName = "FunnelPageHeader";
//#endregion
export { s as FunnelPageHeader, o as funnelPageHeader };