@payfit/unity-components 2.0.0 → 2.1.4

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

@@ -1,28 +1,28 @@
 import { jsxs as f, jsx as a } from "react/jsx-runtime";
-import { forwardRef as V } from "react";
+import { forwardRef as U } from "react";
 import { uyTv as b } from "@payfit/unity-themes";
-import { DatePicker as N, Group as O, Button as W, Popover as I, Dialog as U } from "react-aria-components";
-import { useIntl as B } from "react-intl";
-import { DateCalendar as j } from "../date-calendar/DateCalendar.js";
-import { Icon as E } from "../icon/Icon.js";
-import { DateInput as M } from "./parts/DateInput.js";
-const R = b({
+import { DatePicker as B, Group as j, Button as E, Popover as M, Dialog as R } from "react-aria-components";
+import { useIntl as G } from "react-intl";
+import { DateCalendar as T } from "../date-calendar/DateCalendar.js";
+import { Icon as $ } from "../icon/Icon.js";
+import { DateInput as q } from "./parts/DateInput.js";
+const z = b({
   slots: {
     base: [
-      "uy:group uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-75",
-      "uy:active:border-border-form-active uy:data-[focus-visible]:border-border-form-active"
+      "uy:group uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75",
+      "uy:active:border-border-form-active uy:data-[focus-visible=true]:border-border-form-active"
     ],
     inputWrapper: [
-      "uy:flex uy:grow uy:rounded-75 uy:outline-none",
+      "uy:flex uy:grow uy:rounded-100 uy:sm:rounded-75 uy:outline-none",
       // Show focus styles when input wrapper is focused AND button is not focused
-      "uy:focus-within:outline-2 uy:focus-within:outline-solid uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-offset-2",
+      "uy:focus-within:outline-2 uy:focus-within:outline-solid uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-offset-3",
       // Hide focus styles when button is focused
       "uy:group-[:has(button:focus)]:data-[focus-within]:outline-none uy:group-[:has(button:focus)]:data-[focus-within]:outline-offset-0 uy:group-[:has(button:focus)]:data-[focus-within]:outline-transparent"
     ],
     suffix: [
-      "uy:flex-grow-0 uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-75 uy:text-content-neutral-low",
-      "uy:hover:bg-surface-neutral-hover uy:active:bg-surface-neutral-pressed uy:active:border-border-form-active uy:data-[pressed]:bg-surface-neutral-pressed uy:data-[pressed]:border-border-form-active",
-      "uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-[3px]"
+      "uy:flex-grow-0 uy:content-center uy:p-125 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75 uy:text-content-neutral-low",
+      "uy:hover:bg-surface-neutral-hover uy:active:bg-surface-neutral-pressed uy:active:border-border-form-active uy:data-[pressed=true]:bg-surface-neutral-pressed uy:data-[pressed=true]:not-group-data-[open=true]:border-border-form-active",
+      "uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-3"
     ]
   },
   variants: {
@@ -58,8 +58,8 @@ const R = b({
       }
     }
   ]
-}), G = b({
-  base: "uy:overflow-auto uy:shadow-floating uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-75",
+}), A = b({
+  base: "uy:overflow-auto uy:shadow-floating uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-md uy:sm:rounded-75",
   variants: {
     isEntering: {
       true: "uy:animate-in uy:fade-in uy:data-[placement-bottom]:slide-in-from-top-1 uy:data-[placement-top]:slide-in-from-bottom-1 uy:duration-200 uy:ease-out"
@@ -68,68 +68,77 @@ const R = b({
       true: "uy:animate-out uy:fade-out uy:data-[placement-bottom]:slide-out-to-top-1 uy:data-[placement-top]:slide-out-to-bottom-1 uy:duration-150 uy:ease-in"
     }
   }
-}), T = V(
+}), H = U(
   ({
-    value: u,
+    value: t,
     defaultValue: i,
-    isInvalid: n,
+    isInvalid: d,
     isLoading: y,
     isDisabled: o,
-    isReadOnly: t,
+    isReadOnly: u,
     onClearButtonPress: c,
     onBlur: s,
-    onFocus: d,
+    onFocus: n,
     onChange: m,
     onOpenChange: p,
     id: g,
+    "aria-label": h,
+    "aria-labelledby": v,
+    "aria-describedby": x,
+    "aria-details": D,
     ...e
-  }, $) => {
-    const h = B(), { base: v, inputWrapper: x, suffix: D } = R({
-      isInvalid: !!n,
-      isReadOnly: !!t,
+  }, w) => {
+    const k = G(), { base: C, inputWrapper: P, suffix: V } = z({
+      isInvalid: !!d,
+      isReadOnly: !!u,
       isDisabled: !!o
     }), l = (r) => {
       m?.(r);
-    }, w = (r) => {
-      p?.(r), r ? d?.() : s?.();
-    }, k = (r) => e.isDateUnavailable ? e.isDateUnavailable(r) : !1, C = () => {
+    }, N = (r) => {
+      p?.(r), r ? n?.() : s?.();
+    }, O = (r) => e.isDateUnavailable ? e.isDateUnavailable(r) : !1, W = () => {
       c?.();
     };
     return /* @__PURE__ */ f(
-      N,
+      B,
       {
+        ref: w,
         "data-dd-privacy": "mask",
         ...e,
-        className: v(),
-        value: u,
+        className: C(),
+        value: t,
         defaultValue: i,
         minValue: e.minValue,
         maxValue: e.maxValue,
-        isReadOnly: !!t,
+        isReadOnly: !!u,
         isDisabled: !!o,
         onChange: l,
-        onFocus: d,
+        onFocus: n,
         onBlur: s,
-        onOpenChange: w,
-        isDateUnavailable: k,
+        onOpenChange: N,
+        isDateUnavailable: O,
+        "aria-label": h,
+        "aria-labelledby": v,
+        "aria-describedby": x,
+        "aria-details": D,
         children: [
-          /* @__PURE__ */ f(O, { className: x(), id: g, children: [
+          /* @__PURE__ */ f(j, { className: P(), id: g, children: [
             /* @__PURE__ */ a(
-              M,
+              q,
               {
                 isLoading: y,
                 isDisabled: o,
-                isReadOnly: t,
-                isInvalid: n,
-                onClearButtonPress: C
+                isReadOnly: u,
+                isInvalid: d,
+                onClearButtonPress: W
               }
             ),
-            /* @__PURE__ */ a(W, { className: D(), isDisabled: t || o, children: /* @__PURE__ */ a(
-              E,
+            /* @__PURE__ */ a(E, { className: V(), isDisabled: u || o, children: /* @__PURE__ */ a(
+              $,
               {
                 src: "CalendarBlankOutlined",
                 color: "inherit",
-                alt: h.formatMessage({
+                alt: k.formatMessage({
                   id: "unity:component:form-field:date-picker:calendar-button",
                   defaultMessage: "Open Calendar"
                 })
@@ -137,13 +146,13 @@ const R = b({
             ) })
           ] }),
           /* @__PURE__ */ a(
-            I,
+            M,
             {
-              className: ({ isEntering: r, isExiting: P }) => G({ isEntering: r, isExiting: P }),
-              children: /* @__PURE__ */ a(U, { className: "uy:p-150", "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
-                j,
+              className: ({ isEntering: r, isExiting: I }) => A({ isEntering: r, isExiting: I }),
+              children: /* @__PURE__ */ a(R, { className: "uy:p-150", "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
+                T,
                 {
-                  value: u,
+                  value: t,
                   defaultValue: i,
                   minValue: e.minValue,
                   maxValue: e.maxValue,
@@ -158,7 +167,7 @@ const R = b({
     );
   }
 );
-T.displayName = "DatePicker";
+H.displayName = "DatePicker";
 export {
-  T as DatePicker
+  H as DatePicker
 };

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