@payfit/unity-components 2.46.13 → 2.46.14

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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,131 @@
+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

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