@payfit/unity-components 2.46.11 → 2.46.13

package/dist/esm/components/multi-select/hooks/use-multiselection-state.js

@@ -1,47 +0,0 @@
-import { useState as w } from "react";
-function a({
-  selectedKeys: c,
-  defaultSelectedKeys: K,
-  onSelectionChange: d
-}) {
-  const [u, r] = w(
-    () => K ?? /* @__PURE__ */ new Set()
-  ), n = c !== void 0, l = n ? c : u;
-  return {
-    selectedKeys: l,
-    isSelected: (t) => l.has(t),
-    selectKey: (t) => {
-      if (n && d) {
-        const e = new Set(l);
-        e.add(t), d(e);
-      } else
-        r((e) => {
-          const s = new Set(e);
-          return s.add(t), d?.(s), s;
-        });
-    },
-    unselectKey: (t) => {
-      if (n && d) {
-        const e = new Set(l);
-        e.delete(t), d(e);
-      } else
-        r((e) => {
-          const s = new Set(e);
-          return s.delete(t), d?.(s), s;
-        });
-    },
-    toggleKey: (t) => {
-      if (n && d) {
-        const e = new Set(l);
-        e.has(t) ? e.delete(t) : e.add(t), d(e);
-      } else
-        r((e) => {
-          const s = new Set(e);
-          return s.has(t) ? s.delete(t) : s.add(t), d?.(s), s;
-        });
-    }
-  };
-}
-export {
-  a as useMultiSelectionState
-};

package/dist/esm/components/multi-select/parts/MultiSelectButton.d.ts

@@ -1,18 +0,0 @@
-import { ForwardedRef, ReactElement } from 'react';
-export interface MultiSelectButtonProps<TItem> {
-    placeholder?: string;
-    isDisabled?: boolean;
-    isReadOnly?: boolean;
-    isLoading?: boolean;
-    isInvalid?: boolean;
-    /** The selected items to show in the button */
-    selectedItems: Set<TItem>;
-    /** Function to render the selected items */
-    renderValue: (values: Set<TItem>) => string;
-    onClearButtonPress?: () => void;
-    onBlur?: () => void;
-    onFocus?: () => void;
-}
-export declare const MultiSelectButton: <TItem>(props: MultiSelectButtonProps<TItem> & {
-    ref?: ForwardedRef<HTMLButtonElement>;
-}) => ReactElement;

package/dist/esm/components/multi-select/parts/MultiSelectButton.js

@@ -1,174 +0,0 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { memo as D, forwardRef as k, useContext as A, useMemo as K } from "react";
-import { useSelectContext as R, useStoreState as $, Select as L } from "@ariakit/react";
-import { uyTv as P } from "@payfit/unity-themes";
-import { useId as T } from "react-aria/useId";
-import { useIntl as U } from "react-intl";
-import { Badge as W } from "../../badge/Badge.js";
-import { CircularIconButton as q } from "../../icon-button/CircularIconButton.js";
-import { Icon as b } from "../../icon/Icon.js";
-import { Spinner as F } from "../../spinner/Spinner.js";
-import { MultiSelectContext as G } from "../Multiselect.context.js";
-const H = P({
-  slots: {
-    base: "uy:h-5.5 uy:sm:h-500 uy:flex uy:items-center uy:justify-between uy:py-125 uy:sm:py-100 uy:px-150 uy:w-full 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:not([disabled]):border-border-form-active uy:pointer-events-auto!",
-    inputValue: "uy:flex-1 uy:typography-body uy:text-left uy:line-clamp-1",
-    state: "uy:grow-0 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:inline-flex uy:gap-50 uy:items-center uy:px-100",
-    suffix: "uy:text-content-neutral-lowest"
-  },
-  variants: {
-    isDisabled: {
-      true: {
-        base: "uy:bg-surface-form-disabled uy:cursor-not-allowed uy:border-border-form-disabled uy:text-content-form-disabled",
-        inputValue: "uy:text-content-form-disabled!",
-        state: "uy:text-content-form-disabled",
-        suffix: "uy:text-content-form-disabled"
-      }
-    },
-    isReadOnly: {
-      true: {
-        base: "uy:bg-surface-form-disabled uy:cursor-not-allowed uy:border-border-form-disabled",
-        inputValue: "uy:text-content-form-disabled",
-        state: "uy:text-content-form-disabled",
-        suffix: "uy:text-content-form-disabled"
-      }
-    },
-    isInvalid: {
-      true: {
-        base: "uy:bg-surface-form-error uy:border-border-form-error",
-        inputValue: "uy:text-content-form-error",
-        state: "uy:text-content-form-error"
-        // suffix: 'uy:text-content-form-error',
-      }
-    },
-    isEmpty: {
-      true: {
-        inputValue: "uy:text-content-neutral-lowest"
-      },
-      false: {
-        inputValue: "uy:text-content-form-enabled"
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      isInvalid: !1,
-      isDisabled: !1,
-      isReadOnly: !1,
-      className: {
-        base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
-        inputValue: "uy:text-content-form-enabled uy:bg-surface-form-enabled",
-        state: "uy:text-content-neutral-disabled"
-      }
-    },
-    {
-      isEmpty: !0,
-      isDisabled: !1,
-      isReadOnly: !1,
-      isInvalid: !1,
-      className: {
-        inputValue: "uy:text-content-neutral-lowest"
-      }
-    }
-  ]
-});
-function J({
-  isDisabled: n,
-  isReadOnly: t,
-  isLoading: c,
-  isInvalid: r,
-  placeholder: s,
-  selectedItems: x,
-  renderValue: d,
-  onClearButtonPress: g,
-  onBlur: w,
-  onFocus: h,
-  ...S
-}, v) {
-  const m = T(), u = U(), C = R(), I = $(C, "open"), y = A(G), a = y.maxVisibleItems ?? 0, i = y.selectedKeys ?? /* @__PURE__ */ new Set(), o = Array.from(x), { base: M, inputValue: V, state: B, suffix: N } = H({
-    isDisabled: !!n,
-    isReadOnly: !!t,
-    isInvalid: !!r,
-    isEmpty: i.size === 0
-  }), f = Math.max(
-    o.length - a,
-    0
-  ), O = i.size > 0 && !n && !t && !c, z = K(() => {
-    if (o.length === 0) return s;
-    const E = o.slice(0, a), j = new Set(E);
-    return d(j);
-  }, [o, a, d, s]);
-  return /* @__PURE__ */ l(
-    L,
-    {
-      ...S,
-      ref: v,
-      className: M(),
-      disabled: n || t,
-      "aria-invalid": r,
-      "aria-readonly": t,
-      "aria-labelledby": `${m}-select-button-label`,
-      "data-dd-privacy": "mask",
-      onBlur: w,
-      onFocus: h,
-      children: [
-        /* @__PURE__ */ e("span", { id: `${m}-select-button-label`, className: V(), children: i.size > 0 ? z : s }),
-        /* @__PURE__ */ l("div", { className: B(), children: [
-          c && /* @__PURE__ */ e(
-            F,
-            {
-              color: "inherit",
-              size: "small",
-              label: u.formatMessage({
-                id: "unity:component:form-field:form-input:spinner:label",
-                defaultMessage: "Loading"
-              })
-            }
-          ),
-          r && /* @__PURE__ */ e(
-            b,
-            {
-              src: "WarningCircleOutlined",
-              color: "content.form.invalid",
-              alt: u.formatMessage({
-                id: "unity:component:form-field:form-input:error:alt",
-                defaultMessage: "Error"
-              })
-            }
-          ),
-          f > 0 && /* @__PURE__ */ l(W, { variant: "numeric", children: [
-            "+",
-            f
-          ] }),
-          O && /* @__PURE__ */ e(
-            q,
-            {
-              title: u.formatMessage({
-                id: "unity:component:common:clear:title",
-                defaultMessage: "Clear"
-              }),
-              icon: "CloseOutlined",
-              onPress: () => {
-                g?.();
-              }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e(
-          b,
-          {
-            className: N(),
-            src: I ? "CaretUpOutlined" : "CaretDownOutlined",
-            role: "presentation"
-          }
-        )
-      ]
-    }
-  );
-}
-const p = D(k(J));
-p.displayName = "MultiselectButton";
-const ue = p;
-export {
-  ue as MultiSelectButton
-};

package/dist/esm/components/multi-select/parts/MultiSelectOptGroup.d.ts

@@ -1,69 +0,0 @@
-import { default as React, HTMLAttributes, ReactNode } from 'react';
-/**
- * Base props for both static and dynamic MultiSelectOptGroup variants
- */
-type BaseOptGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
-    /** The label text displayed at the top of the group */
-    label: string;
-    /** Whether to show a separator line after the group */
-    withSeparator?: boolean;
-};
-/**
- * Props for the dynamic API of MultiSelectOptGroup
- * @template T - The type of items in the group
- */
-export interface DynamicMultiSelectOptGroup<T> extends BaseOptGroupProps {
-    /** Array of items to render as options within the group */
-    items: T[];
-    /** Render function that converts each item into a MultiSelectOption */
-    children: (item: T) => React.JSX.Element;
-}
-/**
- * Props for the static API of MultiSelectOptGroup
- */
-export interface StaticMultiSelectOptGroup extends BaseOptGroupProps {
-    /** Not used in static API */
-    items?: never;
-    /** Static MultiSelectOption components to render within the group */
-    children: ReactNode;
-}
-/**
- * Combined props type for MultiSelectOptGroup
- * @template T - The type of items when using dynamic API
- */
-export type MultiSelectOptGroupProps<T = unknown> = DynamicMultiSelectOptGroup<T> | StaticMultiSelectOptGroup;
-/**
- * Groups related options within a `MultiSelect` component.
- *
- * This component provides two APIs for grouping options:
- * 1. Static API - Directly nest MultiSelectOption components
- * 2. Dynamic API - Provide an array of items and a render function for dynamic items
- * @example
- * ```tsx
- * // Static API
- * <MultiSelectOptGroup label="Fruits" withSeparator>
- *   <MultiSelectOption value="apple">Apple</MultiSelectOption>
- *   <MultiSelectOption value="banana">Banana</MultiSelectOption>
- * </MultiSelectOptGroup>
- *
- * // Dynamic API
- * <MultiSelectOptGroup
- *   label="Fruits"
- *   items={fruits}
- *   withSeparator
- * >
- *   {fruit => (
- *     <MultiSelectOption value={fruit.id}>
- *       {fruit.name}
- *     </MultiSelectOption>
- *   )}
- * </MultiSelectOptGroup>
- * ```
- * @template T - The type of items when using the dynamic API
- * @see {@link MultiSelectOption} for the child component API
- */
-declare function MultiSelectOptGroup<T>(props: MultiSelectOptGroupProps<T>): import("react/jsx-runtime").JSX.Element;
-declare namespace MultiSelectOptGroup {
-    var displayName: string;
-}
-export { MultiSelectOptGroup };

package/dist/esm/components/multi-select/parts/MultiSelectOptGroup.js

@@ -1,34 +0,0 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { useContext as h } from "react";
-import { ComboboxGroup as x, ComboboxGroupLabel as C, SelectGroup as G, SelectGroupLabel as S } from "@ariakit/react";
-import { uyTv as N } from "@payfit/unity-themes";
-import { MultiSelectContext as g } from "../Multiselect.context.js";
-const M = N({
-  slots: {
-    base: "uy:flex uy:flex-col uy:bg-surface-neutral",
-    label: "uy:px-150 uy:py-100 uy:typography-body-strong uy:text-content-neutral",
-    separator: "uy:my-100 uy:border-t uy:border-border-neutral uy:border-solid"
-  }
-});
-function O(e) {
-  return "items" in e && Array.isArray(e.items) && typeof e.children == "function";
-}
-function j(e) {
-  const i = h(g), { base: c, label: r, separator: o } = M(), { label: n, withSeparator: a, className: m, ...y } = e, d = (b, p) => b.map((f) => p(f)), l = O(e) ? d(e.items, e.children) : e.children, u = {
-    className: c({ className: m }),
-    ...y
-  };
-  return i.isSearchable ? /* @__PURE__ */ s(x, { ...u, children: [
-    /* @__PURE__ */ t(C, { className: r(), children: n }),
-    l,
-    a && /* @__PURE__ */ t("hr", { className: o(), "aria-hidden": !0, role: "presentation" })
-  ] }) : /* @__PURE__ */ s(G, { ...u, children: [
-    /* @__PURE__ */ t(S, { className: r(), children: n }),
-    l,
-    a && /* @__PURE__ */ t("hr", { className: o(), "aria-hidden": !0, role: "presentation" })
-  ] });
-}
-j.displayName = "MultiSelectOptGroup";
-export {
-  j as MultiSelectOptGroup
-};

package/dist/esm/components/multi-select/parts/MultiSelectOption.d.ts

@@ -1,20 +0,0 @@
-import { default as React, ReactNode } from 'react';
-/**
- * Props for the MultiSelectOption component.
- * @template T - The type of the value this option represents (string or number)
- */
-export interface MultiSelectOptionProps<T> {
-    /** The value associated with this option. Must be unique within the MultiSelect */
-    value: T;
-    /** The content to display for this option */
-    children: ReactNode;
-    /** Whether the option is disabled. When true, the option cannot be selected */
-    isDisabled?: boolean;
-    /** Whether the option should receive focus when rendered. Use sparingly */
-    autoFocus?: boolean;
-    /** Additional text displayed below the option to provide more context */
-    helperText?: string;
-}
-export declare const MultiSelectOption: <T>(props: MultiSelectOptionProps<T> & {
-    ref?: React.ForwardedRef<HTMLDivElement>;
-}) => React.JSX.Element;

package/dist/esm/components/multi-select/parts/MultiSelectOption.js

@@ -1,87 +0,0 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { forwardRef as p, useContext as b, createElement as v } from "react";
-import { SelectItem as x, ComboboxItem as h, SelectItemCheck as S } from "@ariakit/react";
-import { uyTv as g } from "@payfit/unity-themes";
-import C from "../../../hooks/use-id.js";
-import { CheckboxIndicator as k } from "../../checkbox/parts/CheckboxIndicator.js";
-import { MultiSelectContext as I } from "../Multiselect.context.js";
-const O = g({
-  slots: {
-    base: [
-      "uy:flex uy:flex-col uy:transition",
-      "uy:w-full uy:px-150 uy:py-100",
-      "uy:rounded-50 uy:cursor-pointer",
-      "uy:hover:bg-surface-neutral-hover",
-      "uy:active:bg-surface-neutral-pressed",
-      "uy:focus-visible:outline uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2",
-      "uy:data-[active-item=true]:outline uy:data-[active-item=true]:outline-2 uy:data-[active-item=true]:outline-utility-focus-ring uy:data-[active-item=true]:outline-offset-2"
-    ],
-    label: "uy:inline-flex uy:items-center uy:gap-100 uy:text-content-neutral uy:typography-body",
-    helperText: "uy:inline-block uy:typography-body uy:text-content-neutral-low uy:pl-300"
-  },
-  variants: {
-    isDisabled: {
-      true: {
-        base: "uy:cursor-not-allowed!",
-        label: "uy:text-content-neutral-disabled"
-      },
-      false: {
-        base: ""
-      }
-    }
-  }
-});
-function w({
-  isDisabled: i
-}) {
-  return /* @__PURE__ */ e(
-    S,
-    {
-      render: (t) => /* @__PURE__ */ e(
-        k,
-        {
-          isSelected: "children" in t && !!t.children,
-          isDisabled: i,
-          "data-dd-privacy": "hidden"
-        }
-      )
-    }
-  );
-}
-function r({
-  value: i,
-  children: t,
-  isDisabled: u,
-  helperText: l,
-  autoFocus: n = !1,
-  ...a
-}, s) {
-  const o = C(), c = b(I), { base: y, label: d, helperText: f } = O({ isDisabled: u });
-  return /* @__PURE__ */ v(
-    x,
-    {
-      "data-dd-privacy": "mask",
-      ...a,
-      ref: s,
-      id: o,
-      key: o,
-      value: String(i),
-      disabled: u,
-      className: y(),
-      autoFocus: n,
-      focusOnHover: !1,
-      "aria-describedby": l ? `${o}-helper-text` : void 0,
-      render: c.isSearchable ? /* @__PURE__ */ e(h, {}) : void 0
-    },
-    /* @__PURE__ */ m("div", { className: d(), children: [
-      /* @__PURE__ */ e(w, { isDisabled: u }),
-      t
-    ] }),
-    l && /* @__PURE__ */ e("span", { id: `${o}-helper-text`, className: f(), children: l })
-  );
-}
-r.displayName = "MultiSelectOption";
-const H = p(r);
-export {
-  H as MultiSelectOption
-};

package/dist/esm/components/multi-select/parts/MultiSelectPopover.d.ts

@@ -1,7 +0,0 @@
-import { SelectPopoverProps } from '@ariakit/react';
-type MultiSelectPopoverProps = SelectPopoverProps & {
-    onBlur?: () => void;
-};
-declare function MultiSelectPopoverComponent({ children, ...props }: MultiSelectPopoverProps): import("react/jsx-runtime").JSX.Element;
-export declare const MultiSelectPopover: import('react').MemoExoticComponent<typeof MultiSelectPopoverComponent>;
-export {};

package/dist/esm/components/multi-select/parts/MultiSelectPopover.js

@@ -1,65 +0,0 @@
-import { jsx as o, jsxs as e, Fragment as m } from "react/jsx-runtime";
-import { memo as b, useContext as f } from "react";
-import { SelectPopover as h, Combobox as v, ComboboxList as x } from "@ariakit/react";
-import { uyTv as t } from "@payfit/unity-themes";
-import { Icon as g } from "../../icon/Icon.js";
-import { MultiSelectContext as w } from "../Multiselect.context.js";
-const S = t({
-  slots: {
-    base: "uy:shadow-300 uy:absolute uy:top-full uy:left-0 uy:z-50 uy:w-full uy:rounded-100 uy:sm:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:overflow-auto uy:max-h-[min(var(--popover-available-height,300px),300px)] uy:outline-none",
-    list: "uy:p-100"
-  }
-}), N = t({
-  slots: {
-    wrapper: "uy:sticky uy:top-0 uy:bg-surface-neutral uy:pt-100 uy:px-100",
-    base: "uy:flex uy:w-full uy:gap-100 uy:sm:h-500 uy:transition-colors uy:rounded-100 uy:sm:rounded-75 uy:py-125 uy:sm:py-100 uy:bg-surface-form-high-enabled uy:px-125 uy:sm:px-150 uy:typography-body 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 uy:active:border-solid uy:active:border-border-form-active",
-    input: "uy:focus-visible:outline-none",
-    divider: "uy:my-100 uy:border-t uy:border-border-neutral"
-  }
-});
-function C({
-  children: r,
-  ...s
-}) {
-  const i = f(w), { base: l, list: u } = S(), { base: n, input: a, wrapper: y, divider: c } = N(), { onBlur: d, ...p } = s;
-  return /* @__PURE__ */ o(
-    h,
-    {
-      portal: !0,
-      sameWidth: !0,
-      unmountOnHide: !0,
-      className: l(),
-      onClose: () => d?.(),
-      ...p,
-      children: i.isSearchable ? /* @__PURE__ */ e(m, { children: [
-        /* @__PURE__ */ e("div", { className: y(), children: [
-          /* @__PURE__ */ e("div", { className: n(), children: [
-            /* @__PURE__ */ o(
-              g,
-              {
-                src: "MagnifyingGlassOutlined",
-                color: "content.neutral.lowest",
-                "aria-hidden": !0
-              }
-            ),
-            /* @__PURE__ */ o(
-              v,
-              {
-                autoSelect: !0,
-                placeholder: "Search...",
-                className: a()
-              }
-            )
-          ] }),
-          /* @__PURE__ */ o("hr", { className: c() })
-        ] }),
-        /* @__PURE__ */ o(x, { className: u(), children: r })
-      ] }) : /* @__PURE__ */ o("div", { className: u(), children: r })
-    }
-  );
-}
-const M = b(C);
-M.displayName = "MultiSelectPopover";
-export {
-  M as MultiSelectPopover
-};

package/dist/esm/components/multi-select-field/MultiSelectField.d.ts

@@ -1,92 +0,0 @@
-import { StandardSchemaV1 } from '@standard-schema/spec';
-import { ForwardedRef, ReactNode } from 'react';
-import { FieldPath, FieldValues } from 'react-hook-form';
-import { Schema } from '../../hooks/use-form.types.js';
-import { LabelProps } from '../label/Label.js';
-import { MultiSelectProps } from '../multi-select/MultiselectTypes.js';
-interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
-    /** The name of the field, which should match the form schema. */
-    name: TName;
-    /** The label for the multi-select field. */
-    label: string;
-    /** Helper text to display below the multi-select field. */
-    helperText?: ReactNode;
-    /** Feedback text to display below the multi-select field. */
-    feedbackText?: ReactNode;
-    /** A contextual link to display below the multi-select field. */
-    contextualLink?: ReactNode;
-}
-type BaseMultiSelectProps<TItems = undefined> = Omit<MultiSelectProps<TItems>, 'value' | 'defaultValue' | 'onChange' | 'aria-labelledby' | 'aria-label'>;
-export type MultiSelectFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TItems = undefined> = FieldProps<TFieldValues, TName> & BaseMultiSelectProps<TItems>;
-/**
- * The `MultiSelectField` component renders a full field that allows selecting multiple items from a dropdown list, and integrates with the `Form` component automatically.
- *
- * The component uses a single generic parameter `TItems` that infers the item type from the `items` prop
- * for the dynamic API, or defaults to `undefined` for the static API (using `children` directly).
- * @example Static API
- * ```tsx
- * const schema = z.object({
- *   fruits: z.set(z.string()),
- * })
- *
- * function MyForm() {
- *   const { Form } = useUnityForm(schema)
- *
- *   return (
- *     <Form action={handleSubmit}>
- *       <MultiSelectField<typeof schema>
- *         name="fruits"
- *         label="Select fruits"
- *       >
- *         <MultiSelectOption value="apple">Apple</MultiSelectOption>
- *         <MultiSelectOption value="banana">Banana</MultiSelectOption>
- *         <MultiSelectOption value="orange">Orange</MultiSelectOption>
- *       </MultiSelectField>
- *     </Form>
- *   )
- * }
- * ```
- * @example Dynamic API
- * ```tsx
- * interface Fruit { id: string; name: string }
- * const fruits = new Set<Fruit>([...])
- *
- * const schema = z.object({
- *   fruits: z.set(z.string()),
- * })
- *
- * function MyForm() {
- *   const { Form } = useUnityForm(schema)
- *
- *   return (
- *     <Form action={handleSubmit}>
- *       <MultiSelectField<typeof schema, Set<Fruit>>
- *         name="fruits"
- *         label="Select fruits"
- *         items={fruits}
- *         getItemValue={fruit => fruit.id}
- *       >
- *         {fruit => (
- *           <MultiSelectOption value={fruit.id}>{fruit.name}</MultiSelectOption>
- *         )}
- *       </MultiSelectField>
- *     </Form>
- *   )
- * }
- * ```
- * @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.
- * @remarks
- * [API & Docs](https://unity-components.payfit.io/?path=/docs/forms-multiselectfield--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/928776-multiselect)
- * @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
- */
-/**
- * Component type for MultiSelectField with proper generic support
- */
-type MultiSelectFieldComponent = <TSchema extends Schema = Schema, TItems = undefined>(props: MultiSelectFieldProps<StandardSchemaV1.InferOutput<TSchema>, FieldPath<StandardSchemaV1.InferOutput<TSchema>>, TItems> & {
-    ref?: ForwardedRef<HTMLButtonElement>;
-}) => React.JSX.Element;
-export declare const MultiSelectField: MultiSelectFieldComponent & {
-    displayName: string;
-};
-export {};