@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/number-field/TanstackNumberField.d.ts

@@ -0,0 +1,74 @@
+import { ReactNode } from 'react';
+import { LabelProps } from '../label/Label.js';
+import { TanstackNumberInputProps } from '../number-input/TanstackNumberInput.js';
+/**
+ * Base props shared by the TanstackNumberField, including label and field adornments.
+ * Inherits `isRequired` and `requiredVariant` from {@link LabelProps} to control
+ * the required indicator in the label.
+ */
+export interface FieldProps extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+    /** The plain-text label associated with the number input (required for a11y). */
+    label: string;
+    /** Optional helper text displayed above the control to guide the user. */
+    helperText?: ReactNode;
+    /** Optional contextual link rendered below the control for additional info. */
+    contextualLink?: ReactNode;
+}
+/**
+ * Props for {@link TanstackNumberField}.
+ *
+ * Combines field chrome (label, helper/contextual link, feedback) with the
+ * input behavior from {@link TanstackNumberInput}. All value/validation aspects
+ * are handled by the TanStack Form field context, so you should not pass `name`,
+ * `value`, `defaultValue`, or `isInvalid` here.
+ */
+export type NumberFieldProps = FieldProps & TanstackNumberInputProps;
+/**
+ * TanstackNumberField renders a complete number field for TanStack forms:
+ * label, helper text, the numeric input itself, feedback message, and an
+ * optional contextual link.
+ *
+ * Behavior
+ * - Integrates with the TanStack Form field via `<form.AppField name="…">`.
+ * - Uses {@link TanstackNumberInput} for the numeric control and forwards visual
+ *   props such as `withControls`, `minValue`, `maxValue`, `step`, `formatOptions`,
+ *   `prefix`, `suffix`, and state props (`isReadOnly`, `isDisabled`, `isLoading`).
+ * - Invalid state is derived from the field meta (touched + !isValid) and is
+ *   displayed through the underlying input and feedback area.
+ *
+ * Accessibility
+ * - The surrounding {@link TanstackFormField} provides `aria-labelledby`,
+ *   `aria-describedby` (helper/feedback), and `aria-details` wiring so the input
+ *   is fully accessible out of the box.
+ *
+ * Example
+ * ```tsx
+ * import { useTanstackUnityForm } from "@/hooks/use-tanstack-form"
+ * import { TanstackNumberField } from "@/components/number-field/TanstackNumberField"
+ *
+ * const form = useTanstackUnityForm<{ amount: number }>({ validators: {} })
+ *
+ * <form.AppForm>
+ *   <form.Form>
+ *     <form.AppField name="amount">
+ *       {() => (
+ *         <TanstackNumberField
+ *           label="Amount"
+ *           withControls
+ *           minValue={0}
+ *           step={5}
+ *           helperText="Enter a positive amount"
+ *         />
+ *       )}
+ *     </form.AppField>
+ *   </form.Form>
+ * </form.AppForm>
+ * ```
+ * @see TanstackNumberInput for the underlying numeric control
+ * @see TanstackFormField for the a11y and layout context
+ * @see useTanstackUnityForm to create a form and field context
+ * @returns A composite field bound to the current TanStack form field
+ */
+declare const TanstackNumberField: import('react').ForwardRefExoticComponent<FieldProps & TanstackNumberInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export type { NumberFieldProps as TanstackNumberFieldProps };
+export { TanstackNumberField };

package/dist/esm/components/number-field/TanstackNumberField.js

@@ -0,0 +1,44 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { TanstackFormFeedbackText as l } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormHelperText as F } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as k } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackFormField as T } from "../form-field/TanstackFormField.js";
+import { TanstackNumberInput as u } from "../number-input/TanstackNumberInput.js";
+function b({
+  label: m,
+  helperText: o,
+  contextualLink: t,
+  isRequired: a,
+  isLoading: e,
+  isDisabled: n,
+  isReadOnly: c,
+  requiredVariant: i,
+  ...s
+}, p) {
+  return /* @__PURE__ */ d(T, { children: [
+    /* @__PURE__ */ r(
+      k,
+      {
+        requiredVariant: i,
+        isRequired: a,
+        children: m
+      }
+    ),
+    o && /* @__PURE__ */ r(F, { children: o }),
+    /* @__PURE__ */ r(u, { ref: p, ...{
+      isLoading: e,
+      isDisabled: n,
+      isReadOnly: c
+    }, ...s }),
+    /* @__PURE__ */ r(l, {}),
+    t
+  ] });
+}
+const N = f(
+  b
+);
+N.displayName = "TanstackNumberField";
+export {
+  N as TanstackNumberField
+};

package/dist/esm/components/number-input/NumberInput.d.ts

@@ -0,0 +1,140 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ReactElement } from 'react';
+import { NumberFieldProps } from 'react-aria-components/NumberField';
+export declare const numberInput: import('tailwind-variants').TVReturnType<{
+    isReadOnly: {
+        true: {
+            base: string[];
+            prefix: string[];
+            wrapper: string[];
+            input: string[];
+            suffix: string[];
+        };
+        false: {
+            base: string[];
+            prefix: string[];
+            suffix: string[];
+            wrapper: string[];
+            input: string[];
+            state: string[];
+            button: string;
+        };
+    };
+}, {
+    base: string[];
+    wrapper: string[];
+    input: string[];
+    prefix: string[];
+    suffix: string[];
+    state: string[];
+    controls: string[];
+}, undefined, {
+    isReadOnly: {
+        true: {
+            base: string[];
+            prefix: string[];
+            wrapper: string[];
+            input: string[];
+            suffix: string[];
+        };
+        false: {
+            base: string[];
+            prefix: string[];
+            suffix: string[];
+            wrapper: string[];
+            input: string[];
+            state: string[];
+            button: string;
+        };
+    };
+}, {
+    base: string[];
+    wrapper: string[];
+    input: string[];
+    prefix: string[];
+    suffix: string[];
+    state: string[];
+    controls: string[];
+}, import('tailwind-variants').TVReturnType<{
+    isReadOnly: {
+        true: {
+            base: string[];
+            prefix: string[];
+            wrapper: string[];
+            input: string[];
+            suffix: string[];
+        };
+        false: {
+            base: string[];
+            prefix: string[];
+            suffix: string[];
+            wrapper: string[];
+            input: string[];
+            state: string[];
+            button: string;
+        };
+    };
+}, {
+    base: string[];
+    wrapper: string[];
+    input: string[];
+    prefix: string[];
+    suffix: string[];
+    state: string[];
+    controls: string[];
+}, undefined, unknown, unknown, undefined>>;
+type StyleWithoutCurrency = Exclude<Intl.NumberFormatOptions['style'], 'currency'>;
+interface FormatOptions extends Omit<Intl.NumberFormatOptions, 'currency' | 'style'> {
+    style?: StyleWithoutCurrency;
+}
+export interface NumberProps extends VariantProps<typeof numberInput>, Omit<NumberFieldProps, 'className' | 'style' | 'formatOptions' | 'children'> {
+    withControls?: boolean;
+    /** Element to display before the input field */
+    prefix?: ReactElement;
+    /** Element to display after the input field */
+    suffix?: ReactElement;
+    /** Whether the field is in a loading state */
+    isLoading?: boolean;
+    /**
+     * Clear button click handler
+     */
+    onClearButtonPress?: () => void;
+    /** Format options for the number input */
+    formatOptions?: FormatOptions;
+}
+/**
+ * The `NumberInput` component renders an input field specifically designed for numeric values. It provides features like
+ * increment/decrement controls, formatting options, and various states including loading, invalid, disabled, and read-only.
+ * The component supports prefix and suffix elements, clear button functionality, and can be integrated with form validation.
+ * @param {NumberProps} props - The props for the `NumberInput` component
+ * @example
+ * ```tsx
+ * import { NumberInput } from '@payfit/unity-components'
+ *
+ * // Basic usage
+ * <NumberInput aria-label="Amount" />
+ *
+ * // With controls and formatting
+ * <NumberInput
+ *   withControls
+ *   minValue={0}
+ *   maxValue={1000}
+ *   step={10}
+ *   formatOptions={{
+ *     minimumFractionDigits: 2,
+ *     maximumFractionDigits: 2
+ *   }}
+ *   aria-label="Amount"
+ * />
+ *
+ * // With prefix
+ * <NumberInput
+ *   prefix={<Icon src="CurrencyEuroOutlined" size={20} />}
+ *   aria-label="Amount"
+ * />
+ * ```
+ * @see {@link NumberProps} for all available props
+ * @remarks {@link https://www.payfit.design/24f360409/p/545bd2-number-field|Design docs}
+ */
+declare const NumberInput: import('react').ForwardRefExoticComponent<NumberProps & import('react').RefAttributes<HTMLInputElement>>;
+export { NumberInput };

package/dist/esm/components/number-input/NumberInput.js

@@ -0,0 +1,217 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { forwardRef as k } from "react";
+import { uyTv as z } from "@payfit/unity-themes";
+import { Group as F } from "react-aria-components/Group";
+import { Input as G } from "react-aria-components/Input";
+import { NumberField as T } from "react-aria-components/NumberField";
+import { Icon as W } from "../icon/Icon.js";
+import "@payfit/unity-icons";
+import { useIntl as q } from "react-intl";
+import { CircularIconButton as s } from "../icon-button/CircularIconButton.js";
+import { Spinner as A } from "../spinner/Spinner.js";
+const H = z({
+  slots: {
+    base: [
+      "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:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2",
+      "uy:active:border-border-form-active"
+    ],
+    wrapper: [
+      "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:rounded-100 uy:sm:rounded-75 uy:max-w-full uy:justify-between uy:items-center"
+    ],
+    input: [
+      "uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:min-w-0 uy:max-w-full",
+      "uy:placeholder:text-content-neutral-lowest"
+    ],
+    prefix: [
+      "uy:flex-grow-0 uy:content-center uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:border-r uy:border-solid uy:rounded-l-100 uy:sm:rounded-l-75",
+      "uy:active:border-border-form-active"
+    ],
+    suffix: [
+      "uy:flex-grow-0 uy:content-center uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75",
+      "uy:active:border-border-form-active"
+    ],
+    state: [
+      "uy:flex uy:gap-50 uy:items-center uy:shrink-0 uy:text-content-neutral-disabled"
+    ],
+    controls: ["uy:flex uy:gap-50"]
+  },
+  variants: {
+    isReadOnly: {
+      true: {
+        base: ["uy:border-border-form-disabled uy:bg-surface-form-disabled"],
+        prefix: [
+          "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-read-only"
+        ],
+        wrapper: [
+          "uy:bg-surface-form-disabled uy:text-content-form-disabled",
+          "uy:group-data-[invalid=true]:bg-surface-form-error"
+        ],
+        input: ["uy:bg-surface-form-disabled uy:text-content-form-read-only"],
+        suffix: [
+          "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-read-only"
+        ]
+      },
+      false: {
+        base: [
+          "uy:border-border-form-enabled uy:bg-surface-form-enabled",
+          "uy:data-[invalid=true]:border-border-form-error uy:data-[invalid=true]:bg-surface-form-error",
+          "uy:data-[disabled=true]:border-border-form-disabled uy:data-[disabled=true]:bg-surface-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
+        ],
+        prefix: [
+          "uy:bg-surface-neutral-low uy:border-border-form-enabled uy:text-content-form-enabled",
+          "uy:group-data-[invalid=true]:bg-surface-form-error uy:group-data-[invalid=true]:border-border-form-error",
+          "uy:group-data-[disabled=true]:bg-surface-form-disabled uy:group-data-[disabled=true]:border-border-form-disabled uy:group-data-[disabled=true]:text-content-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
+        ],
+        suffix: [
+          "uy:bg-surface-neutral-low uy:border-border-form-enabled uy:text-content-form-enabled",
+          "uy:group-data-[invalid=true]:bg-surface-form-error uy:group-data-[invalid=true]:border-border-form-error",
+          "uy:group-data-[disabled=true]:bg-surface-form-disabled uy:group-data-[disabled=true]:border-border-form-disabled uy:group-data-[disabled=true]:text-content-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
+        ],
+        wrapper: [
+          "uy:border-border-form-enabled uy:bg-surface-form-enabled",
+          "uy:group-data-[invalid=true]:bg-surface-form-error uy:group-data-[invalid=true]:border-border-form-error",
+          "uy:group-data-[disabled=true]:bg-surface-form-disabled uy:group-data-[disabled=true]:text-content-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
+        ],
+        input: [
+          "uy:text-content-form-enabled uy:bg-surface-form-enabled",
+          "uy:group-data-[invalid=true]:bg-surface-form-error",
+          "uy:group-data-[disabled=true]:bg-surface-form-disabled uy:group-data-[disabled=true]:text-content-form-disabled uy:data-[disabled=true]:cursor-not-allowed"
+        ],
+        state: ["uy:group-data-[invalid=true]:text-content-form-error"],
+        button: "uy:data-[disabled=true]:cursor-not-allowed"
+      }
+    }
+  }
+}), J = k(
+  ({
+    withControls: i = !1,
+    defaultValue: u,
+    formatOptions: p,
+    isDisabled: y,
+    isInvalid: b,
+    isLoading: d,
+    isReadOnly: a,
+    isRequired: g,
+    maxValue: n,
+    minValue: l,
+    prefix: f,
+    onBlur: x,
+    onChange: w,
+    onClearButtonPress: v,
+    step: h,
+    suffix: m,
+    value: e,
+    ...N
+  }, c) => {
+    const {
+      base: M,
+      wrapper: I,
+      input: C,
+      prefix: j,
+      suffix: E,
+      state: O,
+      controls: S
+    } = H({ isReadOnly: a }), o = q(), B = e !== void 0 && !isNaN(e), D = u !== void 0 && !isNaN(u), P = (B || D) && !i && !d && !a && !y;
+    return /* @__PURE__ */ t(
+      T,
+      {
+        ref: c,
+        className: M(),
+        value: e,
+        defaultValue: u,
+        minValue: l,
+        maxValue: n,
+        step: h,
+        isDisabled: y,
+        isReadOnly: a,
+        isInvalid: b,
+        isRequired: g,
+        "aria-busy": d,
+        onChange: w,
+        formatOptions: p,
+        onBlur: x,
+        ...N,
+        children: [
+          f ? /* @__PURE__ */ r("span", { className: j(), children: f }) : null,
+          /* @__PURE__ */ t(F, { className: I(), children: [
+            /* @__PURE__ */ r(G, { ref: c, className: C() }),
+            /* @__PURE__ */ t("div", { className: O(), children: [
+              d && /* @__PURE__ */ r(
+                A,
+                {
+                  color: "inherit",
+                  size: "small",
+                  label: o.formatMessage({
+                    id: "unity:component:common:loading:label",
+                    defaultMessage: "Loading..."
+                  })
+                }
+              ),
+              b && /* @__PURE__ */ r(
+                W,
+                {
+                  src: "WarningCircleOutlined",
+                  color: "content.form.invalid",
+                  alt: o.formatMessage({
+                    id: "unity:component:form-field:form-input:error:alt",
+                    defaultMessage: "Error"
+                  })
+                }
+              ),
+              P && /* @__PURE__ */ r(
+                s,
+                {
+                  title: o.formatMessage({
+                    id: "unity:component:common:clear:title",
+                    defaultMessage: "Clear"
+                  }),
+                  icon: "CloseOutlined",
+                  onPress: () => {
+                    v?.();
+                  }
+                }
+              )
+            ] }),
+            i && /* @__PURE__ */ t("div", { className: S(), children: [
+              /* @__PURE__ */ r(
+                s,
+                {
+                  asElement: "button",
+                  icon: "MinusOutlined",
+                  slot: "decrement",
+                  color: "content.neutral",
+                  isDisabled: l !== void 0 && e === l,
+                  title: o.formatMessage({
+                    id: "unity:component:form-field:number-input:decrement:title",
+                    defaultMessage: "decrement"
+                  })
+                }
+              ),
+              /* @__PURE__ */ r(
+                s,
+                {
+                  asElement: "button",
+                  icon: "PlusOutlined",
+                  slot: "increment",
+                  color: "content.neutral",
+                  isDisabled: n !== void 0 && e === n,
+                  title: o.formatMessage({
+                    id: "unity:component:form-field:number-input:increment:title",
+                    defaultMessage: "increment"
+                  })
+                }
+              )
+            ] })
+          ] }),
+          m ? /* @__PURE__ */ r("span", { className: E(), children: m }) : null
+        ]
+      }
+    );
+  }
+);
+J.displayName = "NumberInput";
+export {
+  J as NumberInput,
+  H as numberInput
+};

package/dist/esm/components/number-input/TanstackNumberInput.d.ts

@@ -0,0 +1,58 @@
+import { NumberProps } from './NumberInput.js';
+/**
+ * Props for the TanstackNumberInput component.
+ *
+ * This type mirrors {@link NumberProps} from the Unity NumberInput, while omitting
+ * the properties that are managed by the TanStack Form field context:
+ * - `name` — provided by <form.AppField name="…"/>
+ * - `value` and `defaultValue` — driven by the form field state
+ * - `isInvalid` — derived from the field meta (touched + !isValid)
+ *
+ * You can still pass all other visual/behavioral props supported by the base
+ * NumberInput (e.g. `withControls`, `minValue`, `maxValue`, `step`, `prefix`, `suffix`,
+ * `formatOptions`, `isReadOnly`, `isDisabled`, `isLoading`, etc.).
+ */
+export type TanstackNumberInputProps = Omit<NumberProps, 'name' | 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * TanstackNumberInput is a controlled numeric input wired to a TanStack Form field.
+ * It composes the Unity {@link NumberInput} and synchronizes value, invalid state,
+ * and events through the TanStack field API.
+ *
+ * Behavior
+ * - Value is controlled by the form field state (`field.state.value`).
+ * - Invalid state is derived from `meta`: when the field is touched and invalid,
+ *   the underlying input receives `isInvalid` and proper a11y attributes.
+ * - `onChange` forwards the new numeric value to the form via `field.handleChange`.
+ * - `onBlur` triggers `field.handleBlur`.
+ * - The clear action sets the value to `NaN` by default, then calls an optional
+ *   `onClearButtonPress` handler.
+ *
+ * Accessibility
+ * - `aria-labelledby`, `aria-describedby` (helper and feedback), and `aria-details`
+ *   are provided via the TanstackFormField a11y context.
+ *
+ * Example:
+ * ```tsx
+ * import { useTanstackUnityForm } from "@/hooks/use-tanstack-form"
+ * import { TanstackNumberInput } from "@/components/number-input/TanstackNumberInput"
+ *
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm<{ amount: number }>({ validators: {} })
+ *   return (
+ *     <form.AppForm>
+ *       <form.Form>
+ *         <form.AppField name="amount">
+ *           {() => <TanstackNumberInput aria-label="Amount" withControls />}
+ *         </form.AppField>
+ *       </form.Form>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @see NumberInput for the underlying visual component and props
+ * @see TanstackFormField for the enclosing a11y wiring
+ * @see useTanstackUnityForm for creating the form context
+ * @returns A Unity NumberInput controlled by the TanStack form field
+ */
+declare const TanstackNumberInput: import('react').ForwardRefExoticComponent<TanstackNumberInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export { TanstackNumberInput };

package/dist/esm/components/number-input/TanstackNumberInput.js

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

package/dist/esm/components/page/Page.d.ts

@@ -0,0 +1,55 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const page: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string[];
+        legacy__midnight: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        default: string[];
+        legacy__midnight: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string[];
+        legacy__midnight: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export interface PageProps extends PropsWithChildren {
+    /**
+     * The variant of the page.
+     * @default 'default'
+     * @remarks
+     * - `default` - The default variant is a standard page with a left-aligned header and a right-aligned footer.
+     * - `legacy__midnight` - The legacy__midnight variant is a page with a left-aligned header and a right-aligned footer.
+     */
+    variant: VariantProps<typeof page>['variant'];
+}
+/**
+ * The Page component provides a consistent layout container for page content with predefined spacing and styling.
+ *
+ * Use this component as the main container for your content to ensure a consistent look and feel across the application.
+ * It works seamlessly with PageHeader for structured page layouts and adapts to different screen sizes.
+ * @param {PageProps} props - Standard props from HTMLDivElement with additional variant option
+ * @see {@link PageProps} for all available props
+ * @example
+ * ```tsx
+ * import { Page, PageHeader, PageHeading } from '@payfit/unity-components'
+ *
+ * function MyPage() {
+ *   return (
+ *     <Page variant="default">
+ *       <PageHeader>
+ *         <PageHeading variant="title">My Page</PageHeading>
+ *       </PageHeader>
+ *       <div>Content goes here</div>
+ *     </Page>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/layout-page--docs) • [Design docs](https://www.payfit.design/24f360409/p/99b0ae-app-body)
+ */
+declare const Page: import('react').ForwardRefExoticComponent<PageProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Page };

package/dist/esm/components/page/Page.js

@@ -0,0 +1,49 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
+const o = m({
+  base: [
+    "uy:min-h-dvh uy:flex uy:flex-col uy:gap-400",
+    // When a FloatingActionBar is present add safe scroll space on mobile
+    "uy:[&:has([data-unity-fab])]:pb-[200px] uy:[&:has([data-unity-fab])]:md:pb-0"
+  ],
+  variants: {
+    variant: {
+      default: [
+        "uy:px-200 uy:py-300 uy:md:p-300 uy:lg:p-500",
+        // a tiny margin left so the shadow is visible
+        "uy:md:ml-100",
+        "uy:bg-surface-neutral uy:md:border uy:md:border-solid uy:md:border-border-neutral-low uy:border-r-0 uy:md:rounded-l-300",
+        "uy:md:shadow-[-1px_-1px_2px_-1px_var(--uy-color-utility-shadow-raising)]"
+      ],
+      legacy__midnight: [
+        "uy:bg-transparent",
+        "uy:md:mt-250 uy:md:mr-300",
+        "uy:md:ml-100"
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), l = e(
+  ({ children: r, variant: a, ...u }, d) => {
+    const y = o({ variant: a });
+    return /* @__PURE__ */ t(
+      "main",
+      {
+        ...u,
+        ref: d,
+        className: y,
+        "data-dd-privacy": "allow",
+        "data-unity-page": a,
+        children: r
+      }
+    );
+  }
+);
+l.displayName = "Page";
+export {
+  l as Page,
+  o as page
+};