@payfit/unity-components 2.46.11 → 2.46.13

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

@@ -1,74 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,140 +0,0 @@
-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

@@ -1,217 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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
-};