@payfit/unity-components 2.47.5 → 2.47.6

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

@@ -1,119 +1,88 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { forwardRef as w, useMemo as y } from "react";
-import { uyTv as B } from "@payfit/unity-themes";
-import { useIntl as F } from "react-intl";
-import { useFunnelLayoutContext as I } from "../FunnelLayout.context.js";
-import { FunnelBackButton as T } from "./FunnelBackButton.js";
-import { FunnelProgressBar as M } from "./FunnelProgressBar.js";
-var c = {};
-const P = B({
-  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"
-    ]
-  }
-}), _ = w(
-  ({
-    actions: s,
-    backButtonLabel: t,
-    currentTaskDescription: u,
-    leading: r,
-    onBackButtonPress: o,
-    progressAnnouncement: d,
-    progressValue: n,
-    showProgress: m = !0,
-    title: f,
-    ...v
-  }, g) => {
-    const i = F(), { ids: a } = I(), { base: h, titleWrapper: b, title: x } = P(), N = y(() => r !== void 0 ? r : t && o ? (c.NODE_ENV === "development" && console.warn(
-      "FunnelTopBar: backButtonLabel and onBackButtonPress are deprecated. Use leading={<FunnelBackButton />} instead."
-    ), /* @__PURE__ */ e(
-      T,
-      {
-        label: t,
-        onPress: o
-      }
-    )) : null, [r, t, o]);
-    c.NODE_ENV === "development" && r !== void 0 && (t || o) && console.warn(
-      "FunnelTopBar: Both leading and deprecated props (backButtonLabel/onBackButtonPress) provided. leading takes precedence."
-    );
-    const p = y(
-      () => ({
-        navigationDescription: i.formatMessage({
-          id: "unity:layout:funnel:top-bar:navigation-desc",
-          defaultMessage: "Process navigation"
-        }),
-        progressAnnouncement: d ?? i.formatMessage(
-          {
-            id: "unity:layout:funnel:top-bar:progress-announcement",
-            defaultMessage: n !== void 0 ? `Process is ${n}% complete` : "Progress status unavailable"
-          },
-          {
-            progress: n
-          }
-        )
-      }),
-      [i, d, n]
-    );
-    return /* @__PURE__ */ l(
-      "header",
-      {
-        ref: g,
-        id: a.topbarId,
-        className: h(),
-        role: "banner",
-        "aria-labelledby": a.funnelTitleId,
-        "aria-describedby": a.funnelStatusId,
-        "data-dd-privacy": "allow",
-        ...v,
-        children: [
-          /* @__PURE__ */ l(
-            "nav",
-            {
-              className: b(),
-              "aria-label": p.navigationDescription,
-              children: [
-                /* @__PURE__ */ e("div", { className: "uy:grow-0 uy:basis-[100px]", children: N }),
-                /* @__PURE__ */ l("h1", { className: x(), id: a.funnelTitleId, children: [
-                  f,
-                  u && /* @__PURE__ */ e("span", { className: "uy:sr-only", children: u })
-                ] }),
-                /* @__PURE__ */ e(
-                  "div",
-                  {
-                    className: "uy:grow-0 uy:basis-[100px]",
-                    "aria-hidden": !s,
-                    role: s ? "group" : "presentation",
-                    children: s
-                  }
-                )
-              ]
-            }
-          ),
-          m && /* @__PURE__ */ e("div", { "aria-hidden": "true", children: /* @__PURE__ */ e(M, { value: n ?? 0 }) }),
-          /* @__PURE__ */ e(
-            "div",
-            {
-              id: a.funnelStatusId,
-              role: "status",
-              "aria-live": "polite",
-              "aria-atomic": "true",
-              className: "uy:sr-only",
-              children: p.progressAnnouncement
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-_.displayName = "FunnelTopBar";
-export {
-  _ as FunnelTopBar,
-  P as funnelTopBar
-};
+import { useFunnelLayoutContext as e } from "../FunnelLayout.context.js";
+import { FunnelBackButton as t } from "./FunnelBackButton.js";
+import { FunnelProgressBar as n } from "./FunnelProgressBar.js";
+import { forwardRef as r, useMemo 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";
+//#region src/components/funnel-layout/parts/FunnelTopBar.tsx
+var l = a({ 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"]
+} }), u = r(({ actions: r, backButtonLabel: a, currentTaskDescription: u, leading: d, onBackButtonPress: f, progressAnnouncement: p, progressValue: m, showProgress: h = !0, title: g, ..._ }, v) => {
+	let y = c(), { ids: b } = e(), { base: x, titleWrapper: S, title: C } = l(), w = i(() => d === void 0 ? a && f ? (process.env.NODE_ENV === "development" && console.warn("FunnelTopBar: backButtonLabel and onBackButtonPress are deprecated. Use leading={<FunnelBackButton />} instead."), /* @__PURE__ */ o(t, {
+		label: a,
+		onPress: f
+	})) : null : d, [
+		d,
+		a,
+		f
+	]);
+	process.env.NODE_ENV === "development" && d !== void 0 && (a || f) && console.warn("FunnelTopBar: Both leading and deprecated props (backButtonLabel/onBackButtonPress) provided. leading takes precedence.");
+	let T = i(() => ({
+		navigationDescription: y.formatMessage({
+			id: "unity:layout:funnel:top-bar:navigation-desc",
+			defaultMessage: "Process navigation"
+		}),
+		progressAnnouncement: p ?? y.formatMessage({
+			id: "unity:layout:funnel:top-bar:progress-announcement",
+			defaultMessage: m === void 0 ? "Progress status unavailable" : `Process is ${m}% complete`
+		}, { progress: m })
+	}), [
+		y,
+		p,
+		m
+	]);
+	return /* @__PURE__ */ s("header", {
+		ref: v,
+		id: b.topbarId,
+		className: x(),
+		role: "banner",
+		"aria-labelledby": b.funnelTitleId,
+		"aria-describedby": b.funnelStatusId,
+		"data-dd-privacy": "allow",
+		..._,
+		children: [
+			/* @__PURE__ */ s("nav", {
+				className: S(),
+				"aria-label": T.navigationDescription,
+				children: [
+					/* @__PURE__ */ o("div", {
+						className: "uy:grow-0 uy:basis-[100px]",
+						children: w
+					}),
+					/* @__PURE__ */ s("h1", {
+						className: C(),
+						id: b.funnelTitleId,
+						children: [g, u && /* @__PURE__ */ o("span", {
+							className: "uy:sr-only",
+							children: u
+						})]
+					}),
+					/* @__PURE__ */ o("div", {
+						className: "uy:grow-0 uy:basis-[100px]",
+						"aria-hidden": !r,
+						role: r ? "group" : "presentation",
+						children: r
+					})
+				]
+			}),
+			h && /* @__PURE__ */ o("div", {
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ o(n, { value: m ?? 0 })
+			}),
+			/* @__PURE__ */ o("div", {
+				id: b.funnelStatusId,
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: "uy:sr-only",
+				children: T.progressAnnouncement
+			})
+		]
+	});
+});
+u.displayName = "FunnelTopBar";
+//#endregion
+export { u as FunnelTopBar, l as funnelTopBar };

package/dist/esm/components/grid/Grid.js

@@ -1,38 +1,27 @@
-import { jsx as y } from "react/jsx-runtime";
-import { forwardRef as N } from "react";
-import { grid as f } from "./Grid.variants.js";
-const g = N(
-  ({
-    asElement: r = "div",
-    className: e,
-    children: a,
-    inline: t,
-    cols: m,
-    flow: o,
-    justifyItems: l,
-    alignItems: i,
-    rows: s,
-    areas: d,
-    ...c
-  }, p) => {
-    const u = {
-      "--uy-grid-template-rows": s,
-      gridTemplateAreas: d
-    }, n = f({
-      inline: t,
-      cols: m,
-      flow: o,
-      justifyItems: l,
-      alignItems: i,
-      className: [
-        s ? "uy:grid-rows-(--uy-grid-template-rows)" : "",
-        e
-      ]
-    });
-    return /* @__PURE__ */ y(r, { ref: p, className: n, style: u, ...c, children: a });
-  }
-);
-g.displayName = "Grid";
-export {
-  g as Grid
-};
+import { grid as e } from "./Grid.variants.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/grid/Grid.tsx
+var r = t(({ asElement: t = "div", className: r, children: i, inline: a, cols: o, flow: s, justifyItems: c, alignItems: l, rows: u, areas: d, ...f }, p) => {
+	let m = {
+		"--uy-grid-template-rows": u,
+		gridTemplateAreas: d
+	};
+	return /* @__PURE__ */ n(t, {
+		ref: p,
+		className: e({
+			inline: a,
+			cols: o,
+			flow: s,
+			justifyItems: c,
+			alignItems: l,
+			className: [u ? "uy:grid-rows-(--uy-grid-template-rows)" : "", r]
+		}),
+		style: m,
+		...f,
+		children: i
+	});
+});
+r.displayName = "Grid";
+//#endregion
+export { r as Grid };

package/dist/esm/components/grid/Grid.variants.js

@@ -1,164 +1,147 @@
-import { uyTv as u } from "@payfit/unity-themes";
-const l = u(
-  {
-    base: "uy:grid-layout",
-    variants: {
-      // Display mode
-      inline: {
-        true: "uy:inline-grid",
-        false: ""
-      },
-      cols: {
-        6: "uy:[--uy-grid-layout-columns--default:6] uy:[--uy-grid-layout-columns--md:6] uy:[--uy-grid-layout-columns--lg:6]",
-        12: "uy:[--uy-grid-layout-columns--default:12] uy:[--uy-grid-layout-columns--md:12] uy:[--uy-grid-layout-columns--lg:12]"
-      },
-      // Flow
-      flow: {
-        row: "uy:grid-flow-row",
-        col: "uy:grid-flow-col",
-        dense: "uy:grid-flow-dense",
-        "row-dense": "uy:grid-flow-row-dense",
-        "col-dense": "uy:grid-flow-col-dense"
-      },
-      // Justify items
-      justifyItems: {
-        initial: "",
-        start: "uy:justify-items-start",
-        end: "uy:justify-items-end",
-        center: "uy:justify-items-center",
-        stretch: "uy:justify-items-stretch"
-      },
-      // Align items
-      alignItems: {
-        initial: "",
-        start: "uy:items-start",
-        end: "uy:items-end",
-        center: "uy:items-center",
-        stretch: "uy:items-stretch",
-        baseline: "uy:items-baseline uy:items-base"
-      }
-    },
-    defaultVariants: {
-      inline: !1,
-      flow: "row",
-      justifyItems: "initial",
-      alignItems: "initial"
-    }
-  }
-  // {
-  //   responsiveVariants: true,
-  // },
-), y = u(
-  {
-    variants: {
-      colSpan: {
-        1: "uy:col-span-1",
-        2: "uy:col-span-2",
-        3: "uy:col-span-3",
-        4: "uy:col-span-4",
-        5: "uy:col-span-5",
-        6: "uy:col-span-6",
-        7: "uy:md:col-span-7",
-        8: "uy:md:col-span-8",
-        9: "uy:md:col-span-9",
-        10: "uy:md:col-span-10",
-        11: "uy:md:col-span-11",
-        12: "uy:md:col-span-12",
-        "1/2": "uy:col-span-3 uy:md:col-span-6",
-        "1/3": "uy:col-span-2 uy:md:col-span-4",
-        "2/3": "uy:col-span-4 uy:md:col-span-8",
-        "1/4": "uy:col-span-1 uy:md:col-span-3",
-        "3/4": "uy:col-span-3 uy:md:col-span-9",
-        "1/6": "uy:col-span-1 uy:md:col-span-2",
-        "5/6": "uy:col-span-5 uy:md:col-span-10",
-        full: "uy:col-span-full"
-      },
-      // Column start for 12-column grid
-      colStart: {
-        "-1": "uy:-col-start-1",
-        "-2": "uy:-col-start-2",
-        "-3": "uy:-col-start-3",
-        "-4": "uy:-col-start-4",
-        "-5": "uy:-col-start-5",
-        "-6": "uy:-col-start-6",
-        "-7": "uy:-col-start-7",
-        "-8": "uy:-col-start-8",
-        "-9": "uy:-col-start-9",
-        "-10": "uy:-col-start-10",
-        "-11": "uy:-col-start-11",
-        "-12": "uy:-col-start-12",
-        "-13": "uy:-col-start-13",
-        1: "uy:col-start-1",
-        2: "uy:col-start-2",
-        3: "uy:col-start-3",
-        4: "uy:col-start-4",
-        5: "uy:col-start-5",
-        6: "uy:col-start-6",
-        7: "uy:col-start-7",
-        8: "uy:col-start-8",
-        9: "uy:col-start-9",
-        10: "uy:col-start-10",
-        11: "uy:col-start-11",
-        12: "uy:col-start-12",
-        13: "uy:col-start-13",
-        auto: "uy:col-start-auto"
-      },
-      colEnd: {
-        1: "uy:col-end-1",
-        2: "uy:col-end-2",
-        3: "uy:col-end-3",
-        4: "uy:col-end-4",
-        5: "uy:col-end-5",
-        6: "uy:col-end-6",
-        7: "uy:col-end-7",
-        8: "uy:col-end-8",
-        9: "uy:col-end-9",
-        10: "uy:col-end-10",
-        11: "uy:col-end-11",
-        12: "uy:col-end-12",
-        13: "uy:col-end-13",
-        "-1": "uy:-col-end-1",
-        "-2": "uy:-col-end-2",
-        "-3": "uy:-col-end-3",
-        "-4": "uy:-col-end-4",
-        "-5": "uy:-col-end-5",
-        "-6": "uy:-col-end-6",
-        "-7": "uy:-col-end-7",
-        "-8": "uy:-col-end-8",
-        "-9": "uy:-col-end-9",
-        "-10": "uy:-col-end-10",
-        "-11": "uy:-col-end-11",
-        "-12": "uy:-col-end-12",
-        "-13": "uy:-col-end-13",
-        auto: "uy:col-end-auto"
-      },
-      // Self alignment
-      justify: {
-        initial: "",
-        start: "uy:justify-self-start",
-        end: "uy:justify-self-end",
-        center: "uy:justify-self-center",
-        stretch: "uy:justify-self-stretch"
-      },
-      align: {
-        initial: "uy:self-auto",
-        start: "uy:self-start",
-        end: "uy:self-end",
-        center: "uy:self-center",
-        stretch: "uy:self-stretch",
-        baseline: "uy:self-baseline"
-      }
-    },
-    defaultVariants: {
-      justify: "initial",
-      align: "initial"
-    }
-  }
-  // {
-  //   responsiveVariants: true,
-  // },
-);
-export {
-  l as grid,
-  y as gridItem
-};
+import { uyTv as e } from "@payfit/unity-themes";
+//#region src/components/grid/Grid.variants.ts
+var t = e({
+	base: "uy:grid-layout",
+	variants: {
+		inline: {
+			true: "uy:inline-grid",
+			false: ""
+		},
+		cols: {
+			6: "uy:[--uy-grid-layout-columns--default:6] uy:[--uy-grid-layout-columns--md:6] uy:[--uy-grid-layout-columns--lg:6]",
+			12: "uy:[--uy-grid-layout-columns--default:12] uy:[--uy-grid-layout-columns--md:12] uy:[--uy-grid-layout-columns--lg:12]"
+		},
+		flow: {
+			row: "uy:grid-flow-row",
+			col: "uy:grid-flow-col",
+			dense: "uy:grid-flow-dense",
+			"row-dense": "uy:grid-flow-row-dense",
+			"col-dense": "uy:grid-flow-col-dense"
+		},
+		justifyItems: {
+			initial: "",
+			start: "uy:justify-items-start",
+			end: "uy:justify-items-end",
+			center: "uy:justify-items-center",
+			stretch: "uy:justify-items-stretch"
+		},
+		alignItems: {
+			initial: "",
+			start: "uy:items-start",
+			end: "uy:items-end",
+			center: "uy:items-center",
+			stretch: "uy:items-stretch",
+			baseline: "uy:items-baseline uy:items-base"
+		}
+	},
+	defaultVariants: {
+		inline: !1,
+		flow: "row",
+		justifyItems: "initial",
+		alignItems: "initial"
+	}
+}), n = e({
+	variants: {
+		colSpan: {
+			1: "uy:col-span-1",
+			2: "uy:col-span-2",
+			3: "uy:col-span-3",
+			4: "uy:col-span-4",
+			5: "uy:col-span-5",
+			6: "uy:col-span-6",
+			7: "uy:md:col-span-7",
+			8: "uy:md:col-span-8",
+			9: "uy:md:col-span-9",
+			10: "uy:md:col-span-10",
+			11: "uy:md:col-span-11",
+			12: "uy:md:col-span-12",
+			"1/2": "uy:col-span-3 uy:md:col-span-6",
+			"1/3": "uy:col-span-2 uy:md:col-span-4",
+			"2/3": "uy:col-span-4 uy:md:col-span-8",
+			"1/4": "uy:col-span-1 uy:md:col-span-3",
+			"3/4": "uy:col-span-3 uy:md:col-span-9",
+			"1/6": "uy:col-span-1 uy:md:col-span-2",
+			"5/6": "uy:col-span-5 uy:md:col-span-10",
+			full: "uy:col-span-full"
+		},
+		colStart: {
+			"-1": "uy:-col-start-1",
+			"-2": "uy:-col-start-2",
+			"-3": "uy:-col-start-3",
+			"-4": "uy:-col-start-4",
+			"-5": "uy:-col-start-5",
+			"-6": "uy:-col-start-6",
+			"-7": "uy:-col-start-7",
+			"-8": "uy:-col-start-8",
+			"-9": "uy:-col-start-9",
+			"-10": "uy:-col-start-10",
+			"-11": "uy:-col-start-11",
+			"-12": "uy:-col-start-12",
+			"-13": "uy:-col-start-13",
+			1: "uy:col-start-1",
+			2: "uy:col-start-2",
+			3: "uy:col-start-3",
+			4: "uy:col-start-4",
+			5: "uy:col-start-5",
+			6: "uy:col-start-6",
+			7: "uy:col-start-7",
+			8: "uy:col-start-8",
+			9: "uy:col-start-9",
+			10: "uy:col-start-10",
+			11: "uy:col-start-11",
+			12: "uy:col-start-12",
+			13: "uy:col-start-13",
+			auto: "uy:col-start-auto"
+		},
+		colEnd: {
+			1: "uy:col-end-1",
+			2: "uy:col-end-2",
+			3: "uy:col-end-3",
+			4: "uy:col-end-4",
+			5: "uy:col-end-5",
+			6: "uy:col-end-6",
+			7: "uy:col-end-7",
+			8: "uy:col-end-8",
+			9: "uy:col-end-9",
+			10: "uy:col-end-10",
+			11: "uy:col-end-11",
+			12: "uy:col-end-12",
+			13: "uy:col-end-13",
+			"-1": "uy:-col-end-1",
+			"-2": "uy:-col-end-2",
+			"-3": "uy:-col-end-3",
+			"-4": "uy:-col-end-4",
+			"-5": "uy:-col-end-5",
+			"-6": "uy:-col-end-6",
+			"-7": "uy:-col-end-7",
+			"-8": "uy:-col-end-8",
+			"-9": "uy:-col-end-9",
+			"-10": "uy:-col-end-10",
+			"-11": "uy:-col-end-11",
+			"-12": "uy:-col-end-12",
+			"-13": "uy:-col-end-13",
+			auto: "uy:col-end-auto"
+		},
+		justify: {
+			initial: "",
+			start: "uy:justify-self-start",
+			end: "uy:justify-self-end",
+			center: "uy:justify-self-center",
+			stretch: "uy:justify-self-stretch"
+		},
+		align: {
+			initial: "uy:self-auto",
+			start: "uy:self-start",
+			end: "uy:self-end",
+			center: "uy:self-center",
+			stretch: "uy:self-stretch",
+			baseline: "uy:self-baseline"
+		}
+	},
+	defaultVariants: {
+		justify: "initial",
+		align: "initial"
+	}
+});
+//#endregion
+export { t as grid, n as gridItem };