@payfit/unity-components 2.46.13 → 2.46.14

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

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

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

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

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

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

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

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

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

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

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