@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/components/phone-number-field/TanstackPhoneNumberField.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { LabelProps } from '../label/Label.js';
+import { TanstackPhoneNumberInputProps } from '../phone-number/TanstackPhoneNumberInput.js';
+interface FieldProps extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+    /** The label for the text field. */
+    label: string;
+    /** Helper text to display below the text field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the select field. */
+    contextualLink?: ReactNode;
+}
+export interface PhoneNumberFieldProps extends FieldProps, TanstackPhoneNumberInputProps {
+}
+declare const TanstackPhoneNumberField: import('react').ForwardRefExoticComponent<PhoneNumberFieldProps & import('react').RefAttributes<unknown>>;
+export { TanstackPhoneNumberField };

package/dist/esm/components/phone-number-field/TanstackPhoneNumberField.js

@@ -0,0 +1,32 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { TanstackFormFeedbackText as s } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormHelperText as p } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as d } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackFormField as l } from "../form-field/TanstackFormField.js";
+import { TanstackPhoneNumberInput as f } from "../phone-number/TanstackPhoneNumberInput.js";
+const F = ({
+  label: m,
+  isRequired: e,
+  requiredVariant: t,
+  helperText: o,
+  contextualLink: a,
+  ...n
+}) => /* @__PURE__ */ i(l, { children: [
+  /* @__PURE__ */ r(
+    d,
+    {
+      requiredVariant: t,
+      isRequired: e,
+      children: m
+    }
+  ),
+  o && /* @__PURE__ */ r(p, { children: o }),
+  /* @__PURE__ */ r(f, { ...n }),
+  /* @__PURE__ */ r(s, {}),
+  a
+] }), k = c(F);
+k.displayName = "TanstackPhoneNumberField";
+export {
+  k as TanstackPhoneNumberField
+};

package/dist/esm/components/pill/Pill.d.ts

@@ -14,7 +14,7 @@ declare const pill: import('tailwind-variants').TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "uy:min-w-200 uy:max-w-400 uy:inline-flex uy:items-center uy:justify-center uy:text-center uy:typography-body-small", {
+}, undefined, "uy:min-w-200 uy:h-200 uy:max-w-400 uy:inline-flex uy:items-center uy:justify-center uy:text-center uy:typography-body-small-strong", {
     variant: {
         critical: string;
         info: string;
@@ -42,7 +42,7 @@ declare const pill: import('tailwind-variants').TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "uy:min-w-200 uy:max-w-400 uy:inline-flex uy:items-center uy:justify-center uy:text-center uy:typography-body-small", unknown, unknown, undefined>>;
+}, undefined, "uy:min-w-200 uy:h-200 uy:max-w-400 uy:inline-flex uy:items-center uy:justify-center uy:text-center uy:typography-body-small-strong", unknown, unknown, undefined>>;
 export type PillProps = Partial<Pick<HTMLDivElement, 'id'>> & Required<Pick<AriaAttributes, 'aria-label'>> & Pick<AriaAttributes, 'aria-details' | 'aria-describedby' | 'aria-live'> & {
     /** The value to be displayed inside the Pill */
     value: number;

package/dist/esm/components/pill/Pill.js

@@ -2,7 +2,7 @@ import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
 import { uyTv as o } from "@payfit/unity-themes";
 const y = o({
-  base: "uy:min-w-200 uy:max-w-400 uy:inline-flex uy:items-center uy:justify-center uy:text-center uy:typography-body-small",
+  base: "uy:min-w-200 uy:h-200 uy:max-w-400 uy:inline-flex uy:items-center uy:justify-center uy:text-center uy:typography-body-small-strong",
   variants: {
     variant: {
       critical: "uy:bg-surface-danger uy:text-content-inverted",
@@ -23,15 +23,15 @@ const y = o({
     shape: "pill",
     isVisible: !0
   }
-}), p = (t, i) => {
-  const e = 10 ** i - 1;
+}), p = (t, r) => {
+  const e = 10 ** r - 1;
   return t > e ? `${e}+` : t.toString();
 }, d = c(
-  ({ variant: t = "critical", isVisible: i = !0, maxDigits: e = 2, value: a, ...l }, n) => {
-    const r = p(Math.abs(a), e), u = y({
+  ({ variant: t = "critical", isVisible: r = !0, maxDigits: e = 2, value: a, ...l }, n) => {
+    const i = p(Math.abs(a), e), u = y({
       variant: t,
-      isVisible: i,
-      shape: r.length === 1 ? "circle" : "pill"
+      isVisible: r,
+      shape: i.length === 1 ? "circle" : "pill"
     });
     return /* @__PURE__ */ s(
       "span",
@@ -42,7 +42,7 @@ const y = o({
         role: "status",
         className: u,
         "aria-atomic": "true",
-        children: r
+        children: i
       }
     );
   }

package/dist/esm/components/popover/Popover.js

@@ -1,5 +1,5 @@
-import { jsx as t, jsxs as y } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
 import { uyTv as p } from "@payfit/unity-themes";
 import { Popover as g, Dialog as m, DialogTrigger as c } from "react-aria-components";
 import { DialogTrigger as j } from "react-aria-components";
@@ -16,12 +16,12 @@ const x = p({
     ],
     dialog: [
       "uy:flex uy:flex-col uy:rounded-100",
-      "uy:focus:outline-2 uy:focus:outline-offset-2 uy:focus:outline-solid uy:focus:outline-utility-focus-ring"
+      "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring"
     ]
   }
-}), b = s((a, e) => {
-  const { children: o, title: r, isTitleSrOnly: n, displayCloseButton: i, ...l } = a, { base: u, dialog: d } = x();
-  return /* @__PURE__ */ t(g, { ref: e, className: u(), offset: 8, ...l, children: /* @__PURE__ */ y(m, { className: d(), role: "dialog", children: [
+}), b = y((a, e) => {
+  const { children: o, title: r, isTitleSrOnly: n, displayCloseButton: i, ...l } = a, { base: u, dialog: s } = x();
+  return /* @__PURE__ */ t(g, { ref: e, className: u(), offset: 8, ...l, children: /* @__PURE__ */ d(m, { className: s(), role: "dialog", children: [
     /* @__PURE__ */ t(
       f,
       {

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
+};