@payfit/unity-components 0.0.0-alpha.9 → 1.0.0

package/dist/esm/components/flex/Flex.variants.mjs

@@ -1,218 +0,0 @@
-import { tv as s } from "tailwind-variants";
-const u = s(
-  {
-    base: "uy-flex",
-    variants: {
-      inline: {
-        true: "uy-inline-flex",
-        false: "uy-flex"
-      },
-      direction: {
-        row: "uy-flex-row",
-        col: "uy-flex-col"
-      },
-      isReversed: {
-        true: null,
-        false: null
-      },
-      wrap: {
-        wrap: "uy-flex-wrap",
-        "wrap-reverse": "uy-flex-wrap-reverse",
-        nowrap: "uy-flex-nowrap"
-      },
-      gap: {
-        0: "uy-gap-0",
-        25: "uy-gap-25",
-        50: "uy-gap-50",
-        75: "uy-gap-75",
-        100: "uy-gap-100",
-        125: "uy-gap-125",
-        150: "uy-gap-150",
-        200: "uy-gap-200",
-        250: "uy-gap-250",
-        300: "uy-gap-300",
-        400: "uy-gap-400",
-        500: "uy-gap-500",
-        600: "uy-gap-600",
-        800: "uy-gap-800",
-        1e3: "uy-gap-1000"
-      },
-      gapX: {
-        0: "uy-gap-x-0",
-        25: "uy-gap-x-25",
-        50: "uy-gap-x-50",
-        75: "uy-gap-x-75",
-        100: "uy-gap-x-100",
-        125: "uy-gap-x-125",
-        150: "uy-gap-x-150",
-        200: "uy-gap-x-200",
-        250: "uy-gap-x-250",
-        300: "uy-gap-x-300",
-        400: "uy-gap-x-400",
-        500: "uy-gap-x-500",
-        600: "uy-gap-x-600",
-        800: "uy-gap-x-800",
-        1e3: "uy-gap-x-1000"
-      },
-      gapY: {
-        0: "uy-gap-y-0",
-        25: "uy-gap-y-25",
-        50: "uy-gap-y-50",
-        75: "uy-gap-y-75",
-        100: "uy-gap-y-100",
-        125: "uy-gap-y-125",
-        150: "uy-gap-y-150",
-        200: "uy-gap-y-200",
-        250: "uy-gap-y-250",
-        300: "uy-gap-y-300",
-        400: "uy-gap-y-400",
-        500: "uy-gap-y-500",
-        600: "uy-gap-y-600",
-        800: "uy-gap-y-800",
-        1e3: "uy-gap-y-1000"
-      },
-      justify: {
-        start: "uy-justify-start",
-        end: "uy-justify-end",
-        center: "uy-justify-center",
-        between: "uy-justify-between",
-        around: "uy-justify-around",
-        evenly: "uy-justify-evenly"
-      },
-      align: {
-        start: "uy-items-start",
-        end: "uy-items-end",
-        center: "uy-items-center",
-        baseline: "uy-items-baseline",
-        stretch: "uy-items-stretch"
-      },
-      alignContent: {
-        start: "uy-content-start",
-        end: "uy-content-end",
-        center: "uy-content-center",
-        between: "uy-content-between",
-        around: "uy-content-around",
-        evenly: "uy-content-evenly"
-      }
-    },
-    defaultVariants: {
-      inline: !1,
-      direction: "row",
-      wrap: "nowrap",
-      justify: "start",
-      align: "stretch",
-      isReversed: !1
-    },
-    compoundVariants: [
-      {
-        isReversed: !0,
-        direction: "row",
-        className: "uy-flex-row-reverse"
-      },
-      {
-        isReversed: !0,
-        direction: void 0,
-        className: "uy-flex-row-reverse"
-      },
-      {
-        isReversed: !0,
-        direction: "col",
-        className: "uy-flex-col-reverse"
-      }
-    ]
-  },
-  {
-    /*
-     * FIXME: won't work because of tailwind-variants limitation.
-     *  Add the basic layout classes (flexbox) to tailwind's safelist
-     */
-    responsiveVariants: ["sm", "md", "lg", "xl"]
-  }
-), a = s(
-  {
-    variants: {
-      grow: {
-        0: "uy-grow-0",
-        1: "uy-grow"
-      },
-      shrink: {
-        0: "uy-shrink-0",
-        1: "uy-shrink"
-      },
-      basis: {
-        auto: "uy-basis-auto",
-        min: "uy-basis-min",
-        max: "uy-basis-max",
-        fit: "uy-basis-fit",
-        full: "uy-basis-full",
-        "1/2": "uy-basis-1/2",
-        "1/3": "uy-basis-1/3",
-        "2/3": "uy-basis-2/3",
-        "1/4": "uy-basis-1/4",
-        "2/4": "uy-basis-2/4",
-        "3/4": "uy-basis-3/4",
-        "1/6": "uy-basis-1/6",
-        "2/6": "uy-basis-2/6",
-        "3/6": "uy-basis-3/6",
-        "4/6": "uy-basis-4/6",
-        "5/6": "uy-basis-5/6",
-        "1/12": "uy-basis-1/12",
-        "2/12": "uy-basis-2/12",
-        "3/12": "uy-basis-3/12",
-        "4/12": "uy-basis-4/12",
-        "5/12": "uy-basis-5/12",
-        "6/12": "uy-basis-6/12",
-        "7/12": "uy-basis-7/12",
-        "8/12": "uy-basis-8/12",
-        "9/12": "uy-basis-9/12",
-        "10/12": "uy-basis-10/12",
-        "11/12": "uy-basis-11/12",
-        0: "uy-basis-0",
-        25: "uy-basis-25",
-        50: "uy-basis-50",
-        75: "uy-basis-75",
-        100: "uy-basis-100",
-        125: "uy-basis-125",
-        150: "uy-basis-150",
-        200: "uy-basis-200",
-        250: "uy-basis-250",
-        300: "uy-basis-300",
-        400: "uy-basis-400",
-        500: "uy-basis-500",
-        600: "uy-basis-600",
-        800: "uy-basis-800",
-        1e3: "uy-basis-1000"
-      },
-      order: {
-        first: "uy-order-first",
-        last: "uy-order-last",
-        none: "uy-order-none"
-      },
-      self: {
-        auto: "uy-self-auto",
-        start: "uy-self-start",
-        end: "uy-self-end",
-        center: "uy-self-center",
-        stretch: "uy-self-stretch",
-        baseline: "uy-self-baseline"
-      }
-    },
-    defaultVariants: {
-      grow: 0,
-      shrink: 1,
-      order: "none",
-      self: "auto"
-    }
-  },
-  {
-    /*
-     * FIXME: won't work because of tailwind-variants limitation.
-     *  Add the basic layout classes (flexbox) to tailwind's safelist
-     */
-    responsiveVariants: ["sm", "md", "lg", "xl"]
-  }
-);
-export {
-  u as flex,
-  a as flexItem
-};

package/dist/esm/components/flex/FlexItem.d.mts

@@ -1,40 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import { flexItem } from './Flex.variants.mjs';
-export type FlexItemVariantProps = VariantProps<typeof flexItem>;
-type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';
-export interface FlexItemProps {
-    /** Render the flex item as a specific HTML element */
-    asElement?: ElementType;
-    /** Control if the item grows to fill available space. Use 1 to allow growing, 0 to prevent it */
-    grow?: FlexItemVariantProps['grow'];
-    /** Control if the item shrinks when space is limited. Use 1 to allow shrinking, 0 to prevent it */
-    shrink?: FlexItemVariantProps['shrink'];
-    /** Set the initial size of the item before remaining space is distributed. Use pixel values or fractions */
-    basis?: FlexItemVariantProps['basis'];
-    /** Change the item's position in the flex container. Use 'first', 'last', or 'none' */
-    order?: FlexItemVariantProps['order'];
-    /** Override the container's align-items value for this item. Use 'start', 'center', 'end', 'stretch', or 'baseline' */
-    self?: FlexItemVariantProps['self'];
-    /** Add custom classes to the flex item */
-    className?: string;
-    /** The content of the flex item */
-    children?: React.ReactNode;
-}
-/**
- * Use FlexItem to control how individual items behave within a Flex container.
- * This component provides props to manage growing, shrinking, sizing, and positioning of flex items.
- * @example
- * ```tsx
- * <Flex gap="100">
- *   <FlexItem grow={1}>
- *     <div>Flexible content</div>
- *   </FlexItem>
- *   <FlexItem basis="200" shrink={0}>
- *     <div>Fixed width content</div>
- *   </FlexItem>
- * </Flex>
- * ```
- */
-export declare const FlexItem: import('react').ForwardRefExoticComponent<FlexItemProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexItemProps> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const StackItem: import('react').ForwardRefExoticComponent<FlexItemProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexItemProps> & import('react').RefAttributes<HTMLDivElement>>;
-export {};

package/dist/esm/components/flex/FlexItem.mjs

@@ -1,32 +0,0 @@
-import { jsx as p } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
-import { flexItem as I } from "./Flex.variants.mjs";
-const e = x(
-  ({
-    asElement: t = "div",
-    children: m,
-    className: o,
-    grow: r,
-    shrink: s,
-    basis: a,
-    order: l,
-    self: f,
-    ...c
-  }, i) => {
-    const n = I({
-      grow: r,
-      shrink: s,
-      basis: a,
-      order: l,
-      self: f,
-      className: o
-    });
-    return /* @__PURE__ */ p(t, { ref: i, className: n, ...c, children: m });
-  }
-);
-e.displayName = "FlexItem";
-const N = e;
-export {
-  e as FlexItem,
-  N as StackItem
-};

package/dist/esm/components/form/Form.context.d.mts

@@ -1,12 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { UseFormReturn } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod/lib/types';
-import { Schema } from '../../hooks/use-form.types.mjs';
-interface UnityFormContextValue<TSchema extends Schema> {
-    schema: TSchema;
-    form: UseFormReturn<ZodInfer<TSchema>>;
-}
-export declare const UnityFormContext: import('react').Context<UnityFormContextValue<Schema> | null>;
-export declare function UnityFormProvider<TSchema extends Schema>({ children, schema, form, }: PropsWithChildren<UnityFormContextValue<TSchema>>): import("react/jsx-runtime").JSX.Element;
-export declare function useUnityFormProvider<TSchema extends Schema>(): UnityFormContextValue<TSchema>;
-export {};

package/dist/esm/components/form/Form.context.mjs

@@ -1,30 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { createContext as i, useContext as m } from "react";
-const o = i(null);
-function c({
-  children: t,
-  schema: r,
-  form: e
-}) {
-  return /* @__PURE__ */ n(
-    o.Provider,
-    {
-      value: {
-        schema: r,
-        form: e
-      },
-      children: t
-    }
-  );
-}
-function x() {
-  const t = m(o);
-  if (!t)
-    throw new Error("useFormContext must be used within a Form component");
-  return t;
-}
-export {
-  o as UnityFormContext,
-  c as UnityFormProvider,
-  x as useUnityFormProvider
-};

package/dist/esm/components/form/Form.d.mts

@@ -1,33 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { FormProps as AriaFormProps } from 'react-aria-components';
-import { UseFormReturn } from 'react-hook-form';
-import { ZodError, infer as ZodInfer } from 'zod';
-import { Schema, TFormValues } from '../../hooks/use-form.types.mjs';
-type AllowedAriaFormProps = Omit<AriaFormProps, 'action' | 'onSubmit' | 'method' | 'target' | 'validationErrors' | 'onInvalid'>;
-export interface FormProps<TSchema extends Schema, TForm extends TFormValues = ZodInfer<TSchema>> extends PropsWithChildren<AllowedAriaFormProps> {
-    /** The form instance from react-hook-form */
-    form: UseFormReturn<TForm>;
-    /** The schema to validate the form data */
-    schema: TSchema;
-    /** The operations to execute when the form is submitted and the input data is valid */
-    action: (values: TForm) => Promise<void> | void;
-    /** Handle successful form submission (when `action` callback resolves its promise or does not throw an error) */
-    onSuccess?: (data: TForm) => void;
-    /** Handle form submission errors (when `action` callback rejects its promise or throws an error) */
-    onError?: (error: ZodError | Error) => void;
-    /** Enable or disable `react-hook-form`'s devtools (only in development mode) */
-    debug?: boolean;
-}
-/**
- * The `Form` component provides full state management for complex forms with validation, by following a schema-based approach.
- *
- * Use this component to create complex form with validation and error handling, alongside the [`FormField` component](/?path=/docs/forms-formfield--docs).
- *
- * Under the hood, the `Form` component is a wrapper around the `react-hook-form` library, which takes care of form state management. Additionally, it uses the `zod` library to define a schema used for form data validation. To use the `Form` component correctly, **you must install Zod and react-hook-form** as dependencies in your project:
- *
- * ```bash
- * $ yarn add zod react-hook-form
- * ```
- */
-declare const Form: import('react').ForwardRefExoticComponent<FormProps<Schema, TFormValues> & import('react').RefAttributes<HTMLFormElement>>;
-export { Form };

package/dist/esm/components/form/Form.mjs

@@ -1,58 +0,0 @@
-import { jsx as a, jsxs as b, Fragment as g } from "react/jsx-runtime";
-import { forwardRef as u, useMemo as j, Suspense as k, lazy as x } from "react";
-import { Form as D } from "react-aria-components";
-import { FormProvider as w } from "react-hook-form";
-import { UnityFormProvider as O } from "./Form.context.mjs";
-const P = x(
-  () => import("@hookform/devtools").then((t) => ({ default: t.DevTool }))
-), S = u(
-  ({
-    form: t,
-    schema: n,
-    onSuccess: m,
-    onError: s,
-    action: l,
-    children: d,
-    className: f,
-    onReset: c,
-    debug: p = !1,
-    ...h
-  }, v) => {
-    const y = j(() => {
-      const e = t.formState.errors;
-      if (!Object.keys(e).length) return;
-      const o = {};
-      return Object.entries(e).forEach(([i, r]) => {
-        r != null && r.message && typeof r.message == "string" && (o[i] = r.message);
-      }), o;
-    }, [t.formState.errors]), F = (e) => {
-      e.preventDefault(), t.handleSubmit(async (o) => {
-        try {
-          await l(o), m == null || m(o);
-        } catch (i) {
-          console.error(i), s == null || s(i);
-        }
-      })(e);
-    };
-    return /* @__PURE__ */ a(O, { schema: n, form: t, children: /* @__PURE__ */ b(w, { ...t, children: [
-      p && /* @__PURE__ */ a(k, { fallback: /* @__PURE__ */ a(g, {}), children: /* @__PURE__ */ a(P, { control: t.control }) }),
-      /* @__PURE__ */ a(
-        D,
-        {
-          ...h,
-          ref: v,
-          onSubmit: F,
-          className: f,
-          validationErrors: y,
-          onReset: c,
-          "data-dd-privacy": "mask",
-          children: d
-        }
-      )
-    ] }) });
-  }
-);
-S.displayName = "Form";
-export {
-  S as Form
-};

package/dist/esm/components/form-field/FormField.context.d.mts

@@ -1,38 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { FieldPath, FieldValues } from 'react-hook-form';
-interface FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
-    id: string;
-    name: TName;
-    isRequired?: boolean;
-    isInvalid?: boolean;
-    isLoading?: boolean;
-    isReadOnly?: boolean;
-    isDisabled?: boolean;
-    hasHelperText?: boolean;
-    hasContextualLink?: boolean;
-}
-export declare const FormFieldContext: import('react').Context<FormFieldContextValue<FieldValues, string>>;
-export declare function FormFieldProvider({ children, id, name, isRequired, isInvalid, isLoading, isReadOnly, isDisabled, hasHelperText, hasContextualLink, }: PropsWithChildren<FormFieldContextValue>): import("react/jsx-runtime").JSX.Element;
-export declare function useFormField(): {
-    fieldState: {
-        isRequired: boolean | undefined;
-        isInvalid: boolean | undefined;
-        isLoading: boolean | undefined;
-        isReadOnly: boolean | undefined;
-        isDisabled: boolean | undefined;
-        isDirty: boolean;
-        isTouched: boolean;
-        error?: import('react-hook-form').FieldError;
-    };
-    formState: import('react-hook-form').UseFormStateReturn<FieldValues>;
-    id: string;
-    name: string;
-    hasHelperText: boolean | undefined;
-    hasContextualLink: boolean | undefined;
-    formLabelId: string;
-    formItemId: string;
-    formDescriptionId: string | undefined;
-    formMessageId: string;
-    formContextualLinkId: string | undefined;
-};
-export {};

package/dist/esm/components/form-field/FormField.d.mts

@@ -1,61 +0,0 @@
-import { default as React } from 'react';
-import { Control, FieldPath, FieldValues } from 'react-hook-form';
-export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends React.PropsWithChildren<object> {
-    /** The form control from react-hook-form */
-    control: Control<TFieldValues>;
-    /** The name of the field in the form */
-    name: TName;
-    /** Whether the field is required */
-    isRequired?: boolean;
-    /** Whether the field is in an invalid state */
-    isInvalid?: boolean;
-    /** Whether the field is in a loading state */
-    isLoading?: boolean;
-    /** Whether the field is disabled */
-    isDisabled?: boolean;
-    /** Whether the field is read-only */
-    isReadOnly?: boolean;
-    /** Additional class name */
-    className?: string;
-}
-/**
- * The `FormField` component represents a single field in a Unity form. It provides a set of features to manage the state of the field and its interactions, as well as a deep integration with its parent `Form` component.
- * Use this component to create a field in a form with a schema-based approach. It will only work if it is a child of a [`Form` component](/?path=/docs/forms-formfield--docs).
- * @param {FormFieldProps} props - component props to control the field name, and the reference to its form control
- * @see {@link FormFieldProps} for all available props
- * @example
- * ```tsx
- * import { Button, Input, FormLabel, FormControl, FormHelperText, FormFeedbackText } from '@payfit/unity-components'
- * import { useUnityForm } from '@payfit/unity-components'
- * import { z } from 'zod'
- *
- * const loginSchema = z.object({
- *   email: z.string().email('Invalid email address'),
- *   password: z.string().min(8, 'Password must be at least 8 characters'),
- * })
- *
- * const MyForm = () => {
- *   const { Form, FormField } = useUnityForm(loginSchema)
- *
- *   const submitForm = (values: z.infer<typeof loginSchema>) => {
- *     console.log(values)
- *   }
- *
- *   return (
- *     <Form action={submitForm}>
- *       <FormField name="email">
- *         <FormLabel>Email</FormLabel>
- *         <FormHelperText>Enter your primary email address</FormHelperText>
- *         <FormControl>
- *          <Input type="email"/>
- *         </FormControl>
- *         <FormFeedbackText/>
- *       </FormField>
- *    </Form>
- *   )
- * }
- * ```
- * @note Use this component directly from the `useUnityForm` hook to have type-safety based on the form schema.
- */
-declare const FormField: React.ForwardRefExoticComponent<FormFieldProps<FieldValues, string> & React.RefAttributes<HTMLDivElement>>;
-export { FormField };

package/dist/esm/components/form-field/FormField.mjs

@@ -1,60 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import d, { forwardRef as T, useMemo as p } from "react";
-import { useController as I } from "react-hook-form";
-import { tv as P } from "tailwind-variants";
-import g from "../../hooks/use-id.mjs";
-import { useUnityFormProvider as j } from "../form/Form.context.mjs";
-import { FormFieldProvider as D } from "./FormField.context.mjs";
-import { FormContextualLink as E } from "./parts/FormContextualLink.mjs";
-import { FormHelperText as N } from "./parts/FormHelperText.mjs";
-import { isFieldRequired as _ } from "./utils/isFieldRequired.mjs";
-const w = P({
-  slots: {
-    base: "uy-flex uy-flex-col uy-gap-100"
-  }
-}), M = T(
-  ({
-    children: o,
-    control: f,
-    name: r,
-    isInvalid: u,
-    isLoading: c,
-    isReadOnly: x,
-    className: F,
-    isRequired: h,
-    isDisabled: y
-  }, b) => {
-    const C = g(), { schema: t } = j(), {
-      fieldState: { invalid: v },
-      formState: i
-    } = I({ name: r, control: f }), R = p(
-      () => _(t, r),
-      [t, r]
-    ), { hasHelperText: k, hasContextualLink: q } = p(() => {
-      let s = !1, l = !1;
-      const m = (S) => {
-        d.Children.forEach(S, (n) => {
-          if (!d.isValidElement(n)) return;
-          const e = n;
-          e.type === N ? s = !0 : e.type === E && (l = !0), e.props && typeof e.props == "object" && "children" in e.props && m(e.props.children);
-        });
-      };
-      return m(o), { hasHelperText: s, hasContextualLink: l };
-    }, [o]), H = {
-      name: r,
-      isLoading: c,
-      isReadOnly: x,
-      hasHelperText: k,
-      hasContextualLink: q,
-      id: C,
-      isRequired: h ?? R,
-      isInvalid: u ?? v,
-      isDisabled: y ?? (i.isSubmitting || i.disabled)
-    }, { base: L } = w();
-    return /* @__PURE__ */ a("div", { ref: b, className: L({ className: F }), children: /* @__PURE__ */ a(D, { ...H, children: o }) });
-  }
-);
-M.displayName = "FormField";
-export {
-  M as FormField
-};

package/dist/esm/components/form-field/parts/FormContextualLink.d.mts

@@ -1,20 +0,0 @@
-import { PropsWithChildren } from 'react';
-interface FormContextualLinkProps {
-    /**
-     * The href of the contextual link
-     */
-    href: string;
-    onPress?: never;
-}
-interface FormContextualLinkActionProps {
-    /**
-     * A function to open a contextual panel
-     */
-    onPress: () => void;
-    href?: never;
-}
-/**
- * FormContextualLink is a component that displays a contextual link for a form field.
- */
-declare const FormContextualLink: import('react').ForwardRefExoticComponent<PropsWithChildren<FormContextualLinkProps | FormContextualLinkActionProps> & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
-export { FormContextualLink };

package/dist/esm/components/form-field/parts/FormContextualLink.mjs

@@ -1,37 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { Button as m } from "react-aria-components";
-import { Link as d } from "../../link/Link.mjs";
-import { Text as e } from "../../text/Text.mjs";
-import { useFormField as u } from "../FormField.context.mjs";
-const p = l(({ children: o, href: a, onPress: n }, r) => {
-  const { formContextualLinkId: i } = u();
-  return a ? /* @__PURE__ */ t(
-    d,
-    {
-      id: i,
-      color: "secondary",
-      variant: "standalone",
-      "data-unity-slot": "contextual-link",
-      href: a,
-      ref: r,
-      "data-dd-privacy": "allow",
-      children: /* @__PURE__ */ t(e, { variant: "actionSmall", children: o })
-    }
-  ) : /* @__PURE__ */ t(
-    m,
-    {
-      id: i,
-      onPress: n,
-      "data-unity-slot": "contextual-link",
-      className: "uy-typography-body-small uy-w-fit",
-      ref: r,
-      "data-dd-privacy": "allow",
-      children: o
-    }
-  );
-});
-p.displayName = "FormContextualLink";
-export {
-  p as FormContextualLink
-};

package/dist/esm/components/form-field/parts/FormControl.d.mts

@@ -1,30 +0,0 @@
-import { Slot } from '@radix-ui/react-slot';
-export type FormControlProps = React.ComponentProps<typeof Slot>;
-/**
- * FormControl is a wrapper component that connects input components to form state within a FormField.
- * It handles accessibility concerns like proper ARIA attributes and focus states.
- *
- * This component is required when building custom form fields - it must wrap the actual input element
- * to connect it properly to the form state.
- * @example
- * ```tsx
- * import { FormControl, FormField, Input } from '@payfit/unity-components'
- *
- * function MyFormField() {
- *   return (
- *     <FormField name="email">
- *       <FormControl>
- *         <Input />
- *       </FormControl>
- *     </FormField>
- *   )
- * }
- * ```
- * @remarks
- * [API & Docs](https://unity-components.payfit.io/?path=/docs/forms-formfield-formcontrol--docs)
- */
-declare function FormControl({ ...props }: FormControlProps): import("react/jsx-runtime").JSX.Element;
-declare namespace FormControl {
-    var displayName: string;
-}
-export { FormControl };