@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/date-picker/TanstackDatePicker.d.ts

@@ -0,0 +1,22 @@
+import { DatePickerProps } from './DatePicker.js';
+export type TanstackDatePickerProps = Omit<DatePickerProps, 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackDatePicker` is a controlled date picker wired to the TanStack Form field context.
+ * It is based on the Unity `DatePicker` component.
+ *
+ * Example:
+ * ```tsx
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm<{ birthDate: CalendarDate | null }>({ validators: {} })
+ *   return (
+ *     <form>
+ *       <form.AppField name="birthDate">
+ *         {() => <TanstackDatePicker />}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackDatePicker: import('react').ForwardRefExoticComponent<TanstackDatePickerProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackDatePicker };

package/dist/esm/components/date-picker/TanstackDatePicker.js

@@ -0,0 +1,53 @@
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { useFieldContext as b } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as k } from "../form-field/TanstackFormField.context.js";
+import { DatePicker as x } from "./DatePicker.js";
+const y = h(
+  ({
+    onClearButtonPress: i,
+    onBlur: n,
+    onFocus: r,
+    onChange: l,
+    onOpenChange: s,
+    isReadOnly: d,
+    isDisabled: c,
+    ...m
+  }, u) => {
+    const e = b(), a = k(), f = e.state.meta.isTouched && !e.state.meta.isValid, o = [a.helperTextId, a.feedbackTextId].filter(Boolean).join(" ");
+    return /* @__PURE__ */ p(
+      x,
+      {
+        ...m,
+        ref: u,
+        id: a.inputId,
+        value: e.state.value,
+        onChange: (t) => {
+          e.handleChange(t), l?.(t);
+        },
+        onBlur: () => {
+          e.handleBlur(), n?.();
+        },
+        onFocus: () => {
+          r?.();
+        },
+        onOpenChange: (t) => {
+          s?.(t);
+        },
+        onClearButtonPress: () => {
+          e.setValue(null), i?.();
+        },
+        isReadOnly: d,
+        isDisabled: c,
+        isInvalid: f,
+        "aria-labelledby": a.labelId,
+        "aria-describedby": o.length > 0 ? o : void 0,
+        "aria-details": a.contextualLinkId
+      }
+    );
+  }
+);
+y.displayName = "TanstackDatePicker";
+export {
+  y as TanstackDatePicker
+};

package/dist/esm/components/date-picker/parts/DateInput.js

@@ -1,7 +1,7 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { useContext as b } from "react";
 import { uyTv as i } from "@payfit/unity-themes";
-import { DatePickerStateContext as g, DateInput as x, DateSegment as v } from "react-aria-components";
+import { DatePickerStateContext as x, DateInput as g, DateSegment as v } from "react-aria-components";
 import { useIntl as I } from "react-intl";
 import { CircularIconButton as h } from "../../icon-button/CircularIconButton.js";
 import { Icon as D } from "../../icon/Icon.js";
@@ -20,7 +20,7 @@ const M = i({
   }
 }), N = i({
   slots: {
-    base: "uy:flex uy:gap-50 uy:flex-grow uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-100",
+    base: "uy:flex uy:gap-50 uy:flex-grow uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75",
     input: "uy:flex uy:gap-25 uy:w-fit uy:grow",
     state: "uy:flex uy:gap-50 uy:items-center"
   },
@@ -61,13 +61,13 @@ function P({
   isDisabled: s,
   onClearButtonPress: d
 }) {
-  const t = I(), u = b(g), { dateValue: c } = u, { base: m, input: y, state: f } = N({
+  const t = I(), u = b(x), { dateValue: c } = u, { base: m, input: y, state: f } = N({
     isInvalid: !!o,
     isReadOnly: !!n,
     isDisabled: !!s
   }), p = c && !r && !n && !s;
   return /* @__PURE__ */ l("div", { className: m(), children: [
-    /* @__PURE__ */ e(x, { className: y(), children: (a) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e(g, { className: y(), children: (a) => /* @__PURE__ */ e(
       v,
       {
         segment: a,

package/dist/esm/components/date-picker-field/DatePickerField.d.ts

@@ -78,6 +78,8 @@ type DatePickerFieldComponent = {
  * @note The schema type parameter is needed to ensure type safety with the form's schema. If you omit it, the `name` prop will not be type-safe.
  * @note
  * This component requires `@internationalized/date` as a peer dependency. Make sure to install it in your project: `yarn add @internationalized/date`
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const DatePickerField: DatePickerFieldComponent;
 export { DatePickerField };

package/dist/esm/components/date-picker-field/TanstackDatePickerField.d.ts

@@ -0,0 +1,71 @@
+import { ReactNode } from 'react';
+import { TanstackDatePickerProps } from '../date-picker/TanstackDatePicker.js';
+import { LabelProps } from '../label/Label.js';
+export type TanstackDatePickerFieldProps = TanstackDatePickerProps & Pick<LabelProps, 'isRequired' | 'requiredVariant'> & {
+    /** The label for the date picker field. */
+    label: string;
+    /** Helper text to display below the date picker field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the date picker field. */
+    contextualLink?: ReactNode;
+};
+/**
+ * The `TanstackDatePickerField` component renders a full field (label, date picker)
+ * wired to the TanStack Form context. It manages state and accessibility via the
+ * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
+ *
+ * Behavior:
+ * - Renders `TanstackDatePicker` with calendar overlay for date selection.
+ * - Displays the label (`TanstackFormLabel`), helper text (`TanstackFormHelperText`),
+ *   feedback messages (`TanstackFormFeedbackText`), and an optional contextual link.
+ *
+ * Accessibility:
+ * - Automatically wires `aria-labelledby`, `aria-describedby` (helper/feedback), and
+ *   `aria-details` using identifiers from the `a11y` context.
+ *
+ * Key props:
+ * - `label: string` — label text.
+ * - `helperText?: ReactNode` — helper text displayed below the field.
+ * - `contextualLink?: ReactNode` — optional contextual link, referenced via `aria-details`.
+ * - Inherits props from `TanstackDatePicker`.
+ * - `isRequired?`, `requiredVariant?` — control the required indicator in the label.
+ *
+ * Example:
+ * ```tsx
+ * import { TanstackDatePickerField } from "@/components/date-picker-field/TanstackDatePickerField"
+ * import { useTanstackUnityForm } from "@/hooks/use-tanstack-form"
+ * import { parseDate } from '@internationalized/date'
+ *
+ * function Example() {
+ *  const schema = z.object({
+ *     birthDate: z.custom<CalendarDate | null>()
+ *       .refine(date => date !== null, 'Birth date is required'),
+ *  })
+ *
+ *   const form = useTanstackUnityForm({ validators: {
+ *     onBlur: schema,
+ *   } })
+ *   return (
+ *     <form>
+ *       <form.AppField name="birthDate">
+ *         {() => (
+ *           <TanstackDatePickerField
+ *             label="Birth Date"
+ *             helperText="Select your date of birth"
+ *           />
+ *         )}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackDatePickerField: import('react').ForwardRefExoticComponent<TanstackDatePickerProps & Pick<LabelProps, "isRequired" | "requiredVariant"> & {
+    /** The label for the date picker field. */
+    label: string;
+    /** Helper text to display below the date picker field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the date picker field. */
+    contextualLink?: ReactNode;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackDatePickerField };

package/dist/esm/components/date-picker-field/TanstackDatePickerField.js

@@ -0,0 +1,41 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { TanstackDatePicker as f } from "../date-picker/TanstackDatePicker.js";
+import { TanstackFormFeedbackText as l } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormHelperText as F } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as T } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackFormField as P } from "../form-field/TanstackFormField.js";
+const x = d(
+  ({
+    label: m,
+    helperText: o,
+    contextualLink: a,
+    isRequired: t,
+    isLoading: e,
+    isDisabled: c,
+    isReadOnly: i,
+    requiredVariant: n,
+    ...s
+  }, k) => /* @__PURE__ */ p(P, { children: [
+    /* @__PURE__ */ r(
+      T,
+      {
+        requiredVariant: n,
+        isRequired: t,
+        children: m
+      }
+    ),
+    o && /* @__PURE__ */ r(F, { children: o }),
+    /* @__PURE__ */ r(f, { ref: k, ...{
+      isLoading: e,
+      isDisabled: c,
+      isReadOnly: i
+    }, ...s }),
+    /* @__PURE__ */ r(l, {}),
+    a
+  ] })
+);
+x.displayName = "TanstackDatePickerField";
+export {
+  x as TanstackDatePickerField
+};

package/dist/esm/components/definition-list/DefinitionList.context.d.ts

@@ -0,0 +1,19 @@
+import { PropsWithChildren } from 'react';
+/**
+ * Valeurs du contexte de la DefinitionList.
+ */
+export interface DefinitionListContextValue {
+    /**
+     * La disposition des éléments de la liste.
+     */
+    layout: 'horizontal' | 'vertical';
+}
+/**
+ * Fournisseur de contexte pour la DefinitionList.
+ */
+export declare const DefinitionListContextProvider: ({ children, layout, }: PropsWithChildren<DefinitionListContextValue>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook pour accéder au contexte de la DefinitionList.
+ * Doit être utilisé à l'intérieur d'un composant DefinitionList.
+ */
+export declare const useDefinitionListContext: () => DefinitionListContextValue;

package/dist/esm/components/definition-list/DefinitionList.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { DefinitionListContextValue } from './DefinitionList.context.js';
+import * as React from 'react';
+export interface DefinitionListProps {
+    /**
+     * The layout of the definition list.
+     * @default 'horizontal'
+     */
+    layout?: DefinitionListContextValue['layout'];
+    /**
+     * The content of the definition list, typically DefinitionItem components.
+     */
+    children: ReactNode;
+}
+/**
+ * DefinitionList provides a semantic HTML structure for displaying key-value pairs.
+ * It uses a `<dl>` tag and manages the layout for its `DefinitionItem` children.
+ * @example
+ * <DefinitionList layout="horizontal">
+ *   <DefinitionItem term="Last name" description="Doe" />
+ *   <DefinitionItem term="First name" description="John" />
+ * </DefinitionList>
+ */
+export declare const DefinitionList: React.ForwardRefExoticComponent<DefinitionListProps & React.RefAttributes<HTMLDListElement>>;

package/dist/esm/components/definition-list/parts/DefinitionItem.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import * as React from 'react';
+export interface DefinitionItemProps {
+    /**
+     * The term of the definition (label).
+     */
+    term: string;
+    /**
+     * Optional content displayed next to the term (e.g., an action button).
+     */
+    termSuffix?: ReactNode;
+    /**
+     * The description content associated with the term.
+     */
+    description?: ReactNode;
+    /**
+     * Children of the component.
+     */
+    children?: ReactNode;
+}
+/**
+ * DefinitionItem displays a term (`dt`) and its description (`dd`) within a `DefinitionList`.
+ * It adapts its layout based on the context provided by `DefinitionList`.
+ */
+export declare const DefinitionItem: React.ForwardRefExoticComponent<Omit<DefinitionItemProps, "children"> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/dialog/Dialog.d.ts

@@ -2,43 +2,49 @@ import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
 import { DialogTrigger } from 'react-aria-components';
 export declare const dialog: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
+    size: {
+        sm: {
+            wrapper: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
+        md: {
+            wrapper: string;
         };
     };
-} | {}, {
+}, {
     overlay: string[];
     wrapper: string[];
     content: string[];
+    dismissIcon: string[];
 }, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
+    size: {
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
         };
     };
-} | {}, {
+}, {
     overlay: string[];
     wrapper: string[];
     content: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
+    dismissIcon: string[];
+}, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+    };
+}, {
     overlay: string[];
     wrapper: string[];
     content: string[];
+    dismissIcon: string[];
 }, undefined, unknown, unknown, undefined>>;
-interface DialogProps extends PropsWithChildren<VariantProps<typeof dialog>> {
+export interface DialogProps extends PropsWithChildren<VariantProps<typeof dialog>> {
     /** aria-label has to be defined if the dialog does not have a visible label*/
     'aria-label'?: string;
     /** (optional) modal opened by default or not **If it is set to true, the closing should be handled from outside** /*/
@@ -61,6 +67,12 @@ interface DialogProps extends PropsWithChildren<VariantProps<typeof dialog>> {
  * - `DialogActions`: Contains action buttons for user interaction
  * - `DialogButton`: Handles specific actions (close, confirm, or danger)
  * @param props - The props for the Dialog component
+ * @param props.children - The dialog content including 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
+ * @param props.size - The size variant of the dialog (sm, md)
+ * @param props.aria-label - Accessible label when DialogTitle is not provided
  * @see {@link DialogProps} for all available props
  * @example
  * ```tsx
@@ -94,7 +106,7 @@ interface DialogProps extends PropsWithChildren<VariantProps<typeof dialog>> {
  * @remarks
  * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-dialog--docs) • [Design Docs](https://www.payfit.design/24f360409/p/01f5dc-dialog)
  */
-export declare function Dialog({ children, isOpen, onOpenChange, isDismissable, ...rest }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dialog({ children, isOpen, onOpenChange, isDismissable, size, ...rest }: DialogProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Dialog {
     var displayName: string;
 }

package/dist/esm/components/dialog/Dialog.js

@@ -1,72 +1,110 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Children as i, isValidElement as t } from "react";
-import { uyTv as s } from "@payfit/unity-themes";
-import { useId as g } from "react-aria";
-import { ModalOverlay as p, Modal as f, DialogContext as c, Dialog as b, DialogTrigger as x } from "react-aria-components";
-import { DialogTrigger as E } from "react-aria-components";
-import { DialogActions as D } from "./parts/DialogActions.js";
-import { DialogButton as v } from "./parts/DialogActions/DialogButton.js";
-const w = s({
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { Children as l, isValidElement as i } from "react";
+import { uyTv as f } from "@payfit/unity-themes";
+import { useId as w } from "react-aria";
+import { ModalOverlay as x, Modal as v, DialogContext as h, Dialog as b, DialogTrigger as D } from "react-aria-components";
+import { DialogTrigger as H } from "react-aria-components";
+import { useIntl as z } from "react-intl";
+import { CircularIconButton as I } from "../icon-button/CircularIconButton.js";
+import { DialogActions as N } from "./parts/DialogActions.js";
+import { DialogButton as C } from "./parts/DialogActions/DialogButton.js";
+const T = f({
   slots: {
     overlay: [
+      "uy:@container",
       "uy:fixed uy:inset-0 uy:z-30 uy:overflow-y-auto",
-      "uy:flex uy:min-h-full uy:items-center uy:justify-center uy:text-center",
-      "uy:backdrop-blur-sm uy:bg-utility-backdrop"
+      "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",
+      "uy:data-[entering]:animate-fade-in uy:data-[exiting]:animate-fade-out"
     ],
     wrapper: [
-      "uy:w-full uy:md:max-w-[640px]",
-      "uy:m-400 uy:md:m-0",
-      "uy:overflow-hidden uy:rounded-200 uy:bg-white uy:p-300 uy:md:p-400",
+      "uy:w-full uy:max-h-[95dvh] uy:md:max-h-[82dvh] uy:relative uy:isolate",
+      "uy:m-0",
+      "uy:rounded-t-300 uy:md:rounded-200",
+      "uy:overflow-hidden uy:bg-white uy:p-300 uy:pt-400 uy:md:p-400",
       "uy:text-left uy:align-middle uy:shadow-floating",
-      "uy:bg-surface-neutral"
+      "uy:bg-surface-neutral",
+      "uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out",
+      "uy:md:[animation-delay:100ms] uy:md:data-[entering]:animate-zoom-in uy:md:data-[exiting]:animate-zoom-out"
     ],
-    content: [
-      "uy:outline-none uy:relative uy:flex uy:flex-col uy:gap-300 uy:md:gap-400"
-    ]
+    content: ["uy:group/dialog", "uy:outline-none uy:relative"],
+    dismissIcon: ["uy:absolute uy:right-200 uy:top-200 uy:z-20"]
+  },
+  variants: {
+    size: {
+      sm: {
+        wrapper: "uy:md:w-4/12 uy:md:max-w-62.5"
+      },
+      md: {
+        wrapper: "uy:md:w-5/12 uy:md:max-w-80"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
   }
-}), h = (e) => {
-  const a = i.toArray(e).find(
-    (r) => t(r) && r.type === D
+}), j = (e) => {
+  const t = l.toArray(e).find(
+    (a) => i(a) && a.type === N
   );
-  return t(a) ? i.toArray(a.props.children).some(
-    (r) => t(
-      r
-    ) && r.type === v && r.props.variant === "danger"
+  return i(t) ? l.toArray(t.props.children).some(
+    (a) => i(
+      a
+    ) && a.type === C && a.props.variant === "danger"
   ) : !1;
 };
-function N({
+function B({
   children: e,
-  isOpen: a,
-  onOpenChange: r,
-  isDismissable: u = !0,
-  ...y
+  isOpen: t,
+  onOpenChange: a,
+  isDismissable: r = !0,
+  size: n = "md",
+  ...d
 }) {
-  const l = g(), { overlay: n, wrapper: d, content: m } = w();
+  const m = z(), u = w(), { overlay: y, wrapper: s, content: g, dismissIcon: p } = T({ size: n });
   return /* @__PURE__ */ o(
-    p,
+    x,
     {
-      isDismissable: u,
-      isOpen: a,
-      onOpenChange: r,
-      className: n(),
-      children: /* @__PURE__ */ o(f, { className: d(), "data-unity-dialog": !0, "data-dd-privacy": "allow", children: /* @__PURE__ */ o(c.Provider, { value: { "aria-describedby": l }, children: /* @__PURE__ */ o(
-        b,
-        {
-          role: h(e) ? "alertdialog" : "dialog",
-          "aria-modal": "true",
-          className: m(),
-          "aria-label": y["aria-label"],
-          "aria-describedby": l,
-          children: e
-        }
-      ) }) })
+      isDismissable: r,
+      isOpen: t,
+      onOpenChange: a,
+      className: y(),
+      children: /* @__PURE__ */ c(v, { className: s(), "data-unity-dialog": !0, "data-dd-privacy": "allow", children: [
+        r && /* @__PURE__ */ o(
+          I,
+          {
+            icon: "CloseOutlined",
+            color: "content.neutral.low",
+            title: m.formatMessage({
+              id: "unity:component:common:close:label"
+            }),
+            className: p(),
+            slot: "close",
+            size: "large"
+          }
+        ),
+        /* @__PURE__ */ o(h.Provider, { value: { "aria-describedby": u }, children: /* @__PURE__ */ o(
+          b,
+          {
+            role: j(e) ? "alertdialog" : "dialog",
+            "aria-modal": "true",
+            className: g(),
+            "aria-label": d["aria-label"],
+            "aria-describedby": u,
+            "data-unity-slot": "dialog",
+            "data-unity-size": n,
+            children: e
+          }
+        ) })
+      ] })
     }
   );
 }
-N.displayName = "Dialog";
-x.displayName = "DialogTrigger";
+B.displayName = "Dialog";
+D.displayName = "DialogTrigger";
 export {
-  N as Dialog,
-  E as DialogTrigger,
-  w as dialog
+  B as Dialog,
+  H as DialogTrigger,
+  T as dialog
 };

package/dist/esm/components/dialog/parts/DialogActions.js

@@ -1,13 +1,13 @@
-import { jsx as a } from "react/jsx-runtime";
-const s = ({ children: t }) => /* @__PURE__ */ a(
+import { jsx as t } from "react/jsx-runtime";
+const a = ({ children: e }) => /* @__PURE__ */ t(
   "div",
   {
-    className: "uy:flex uy:justify-end uy:items-start uy:gap-100 uy:self-stretch",
+    className: "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 uy:mt-500",
     "data-dd-privacy": "allow",
-    children: t
+    children: e
   }
 );
-s.displayName = "DialogActions";
+a.displayName = "DialogActions";
 export {
-  s as DialogActions
+  a as DialogActions
 };

package/dist/esm/components/dialog/parts/DialogTitle.js

@@ -1,7 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
-import { Heading as o } from "react-aria-components";
-const i = ({ children: a }) => /* @__PURE__ */ t(o, { slot: "title", className: "uy:typography-h2", "data-dd-privacy": "allow", children: a });
-i.displayName = "DialogTitle";
+import { uyTv as a } from "@payfit/unity-themes";
+import { Heading as i } from "react-aria-components";
+const l = a({
+  base: ["uy:typography-h2 uy:md:typography-h3", "uy:mb-200"]
+}), r = ({ children: o }) => /* @__PURE__ */ t(i, { slot: "title", className: l(), "data-dd-privacy": "allow", children: o });
+r.displayName = "DialogTitle";
 export {
-  i as DialogTitle
+  r as DialogTitle
 };

package/dist/esm/components/dialog/test-utils.d.ts

@@ -0,0 +1,28 @@
+import { PlayCtx } from '../../types/testing.js';
+/**
+ * Factory function returning a set of helpers to test Unity Dialog components.
+ * It wires Storybook's `Play` context with convenient utilities to query,
+ * assert, and interact with dialogs rendered on the canvas.
+ * @param context The Storybook play context used to group steps and actions.
+ * @returns An object of helpers: `findDialog`, `closeDialog`, `assertDialogIsClosed`, `assertElementExistsInDialog`, and `triggerPrimaryAction`.
+ */
+export declare const getTestingUtilsDialog: (context: PlayCtx) => {
+    findDialog: ({ title }: {
+        title: string;
+    }) => Promise<HTMLElement>;
+    closeDialog: ({ title, closeButtonLabel, }: {
+        title: string;
+        closeButtonLabel: string;
+    }) => Promise<void>;
+    assertDialogIsClosed: (dialog: HTMLElement) => Promise<void>;
+    assertElementExistsInDialog: ({ title, content, primaryActionLabel, secondaryActionLabel, }: {
+        title: string;
+        content?: string;
+        primaryActionLabel?: string;
+        secondaryActionLabel?: string;
+    }) => Promise<void>;
+    triggerPrimaryAction: ({ title, primaryActionLabel, }: {
+        title: string;
+        primaryActionLabel: string;
+    }) => Promise<void>;
+};