@payfit/unity-components
Version:
48 lines (47 loc) • 1.43 kB
JavaScript
import { useFunnelLayoutContext as e } from "../FunnelLayout.context.js";
import { forwardRef as t } from "react";
import { uyTv as n } from "@payfit/unity-themes";
import { jsx as r } from "react/jsx-runtime";
import { useIntl as i } from "react-intl";
//#region src/components/funnel-layout/parts/FunnelSidebar.tsx
var a = n({
base: [
"uy:w-full uy:self-start uy:shrink uy:grow-0",
"uy:sticky uy:top-8 uy:z-9",
"uy:md:basis-1/3 uy:lg:basis-1/4 uy:md:shrink-0"
],
variants: {
isSticky: {
true: "uy:sticky uy:top-8 uy:md:top-10 uy:z-9",
false: "uy:static"
},
position: {
sticky: ["uy:md:sticky uy:md:top-10"],
static: ["uy:md:static"],
fixed: ["uy:md:sticky uy:md:top-[var(--uy-funnel-sidebar-offset)]"]
}
},
defaultVariants: {
isSticky: !0,
position: "sticky"
}
}), o = t(({ children: t, isSticky: n, position: o, "aria-label": s, ...c }, l) => {
let u = n === void 0 ? o : n ? "sticky" : "static", { ids: d } = e(), f = i();
return /* @__PURE__ */ r("aside", {
ref: l,
"aria-label": s ?? f.formatMessage({
id: "unity:layout:funnel:sidebar:aria-label",
defaultMessage: "Process steps"
}),
"aria-describedby": d.funnelTitleId,
className: a({ position: u }),
id: d.asideId,
"data-unity-component": "FunnelSidebar",
"data-dd-privacy": "allow",
...c,
children: t
});
});
o.displayName = "FunnelSidebar";
//#endregion
export { o as FunnelSidebar, a as funnelSidebar };