@payfit/unity-components 2.47.5 → 2.47.6

package/dist/esm/components/number-input/NumberInput.js

@@ -1,217 +1,162 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { forwardRef as k } from "react";
-import { uyTv as z } from "@payfit/unity-themes";
-import { Group as F } from "react-aria-components/Group";
-import { Input as G } from "react-aria-components/Input";
-import { NumberField as T } from "react-aria-components/NumberField";
-import { Icon as W } from "../icon/Icon.js";
+import { Icon as e } from "../icon/Icon.js";
+import { Spinner as t } from "../spinner/Spinner.js";
+import { CircularIconButton as n } from "../icon-button/CircularIconButton.js";
+import { forwardRef as r } from "react";
+import { uyTv as i } from "@payfit/unity-themes";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Group as s } from "react-aria-components/Group";
+import { useIntl as c } from "react-intl";
 import "@payfit/unity-icons";
-import { useIntl as q } from "react-intl";
-import { CircularIconButton as s } from "../icon-button/CircularIconButton.js";
-import { Spinner as A } from "../spinner/Spinner.js";
-const H = z({
-  slots: {
-    base: [
-      "uy:group uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75",
-      "uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2",
-      "uy:active:border-border-form-active"
-    ],
-    wrapper: [
-      "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:rounded-100 uy:sm:rounded-75 uy:max-w-full uy:justify-between uy:items-center"
-    ],
-    input: [
-      "uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:min-w-0 uy:max-w-full",
-      "uy:placeholder:text-content-neutral-lowest"
-    ],
-    prefix: [
-      "uy:flex-grow-0 uy:content-center uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:border-r uy:border-solid uy:rounded-l-100 uy:sm:rounded-l-75",
-      "uy:active:border-border-form-active"
-    ],
-    suffix: [
-      "uy:flex-grow-0 uy:content-center uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75",
-      "uy:active:border-border-form-active"
-    ],
-    state: [
-      "uy:flex uy:gap-50 uy:items-center uy:shrink-0 uy:text-content-neutral-disabled"
-    ],
-    controls: ["uy:flex uy:gap-50"]
-  },
-  variants: {
-    isReadOnly: {
-      true: {
-        base: ["uy:border-border-form-disabled uy:bg-surface-form-disabled"],
-        prefix: [
-          "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-read-only"
-        ],
-        wrapper: [
-          "uy:bg-surface-form-disabled uy:text-content-form-disabled",
-          "uy:group-data-[invalid=true]:bg-surface-form-error"
-        ],
-        input: ["uy:bg-surface-form-disabled uy:text-content-form-read-only"],
-        suffix: [
-          "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-read-only"
-        ]
-      },
-      false: {
-        base: [
-          "uy:border-border-form-enabled uy:bg-surface-form-enabled",
-          "uy:data-[invalid=true]:border-border-form-error uy:data-[invalid=true]:bg-surface-form-error",
-          "uy:data-[disabled=true]:border-border-form-disabled uy:data-[disabled=true]:bg-surface-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
-        ],
-        prefix: [
-          "uy:bg-surface-neutral-low uy:border-border-form-enabled uy:text-content-form-enabled",
-          "uy:group-data-[invalid=true]:bg-surface-form-error uy:group-data-[invalid=true]:border-border-form-error",
-          "uy:group-data-[disabled=true]:bg-surface-form-disabled uy:group-data-[disabled=true]:border-border-form-disabled uy:group-data-[disabled=true]:text-content-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
-        ],
-        suffix: [
-          "uy:bg-surface-neutral-low uy:border-border-form-enabled uy:text-content-form-enabled",
-          "uy:group-data-[invalid=true]:bg-surface-form-error uy:group-data-[invalid=true]:border-border-form-error",
-          "uy:group-data-[disabled=true]:bg-surface-form-disabled uy:group-data-[disabled=true]:border-border-form-disabled uy:group-data-[disabled=true]:text-content-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
-        ],
-        wrapper: [
-          "uy:border-border-form-enabled uy:bg-surface-form-enabled",
-          "uy:group-data-[invalid=true]:bg-surface-form-error uy:group-data-[invalid=true]:border-border-form-error",
-          "uy:group-data-[disabled=true]:bg-surface-form-disabled uy:group-data-[disabled=true]:text-content-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
-        ],
-        input: [
-          "uy:text-content-form-enabled uy:bg-surface-form-enabled",
-          "uy:group-data-[invalid=true]:bg-surface-form-error",
-          "uy:group-data-[disabled=true]:bg-surface-form-disabled uy:group-data-[disabled=true]:text-content-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
-        ],
-        state: ["uy:group-data-[invalid=true]:text-content-form-error"],
-        button: "uy:data-[disabled=true]:cursor-not-allowed"
-      }
-    }
-  }
-}), J = k(
-  ({
-    withControls: i = !1,
-    defaultValue: u,
-    formatOptions: p,
-    isDisabled: y,
-    isInvalid: b,
-    isLoading: d,
-    isReadOnly: a,
-    isRequired: g,
-    maxValue: n,
-    minValue: l,
-    prefix: f,
-    onBlur: x,
-    onChange: w,
-    onClearButtonPress: v,
-    step: h,
-    suffix: m,
-    value: e,
-    ...N
-  }, c) => {
-    const {
-      base: M,
-      wrapper: I,
-      input: C,
-      prefix: j,
-      suffix: E,
-      state: O,
-      controls: S
-    } = H({ isReadOnly: a }), o = q(), B = e !== void 0 && !isNaN(e), D = u !== void 0 && !isNaN(u), P = (B || D) && !i && !d && !a && !y;
-    return /* @__PURE__ */ t(
-      T,
-      {
-        ref: c,
-        className: M(),
-        value: e,
-        defaultValue: u,
-        minValue: l,
-        maxValue: n,
-        step: h,
-        isDisabled: y,
-        isReadOnly: a,
-        isInvalid: b,
-        isRequired: g,
-        "aria-busy": d,
-        onChange: w,
-        formatOptions: p,
-        onBlur: x,
-        ...N,
-        children: [
-          f ? /* @__PURE__ */ r("span", { className: j(), children: f }) : null,
-          /* @__PURE__ */ t(F, { className: I(), children: [
-            /* @__PURE__ */ r(G, { ref: c, className: C() }),
-            /* @__PURE__ */ t("div", { className: O(), children: [
-              d && /* @__PURE__ */ r(
-                A,
-                {
-                  color: "inherit",
-                  size: "small",
-                  label: o.formatMessage({
-                    id: "unity:component:common:loading:label",
-                    defaultMessage: "Loading..."
-                  })
-                }
-              ),
-              b && /* @__PURE__ */ r(
-                W,
-                {
-                  src: "WarningCircleOutlined",
-                  color: "content.form.invalid",
-                  alt: o.formatMessage({
-                    id: "unity:component:form-field:form-input:error:alt",
-                    defaultMessage: "Error"
-                  })
-                }
-              ),
-              P && /* @__PURE__ */ r(
-                s,
-                {
-                  title: o.formatMessage({
-                    id: "unity:component:common:clear:title",
-                    defaultMessage: "Clear"
-                  }),
-                  icon: "CloseOutlined",
-                  onPress: () => {
-                    v?.();
-                  }
-                }
-              )
-            ] }),
-            i && /* @__PURE__ */ t("div", { className: S(), children: [
-              /* @__PURE__ */ r(
-                s,
-                {
-                  asElement: "button",
-                  icon: "MinusOutlined",
-                  slot: "decrement",
-                  color: "content.neutral",
-                  isDisabled: l !== void 0 && e === l,
-                  title: o.formatMessage({
-                    id: "unity:component:form-field:number-input:decrement:title",
-                    defaultMessage: "decrement"
-                  })
-                }
-              ),
-              /* @__PURE__ */ r(
-                s,
-                {
-                  asElement: "button",
-                  icon: "PlusOutlined",
-                  slot: "increment",
-                  color: "content.neutral",
-                  isDisabled: n !== void 0 && e === n,
-                  title: o.formatMessage({
-                    id: "unity:component:form-field:number-input:increment:title",
-                    defaultMessage: "increment"
-                  })
-                }
-              )
-            ] })
-          ] }),
-          m ? /* @__PURE__ */ r("span", { className: E(), children: m }) : null
-        ]
-      }
-    );
-  }
-);
-J.displayName = "NumberInput";
-export {
-  J as NumberInput,
-  H as numberInput
-};
+import { Input as l } from "react-aria-components/Input";
+import { NumberField as u } from "react-aria-components/NumberField";
+//#region src/components/number-input/NumberInput.tsx
+var d = i({
+	slots: {
+		base: [
+			"uy:group uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75",
+			"uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2",
+			"uy:active:border-border-form-active"
+		],
+		wrapper: ["uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:rounded-100 uy:sm:rounded-75 uy:max-w-full uy:justify-between uy:items-center"],
+		input: ["uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:min-w-0 uy:max-w-full", "uy:placeholder:text-content-neutral-lowest"],
+		prefix: ["uy:flex-grow-0 uy:content-center uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:border-r uy:border-solid uy:rounded-l-100 uy:sm:rounded-l-75", "uy:active:border-border-form-active"],
+		suffix: ["uy:flex-grow-0 uy:content-center uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75", "uy:active:border-border-form-active"],
+		state: ["uy:flex uy:gap-50 uy:items-center uy:shrink-0 uy:text-content-neutral-disabled"],
+		controls: ["uy:flex uy:gap-50"]
+	},
+	variants: { isReadOnly: {
+		true: {
+			base: ["uy:border-border-form-disabled uy:bg-surface-form-disabled"],
+			prefix: ["uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-read-only"],
+			wrapper: ["uy:bg-surface-form-disabled uy:text-content-form-disabled", "uy:group-data-[invalid=true]:bg-surface-form-error"],
+			input: ["uy:bg-surface-form-disabled uy:text-content-form-read-only"],
+			suffix: ["uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-read-only"]
+		},
+		false: {
+			base: [
+				"uy:border-border-form-enabled uy:bg-surface-form-enabled",
+				"uy:data-[invalid=true]:border-border-form-error uy:data-[invalid=true]:bg-surface-form-error",
+				"uy:data-[disabled=true]:border-border-form-disabled uy:data-[disabled=true]:bg-surface-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
+			],
+			prefix: [
+				"uy:bg-surface-neutral-low uy:border-border-form-enabled uy:text-content-form-enabled",
+				"uy:group-data-[invalid=true]:bg-surface-form-error uy:group-data-[invalid=true]:border-border-form-error",
+				"uy:group-data-[disabled=true]:bg-surface-form-disabled uy:group-data-[disabled=true]:border-border-form-disabled uy:group-data-[disabled=true]:text-content-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
+			],
+			suffix: [
+				"uy:bg-surface-neutral-low uy:border-border-form-enabled uy:text-content-form-enabled",
+				"uy:group-data-[invalid=true]:bg-surface-form-error uy:group-data-[invalid=true]:border-border-form-error",
+				"uy:group-data-[disabled=true]:bg-surface-form-disabled uy:group-data-[disabled=true]:border-border-form-disabled uy:group-data-[disabled=true]:text-content-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
+			],
+			wrapper: [
+				"uy:border-border-form-enabled uy:bg-surface-form-enabled",
+				"uy:group-data-[invalid=true]:bg-surface-form-error uy:group-data-[invalid=true]:border-border-form-error",
+				"uy:group-data-[disabled=true]:bg-surface-form-disabled uy:group-data-[disabled=true]:text-content-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
+			],
+			input: [
+				"uy:text-content-form-enabled uy:bg-surface-form-enabled",
+				"uy:group-data-[invalid=true]:bg-surface-form-error",
+				"uy:group-data-[disabled=true]:bg-surface-form-disabled uy:group-data-[disabled=true]:text-content-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
+			],
+			state: ["uy:group-data-[invalid=true]:text-content-form-error"],
+			button: "uy:data-[disabled=true]:cursor-not-allowed"
+		}
+	} }
+}), f = r(({ withControls: r = !1, defaultValue: i, formatOptions: f, isDisabled: p, isInvalid: m, isLoading: h, isReadOnly: g, isRequired: _, maxValue: v, minValue: y, prefix: b, onBlur: x, onChange: S, onClearButtonPress: C, step: w, suffix: T, value: E, ...D }, O) => {
+	let { base: k, wrapper: A, input: j, prefix: M, suffix: N, state: P, controls: F } = d({ isReadOnly: g }), I = c(), L = (E !== void 0 && !isNaN(E) || i !== void 0 && !isNaN(i)) && !r && !h && !g && !p;
+	return /* @__PURE__ */ o(u, {
+		ref: O,
+		className: k(),
+		value: E,
+		defaultValue: i,
+		minValue: y,
+		maxValue: v,
+		step: w,
+		isDisabled: p,
+		isReadOnly: g,
+		isInvalid: m,
+		isRequired: _,
+		"aria-busy": h,
+		onChange: S,
+		formatOptions: f,
+		onBlur: x,
+		...D,
+		children: [
+			b ? /* @__PURE__ */ a("span", {
+				className: M(),
+				children: b
+			}) : null,
+			/* @__PURE__ */ o(s, {
+				className: A(),
+				children: [
+					/* @__PURE__ */ a(l, {
+						ref: O,
+						className: j()
+					}),
+					/* @__PURE__ */ o("div", {
+						className: P(),
+						children: [
+							h && /* @__PURE__ */ a(t, {
+								color: "inherit",
+								size: "small",
+								label: I.formatMessage({
+									id: "unity:component:common:loading:label",
+									defaultMessage: "Loading..."
+								})
+							}),
+							m && /* @__PURE__ */ a(e, {
+								src: "WarningCircleOutlined",
+								color: "content.form.invalid",
+								alt: I.formatMessage({
+									id: "unity:component:form-field:form-input:error:alt",
+									defaultMessage: "Error"
+								})
+							}),
+							L && /* @__PURE__ */ a(n, {
+								title: I.formatMessage({
+									id: "unity:component:common:clear:title",
+									defaultMessage: "Clear"
+								}),
+								icon: "CloseOutlined",
+								onPress: () => {
+									C?.();
+								}
+							})
+						]
+					}),
+					r && /* @__PURE__ */ o("div", {
+						className: F(),
+						children: [/* @__PURE__ */ a(n, {
+							asElement: "button",
+							icon: "MinusOutlined",
+							slot: "decrement",
+							color: "content.neutral",
+							isDisabled: y !== void 0 && E === y,
+							title: I.formatMessage({
+								id: "unity:component:form-field:number-input:decrement:title",
+								defaultMessage: "decrement"
+							})
+						}), /* @__PURE__ */ a(n, {
+							asElement: "button",
+							icon: "PlusOutlined",
+							slot: "increment",
+							color: "content.neutral",
+							isDisabled: v !== void 0 && E === v,
+							title: I.formatMessage({
+								id: "unity:component:form-field:number-input:increment:title",
+								defaultMessage: "increment"
+							})
+						})]
+					})
+				]
+			}),
+			T ? /* @__PURE__ */ a("span", {
+				className: N(),
+				children: T
+			}) : null
+		]
+	});
+});
+f.displayName = "NumberInput";
+//#endregion
+export { f as NumberInput, d as numberInput };

package/dist/esm/components/number-input/TanstackNumberInput.js

@@ -1,38 +1,33 @@
-import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { useFieldContext as b } from "../../hooks/tanstack-form-context.js";
-import { useFieldA11yContext as f } from "../form-field/TanstackFormField.context.js";
-import { NumberInput as I } from "./NumberInput.js";
-const h = p(
-  ({ onClearButtonPress: o, onBlur: n, onChange: i, isReadOnly: l, isDisabled: d, ...s }, u) => {
-    const e = b(), t = f(), m = e.state.meta.isTouched && !e.state.meta.isValid, r = [t.helperTextId, t.feedbackTextId].filter(Boolean).join(" ");
-    return /* @__PURE__ */ c(
-      I,
-      {
-        ...s,
-        ref: u,
-        id: t.inputId,
-        value: e.state.value,
-        onChange: (a) => {
-          e.handleChange(a), i?.(a);
-        },
-        onBlur: (a) => {
-          e.handleBlur(), n?.(a);
-        },
-        onClearButtonPress: () => {
-          e.setValue(NaN), o?.();
-        },
-        isReadOnly: l,
-        isDisabled: d,
-        isInvalid: m,
-        "aria-labelledby": t.labelId,
-        "aria-describedby": r.length > 0 ? r : void 0,
-        "aria-details": t.contextualLinkId
-      }
-    );
-  }
-);
-h.displayName = "TanstackNumberInput";
-export {
-  h as TanstackNumberInput
-};
+import { NumberInput as e } from "./NumberInput.js";
+import { useFieldContext as t } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as n } from "../form-field/TanstackFormField.context.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/number-input/TanstackNumberInput.tsx
+var a = r(({ onClearButtonPress: r, onBlur: a, onChange: o, isReadOnly: s, isDisabled: c, ...l }, u) => {
+	let d = t(), f = n(), p = d.state.meta.isTouched && !d.state.meta.isValid, m = [f.helperTextId, f.feedbackTextId].filter(Boolean).join(" ");
+	return /* @__PURE__ */ i(e, {
+		...l,
+		ref: u,
+		id: f.inputId,
+		value: d.state.value,
+		onChange: (e) => {
+			d.handleChange(e), o?.(e);
+		},
+		onBlur: (e) => {
+			d.handleBlur(), a?.(e);
+		},
+		onClearButtonPress: () => {
+			d.setValue(NaN), r?.();
+		},
+		isReadOnly: s,
+		isDisabled: c,
+		isInvalid: p,
+		"aria-labelledby": f.labelId,
+		"aria-describedby": m.length > 0 ? m : void 0,
+		"aria-details": f.contextualLinkId
+	});
+});
+a.displayName = "TanstackNumberInput";
+//#endregion
+export { a as TanstackNumberInput };

package/dist/esm/components/page/Page.js

@@ -1,49 +1,34 @@
-import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as e } from "react";
-import { uyTv as m } from "@payfit/unity-themes";
-const o = m({
-  base: [
-    "uy:min-h-dvh uy:flex uy:flex-col uy:gap-400",
-    // When a FloatingActionBar is present add safe scroll space on mobile
-    "uy:[&:has([data-unity-fab])]:pb-[200px] uy:[&:has([data-unity-fab])]:md:pb-0"
-  ],
-  variants: {
-    variant: {
-      default: [
-        "uy:px-200 uy:py-300 uy:md:p-300 uy:lg:p-500",
-        // a tiny margin left so the shadow is visible
-        "uy:md:ml-100",
-        "uy:bg-surface-neutral uy:md:border uy:md:border-solid uy:md:border-border-neutral-low uy:border-r-0 uy:md:rounded-l-300",
-        "uy:md:shadow-[-1px_-1px_2px_-1px_var(--uy-color-utility-shadow-raising)]"
-      ],
-      legacy__midnight: [
-        "uy:bg-transparent",
-        "uy:md:mt-250 uy:md:mr-300",
-        "uy:md:ml-100"
-      ]
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-}), l = e(
-  ({ children: r, variant: a, ...u }, d) => {
-    const y = o({ variant: a });
-    return /* @__PURE__ */ t(
-      "main",
-      {
-        ...u,
-        ref: d,
-        className: y,
-        "data-dd-privacy": "allow",
-        "data-unity-page": a,
-        children: r
-      }
-    );
-  }
-);
-l.displayName = "Page";
-export {
-  l as Page,
-  o as page
-};
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/page/Page.tsx
+var r = t({
+	base: ["uy:min-h-dvh uy:flex uy:flex-col uy:gap-400", "uy:[&:has([data-unity-fab])]:pb-[200px] uy:[&:has([data-unity-fab])]:md:pb-0"],
+	variants: { variant: {
+		default: [
+			"uy:px-200 uy:py-300 uy:md:p-300 uy:lg:p-500",
+			"uy:md:ml-100",
+			"uy:bg-surface-neutral uy:md:border uy:md:border-solid uy:md:border-border-neutral-low uy:border-r-0 uy:md:rounded-l-300",
+			"uy:md:shadow-[-1px_-1px_2px_-1px_var(--uy-color-utility-shadow-raising)]"
+		],
+		legacy__midnight: [
+			"uy:bg-transparent",
+			"uy:md:mt-250 uy:md:mr-300",
+			"uy:md:ml-100"
+		]
+	} },
+	defaultVariants: { variant: "default" }
+}), i = e(({ children: e, variant: t, ...i }, a) => {
+	let o = r({ variant: t });
+	return /* @__PURE__ */ n("main", {
+		...i,
+		ref: a,
+		className: o,
+		"data-dd-privacy": "allow",
+		"data-unity-page": t,
+		children: e
+	});
+});
+i.displayName = "Page";
+//#endregion
+export { i as Page, r as page };

package/dist/esm/components/page/parts/PageHeader.js

@@ -1,36 +1,41 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { uyTv as p } from "@payfit/unity-themes";
-import { Breadcrumbs as y } from "../../breadcrumbs/Breadcrumbs.js";
-import { Breadcrumb as b } from "../../breadcrumbs/parts/Breadcrumb.js";
-import { RawBreadcrumbLink as x } from "../../breadcrumbs/parts/RawBreadcrumbLink.js";
-const h = p({
-  slots: {
-    base: "uy:flex uy:flex-col uy:gap-400",
-    headingActionsWrapper: "uy:flex uy:flex-col uy:gap-400 uy:md:flex-row",
-    titles: "uy:flex uy:flex-col uy:gap-100 uy:flex-1",
-    actions: "uy:flex uy:flex-row uy:gap-100"
-  }
-}), g = (a) => a ? /* @__PURE__ */ r(y, { items: a, wrap: "nowrap", children: (e) => /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(x, { href: e.href, children: e.label }) }) }) : null, w = f(
-  // eslint-disable-next-line @typescript-eslint/no-deprecated -- Internal usage for backward compatibility
-  ({ children: a, actions: e, pagePath: o, renderBreadcrumbs: d, ...c }, n) => {
-    const {
-      base: s,
-      titles: t,
-      headingActionsWrapper: u,
-      actions: i
-    } = h(), m = (d ?? g)(o);
-    return /* @__PURE__ */ l("header", { "data-dd-privacy": "allow", ...c, ref: n, className: s(), children: [
-      m,
-      /* @__PURE__ */ l("div", { className: u(), children: [
-        /* @__PURE__ */ r("div", { className: t(), children: a }),
-        e && /* @__PURE__ */ r("div", { className: i(), children: e })
-      ] })
-    ] });
-  }
-);
-w.displayName = "PageHeader";
-export {
-  w as PageHeader,
-  h as pageHeader
-};
+import { Breadcrumbs as e } from "../../breadcrumbs/Breadcrumbs.js";
+import { Breadcrumb as t } from "../../breadcrumbs/parts/Breadcrumb.js";
+import { RawBreadcrumbLink as n } from "../../breadcrumbs/parts/RawBreadcrumbLink.js";
+import { forwardRef as r } from "react";
+import { uyTv as i } from "@payfit/unity-themes";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/page/parts/PageHeader.tsx
+var s = i({ slots: {
+	base: "uy:flex uy:flex-col uy:gap-400",
+	headingActionsWrapper: "uy:flex uy:flex-col uy:gap-400 uy:md:flex-row",
+	titles: "uy:flex uy:flex-col uy:gap-100 uy:flex-1",
+	actions: "uy:flex uy:flex-row uy:gap-100"
+} }), c = (r) => r ? /* @__PURE__ */ a(e, {
+	items: r,
+	wrap: "nowrap",
+	children: (e) => /* @__PURE__ */ a(t, { children: /* @__PURE__ */ a(n, {
+		href: e.href,
+		children: e.label
+	}) })
+}) : null, l = r(({ children: e, actions: t, pagePath: n, renderBreadcrumbs: r, ...i }, l) => {
+	let { base: u, titles: d, headingActionsWrapper: f, actions: p } = s(), m = (r ?? c)(n);
+	return /* @__PURE__ */ o("header", {
+		"data-dd-privacy": "allow",
+		...i,
+		ref: l,
+		className: u(),
+		children: [m, /* @__PURE__ */ o("div", {
+			className: f(),
+			children: [/* @__PURE__ */ a("div", {
+				className: d(),
+				children: e
+			}), t && /* @__PURE__ */ a("div", {
+				className: p(),
+				children: t
+			})]
+		})]
+	});
+});
+l.displayName = "PageHeader";
+//#endregion
+export { l as PageHeader, s as pageHeader };