@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/promo-dialog/PromoDialog.d.ts

@@ -0,0 +1,149 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const promoDialog: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            layoutWrapper?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+            dismissIcon?: import('tailwind-merge').ClassNameValue;
+            contentColumn?: import('tailwind-merge').ClassNameValue;
+            scrollableContent?: import('tailwind-merge').ClassNameValue;
+            actionsWrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            layoutWrapper?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+            dismissIcon?: import('tailwind-merge').ClassNameValue;
+            contentColumn?: import('tailwind-merge').ClassNameValue;
+            scrollableContent?: import('tailwind-merge').ClassNameValue;
+            actionsWrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+    dismissIcon: string[];
+    layoutWrapper: string[];
+    contentColumn: string[];
+    scrollableContent: string[];
+    actionsWrapper: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            layoutWrapper?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+            dismissIcon?: import('tailwind-merge').ClassNameValue;
+            contentColumn?: import('tailwind-merge').ClassNameValue;
+            scrollableContent?: import('tailwind-merge').ClassNameValue;
+            actionsWrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+    dismissIcon: string[];
+    layoutWrapper: string[];
+    contentColumn: string[];
+    scrollableContent: string[];
+    actionsWrapper: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+    dismissIcon: string[];
+    layoutWrapper: string[];
+    contentColumn: string[];
+    scrollableContent: string[];
+    actionsWrapper: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface PromoDialogProps extends PropsWithChildren<VariantProps<typeof promoDialog>> {
+    /** aria-label has to be defined if the dialog does not have a visible label*/
+    'aria-label'?: string;
+    /** Controls the open state of the dialog. Use only in controlled mode (along with the `onOpenChange` callback) */
+    isOpen?: boolean;
+    /** it is used for controlled mode (need to be used with isOpen property) */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** if false it does not allow to close the modal when click outside, default: true*/
+    isDismissable?: boolean;
+}
+/**
+ * The PromoDialog component provides a specialized modal interface for promotional content,
+ * feature announcements, and important communications that benefit from visual emphasis.
+ *
+ * Use PromoDialog when you want to introduce new features, highlight important updates, or present
+ * promotional content with a compelling illustration. It features a hero section for illustrations
+ * and automatically adapts its layout between mobile (vertical stack) and desktop (horizontal split).
+ *
+ * The PromoDialog requires several parts working together:
+ * - `PromoDialogHero`: Contains the promotional illustration (required)
+ * - `PromoDialogTitle`: Displays the title of the dialog
+ * - `PromoDialogContent`: Contains the main content of the dialog (required)
+ * - `PromoDialogActions`: Contains action buttons for user interaction
+ * - `DialogButton`: Handles specific actions (close, confirm, or danger)
+ * @param props - The props for the PromoDialog component
+ * @param props.children - The dialog content including hero, title, content, and actions
+ * @param props.isOpen - Controls the open state in controlled mode
+ * @param props.onOpenChange - Callback fired when open state changes
+ * @param props.isDismissable - Whether the dialog can be dismissed by clicking outside or pressing Escape
+ * @see {@link PromoDialogProps} for all available props
+ * @example
+ * ```tsx
+ * import {
+ *   PromoDialog,
+ *   DialogTrigger,
+ *   PromoDialogHero,
+ *   PromoDialogTitle,
+ *   PromoDialogContent,
+ *   PromoDialogActions,
+ *   DialogButton
+ * } from '@payfit/unity-components'
+ * import { Illustration } from '@payfit/unity-illustrations'
+ *
+ * function FeatureAnnouncement() {
+ *   return (
+ *     <DialogTrigger>
+ *       <Button>Learn more</Button>
+ *       <PromoDialog>
+ *         <PromoDialogHero>
+ *           <Illustration src={ContractSignature} variant="picture" />
+ *         </PromoDialogHero>
+ *         <PromoDialogTitle>Introducing our new feature</PromoDialogTitle>
+ *         <PromoDialogContent>
+ *           Discover how this feature can help you...
+ *         </PromoDialogContent>
+ *         <PromoDialogActions>
+ *           <DialogButton variant="close">Maybe later</DialogButton>
+ *           <DialogButton variant="confirm">Get started</DialogButton>
+ *         </PromoDialogActions>
+ *       </PromoDialog>
+ *     </DialogTrigger>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Content scrolls when it overflows, with a sticky footer
+ * - Layout adapts automatically: vertical on mobile, horizontal split on desktop
+ * - Hero section is mandatory and displays on the left (desktop) or top (mobile)
+ * - Shadow appears on footer when content is scrollable
+ * - **Accessibility**: Either `PromoDialogTitle` or `aria-label` prop is required for screen readers
+ * - **Accessibility**: Dialog traps focus and can be closed with Escape key when dismissable
+ * - **Accessibility**: Close button is keyboard accessible with proper ARIA labels
+ * - **Accessibility**: Supports prefers-reduced-motion for users with motion sensitivities
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-promodialog--docs) • [Design Docs](https://www.payfit.design/24f360409/p/01f5dc-dialog)
+ */
+declare function PromoDialog({ children, isOpen, onOpenChange, isDismissable, ...rest }: PromoDialogProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PromoDialog {
+    var displayName: string;
+}
+export { PromoDialog };

package/dist/esm/components/promo-dialog/PromoDialog.js

@@ -0,0 +1,219 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { useRef as P, Children as m, isValidElement as l, useLayoutEffect as v } from "react";
+import { uyTv as N } from "@payfit/unity-themes";
+import { useId as C } from "react-aria";
+import { ModalOverlay as A, Modal as E, DialogContext as I, Dialog as j } from "react-aria-components";
+import { useIntl as z } from "react-intl";
+import { useHasScroll as M } from "../../hooks/use-has-scroll.js";
+import { DialogButton as H } from "../dialog/parts/DialogActions/DialogButton.js";
+import { CircularIconButton as T } from "../icon-button/CircularIconButton.js";
+import { PromoDialogActions as b } from "./parts/PromoDialogActions.js";
+import { PromoDialogHero as W } from "./parts/PromoDialogHero.js";
+import { PromoDialogTitle as _ } from "./parts/PromoDialogTitle.js";
+const k = N({
+  slots: {
+    overlay: [
+      "uy:@container",
+      "uy:fixed uy:inset-0 uy:z-30 uy:overflow-y-auto",
+      "uy:min-h-full",
+      "uy:flex uy:items-end uy:md:items-center uy:md:justify-center uy:md:text-center",
+      "uy:bg-utility-backdrop",
+      // enter/leave animation
+      "uy:data-[entering]:animate-fade-in uy:data-[exiting]:animate-fade-out",
+      "uy:motion-reduce:data-[entering]:animate-none uy:motion-reduce:data-[exiting]:animate-none"
+    ],
+    wrapper: [
+      "uy:w-full uy:relative uy:isolate",
+      "uy:m-0",
+      "uy:rounded-t-300 uy:md:rounded-300",
+      "uy:bg-surface-neutral",
+      "uy:text-left uy:align-middle uy:shadow-floating",
+      // Mobile: enter/leave animation
+      "uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out",
+      "uy:md:[animation-delay:100ms]",
+      // Desktop: enter/leave animation
+      "uy:md:data-[entering]:animate-zoom-in uy:md:data-[exiting]:animate-zoom-out",
+      "uy:motion-reduce:data-[entering]:animate-none uy:motion-reduce:data-[exiting]:animate-none",
+      // Mobile: scrollable with max height
+      "uy:max-h-[95dvh] uy:overflow-y-auto",
+      // Desktop: max height (adapts to content), no overflow on wrapper
+      "uy:md:h-[82dvh] uy:md:max-h-65 uy:lg:max-h-85 uy:md:overflow-hidden",
+      "uy:md:w-10/12 uy:md:max-w-[1000px] uy:p-300 uy:pb-0 uy:md:p-200"
+    ],
+    content: [
+      "uy:group/promo-dialog uy:outline-none uy:relative",
+      // Mobile: auto height (wrapper scrolls)
+      "uy:h-auto",
+      // Desktop: full height (content scrolls internally)
+      "uy:md:h-full"
+    ],
+    dismissIcon: [
+      // Mobile: sticky button that takes some padding at the top
+      "uy:sticky uy:top-0 uy:right-0 uy:flex uy:justify-end",
+      // Desktop: close button is positioned absolutely at the top-right corner
+      "uy:md:absolute uy:md:right-100 uy:md:top-100 uy:md:z-20"
+    ],
+    // Layout slots
+    layoutWrapper: [
+      "uy:flex uy:flex-col uy:md:flex-row",
+      // Mobile: auto height (wrapper scrolls)
+      "uy:h-auto",
+      // Desktop: full height for flex layout
+      "uy:md:h-full uy:gap-300 uy:md:gap-0"
+    ],
+    contentColumn: [
+      "uy:group/content-column",
+      "uy:flex uy:flex-col",
+      // Mobile: auto height
+      "uy:h-auto",
+      // Desktop: takes 2/3 of width, fixed max height, enables scrolling
+      "uy:md:basis-2/3 uy:md:h-full uy:md:max-h-85 uy:md:overflow-y-auto uy:md:pt-600"
+    ],
+    scrollableContent: [
+      "uy:md:pl-[clamp(var(--uy-spacing-400),11%,var(--uy-spacing-800))] uy:md:pr-1000 uy:[scrollbar-width:thin] uy:md:scroll-mt-1000",
+      // Mobile: flex-1 to fill space (wrapper scrolls)
+      "uy:flex-1",
+      // desktop: centered layout
+      "uy:md:flex uy:md:flex-col uy:md:justify-center"
+    ],
+    actionsWrapper: [
+      "uy:py-300 uy:md:py-0 uy:sticky uy:-bottom-px uy:bg-surface-neutral",
+      // Apply shadow when parent group has scroll
+      "uy:group-data-[has-scroll=true]/content-column:shadow-[0_-1px_6px_0_var(--uy-color-utility-shadow-floating)]"
+    ]
+  }
+}), B = (r) => {
+  const n = m.toArray(r).find(
+    (e) => l(e) && e.type === b
+  );
+  return l(
+    n
+  ) ? m.toArray(n.props.children).some(
+    (e) => l(
+      e
+    ) && e.type === H && e.props.variant === "danger"
+  ) : !1;
+};
+function q({
+  children: r,
+  isOpen: n,
+  onOpenChange: e,
+  isDismissable: p = !0,
+  ...y
+}) {
+  const f = z(), d = C(), g = P(null), { hasAnyScroll: i } = M(g, {
+    strategy: "both",
+    watchMutations: !1
+  }), s = m.toArray(r), u = s.find(
+    (o) => l(o) && o.type === W
+  ), h = s.find(
+    (o) => l(o) && o.type === b
+  ), w = s.filter(
+    (o) => o !== u && o !== h
+  );
+  v(() => {
+    u || console.error(
+      "PromoDialog: PromoDialogHero is required. Please add <PromoDialogHero> as a child of your PromoDialog component."
+    );
+  }, [u]), v(() => {
+    const D = m.toArray(r).some(
+      (x) => l(x) && x.type === _
+    );
+    !y["aria-label"] && !D && console.error(
+      "PromoDialog: Either an aria-label or a PromoDialogTitle is required for accessibility. Provide one to ensure screen reader users can identify the dialog."
+    );
+  }, [r, y]);
+  const a = k();
+  return /* @__PURE__ */ t(
+    A,
+    {
+      isDismissable: p,
+      isOpen: n,
+      onOpenChange: e,
+      className: a.overlay(),
+      children: /* @__PURE__ */ t(
+        E,
+        {
+          className: a.wrapper(),
+          "data-unity-promo-dialog": !0,
+          "data-dd-privacy": "allow",
+          children: /* @__PURE__ */ t(I.Provider, { value: { "aria-describedby": d }, children: /* @__PURE__ */ c(
+            j,
+            {
+              role: B(r) ? "alertdialog" : "dialog",
+              "aria-modal": "true",
+              className: a.content(),
+              "aria-label": y["aria-label"],
+              "aria-describedby": d,
+              "data-unity-slot": "promo-dialog",
+              children: [
+                p && /* @__PURE__ */ t("div", { className: a.dismissIcon(), children: /* @__PURE__ */ t(
+                  T,
+                  {
+                    asElement: "button",
+                    icon: "CloseOutlined",
+                    color: "content.neutral.low",
+                    size: "large",
+                    title: f.formatMessage({
+                      id: "unity:component:common:close:label"
+                    }),
+                    slot: "close",
+                    className: "uy:relative uy:-top-100 uy:-right-100 uy:md:static"
+                  }
+                ) }),
+                /* @__PURE__ */ c(
+                  "div",
+                  {
+                    className: a.layoutWrapper(),
+                    "data-slot": "promo-dialog.layout-wrapper",
+                    children: [
+                      u,
+                      /* @__PURE__ */ c(
+                        "div",
+                        {
+                          ref: g,
+                          className: a.contentColumn(),
+                          "data-slot": "promo-dialog.content-column",
+                          "data-has-scroll": i,
+                          role: i ? "region" : void 0,
+                          "aria-label": i ? f.formatMessage({
+                            id: "unity:component:common:scrollable-content:label"
+                          }) : void 0,
+                          tabIndex: i ? 0 : void 0,
+                          children: [
+                            /* @__PURE__ */ t(
+                              "div",
+                              {
+                                id: d,
+                                className: a.scrollableContent(),
+                                "data-slot": "promo-dialog.scrollable-content",
+                                children: w
+                              }
+                            ),
+                            /* @__PURE__ */ t(
+                              "div",
+                              {
+                                className: a.actionsWrapper(),
+                                "data-slot": "promo-dialog.actions-wrapper",
+                                children: h
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ) })
+        }
+      )
+    }
+  );
+}
+q.displayName = "PromoDialog";
+export {
+  q as PromoDialog,
+  k as promoDialog
+};

package/dist/esm/components/promo-dialog/parts/PromoDialogActions.d.ts

@@ -0,0 +1,44 @@
+import { PropsWithChildren } from 'react';
+/**
+ * PromoDialogActions contains the action buttons for a promo dialog.
+ * It provides consistent layout and spacing for dialog action buttons.
+ *
+ * This component should be used within a `PromoDialog` to display action buttons like
+ * confirm, cancel, or close actions. The buttons are automatically arranged in a row
+ * on desktop and stacked on mobile.
+ * @param props - The props for the PromoDialogActions component
+ * @param props.children - The action buttons (typically DialogButton components)
+ * @example
+ * ```tsx
+ * import { PromoDialog, PromoDialogHero, DialogTitle, PromoDialogContent, PromoDialogActions, DialogButton } from '@payfit/unity-components'
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import ContractSignature from '@payfit/unity-illustrations/assets/ContractSignature'
+ *
+ * function PromoExample() {
+ *   return (
+ *     <PromoDialog>
+ *       <PromoDialogHero>
+ *         <Illustration src={ContractSignature} variant="picture" />
+ *       </PromoDialogHero>
+ *       <DialogTitle>Welcome</DialogTitle>
+ *       <PromoDialogContent>
+ *         <p>Content here...</p>
+ *       </PromoDialogContent>
+ *       <PromoDialogActions>
+ *         <DialogButton variant="close">Skip</DialogButton>
+ *         <DialogButton variant="confirm">Continue</DialogButton>
+ *       </PromoDialogActions>
+ *     </PromoDialog>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Buttons are stacked vertically on mobile (reverse order) and horizontal on desktop
+ * - Use DialogButton components as children for consistent styling
+ * - **Accessibility**: Actions are grouped with role="group" for better screen reader navigation
+ */
+declare const PromoDialogActions: {
+    ({ children }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { PromoDialogActions };

package/dist/esm/components/promo-dialog/parts/PromoDialogActions.js

@@ -0,0 +1,29 @@
+import { jsx as a } from "react/jsx-runtime";
+import { uyTv as i } from "@payfit/unity-themes";
+import { useIntl as r } from "react-intl";
+const s = i({
+  base: [
+    "uy:md:pt-250 uy:md:pb-100 uy:md:px-200 uy:flex uy:flex-col-reverse uy:md:flex-row uy:md:justify-end uy:md:items-start",
+    "uy:gap-150 uy:md:gap-100",
+    "uy:self-stretch"
+  ]
+}), e = ({ children: o }) => {
+  const t = r();
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      role: "group",
+      "aria-label": t.formatMessage({
+        id: "unity:component:dialog:actions:label"
+      }),
+      className: s(),
+      "data-unity-slot": "promo-dialog.actions",
+      "data-dd-privacy": "allow",
+      children: o
+    }
+  );
+};
+e.displayName = "PromoDialogActions";
+export {
+  e as PromoDialogActions
+};

package/dist/esm/components/promo-dialog/parts/PromoDialogContent.d.ts

@@ -0,0 +1,43 @@
+import { PropsWithChildren } from 'react';
+/**
+ * PromoDialogContent contains the main content of a promo dialog.
+ * It provides consistent spacing and typography for dialog content.
+ *
+ * This component should be used within a `PromoDialog` to display the main message,
+ * description, or any other content that needs to be presented to the user.
+ * @param props - The props for the PromoDialogContent component
+ * @param props.children - The content to be displayed in the dialog body
+ * @example
+ * ```tsx
+ * import { PromoDialog, PromoDialogHero, DialogTitle, PromoDialogContent, PromoDialogActions, DialogButton } from '@payfit/unity-components'
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import ContractSignature from '@payfit/unity-illustrations/assets/ContractSignature'
+ *
+ * function PromoExample() {
+ *   return (
+ *     <PromoDialog>
+ *       <PromoDialogHero>
+ *         <Illustration src={ContractSignature} variant="picture" />
+ *       </PromoDialogHero>
+ *       <DialogTitle>Welcome</DialogTitle>
+ *       <PromoDialogContent>
+ *         <p>This is the main content of the promo dialog.</p>
+ *       </PromoDialogContent>
+ *       <PromoDialogActions>
+ *         <DialogButton variant="close">Skip</DialogButton>
+ *         <DialogButton variant="confirm">Continue</DialogButton>
+ *       </PromoDialogActions>
+ *     </PromoDialog>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Use this component for the main body text and content
+ * - Content will automatically scroll when it overflows
+ * - Maintains consistent spacing with other promo dialog parts
+ */
+declare const PromoDialogContent: {
+    ({ children }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { PromoDialogContent };

package/dist/esm/components/promo-dialog/parts/PromoDialogContent.js

@@ -0,0 +1,20 @@
+import { jsx as t } from "react/jsx-runtime";
+import { uyTv as n } from "@payfit/unity-themes";
+const a = n({
+  base: [
+    "uy:flex uy:flex-col uy:gap-200",
+    "uy:text-content-neutral",
+    "uy:typography-body"
+  ]
+}), e = ({ children: o }) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: a(),
+    "data-unity-slot": "promo-dialog.content",
+    children: o
+  }
+);
+e.displayName = "PromoDialogContent";
+export {
+  e as PromoDialogContent
+};

package/dist/esm/components/promo-dialog/parts/PromoDialogHero.d.ts

@@ -0,0 +1,47 @@
+import { PropsWithChildren } from 'react';
+export interface PromoDialogHeroProps extends PropsWithChildren {
+    /**
+     * Additional class names for the hero
+     */
+    className?: string;
+}
+/**
+ * PromoDialogHero displays a promotional illustration or hero image in promo dialogs.
+ * It's designed to complement important announcements, feature introductions, or promotional content.
+ *
+ * This component is required when using `PromoDialog` and automatically triggers
+ * a special layout with the hero section on the left (desktop) or top (mobile), and content on the right/bottom.
+ * @param props - The props for the PromoDialogHero component
+ * @param props.children - The hero content, typically an Illustration component
+ * @example
+ * ```tsx
+ * import { PromoDialog, PromoDialogHero, DialogTitle, DialogContent } from '@payfit/unity-components'
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import ContractSignature from '@payfit/unity-illustrations/assets/ContractSignature'
+ *
+ * function PromoExample() {
+ *   return (
+ *     <PromoDialog>
+ *       <PromoDialogHero>
+ *         <Illustration src={ContractSignature} variant="picture" />
+ *       </PromoDialogHero>
+ *       <DialogTitle>Welcome to our new feature</DialogTitle>
+ *       <DialogContent>
+ *         Discover how this feature can help you...
+ *       </DialogContent>
+ *     </PromoDialog>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - This component is specifically designed for promo dialogs and triggers a special horizontal split layout on desktop
+ * - On mobile devices, the layout automatically adjusts to a vertical stack
+ * - The hero section has a light blue background by default
+ * - Use with illustrations from `@payfit/unity-illustrations` for consistent branding
+ * - **Accessibility**: Hero content is marked as decorative (aria-hidden) as it's purely visual
+ */
+declare const PromoDialogHero: {
+    ({ children, className }: PromoDialogHeroProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { PromoDialogHero };

package/dist/esm/components/promo-dialog/parts/PromoDialogHero.js

@@ -0,0 +1,25 @@
+import { jsx as a } from "react/jsx-runtime";
+import { uyTv as e } from "@payfit/unity-themes";
+const t = e({
+  base: [
+    "uy:rounded-150 uy:bg-surface-neutral-lowest",
+    "uy:flex uy:items-center uy:justify-center",
+    // Mobile: auto height for vertical stack
+    "uy:h-auto",
+    // Desktop: takes 1/3 of width, stretches to row height
+    "uy:md:basis-[40%] uy:lg:basis-[37.2%] uy:md:shrink-0"
+  ]
+}), u = ({ children: o, className: r }) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: t({ className: r }),
+    "data-unity-slot": "promo-dialog.hero",
+    "data-dd-privacy": "allow",
+    "aria-hidden": "true",
+    children: o
+  }
+);
+u.displayName = "PromoDialogHero";
+export {
+  u as PromoDialogHero
+};

package/dist/esm/components/promo-dialog/parts/PromoDialogSubtitle.d.ts

@@ -0,0 +1,53 @@
+import { TextProps } from '../../text/Text.js';
+export type PromoDialogSubtitleProps = Omit<TextProps, 'variant' | 'color'>;
+/**
+ * PromoDialogSubtitle displays a subtitle text above the title in a promo dialog.
+ * It provides consistent styling with body variant and neutral lowest color.
+ *
+ * This component should be used within a `PromoDialog` to display additional context
+ * or information above the main title, such as step indicators or feature labels.
+ * @param props - The props for the PromoDialogSubtitle component
+ * @param props.children - The subtitle text to be displayed
+ * @example
+ * ```tsx
+ * import {
+ *   PromoDialog,
+ *   PromoDialogHero,
+ *   PromoDialogSubtitle,
+ *   PromoDialogTitle,
+ *   PromoDialogContent,
+ *   PromoDialogActions,
+ *   DialogButton,
+ * } from '@payfit/unity-components'
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import ContractSignature from '@payfit/unity-illustrations/assets/ContractSignature'
+ *
+ * function PromoExample() {
+ *   return (
+ *     <PromoDialog>
+ *       <PromoDialogHero>
+ *         <Illustration src={ContractSignature} variant="picture" />
+ *       </PromoDialogHero>
+ *       <PromoDialogSubtitle>Step 1/3</PromoDialogSubtitle>
+ *       <PromoDialogTitle>Welcome</PromoDialogTitle>
+ *       <PromoDialogContent>
+ *         <p>This is the main content of the promo dialog.</p>
+ *       </PromoDialogContent>
+ *       <PromoDialogActions>
+ *         <DialogButton variant="close">Skip</DialogButton>
+ *         <DialogButton variant="confirm">Continue</DialogButton>
+ *       </PromoDialogActions>
+ *     </PromoDialog>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Use this component for displaying contextual information above the title
+ * - Styled with body variant and content.neutral.lowest color
+ * - Automatically positioned above PromoDialogTitle when used together
+ */
+declare const PromoDialogSubtitle: {
+    ({ children, ...rest }: PromoDialogSubtitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { PromoDialogSubtitle };

package/dist/esm/components/promo-dialog/parts/PromoDialogSubtitle.js

@@ -0,0 +1,21 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Text as l } from "../../text/Text.js";
+const r = ({
+  children: o,
+  ...t
+}) => /* @__PURE__ */ a(
+  l,
+  {
+    ...t,
+    variant: "body",
+    asElement: "h4",
+    color: "content.neutral.lowest",
+    "data-unity-slot": "promo-dialog.subtitle",
+    className: "uy:typography-body-small uy:md:typography-body uy:mb-100",
+    children: o
+  }
+);
+r.displayName = "PromoDialogSubtitle";
+export {
+  r as PromoDialogSubtitle
+};

package/dist/esm/components/promo-dialog/parts/PromoDialogTitle.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+declare const PromoDialogTitle: {
+    ({ children }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { PromoDialogTitle };