@payfit/unity-components 2.46.13 → 2.46.14

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

@@ -0,0 +1,27 @@
+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
+};

package/dist/esm/components/funnel-layout/FunnelLayout.d.ts

@@ -0,0 +1,40 @@
+import { default as React, PropsWithChildren } from 'react';
+import { VariantProps } from '@payfit/unity-themes';
+export declare const funnelLayout: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:relative uy:h-dvh uy:flex uy:flex-col uy:bg-canvas uy:overflow-auto", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:relative uy:h-dvh uy:flex uy:flex-col uy:bg-canvas uy:overflow-auto", unknown, unknown, undefined>>;
+export interface FunnelLayoutProps extends PropsWithChildren<VariantProps<typeof funnelLayout>> {
+    /** The header content for the funnel layout, typically a FunnelTopBar component */
+    header: React.JSX.Element;
+}
+/**
+ * The `FunnelLayout` component provides a structured layout for multi-step processes and funnels.
+ * It creates a responsive layout with a fixed top bar and a main content area that accepts
+ * children components like FunnelBody, FunnelSidebar, and FunnelPage.
+ * @param {FunnelLayoutProps} props - The props for the `FunnelLayout` component
+ * @example
+ * ```tsx
+ * import { FunnelLayout, FunnelTopBar, FunnelBody, FunnelSidebar, FunnelPage } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <FunnelLayout header={<FunnelTopBar title="Setup Process" onBackButtonPress={handleBack} />}>
+ *       <FunnelBody>
+ *         <FunnelSidebar>Sidebar content</FunnelSidebar>
+ *         <FunnelPage>Main content</FunnelPage>
+ *       </FunnelBody>
+ *     </FunnelLayout>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Provides skip navigation links for keyboard users
+ * - Automatically generates unique IDs for accessibility attributes
+ * - Creates a full viewport height layout with sticky top bar
+ * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="mask-user-input"`
+ * @see {@link FunnelLayoutProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout--docs unity-components.payfit.io}
+ */
+declare const FunnelLayout: React.ForwardRefExoticComponent<FunnelLayoutProps & React.RefAttributes<HTMLDivElement>>;
+export { FunnelLayout };

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

@@ -0,0 +1,91 @@
+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
+};

package/dist/esm/components/funnel-layout/parts/FunnelBackButton.d.ts

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+export interface FunnelBackButtonProps {
+    /**
+     * Label for the back button.
+     * Shown as text on desktop, used as aria-label on mobile.
+     */
+    label: string;
+    /**
+     * Callback when back button is pressed.
+     */
+    onPress: () => void;
+    /**
+     * Maximum length of the label to truncate.
+     * Defaults to 10 characters.
+     */
+    truncateLabelLength?: number;
+}
+/**
+ * Back button component for use in FunnelTopBar leading slot.
+ * Automatically adapts between desktop (text + icon) and mobile (icon only) layouts.
+ * @example
+ * ```tsx
+ * import { FunnelTopBar, FunnelBackButton } from '@payfit/unity-components'
+ *
+ * function MyFunnel() {
+ *   return (
+ *     <FunnelTopBar
+ *       leading={
+ *         <FunnelBackButton
+ *           label="Back to dashboard"
+ *           onPress={handleBack}
+ *         />
+ *       }
+ *       title="Step 2"
+ *       progressValue={50}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export declare const FunnelBackButton: FC<FunnelBackButtonProps>;

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

@@ -0,0 +1,35 @@
+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
+};

package/dist/esm/components/funnel-layout/parts/FunnelBody.d.ts

@@ -0,0 +1,36 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const funnelBody: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "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", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "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", unknown, unknown, undefined>>;
+export type FunnelBodyProps = PropsWithChildren<VariantProps<typeof funnelBody>>;
+/**
+ * The `FunnelBody` component provides the main content container for the funnel layout.
+ * It creates a responsive flex layout that accommodates both sidebar and main content areas
+ * with proper spacing and maximum width constraints.
+ * @param {FunnelBodyProps} props - The props for the `FunnelBody` component
+ * @example
+ * ```tsx
+ * import { FunnelBody } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <FunnelBody>
+ *       <FunnelSidebar>Sidebar content</FunnelSidebar>
+ *       <FunnelPage>Main content</FunnelPage>
+ *     </FunnelBody>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically adjusts layout based on presence of sidebar
+ * - Provides responsive breakpoints for mobile and desktop layouts
+ * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
+ * @see {@link FunnelBodyProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelbody--docs unity-components.payfit.io}
+ */
+declare const FunnelBody: import('react').ForwardRefExoticComponent<VariantProps<import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "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", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "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", unknown, unknown, undefined>>> & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { FunnelBody };

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

@@ -0,0 +1,23 @@
+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
+};

package/dist/esm/components/funnel-layout/parts/FunnelPage.d.ts

@@ -0,0 +1,36 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const funnelPage: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type FunnelPageProps = PropsWithChildren<VariantProps<typeof funnelPage>>;
+/**
+ * The `FunnelPage` component represents the main content area of the funnel layout.
+ * It provides the primary content container with proper accessibility attributes
+ * and responsive sizing that adapts based on whether a sidebar is present.
+ * @param {FunnelPageProps} props - The props for the `FunnelPage` component
+ * @example
+ * ```tsx
+ * import { FunnelPage } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <FunnelPage>
+ *       <div>Main content here</div>
+ *     </FunnelPage>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically receives accessibility attributes from `FunnelLayout` context
+ * - Adapts width based on sidebar presence
+ * - Provides proper semantic structure with main element
+ * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="mask-user-input"`
+ * @see {@link FunnelPageProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelpage--docs unity-components.payfit.io}
+ */
+declare const FunnelPage: import('react').ForwardRefExoticComponent<VariantProps<import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>> & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLElement>>;
+export { FunnelPage };

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

@@ -0,0 +1,35 @@
+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
+};

package/dist/esm/components/funnel-layout/parts/FunnelPageAction.d.ts

@@ -0,0 +1,40 @@
+import { PropsWithChildren } from 'react';
+import { ButtonProps } from '../../button/Button.js';
+export interface FunnelPageActionProps extends PropsWithChildren<Omit<ButtonProps, 'variant' | 'color' | 'size'>> {
+    /**
+     * The action type determines the default styling and behavior.
+     * - 'previous': Uses secondary variant for navigation back, outlined in rebrand
+     * - 'next': Uses primary variant for progression forward
+     * - 'optional': Uses ghost variant for optional actions like skip
+     */
+    actionType: 'previous' | 'next' | 'optional';
+}
+/**
+ * The `FunnelPageAction` component is a wrapper around the Button component specifically designed for funnel page actions.
+ * It provides sensible defaults based on the action type while allowing full customization through Button props.
+ * @param {FunnelPageActionProps} props - The props for the `FunnelPageAction` component
+ * @example
+ * ```tsx
+ * import { FunnelPageAction } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <FunnelPageAction actionType="next" onPress={handleNext}>
+ *       Next
+ *     </FunnelPageAction>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically applies appropriate button variants based on action type
+ * - Previous actions use secondary variant in legacy and outlined in rebrand, next actions use primary variant
+ * - Optional actions use ghost variant for less prominent actions
+ * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
+ * @see {@link FunnelPageActionProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelpage-funnelpageaction--docs unity-components.payfit.io}
+ */
+declare const FunnelPageAction: import('react').ForwardRefExoticComponent<FunnelPageActionProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { FunnelPageAction };

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

@@ -0,0 +1,39 @@
+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
+};

package/dist/esm/components/funnel-layout/parts/FunnelPageActions.d.ts

@@ -0,0 +1,47 @@
+import { VariantProps } from '@payfit/unity-themes';
+export declare const funnelPageActions: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex uy:flex-col uy:gap-200 uy:md:flex-row uy:md:justify-between", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex uy:flex-col uy:gap-200 uy:md:flex-row uy:md:justify-between", unknown, unknown, undefined>>;
+export interface FunnelPageActionsProps extends VariantProps<typeof funnelPageActions> {
+    /**
+     * Render function for the next action. This is mandatory as it's the only action that's always shown.
+     */
+    renderNext: () => React.ReactNode;
+    /**
+     * Render function for the previous action. Only rendered if provided.
+     */
+    renderPrevious?: () => React.ReactNode;
+    /**
+     * Render function for optional actions (like skip). Only rendered if provided.
+     */
+    renderOptionalActions?: () => React.ReactNode;
+}
+/**
+ * The `FunnelPageActions` component provides a structured way to render funnel page actions.
+ * It manages the layout and rendering of previous, next, and optional actions with proper spacing and responsive design.
+ * @param {FunnelPageActionsProps} props - The props for the `FunnelPageActions` component
+ * @example
+ * ```tsx
+ * import { FunnelPageActions } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <FunnelPageActions
+ *       renderNext={() => <Button variant="primary">Next</Button>}
+ *       renderPrevious={() => <Button variant="secondary">Previous</Button>}
+ *       renderOptionalActions={() => <Button variant="ghost">Skip</Button>}
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically adapts layout based on screen size (mobile vs desktop)
+ * - Provides consistent spacing between action groups
+ * - Uses render functions for maximum flexibility in action content
+ * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
+ * @see {@link FunnelPageActionsProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelpage-funnelpageactions--docs unity-components.payfit.io}
+ */
+declare const FunnelPageActions: import('react').ForwardRefExoticComponent<FunnelPageActionsProps & import('react').RefAttributes<HTMLDivElement>>;
+export { FunnelPageActions };

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

@@ -0,0 +1,41 @@
+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
+};

package/dist/esm/components/funnel-layout/parts/FunnelPageContent.d.ts

@@ -0,0 +1,35 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const funnelPageContent: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex-1 uy:px-300 uy:my-400 uy:md:px-400 uy:group-has-[[data-unity-component=\"FunnelPageHeader\"]]/funnelpage:mt-0", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex-1 uy:px-300 uy:my-400 uy:md:px-400 uy:group-has-[[data-unity-component=\"FunnelPageHeader\"]]/funnelpage:mt-0", unknown, unknown, undefined>>;
+export type FunnelPageContentProps = PropsWithChildren<VariantProps<typeof funnelPageContent>>;
+/**
+ * The `FunnelPageContent` component provides the main content area of a funnel page.
+ * It creates a flexible content container with responsive padding that adapts to different screen sizes.
+ * @param {FunnelPageContentProps} props - The props for the `FunnelPageContent` component
+ * @example
+ * ```tsx
+ * import { FunnelPageContent } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <FunnelPageContent>
+ *       <div>Main content here</div>
+ *     </FunnelPageContent>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically adjusts top margin when FunnelPageHeader is present
+ * - Provides consistent padding across different screen sizes
+ * - Uses semantic section element for proper document structure
+ * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="mask"`
+ * @see {@link FunnelPageContentProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelpage-funnelpagecontent--docs unity-components.payfit.io}
+ */
+declare const FunnelPageContent: import('react').ForwardRefExoticComponent<VariantProps<import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex-1 uy:px-300 uy:my-400 uy:md:px-400 uy:group-has-[[data-unity-component=\"FunnelPageHeader\"]]/funnelpage:mt-0", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex-1 uy:px-300 uy:my-400 uy:md:px-400 uy:group-has-[[data-unity-component=\"FunnelPageHeader\"]]/funnelpage:mt-0", unknown, unknown, undefined>>> & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLElement>>;
+export { FunnelPageContent };

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

@@ -0,0 +1,23 @@
+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
+};

package/dist/esm/components/funnel-layout/parts/FunnelPageFooter.d.ts

@@ -0,0 +1,36 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const funnelPageFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:px-300 uy:md:px-400", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:px-300 uy:md:px-400", unknown, unknown, undefined>>;
+export type FunnelPageFooterProps = PropsWithChildren<VariantProps<typeof funnelPageFooter>>;
+/**
+ * The `FunnelPageFooter` component provides the footer section of a funnel page.
+ * It creates a flexible footer container with responsive layout that adapts to different screen sizes.
+ * @param {FunnelPageFooterProps} props - The props for the `FunnelPageFooter` component
+ * @example
+ * ```tsx
+ * import { FunnelPageFooter } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <FunnelPageFooter>
+ *       <Button>Previous</Button>
+ *       <Button>Next</Button>
+ *     </FunnelPageFooter>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically receives accessibility attributes from FunnelLayout context
+ * - Provides consistent padding across different screen sizes
+ * - Uses semantic footer element for proper document structure
+ * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
+ * @see {@link FunnelPageFooterProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelpage-funnelpagefooter--docs unity-components.payfit.io}
+ */
+declare const FunnelPageFooter: import('react').ForwardRefExoticComponent<VariantProps<import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:px-300 uy:md:px-400", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:px-300 uy:md:px-400", unknown, unknown, undefined>>> & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLElement>>;
+export { FunnelPageFooter };