@payfit/unity-components 2.47.4 → 2.47.6

package/dist/esm/components/funnel-layout/parts/FunnelPageActions.js

@@ -1,41 +1,30 @@
-import { jsxs as e, Fragment as l, jsx as c } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { uyTv as m } from "@payfit/unity-themes";
-import { useBreakpointListener as y } from "../../../hooks/use-breakpoint-listener.js";
-const d = m({
-  base: "uy:flex uy:flex-col uy:gap-200 uy:md:flex-row uy:md:justify-between"
-}), f = u(
-  ({ renderNext: a, renderPrevious: n, renderOptionalActions: o, ...t }, r) => {
-    const s = y(), i = s === "xs" || s === "sm";
-    return /* @__PURE__ */ e(
-      "div",
-      {
-        ref: r,
-        "data-dd-privacy": "allow",
-        ...t,
-        className: d(),
-        role: "group",
-        "data-unity-component": "FunnelPageActions",
-        children: [
-          i && /* @__PURE__ */ e(l, { children: [
-            a(),
-            n?.(),
-            o?.()
-          ] }),
-          !i && /* @__PURE__ */ e(l, { children: [
-            /* @__PURE__ */ c("div", { className: "uy:flex uy:gap-100", children: o?.() }),
-            /* @__PURE__ */ e("div", { className: "uy:flex uy:gap-100", children: [
-              n?.(),
-              a()
-            ] })
-          ] })
-        ]
-      }
-    );
-  }
-);
-f.displayName = "FunnelPageActions";
-export {
-  f as FunnelPageActions,
-  d as funnelPageActions
-};
+import { useBreakpointListener as e } from "../../../hooks/use-breakpoint-listener.js";
+import { forwardRef as t } from "react";
+import { uyTv as n } from "@payfit/unity-themes";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/funnel-layout/parts/FunnelPageActions.tsx
+var o = n({ base: "uy:flex uy:flex-col uy:gap-200 uy:md:flex-row uy:md:justify-between" }), s = t(({ renderNext: t, renderPrevious: n, renderOptionalActions: s, ...c }, l) => {
+	let u = e(), d = u === "xs" || u === "sm";
+	return /* @__PURE__ */ a("div", {
+		ref: l,
+		"data-dd-privacy": "allow",
+		...c,
+		className: o(),
+		role: "group",
+		"data-unity-component": "FunnelPageActions",
+		children: [d && /* @__PURE__ */ a(r, { children: [
+			t(),
+			n?.(),
+			s?.()
+		] }), !d && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", {
+			className: "uy:flex uy:gap-100",
+			children: s?.()
+		}), /* @__PURE__ */ a("div", {
+			className: "uy:flex uy:gap-100",
+			children: [n?.(), t()]
+		})] })]
+	});
+});
+s.displayName = "FunnelPageActions";
+//#endregion
+export { s as FunnelPageActions, o as funnelPageActions };

package/dist/esm/components/funnel-layout/parts/FunnelPageContent.js

@@ -1,23 +1,15 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as o } from "react";
-import { uyTv as u } from "@payfit/unity-themes";
-const m = u({
-  base: 'uy:flex-1 uy:px-300 uy:my-400 uy:md:px-400 uy:group-has-[[data-unity-component="FunnelPageHeader"]]/funnelpage:mt-0'
-}), r = o(
-  ({ children: n, ...e }, t) => /* @__PURE__ */ a(
-    "section",
-    {
-      "data-dd-privacy": "mask",
-      ...e,
-      ref: t,
-      className: m(),
-      "data-unity-component": "FunnelPageContent",
-      children: n
-    }
-  )
-);
-r.displayName = "FunnelPageContent";
-export {
-  r as FunnelPageContent,
-  m as funnelPageContent
-};
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/funnel-layout/parts/FunnelPageContent.tsx
+var r = t({ base: "uy:flex-1 uy:px-300 uy:my-400 uy:md:px-400 uy:group-has-[[data-unity-component=\"FunnelPageHeader\"]]/funnelpage:mt-0" }), i = e(({ children: e, ...t }, i) => /* @__PURE__ */ n("section", {
+	"data-dd-privacy": "mask",
+	...t,
+	ref: i,
+	className: r(),
+	"data-unity-component": "FunnelPageContent",
+	children: e
+}));
+i.displayName = "FunnelPageContent";
+//#endregion
+export { i as FunnelPageContent, r as funnelPageContent };

package/dist/esm/components/funnel-layout/parts/FunnelPageFooter.js

@@ -1,28 +1,20 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { uyTv as m } from "@payfit/unity-themes";
-import { useFunnelLayoutContext as u } from "../FunnelLayout.context.js";
-const d = m({
-  base: "uy:px-300 uy:md:px-400"
-}), s = n(
-  ({ children: o, ...e }, t) => {
-    const { ids: r } = u();
-    return /* @__PURE__ */ a(
-      "footer",
-      {
-        ref: t,
-        "data-dd-privacy": "allow",
-        ...e,
-        className: d(),
-        "data-unity-component": "FunnelPageFooter",
-        id: r.footerId,
-        children: o
-      }
-    );
-  }
-);
-s.displayName = "FunnelPageFooter";
-export {
-  s as FunnelPageFooter,
-  d as funnelPageFooter
-};
+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";
+//#region src/components/funnel-layout/parts/FunnelPageFooter.tsx
+var i = n({ base: "uy:px-300 uy:md:px-400" }), a = t(({ children: t, ...n }, a) => {
+	let { ids: o } = e();
+	return /* @__PURE__ */ r("footer", {
+		ref: a,
+		"data-dd-privacy": "allow",
+		...n,
+		className: i(),
+		"data-unity-component": "FunnelPageFooter",
+		id: o.footerId,
+		children: t
+	});
+});
+a.displayName = "FunnelPageFooter";
+//#endregion
+export { a as FunnelPageFooter, i as funnelPageFooter };

package/dist/esm/components/funnel-layout/parts/FunnelPageHeader.js

@@ -1,55 +1,53 @@
-import { jsxs as e, jsx as a } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { uyTv as h } from "@payfit/unity-themes";
-import { Text as n } from "../../text/Text.js";
-import { useFunnelLayoutContext as x } from "../FunnelLayout.context.js";
-const b = h({
-  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"
-  }
-}), v = p(
-  ({ title: t, subtitle: u, imageSlot: r, imageSlotAltText: l, children: d, style: i, ...o }, s) => {
-    const { ids: y } = x(), { base: m, hgroup: c, figure: f, figcaption: g } = b({
-      gradient: i
-    });
-    return /* @__PURE__ */ e(
-      "header",
-      {
-        ref: s,
-        className: m(),
-        "data-unity-component": "FunnelPageHeader",
-        "data-dd-privacy": "allow",
-        ...o,
-        children: [
-          /* @__PURE__ */ e("hgroup", { className: c(), id: y.funnelDescriptionId, children: [
-            /* @__PURE__ */ a(n, { asElement: "h2", variant: "h1", children: t }),
-            /* @__PURE__ */ a(n, { asElement: "h3", variant: "subtitle", color: "content.neutral.low", children: u }),
-            d
-          ] }),
-          r && /* @__PURE__ */ e("figure", { className: f(), "aria-hidden": "true", children: [
-            r,
-            /* @__PURE__ */ a("figcaption", { className: g(), children: l })
-          ] })
-        ]
-      }
-    );
-  }
-);
-v.displayName = "FunnelPageHeader";
-export {
-  v as FunnelPageHeader,
-  b as funnelPageHeader
-};
+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 };

package/dist/esm/components/funnel-layout/parts/FunnelProgressBar.js

@@ -1,50 +1,39 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { uyTv as n } from "@payfit/unity-themes";
-import { ProgressBar as d } from "react-aria-components/ProgressBar";
-const y = n({
-  slots: {
-    base: ["uy:bg-surface-neutral-disabled", "uy:w-full uy:h-50"],
-    meter: [
-      "uy:h-full uy:w-[var(--uy-progressbar-value)] uy:transition-all uy:duration-200 uy:ease-linear",
-      "uy:bg-surface-primary",
-      "uy:rounded-r-pill"
-    ]
-  },
-  variants: {
-    isFull: {
-      true: { meter: "uy:rounded-r-0" },
-      false: { meter: "uy:rounded-r-pill" }
-    }
-  },
-  defaultVariants: {
-    isFull: !1
-  }
-}), m = i(
-  ({ value: e, ...a }, s) => {
-    const l = e >= 100, { base: u, meter: o } = y({ isFull: l });
-    return /* @__PURE__ */ r(
-      d,
-      {
-        ref: s,
-        value: e,
-        "aria-label": "progress bar",
-        "data-dd-privacy": "allow",
-        ...a,
-        children: ({ percentage: t }) => /* @__PURE__ */ r("div", { className: u(), children: /* @__PURE__ */ r(
-          "div",
-          {
-            className: o(),
-            style: {
-              "--uy-progressbar-value": `${t}%`
-            }
-          }
-        ) })
-      }
-    );
-  }
-);
-m.displayName = "FunnelProgressBar";
-export {
-  m as FunnelProgressBar
-};
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+import { ProgressBar as r } from "react-aria-components/ProgressBar";
+//#region src/components/funnel-layout/parts/FunnelProgressBar.tsx
+var i = t({
+	slots: {
+		base: ["uy:bg-surface-neutral-disabled", "uy:w-full uy:h-50"],
+		meter: [
+			"uy:h-full uy:w-[var(--uy-progressbar-value)] uy:transition-all uy:duration-200 uy:ease-linear",
+			"uy:bg-surface-primary",
+			"uy:rounded-r-pill"
+		]
+	},
+	variants: { isFull: {
+		true: { meter: "uy:rounded-r-0" },
+		false: { meter: "uy:rounded-r-pill" }
+	} },
+	defaultVariants: { isFull: !1 }
+}), a = e(({ value: e, ...t }, a) => {
+	let { base: o, meter: s } = i({ isFull: e >= 100 });
+	return /* @__PURE__ */ n(r, {
+		ref: a,
+		value: e,
+		"aria-label": "progress bar",
+		"data-dd-privacy": "allow",
+		...t,
+		children: ({ percentage: e }) => /* @__PURE__ */ n("div", {
+			className: o(),
+			children: /* @__PURE__ */ n("div", {
+				className: s(),
+				style: { "--uy-progressbar-value": `${e}%` }
+			})
+		})
+	});
+});
+a.displayName = "FunnelProgressBar";
+//#endregion
+export { a as FunnelProgressBar };

package/dist/esm/components/funnel-layout/parts/FunnelSidebar.js

@@ -1,54 +1,47 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { uyTv as l } from "@payfit/unity-themes";
-import { useIntl as c } from "react-intl";
-import { useFunnelLayoutContext as m } from "../FunnelLayout.context.js";
-const f = l({
-  base: [
-    "uy:w-full uy:self-start uy:shrink uy:grow-0",
-    // sidebar is always sticky in mobile
-    "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"
-  }
-}), p = d(
-  ({ children: s, isSticky: t, position: a, "aria-label": e, ...o }, u) => {
-    const r = t !== void 0 ? t ? "sticky" : "static" : a, { ids: i } = m(), y = c();
-    return /* @__PURE__ */ n(
-      "aside",
-      {
-        ref: u,
-        "aria-label": e ?? y.formatMessage({
-          id: "unity:layout:funnel:sidebar:aria-label",
-          defaultMessage: "Process steps"
-        }),
-        "aria-describedby": i.funnelTitleId,
-        className: f({ position: r }),
-        id: i.asideId,
-        "data-unity-component": "FunnelSidebar",
-        "data-dd-privacy": "allow",
-        ...o,
-        children: s
-      }
-    );
-  }
-);
-p.displayName = "FunnelSidebar";
-export {
-  p as FunnelSidebar,
-  f as funnelSidebar
-};
+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 };