@payfit/unity-components 2.47.4 → 2.47.6

package/dist/esm/components/form-field/parts/TanstackRawFormContextualLink.js

@@ -1,46 +1,34 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { useUnityTheme as c } from "@payfit/unity-themes";
-import { Button as u } from "react-aria-components/Button";
-import { RawLink as y } from "../../link/RawLink.js";
-import { useFieldA11yContext as f } from "../TanstackFormField.context.js";
-const k = s((t, a) => {
-  const { children: o, href: n, onPress: l, ...r } = t, i = f(), { theme: d } = c(), m = d === "rebrand" ? "primary" : "secondary";
-  return n ? (
-    // @ts-expect-error - it's okay in this case
-    /* @__PURE__ */ e(
-      y,
-      {
-        id: i.contextualLinkId || t.id,
-        size: "small",
-        color: m,
-        variant: "standalone",
-        "data-unity-slot": "form-field-contextual-link",
-        href: n,
-        ref: a,
-        "data-dd-privacy": "allow",
-        ...r,
-        children: o
-      }
-    )
-  ) : (
-    // @ts-expect-error - it's okay in this case
-    /* @__PURE__ */ e(
-      u,
-      {
-        id: i.contextualLinkId || t.id,
-        onPress: l,
-        "data-unity-slot": "contextual-link",
-        className: "uy:typography-body-small uy:w-fit",
-        ref: a,
-        "data-dd-privacy": "allow",
-        ...r,
-        children: o
-      }
-    )
-  );
+import { RawLink as e } from "../../link/RawLink.js";
+import { useFieldA11yContext as t } from "../TanstackFormField.context.js";
+import { forwardRef as n } from "react";
+import { useUnityTheme as r } from "@payfit/unity-themes";
+import { jsx as i } from "react/jsx-runtime";
+import { Button as a } from "react-aria-components/Button";
+//#region src/components/form-field/parts/TanstackRawFormContextualLink.tsx
+var o = n((n, o) => {
+	let { children: s, href: c, onPress: l, ...u } = n, d = t(), { theme: f } = r(), p = f === "rebrand" ? "primary" : "secondary";
+	return c ? /* @__PURE__ */ i(e, {
+		id: d.contextualLinkId || n.id,
+		size: "small",
+		color: p,
+		variant: "standalone",
+		"data-unity-slot": "form-field-contextual-link",
+		href: c,
+		ref: o,
+		"data-dd-privacy": "allow",
+		...u,
+		children: s
+	}) : /* @__PURE__ */ i(a, {
+		id: d.contextualLinkId || n.id,
+		onPress: l,
+		"data-unity-slot": "contextual-link",
+		className: "uy:typography-body-small uy:w-fit",
+		ref: o,
+		"data-dd-privacy": "allow",
+		...u,
+		children: s
+	});
 });
-k.displayName = "TanstackRawFormContextualLink";
-export {
-  k as TanstackRawFormContextualLink
-};
+o.displayName = "TanstackRawFormContextualLink";
+//#endregion
+export { o as TanstackRawFormContextualLink };

package/dist/esm/components/form-field/utils/isFieldRequired.js

@@ -1,8 +1,8 @@
-function l(e, t) {
-  if (!e) return !1;
-  const i = e.getField(t);
-  return i ? !i.isOptional : !1;
+//#region src/components/form-field/utils/isFieldRequired.ts
+function e(e, t) {
+	if (!e) return !1;
+	let n = e.getField(t);
+	return n ? !n.isOptional : !1;
 }
-export {
-  l as isFieldRequired
-};
+//#endregion
+export { e as isFieldRequired };

package/dist/esm/components/full-page-loader/FullPageLoader.js

@@ -1,35 +1,26 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { uyTv as o } from "@payfit/unity-themes";
-import { useId as s } from "react-aria/useId";
-import { FormattedMessage as t } from "react-intl";
-import { Spinner as i } from "../spinner/Spinner.js";
-const n = o({
-  // add the component styles
-  base: "uy:w-full uy:h-screen uy:flex uy:place-items-center uy:justify-center"
-}), u = ({ label: a }) => {
-  const r = s();
-  return /* @__PURE__ */ l(
-    "main",
-    {
-      id: r,
-      className: n(),
-      "aria-busy": "true",
-      "data-dd-privacy": "allow",
-      children: [
-        /* @__PURE__ */ e("h1", { className: "uy:sr-only", children: a ?? /* @__PURE__ */ e(
-          t,
-          {
-            id: "unity:component:full-page-loader:label",
-            defaultMessage: "Content is loading..."
-          }
-        ) }),
-        /* @__PURE__ */ e(i, { label: "", size: "medium", role: "presentation" })
-      ]
-    }
-  );
-};
-u.displayName = "FullPageLoader";
-export {
-  u as FullPageLoader,
-  n as fullPageLoader
-};
+import { Spinner as e } from "../spinner/Spinner.js";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { FormattedMessage as i } from "react-intl";
+import { useId as a } from "react-aria/useId";
+//#region src/components/full-page-loader/FullPageLoader.tsx
+var o = t({ base: "uy:w-full uy:h-screen uy:flex uy:place-items-center uy:justify-center" }), s = ({ label: t }) => /* @__PURE__ */ r("main", {
+	id: a(),
+	className: o(),
+	"aria-busy": "true",
+	"data-dd-privacy": "allow",
+	children: [/* @__PURE__ */ n("h1", {
+		className: "uy:sr-only",
+		children: t ?? /* @__PURE__ */ n(i, {
+			id: "unity:component:full-page-loader:label",
+			defaultMessage: "Content is loading..."
+		})
+	}), /* @__PURE__ */ n(e, {
+		label: "",
+		size: "medium",
+		role: "presentation"
+	})]
+});
+s.displayName = "FullPageLoader";
+//#endregion
+export { s as FullPageLoader, o as fullPageLoader };

package/dist/esm/components/funnel-layout/FunnelLayout.context.js

@@ -1,27 +1,13 @@
+import { createContext as e, useContext as t } from "react";
 import { jsx as n } from "react/jsx-runtime";
-import { createContext as r, useContext as u } from "react";
-const e = r(
-  void 0
-), a = () => {
-  const t = u(e);
-  if (!t)
-    throw new Error(
-      "useFunnelLayout must be used within a FunnelLayoutProvider"
-    );
-  return t;
-}, x = ({
-  children: t,
-  ids: o
-}) => /* @__PURE__ */ n(
-  e.Provider,
-  {
-    value: {
-      ids: o
-    },
-    children: t
-  }
-);
-export {
-  x as FunnelLayoutProvider,
-  a as useFunnelLayoutContext
-};
+//#region src/components/funnel-layout/FunnelLayout.context.tsx
+var r = e(void 0), i = () => {
+	let e = t(r);
+	if (!e) throw Error("useFunnelLayout must be used within a FunnelLayoutProvider");
+	return e;
+}, a = ({ children: e, ids: t }) => /* @__PURE__ */ n(r.Provider, {
+	value: { ids: t },
+	children: e
+});
+//#endregion
+export { a as FunnelLayoutProvider, i as useFunnelLayoutContext };

package/dist/esm/components/funnel-layout/FunnelLayout.js

@@ -1,91 +1,75 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { forwardRef as d, useMemo as f } from "react";
-import { uyTv as y } from "@payfit/unity-themes";
-import { useId as c } from "react-aria/useId";
-import { FormattedMessage as a } from "react-intl";
-import { SkipLinks as p, SkipLink as o } from "../skip-links/SkipLinks.js";
-import { FunnelLayoutProvider as m } from "./FunnelLayout.context.js";
-const I = y({
-  base: "uy:relative uy:h-dvh uy:flex uy:flex-col uy:bg-canvas uy:overflow-auto"
-}), k = d(
-  ({ children: u, header: l, ...r }, s) => {
-    const n = c(), t = f(
-      () => ({
-        mainContentId: `funnel-main-content-${n}`,
-        topbarId: `funnel-top-bar-${n}`,
-        asideId: `funnel-complementary-left-content-${n}`,
-        funnelTitleId: `funnel-title-${n}`,
-        funnelDescriptionId: `funnel-description-${n}`,
-        funnelStatusId: `funnel-status-${n}`,
-        footerId: `funnel-footer-${n}`
-      }),
-      [n]
-    );
-    return /* @__PURE__ */ e(m, { ids: t, children: /* @__PURE__ */ i(
-      "div",
-      {
-        "data-dd-privacy": "mask-user-input",
-        ...r,
-        ref: s,
-        className: I(),
-        "data-unity-component": "FunnelLayout",
-        style: {
-          "--uy-funnel-sidebar-offset": "calc(var(--uy-spacing-800) + var(--uy-spacing-600))"
-        },
-        children: [
-          /* @__PURE__ */ i(p, { children: [
-            /* @__PURE__ */ e(o, { targetId: t.topbarId, children: /* @__PURE__ */ e(
-              a,
-              {
-                id: "unity:layout:funnel:skip-links:top-bar",
-                defaultMessage: "Top bar"
-              }
-            ) }),
-            /* @__PURE__ */ e(o, { targetId: t.mainContentId, children: /* @__PURE__ */ e(
-              a,
-              {
-                id: "unity:layout:funnel:skip-links:main-content",
-                defaultMessage: "Main content"
-              }
-            ) }),
-            /* @__PURE__ */ e(o, { targetId: t.asideId, children: /* @__PURE__ */ e(
-              a,
-              {
-                id: "unity:layout:funnel:skip-links:sidebar",
-                defaultMessage: "Sidebar"
-              }
-            ) }),
-            /* @__PURE__ */ e(o, { targetId: t.footerId, children: /* @__PURE__ */ e(
-              a,
-              {
-                id: "unity:layout:funnel:skip-links:footer",
-                defaultMessage: "Footer"
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ e(
-            "div",
-            {
-              "data-unity-component": "FunnelTopBar",
-              className: "uy:sticky uy:top-0 uy:z-10",
-              children: l
-            }
-          ),
-          /* @__PURE__ */ e(
-            "div",
-            {
-              className: "uy:flex-1 uy:flex uy:md:block uy:overflow-visible",
-              "data-unity-slot": "funnel-layout-content-wrapper",
-              children: u
-            }
-          )
-        ]
-      }
-    ) });
-  }
-);
-k.displayName = "FunnelLayout";
-export {
-  k as FunnelLayout,
-  I as funnelLayout
-};
+import { SkipLink as e, SkipLinks as t } from "../skip-links/SkipLinks.js";
+import { FunnelLayoutProvider as n } from "./FunnelLayout.context.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 { FormattedMessage as c } from "react-intl";
+import { useId as l } from "react-aria/useId";
+//#region src/components/funnel-layout/FunnelLayout.tsx
+var u = a({ base: "uy:relative uy:h-dvh uy:flex uy:flex-col uy:bg-canvas uy:overflow-auto" }), d = r(({ children: r, header: a, ...d }, f) => {
+	let p = l(), m = i(() => ({
+		mainContentId: `funnel-main-content-${p}`,
+		topbarId: `funnel-top-bar-${p}`,
+		asideId: `funnel-complementary-left-content-${p}`,
+		funnelTitleId: `funnel-title-${p}`,
+		funnelDescriptionId: `funnel-description-${p}`,
+		funnelStatusId: `funnel-status-${p}`,
+		footerId: `funnel-footer-${p}`
+	}), [p]);
+	return /* @__PURE__ */ o(n, {
+		ids: m,
+		children: /* @__PURE__ */ s("div", {
+			"data-dd-privacy": "mask-user-input",
+			...d,
+			ref: f,
+			className: u(),
+			"data-unity-component": "FunnelLayout",
+			style: { "--uy-funnel-sidebar-offset": "calc(var(--uy-spacing-800) + var(--uy-spacing-600))" },
+			children: [
+				/* @__PURE__ */ s(t, { children: [
+					/* @__PURE__ */ o(e, {
+						targetId: m.topbarId,
+						children: /* @__PURE__ */ o(c, {
+							id: "unity:layout:funnel:skip-links:top-bar",
+							defaultMessage: "Top bar"
+						})
+					}),
+					/* @__PURE__ */ o(e, {
+						targetId: m.mainContentId,
+						children: /* @__PURE__ */ o(c, {
+							id: "unity:layout:funnel:skip-links:main-content",
+							defaultMessage: "Main content"
+						})
+					}),
+					/* @__PURE__ */ o(e, {
+						targetId: m.asideId,
+						children: /* @__PURE__ */ o(c, {
+							id: "unity:layout:funnel:skip-links:sidebar",
+							defaultMessage: "Sidebar"
+						})
+					}),
+					/* @__PURE__ */ o(e, {
+						targetId: m.footerId,
+						children: /* @__PURE__ */ o(c, {
+							id: "unity:layout:funnel:skip-links:footer",
+							defaultMessage: "Footer"
+						})
+					})
+				] }),
+				/* @__PURE__ */ o("div", {
+					"data-unity-component": "FunnelTopBar",
+					className: "uy:sticky uy:top-0 uy:z-10",
+					children: a
+				}),
+				/* @__PURE__ */ o("div", {
+					className: "uy:flex-1 uy:flex uy:md:block uy:overflow-visible",
+					"data-unity-slot": "funnel-layout-content-wrapper",
+					children: r
+				})
+			]
+		})
+	});
+});
+d.displayName = "FunnelLayout";
+//#endregion
+export { d as FunnelLayout, u as funnelLayout };

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

@@ -1,35 +1,25 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useBreakpointListener as i } from "../../../hooks/use-breakpoint-listener.js";
-import { Button as s } from "../../button/Button.js";
-import { IconButton as c } from "../../icon-button/IconButton.js";
-const u = ({
-  label: t,
-  onPress: o,
-  truncateLabelLength: r
-}) => {
-  const e = i();
-  return !["xs", "sm"].includes(e) ? /* @__PURE__ */ n(
-    s,
-    {
-      variant: "ghost",
-      color: "neutral",
-      prefixIcon: "ArrowLeftOutlined",
-      onPress: o,
-      truncateLabelLength: r,
-      children: t
-    }
-  ) : /* @__PURE__ */ n(
-    c,
-    {
-      variant: "ghost",
-      color: "neutral",
-      icon: "ArrowLeftOutlined",
-      label: t,
-      onClick: o
-    }
-  );
-};
-u.displayName = "FunnelBackButton";
-export {
-  u as FunnelBackButton
+import { useBreakpointListener as e } from "../../../hooks/use-breakpoint-listener.js";
+import { Button as t } from "../../button/Button.js";
+import { IconButton as n } from "../../icon-button/IconButton.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/funnel-layout/parts/FunnelBackButton.tsx
+var i = ({ label: i, onPress: a, truncateLabelLength: o }) => {
+	let s = e();
+	return ["xs", "sm"].includes(s) ? /* @__PURE__ */ r(n, {
+		variant: "ghost",
+		color: "neutral",
+		icon: "ArrowLeftOutlined",
+		label: i,
+		onClick: a
+	}) : /* @__PURE__ */ r(t, {
+		variant: "ghost",
+		color: "neutral",
+		prefixIcon: "ArrowLeftOutlined",
+		onPress: a,
+		truncateLabelLength: o,
+		children: i
+	});
 };
+i.displayName = "FunnelBackButton";
+//#endregion
+export { i as FunnelBackButton };

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

@@ -1,23 +1,15 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { uyTv as a } from "@payfit/unity-themes";
-const e = a({
-  base: "uy:group/funnelbody uy:mx-auto uy:w-full uy:min-h-full uy:flex-1 uy:md:max-w-(--uy-container-lg) uy:md:px-300 uy:lg:max-w-(--uy-container-xl) uy:flex uy:flex-col uy:md:flex-row uy:gap-x-200 uy:md:py-600"
-}), m = n(
-  ({ children: u, ...y }, o) => /* @__PURE__ */ l(
-    "div",
-    {
-      ref: o,
-      "data-dd-privacy": "allow",
-      ...y,
-      className: e(),
-      "data-unity-component": "FunnelBody",
-      children: u
-    }
-  )
-);
-m.displayName = "FunnelBody";
-export {
-  m as FunnelBody,
-  e as funnelBody
-};
+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/FunnelBody.tsx
+var r = t({ base: "uy:group/funnelbody uy:mx-auto uy:w-full uy:min-h-full uy:flex-1 uy:md:max-w-(--uy-container-lg) uy:md:px-300 uy:lg:max-w-(--uy-container-xl) uy:flex uy:flex-col uy:md:flex-row uy:gap-x-200 uy:md:py-600" }), i = e(({ children: e, ...t }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	"data-dd-privacy": "allow",
+	...t,
+	className: r(),
+	"data-unity-component": "FunnelBody",
+	children: e
+}));
+i.displayName = "FunnelBody";
+//#endregion
+export { i as FunnelBody, r as funnelBody };

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

@@ -1,35 +1,27 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as o } from "react";
-import { uyTv as d } from "@payfit/unity-themes";
-import { useFunnelLayoutContext as i } from "../FunnelLayout.context.js";
-const l = d({
-  base: [
-    "uy:group/funnelpage uy:bg-surface-neutral uy:p-100 uy:pb-500 uy:md:shadow-raising uy:md:border-border-neutral uy:md:border uy:md:border-solid uy:md:rounded-400",
-    "uy:basis-full uy:shrink-0 uy:grow-1 uy:md:shrink",
-    "uy:flex uy:flex-col",
-    "uy:md:max-w-container-lg uy:lg:max-w-container-xl"
-  ]
-}), t = o(
-  ({ children: n, ...r }, u) => {
-    const { ids: e } = i();
-    return /* @__PURE__ */ a(
-      "main",
-      {
-        "data-dd-privacy": "mask-user-input",
-        ...r,
-        ref: u,
-        id: e.mainContentId,
-        "aria-labelledby": e.funnelTitleId,
-        "aria-describedby": e.funnelDescriptionId,
-        className: l(),
-        "data-unity-component": "FunnelPage",
-        children: n
-      }
-    );
-  }
-);
-t.displayName = "FunnelPage";
-export {
-  t as FunnelPage,
-  l as funnelPage
-};
+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/FunnelPage.tsx
+var i = n({ base: [
+	"uy:group/funnelpage uy:bg-surface-neutral uy:p-100 uy:pb-500 uy:md:shadow-raising uy:md:border-border-neutral uy:md:border uy:md:border-solid uy:md:rounded-400",
+	"uy:basis-full uy:shrink-0 uy:grow-1 uy:md:shrink",
+	"uy:flex uy:flex-col",
+	"uy:md:max-w-container-lg uy:lg:max-w-container-xl"
+] }), a = t(({ children: t, ...n }, a) => {
+	let { ids: o } = e();
+	return /* @__PURE__ */ r("main", {
+		"data-dd-privacy": "mask-user-input",
+		...n,
+		ref: a,
+		id: o.mainContentId,
+		"aria-labelledby": o.funnelTitleId,
+		"aria-describedby": o.funnelDescriptionId,
+		className: i(),
+		"data-unity-component": "FunnelPage",
+		children: t
+	});
+});
+a.displayName = "FunnelPage";
+//#endregion
+export { a as FunnelPage, i as funnelPage };

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

@@ -1,39 +1,32 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as c, useCallback as u } from "react";
-import { useUnityTheme as l } from "@payfit/unity-themes";
-import { Button as p } from "../../button/Button.js";
-const m = c(
-  ({ actionType: t, children: a, ...e }, o) => {
-    const { theme: r } = l(), n = u(
-      (i) => {
-        switch (i) {
-          case "previous":
-            return {
-              variant: r === "rebrand" ? "outlined" : "secondary"
-            };
-          case "next":
-            return { variant: "primary", color: "primary" };
-          case "optional":
-            return { variant: "ghost", color: "neutral" };
-        }
-      },
-      [r]
-    )(t);
-    return /* @__PURE__ */ s(
-      p,
-      {
-        ref: o,
-        "data-dd-privacy": "allow",
-        ...n,
-        ...e,
-        "data-unity-component": "FunnelPageAction",
-        "data-action-type": t,
-        children: a
-      }
-    );
-  }
-);
-m.displayName = "FunnelPageAction";
-export {
-  m as FunnelPageAction
-};
+import { Button as e } from "../../button/Button.js";
+import { forwardRef as t, useCallback as n } from "react";
+import { useUnityTheme as r } from "@payfit/unity-themes";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/funnel-layout/parts/FunnelPageAction.tsx
+var a = t(({ actionType: t, children: a, ...o }, s) => {
+	let { theme: c } = r();
+	return /* @__PURE__ */ i(e, {
+		ref: s,
+		"data-dd-privacy": "allow",
+		...n((e) => {
+			switch (e) {
+				case "previous": return { variant: c === "rebrand" ? "outlined" : "secondary" };
+				case "next": return {
+					variant: "primary",
+					color: "primary"
+				};
+				case "optional": return {
+					variant: "ghost",
+					color: "neutral"
+				};
+			}
+		}, [c])(t),
+		...o,
+		"data-unity-component": "FunnelPageAction",
+		"data-action-type": t,
+		children: a
+	});
+});
+a.displayName = "FunnelPageAction";
+//#endregion
+export { a as FunnelPageAction };