@payfit/unity-components 0.0.0-alpha.9 → 1.0.0

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

@@ -0,0 +1,40 @@
+import { default as React, PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const funnelLayout: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:relative uy:h-dvh uy:flex uy:flex-col uy:bg-canvas", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:relative uy:h-dvh uy:flex uy:flex-col uy:bg-canvas", 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/tree/master/packages/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,137 @@
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as d, useMemo as f } from "react";
+import { useId as y } from "react-aria";
+import { FormattedMessage as i } from "react-intl";
+import { tv as c } from "tailwind-variants";
+import { link as a } from "../link/Link.variants.js";
+import { FunnelLayoutProvider as p } from "./FunnelLayout.context.js";
+const m = c({
+  base: "uy:relative uy:h-dvh uy:flex uy:flex-col uy:bg-canvas"
+}), h = d(
+  ({ children: o, header: u, ...s }, r) => {
+    const e = y(), t = f(
+      () => ({
+        mainContentId: `funnel-main-content-${e}`,
+        topbarId: `funnel-top-bar-${e}`,
+        asideId: `funnel-complementary-left-content-${e}`,
+        funnelTitleId: `funnel-title-${e}`,
+        funnelDescriptionId: `funnel-description-${e}`,
+        funnelStatusId: `funnel-status-${e}`,
+        footerId: `funnel-footer-${e}`
+      }),
+      [e]
+    );
+    return /* @__PURE__ */ n(p, { ids: t, children: /* @__PURE__ */ l(
+      "div",
+      {
+        "data-dd-privacy": "mask-user-input",
+        ...s,
+        ref: r,
+        className: m(),
+        "data-unity-component": "FunnelLayout",
+        children: [
+          /* @__PURE__ */ l(
+            "div",
+            {
+              className: "uy:sr-only uy:focus-within:p-200 uy:focus-within:bg-surface-neutral uy:focus-within:shadow-raising uy:focus-within:rounded-100 uy:focus-within:not-sr-only uy:focus-within:absolute uy:focus-within:top-100 uy:focus-within:left-100 uy:focus-within:z-50",
+              role: "navigation",
+              "aria-labelledby": `skip-links-label-${e}`,
+              children: [
+                /* @__PURE__ */ n("span", { id: `skip-links-label-${e}`, className: "uy:typography-h4", children: /* @__PURE__ */ n(
+                  i,
+                  {
+                    id: "unity:layout:funnel:skip-links:label",
+                    defaultMessage: "Skip to:"
+                  }
+                ) }),
+                /* @__PURE__ */ l("ol", { className: "uy:mt-1 uy:space-y-1 uy:list-none", children: [
+                  /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+                    "a",
+                    {
+                      href: `#${t.topbarId}`,
+                      tabIndex: 0,
+                      className: a(),
+                      children: /* @__PURE__ */ n(
+                        i,
+                        {
+                          id: "unity:layout:funnel:skip-links:top-bar",
+                          defaultMessage: "Top bar"
+                        }
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+                    "a",
+                    {
+                      href: `#${t.mainContentId}`,
+                      tabIndex: 0,
+                      className: a(),
+                      children: /* @__PURE__ */ n(
+                        i,
+                        {
+                          id: "unity:layout:funnel:skip-links:main-content",
+                          defaultMessage: "Main content"
+                        }
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+                    "a",
+                    {
+                      href: `#${t.asideId}`,
+                      tabIndex: 0,
+                      className: a(),
+                      children: /* @__PURE__ */ n(
+                        i,
+                        {
+                          id: "unity:layout:funnel:skip-links:sidebar",
+                          defaultMessage: "Sidebar"
+                        }
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+                    "a",
+                    {
+                      href: `#${t.footerId}`,
+                      tabIndex: 0,
+                      className: a(),
+                      children: /* @__PURE__ */ n(
+                        i,
+                        {
+                          id: "unity:layout:funnel:skip-links:footer",
+                          defaultMessage: "Footer"
+                        }
+                      )
+                    }
+                  ) })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              "data-unity-component": "FunnelTopBar",
+              className: "uy:sticky uy:top-0 uy:z-10",
+              children: u
+            }
+          ),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              className: "uy:flex-1 uy:flex uy:md:block uy:overflow-auto",
+              "data-unity-slot": "funnel-layout-content-wrapper",
+              children: o
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+h.displayName = "FunnelLayout";
+export {
+  h as FunnelLayout,
+  m as funnelLayout
+};

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

@@ -0,0 +1,36 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+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/tree/master/packages/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 { tv as a } from "tailwind-variants";
+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, ...o }, y) => /* @__PURE__ */ l(
+    "div",
+    {
+      ref: y,
+      "data-dd-privacy": "allow",
+      ...o,
+      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 { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+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/tree/master/packages/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,36 @@
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { tv as o } from "tailwind-variants";
+import { useFunnelLayoutContext as t } from "../FunnelLayout.context.js";
+const i = o({
+  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"
+  ]
+}), l = d(
+  ({ children: n, ...r }, a) => {
+    const { ids: e } = t();
+    return /* @__PURE__ */ u(
+      "main",
+      {
+        "data-dd-privacy": "mask-user-input",
+        ...r,
+        ref: a,
+        id: e.mainContentId,
+        "aria-labelledby": e.funnelTitleId,
+        "aria-describedby": e.funnelDescriptionId,
+        tabIndex: -1,
+        className: i(),
+        "data-unity-component": "FunnelPage",
+        children: n
+      }
+    );
+  }
+);
+l.displayName = "FunnelPage";
+export {
+  l as FunnelPage,
+  i 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
+     * - '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, 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/tree/master/packages/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,36 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as c, useCallback as s } from "react";
+import { Button as l } from "../../button/Button.js";
+const u = c(
+  ({ actionType: t, children: a, ...r }, o) => {
+    const e = s(
+      (n) => {
+        switch (n) {
+          case "previous":
+            return { variant: "secondary" };
+          case "next":
+            return { variant: "primary", color: "primary" };
+          case "optional":
+            return { variant: "ghost", color: "neutral" };
+        }
+      },
+      []
+    )(t);
+    return /* @__PURE__ */ i(
+      l,
+      {
+        ref: o,
+        "data-dd-privacy": "allow",
+        ...e,
+        ...r,
+        "data-unity-component": "FunnelPageAction",
+        "data-action-type": t,
+        children: a
+      }
+    );
+  }
+);
+u.displayName = "FunnelPageAction";
+export {
+  u as FunnelPageAction
+};

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

@@ -0,0 +1,47 @@
+import { VariantProps } from 'tailwind-variants';
+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/tree/master/packages/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 l, Fragment as g, jsx as s } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { tv as h } from "tailwind-variants";
+import { useBreakpointListener as p } from "../../../hooks/use-breakpoint-listener.js";
+const b = h({
+  base: "uy:flex uy:flex-col uy:gap-200 uy:md:flex-row uy:md:justify-between"
+}), w = t(
+  ({ renderNext: f, renderPrevious: a, renderOptionalActions: m, ...u }, x) => {
+    const y = p(), c = y === "xs" || y === "sm";
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        ref: x,
+        "data-dd-privacy": "allow",
+        ...u,
+        className: b(),
+        role: "group",
+        "data-unity-component": "FunnelPageActions",
+        children: [
+          c && /* @__PURE__ */ l(g, { children: [
+            f(),
+            a == null ? void 0 : a(),
+            m == null ? void 0 : m()
+          ] }),
+          !c && /* @__PURE__ */ l(g, { children: [
+            /* @__PURE__ */ s("div", { className: "uy:flex uy:gap-100", children: m == null ? void 0 : m() }),
+            /* @__PURE__ */ l("div", { className: "uy:flex uy:gap-100", children: [
+              a == null ? void 0 : a(),
+              f()
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+w.displayName = "FunnelPageActions";
+export {
+  w as FunnelPageActions,
+  b as funnelPageActions
+};

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

@@ -0,0 +1,35 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const funnelPageContent: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex-1 uy:px-300 uy:my-400 uy:md:px-600 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-600 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/tree/master/packages/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-600 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-600 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 { tv as u } from "tailwind-variants";
+const m = u({
+  base: 'uy:flex-1 uy:px-300 uy:my-400 uy:md:px-600 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 { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const funnelPageFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:px-300 uy:md:px-600", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:px-300 uy:md:px-600", 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/tree/master/packages/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-600", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:px-300 uy:md:px-600", unknown, unknown, undefined>>> & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLElement>>;
+export { FunnelPageFooter };

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

@@ -0,0 +1,29 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { tv as d } from "tailwind-variants";
+import { useFunnelLayoutContext as m } from "../FunnelLayout.context.js";
+const s = d({
+  base: "uy:px-300 uy:md:px-600"
+}), u = n(
+  ({ children: o, ...e }, t) => {
+    const { ids: r } = m();
+    return /* @__PURE__ */ a(
+      "footer",
+      {
+        ref: t,
+        "data-dd-privacy": "allow",
+        ...e,
+        className: s(),
+        "data-unity-component": "FunnelPageFooter",
+        id: r.footerId,
+        tabIndex: -1,
+        children: o
+      }
+    );
+  }
+);
+u.displayName = "FunnelPageFooter";
+export {
+  u as FunnelPageFooter,
+  s as funnelPageFooter
+};