@payfit/unity-components 2.46.12 → 2.46.13

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

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

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

@@ -1,77 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { PropsWithChildren, ReactNode } from 'react';
-export declare const funnelPageHeader: import('tailwind-variants').TVReturnType<{
-    gradient: {
-        default: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    hgroup: string;
-    figure: string;
-    figcaption: string;
-}, undefined, {
-    gradient: {
-        default: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    hgroup: string;
-    figure: string;
-    figcaption: string;
-}, import('tailwind-variants').TVReturnType<{
-    gradient: {
-        default: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    hgroup: string;
-    figure: string;
-    figcaption: string;
-}, undefined, unknown, unknown, undefined>>;
-export interface FunnelPageHeaderProps extends PropsWithChildren<VariantProps<typeof funnelPageHeader>> {
-    title: string;
-    subtitle: ReactNode;
-    style?: VariantProps<typeof funnelPageHeader>['gradient'];
-    imageSlot?: React.ReactNode;
-    imageSlotAltText?: string;
-}
-/**
- * The `FunnelPageHeader` component provides the header section of a funnel page with title, subtitle, and optional image.
- * It displays the page title and subtitle in a structured layout with a responsive design that adapts to different screen sizes.
- * You can control the gradient appearance using the `gradient` prop to indicate different states or contexts.
- * @param {FunnelPageHeaderProps} props - The props for the `FunnelPageHeader` component
- * @example
- * ```tsx
- * import { FunnelPageHeader } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <FunnelPageHeader
- *       title="Page Title"
- *       subtitle="Page Subtitle"
- *       style="warning"
- *       imageSlot={<img src="image.jpg" alt="description" />}
- *       imageSlotAltText="Image description"
- *     />
- *   )
- * }
- * ```
- * @remarks
- * - Automatically provides accessibility attributes for screen readers
- * - Supports different gradient styles for visual context
- * - Responsive image display that adapts to screen size
- * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
- * @see {@link FunnelPageHeaderProps} 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-funnelpageheader--docs unity-components.payfit.io}
- */
-declare const FunnelPageHeader: import('react').ForwardRefExoticComponent<FunnelPageHeaderProps & import('react').RefAttributes<HTMLElement>>;
-export { FunnelPageHeader };

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

@@ -1,55 +0,0 @@
-import { jsxs as e, jsx as a } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { uyTv as h } from "@payfit/unity-themes";
-import { Text as n } from "../../text/Text.js";
-import { useFunnelLayoutContext as x } from "../FunnelLayout.context.js";
-const b = h({
-  slots: {
-    base: "uy:flex uy:flex-col uy:justify-between uy:p-300 uy:md:py-600 uy:md:px-400 uy:md:flex-row uy:md:items-center uy:md:rounded-t-300",
-    hgroup: "uy:space-y-100",
-    figure: "uy:hidden uy:lg:block uy:lg:h-full uy:lg:max-h-[160px] uy:lg:ml-800 uy:lg:mr-150 uy:shrink-0",
-    figcaption: "uy:sr-only"
-  },
-  variants: {
-    gradient: {
-      default: {
-        base: "uy:md:bg-gradient-to-b uy:md:from-blue-l1/30 uy:md:to-grayscale-L0"
-      }
-    }
-  },
-  defaultVariants: {
-    gradient: "default"
-  }
-}), v = p(
-  ({ title: t, subtitle: u, imageSlot: r, imageSlotAltText: l, children: d, style: i, ...o }, s) => {
-    const { ids: y } = x(), { base: m, hgroup: c, figure: f, figcaption: g } = b({
-      gradient: i
-    });
-    return /* @__PURE__ */ e(
-      "header",
-      {
-        ref: s,
-        className: m(),
-        "data-unity-component": "FunnelPageHeader",
-        "data-dd-privacy": "allow",
-        ...o,
-        children: [
-          /* @__PURE__ */ e("hgroup", { className: c(), id: y.funnelDescriptionId, children: [
-            /* @__PURE__ */ a(n, { asElement: "h2", variant: "h1", children: t }),
-            /* @__PURE__ */ a(n, { asElement: "h3", variant: "subtitle", color: "content.neutral.low", children: u }),
-            d
-          ] }),
-          r && /* @__PURE__ */ e("figure", { className: f(), "aria-hidden": "true", children: [
-            r,
-            /* @__PURE__ */ a("figcaption", { className: g(), children: l })
-          ] })
-        ]
-      }
-    );
-  }
-);
-v.displayName = "FunnelPageHeader";
-export {
-  v as FunnelPageHeader,
-  b as funnelPageHeader
-};

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

@@ -1,45 +0,0 @@
-import { default as React } from 'react';
-import { VariantProps } from '@payfit/unity-themes';
-declare const progressBar: import('tailwind-variants').TVReturnType<{
-    isFull: {
-        true: {
-            meter: string;
-        };
-        false: {
-            meter: string;
-        };
-    };
-}, {
-    base: string[];
-    meter: string[];
-}, undefined, {
-    isFull: {
-        true: {
-            meter: string;
-        };
-        false: {
-            meter: string;
-        };
-    };
-}, {
-    base: string[];
-    meter: string[];
-}, import('tailwind-variants').TVReturnType<{
-    isFull: {
-        true: {
-            meter: string;
-        };
-        false: {
-            meter: string;
-        };
-    };
-}, {
-    base: string[];
-    meter: string[];
-}, undefined, unknown, unknown, undefined>>;
-interface ProgressBarProps extends Omit<VariantProps<typeof progressBar>, 'isFull'> {
-    /** the value of the progression */
-    value: number;
-}
-declare const FunnelProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
-export { FunnelProgressBar };

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

@@ -1,50 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { uyTv as n } from "@payfit/unity-themes";
-import { ProgressBar as d } from "react-aria-components/ProgressBar";
-const y = n({
-  slots: {
-    base: ["uy:bg-surface-neutral-disabled", "uy:w-full uy:h-50"],
-    meter: [
-      "uy:h-full uy:w-[var(--uy-progressbar-value)] uy:transition-all uy:duration-200 uy:ease-linear",
-      "uy:bg-surface-primary",
-      "uy:rounded-r-pill"
-    ]
-  },
-  variants: {
-    isFull: {
-      true: { meter: "uy:rounded-r-0" },
-      false: { meter: "uy:rounded-r-pill" }
-    }
-  },
-  defaultVariants: {
-    isFull: !1
-  }
-}), m = i(
-  ({ value: e, ...a }, s) => {
-    const l = e >= 100, { base: u, meter: o } = y({ isFull: l });
-    return /* @__PURE__ */ r(
-      d,
-      {
-        ref: s,
-        value: e,
-        "aria-label": "progress bar",
-        "data-dd-privacy": "allow",
-        ...a,
-        children: ({ percentage: t }) => /* @__PURE__ */ r("div", { className: u(), children: /* @__PURE__ */ r(
-          "div",
-          {
-            className: o(),
-            style: {
-              "--uy-progressbar-value": `${t}%`
-            }
-          }
-        ) })
-      }
-    );
-  }
-);
-m.displayName = "FunnelProgressBar";
-export {
-  m as FunnelProgressBar
-};

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

@@ -1,83 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { PropsWithChildren } from 'react';
-export declare const funnelSidebar: import('tailwind-variants').TVReturnType<{
-    isSticky: {
-        true: string;
-        false: string;
-    };
-    position: {
-        sticky: string[];
-        static: string[];
-        fixed: string[];
-    };
-}, undefined, string[], {
-    isSticky: {
-        true: string;
-        false: string;
-    };
-    position: {
-        sticky: string[];
-        static: string[];
-        fixed: string[];
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    isSticky: {
-        true: string;
-        false: string;
-    };
-    position: {
-        sticky: string[];
-        static: string[];
-        fixed: string[];
-    };
-}, undefined, string[], unknown, unknown, undefined>>;
-export interface FunnelSidebarProps extends PropsWithChildren<VariantProps<typeof funnelSidebar>> {
-    /**
-     * Whether the sidebar is sticky or not
-     * `@deprecated` use position="sticky" instead
-     */
-    isSticky?: VariantProps<typeof funnelSidebar>['isSticky'];
-    /**
-     * The sidebar's positioning scheme. It can be one of three values:
-     * - `static`: the sidebar does not scroll horizontally with the content
-     * - `sticky`: When scrolling down, the sidebar sticks close to the top bar
-     * - `fixed`: the sidebar always stays in the same position when scrolling down
-     * @default 'sticky'
-     */
-    position?: VariantProps<typeof funnelSidebar>['position'];
-    'aria-label'?: string;
-}
-/**
- * The `FunnelSidebar` component provides an optional sidebar area in the funnel layout.
- * It displays process steps or additional navigation content with proper accessibility
- * attributes and responsive sizing that adapts to the layout structure.
- * @param {FunnelSidebarProps} props - The props for the `FunnelSidebar` component
- * @example
- * ```tsx
- * import { FunnelSidebar } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <FunnelSidebar>
- *       <TaskMenu>
- *         <RawTask>
- *           <TaskTitle>Task 1</TaskTitle>
- *         </RawTask>
- *       </TaskMenu>
- *     </FunnelSidebar>
- *   )
- * }
- * ```
- * @remarks
- * - Automatically receives accessibility attributes from FunnelLayout context
- * - Supports sticky positioning for better navigation experience
- * - Provides responsive sizing that adapts to content and screen size
- * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
- * @see {@link FunnelSidebarProps} 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-funnelsidebar--docs unity-components.payfit.io}
- */
-declare const FunnelSidebar: import('react').ForwardRefExoticComponent<FunnelSidebarProps & import('react').RefAttributes<HTMLElement>>;
-export { FunnelSidebar };

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

@@ -1,54 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { uyTv as l } from "@payfit/unity-themes";
-import { useIntl as c } from "react-intl";
-import { useFunnelLayoutContext as m } from "../FunnelLayout.context.js";
-const f = l({
-  base: [
-    "uy:w-full uy:self-start uy:shrink uy:grow-0",
-    // sidebar is always sticky in mobile
-    "uy:sticky uy:top-8 uy:z-9",
-    "uy:md:basis-1/3 uy:lg:basis-1/4 uy:md:shrink-0"
-  ],
-  variants: {
-    isSticky: {
-      true: "uy:sticky uy:top-8 uy:md:top-10 uy:z-9",
-      false: "uy:static"
-    },
-    position: {
-      sticky: ["uy:md:sticky uy:md:top-10"],
-      static: ["uy:md:static"],
-      fixed: ["uy:md:sticky uy:md:top-[var(--uy-funnel-sidebar-offset)]"]
-    }
-  },
-  defaultVariants: {
-    isSticky: !0,
-    position: "sticky"
-  }
-}), p = d(
-  ({ children: s, isSticky: t, position: a, "aria-label": e, ...o }, u) => {
-    const r = t !== void 0 ? t ? "sticky" : "static" : a, { ids: i } = m(), y = c();
-    return /* @__PURE__ */ n(
-      "aside",
-      {
-        ref: u,
-        "aria-label": e ?? y.formatMessage({
-          id: "unity:layout:funnel:sidebar:aria-label",
-          defaultMessage: "Process steps"
-        }),
-        "aria-describedby": i.funnelTitleId,
-        className: f({ position: r }),
-        id: i.asideId,
-        "data-unity-component": "FunnelSidebar",
-        "data-dd-privacy": "allow",
-        ...o,
-        children: s
-      }
-    );
-  }
-);
-p.displayName = "FunnelSidebar";
-export {
-  p as FunnelSidebar,
-  f as funnelSidebar
-};

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

@@ -1,131 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-export declare const funnelTopBar: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            title?: import('tailwind-merge').ClassNameValue;
-            titleWrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            title?: import('tailwind-merge').ClassNameValue;
-            titleWrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    titleWrapper: string[];
-    title: string[];
-}, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            title?: import('tailwind-merge').ClassNameValue;
-            titleWrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    titleWrapper: string[];
-    title: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
-    base: string[];
-    titleWrapper: string[];
-    title: string[];
-}, undefined, unknown, unknown, undefined>>;
-export interface FunnelTopBarProps extends VariantProps<typeof funnelTopBar> {
-    /** The title text to display in the funnel top bar */
-    title: string;
-    /**
-     * Custom content to display in the leading area (left side).
-     * Typically a logo on first step or a back button on subsequent steps.
-     * @example
-     * ```tsx
-     * // With FunnelBackButton
-     * <FunnelTopBar
-     *   leading={<FunnelBackButton label="Back" onPress={handleBack} />}
-     *   title="My Funnel"
-     * />
-     *
-     * // With logo
-     * <FunnelTopBar
-     *   leading={<PayFitBrand color="original" />}
-     *   title="Get Started"
-     * />
-     * ```
-     */
-    leading?: React.ReactNode;
-    /**
-     * Label for the back button.
-     * @deprecated Use `leading` with <FunnelBackButton> instead. Will be removed in v2.0.
-     * @example
-     * ```tsx
-     * // Old way (deprecated)
-     * <FunnelTopBar
-     *   backButtonLabel="Back"
-     *   onBackButtonPress={handleBack}
-     *   title="My Funnel"
-     * />
-     *
-     * // New way (recommended)
-     * <FunnelTopBar
-     *   leading={<FunnelBackButton label="Back" onPress={handleBack} />}
-     *   title="My Funnel"
-     * />
-     * ```
-     */
-    backButtonLabel?: string;
-    /**
-     * Callback function to be called when the back button is pressed.
-     * @deprecated Use `leading` with <FunnelBackButton> instead. Will be removed in v2.0.
-     */
-    onBackButtonPress?: () => void;
-    /** Optional actions slot to display in the top bar */
-    actions?: React.ReactNode;
-    /** Optional flag to show or hide the progress indicator. Defaults to false */
-    showProgress?: boolean;
-    /** The current progress in the funnel */
-    progressValue?: number;
-    /** Custom progress announcement for screen readers. */
-    progressAnnouncement?: string;
-    /** current task description */
-    currentTaskDescription?: string;
-}
-/**
- * The `FunnelTopBar` component provides the header navigation for funnel layouts with back button, title, and optional progress indicator.
- * It creates a responsive top bar that displays the funnel title, navigation controls, and progress status with proper accessibility attributes.
- * You can control the progress display and customize the back button behavior to guide users through multi-step processes.
- * @param {FunnelTopBarProps} props - The props for the `FunnelTopBar` component
- * @example
- * ```tsx
- * import { FunnelTopBar } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <FunnelTopBar
- *       title="Setup Process"
- *       backButtonLabel="Back"
- *       onBackButtonPress={handleBack}
- *       showProgress={true}
- *       progressValue={75}
- *       progressAnnouncement="2 out of 3 tasks completed"
- *     />
- *   )
- * }
- * ```
- * @remarks
- * - Automatically adapts back button display based on screen size
- * - Provides live progress announcements for screen readers
- * - Supports optional global actions in the top bar
- * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
- * @see {@link FunnelTopBarProps} 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-funneltopbar--docs unity-components.payfit.io}
- */
-declare const FunnelTopBar: import('react').ForwardRefExoticComponent<FunnelTopBarProps & import('react').RefAttributes<HTMLDivElement>>;
-export { FunnelTopBar };

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

@@ -1,119 +0,0 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { forwardRef as w, useMemo as y } from "react";
-import { uyTv as B } from "@payfit/unity-themes";
-import { useIntl as F } from "react-intl";
-import { useFunnelLayoutContext as I } from "../FunnelLayout.context.js";
-import { FunnelBackButton as T } from "./FunnelBackButton.js";
-import { FunnelProgressBar as M } from "./FunnelProgressBar.js";
-var c = {};
-const P = B({
-  slots: {
-    base: ["uy:bg-surface-neutral uy:shadow-raising uy:min-h-800"],
-    titleWrapper: [
-      "uy:px-200 uy:py-150 uy:md:px-500 uy:min-h-[calc(var(--uy-spacing-800)-4px)]",
-      "uy:flex uy:justify-between uy:items-center"
-    ],
-    title: [
-      "uy:text-content-neutral uy:typography-body-strong uy:sm:typography-h4 uy:flex-1 uy:sm:flex-auto uy:text-center uy:col-2"
-    ]
-  }
-}), _ = w(
-  ({
-    actions: s,
-    backButtonLabel: t,
-    currentTaskDescription: u,
-    leading: r,
-    onBackButtonPress: o,
-    progressAnnouncement: d,
-    progressValue: n,
-    showProgress: m = !0,
-    title: f,
-    ...v
-  }, g) => {
-    const i = F(), { ids: a } = I(), { base: h, titleWrapper: b, title: x } = P(), N = y(() => r !== void 0 ? r : t && o ? (c.NODE_ENV === "development" && console.warn(
-      "FunnelTopBar: backButtonLabel and onBackButtonPress are deprecated. Use leading={<FunnelBackButton />} instead."
-    ), /* @__PURE__ */ e(
-      T,
-      {
-        label: t,
-        onPress: o
-      }
-    )) : null, [r, t, o]);
-    c.NODE_ENV === "development" && r !== void 0 && (t || o) && console.warn(
-      "FunnelTopBar: Both leading and deprecated props (backButtonLabel/onBackButtonPress) provided. leading takes precedence."
-    );
-    const p = y(
-      () => ({
-        navigationDescription: i.formatMessage({
-          id: "unity:layout:funnel:top-bar:navigation-desc",
-          defaultMessage: "Process navigation"
-        }),
-        progressAnnouncement: d ?? i.formatMessage(
-          {
-            id: "unity:layout:funnel:top-bar:progress-announcement",
-            defaultMessage: n !== void 0 ? `Process is ${n}% complete` : "Progress status unavailable"
-          },
-          {
-            progress: n
-          }
-        )
-      }),
-      [i, d, n]
-    );
-    return /* @__PURE__ */ l(
-      "header",
-      {
-        ref: g,
-        id: a.topbarId,
-        className: h(),
-        role: "banner",
-        "aria-labelledby": a.funnelTitleId,
-        "aria-describedby": a.funnelStatusId,
-        "data-dd-privacy": "allow",
-        ...v,
-        children: [
-          /* @__PURE__ */ l(
-            "nav",
-            {
-              className: b(),
-              "aria-label": p.navigationDescription,
-              children: [
-                /* @__PURE__ */ e("div", { className: "uy:grow-0 uy:basis-[100px]", children: N }),
-                /* @__PURE__ */ l("h1", { className: x(), id: a.funnelTitleId, children: [
-                  f,
-                  u && /* @__PURE__ */ e("span", { className: "uy:sr-only", children: u })
-                ] }),
-                /* @__PURE__ */ e(
-                  "div",
-                  {
-                    className: "uy:grow-0 uy:basis-[100px]",
-                    "aria-hidden": !s,
-                    role: s ? "group" : "presentation",
-                    children: s
-                  }
-                )
-              ]
-            }
-          ),
-          m && /* @__PURE__ */ e("div", { "aria-hidden": "true", children: /* @__PURE__ */ e(M, { value: n ?? 0 }) }),
-          /* @__PURE__ */ e(
-            "div",
-            {
-              id: a.funnelStatusId,
-              role: "status",
-              "aria-live": "polite",
-              "aria-atomic": "true",
-              className: "uy:sr-only",
-              children: p.progressAnnouncement
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-_.displayName = "FunnelTopBar";
-export {
-  _ as FunnelTopBar,
-  P as funnelTopBar
-};